jQuery層次選擇器
阿新 • • 發佈：2021-11-14
層次選擇器
查詢子元素, 後代元素, 兄弟元素的選擇器
用法
1. ancestor descendant
在給定的祖先元素下匹配所有的後代元素， 是在這個標籤包裹下的所有符合條件的元素
2. parent>child
在給定的父元素下匹配所有的子元素,注意子元素的意思是直屬子元素，再往後一代的就不算
3. prev+next
匹配所有緊接在 prev 元素後的 next 元素
4. prev~siblings
匹配 prev 元素之後的所有 siblings 元素
下面根據示例演示：
<body> <ul> <li>AAAAA</1. 選中ul下所有的的span 注意有空格li> <li class="box">CCCCC</li> <li title="hello"><span>BBBBB</span></li> <li title="hello"><span class="box">DDDD</span></li> <span>EEEEE</span> </ul> </body>
$("ul span").css('background', 'yellow')結果：
2. 選中ul下所有的子元素span$("ul>span").css('background', 'yellow')
結果：
3. 選中class為box的下一個li $('ul .box~*').css('background', 'yellow')
結果：
黃色明顯佔了一整行是因為li標籤是塊元素。
4. 選中ul下的class為box的元素後面的所有兄弟元素 加*號標籤是所有元素，對標籤沒要求，只要是同級的就可以 $('ul .box~*').css('background', 'yellow')
結果：