jQuery過濾選擇器
阿新 • • 發佈：2021-11-14
過濾選擇器
在原有選擇器匹配的元素中進一步進行過濾的選擇器 下面根據例項來學習：<body> <div id="div1" class="box">class為box的div1</div> <div id="div2" class="box">class為box的div2</div> <div id="div3">div3</div> <span class="box">class為box的span</span> <br/> <ul> <li>AAAAA</1. 選擇第一個divli> <li title="hello">BBBBB</li> <li class="box">CCCCC</li> <li title="hello">DDDDDD</li> <li title="two">BBBBB</li> <li style="display:none">我本來是隱藏的</li> </ul> </body>
$('div:first').css('background', 'red')結果：
2. 選擇最後一個class為box的元素 $('.box:last').css('background', 'red') 3. 選擇所有class屬性不為box的div$('div:not(.box)').css('background', 'red') //沒有class屬性也可以
4. 選擇第二個和第三個li元素 :gt(0)表示index大於0的元素，:lt(2)表示index小於2的元素
$('li:gt(0):lt(2)').css('background', 'red') // 多個過濾選擇器不是同時執行, 而是依次
結果：
看下圖，多個過濾選擇器不是同時執行, 而是依次。所以上述程式碼中先確定了是在li標籤中找，:gt(0)說明找index大於0的li標籤，所以符合條件的元素都在紅框2中，此時又要執行:lt(2),一定要注意，此時的2是指的紅框2中元素下標為2的，所以最終找到的為藍框中的元素。
$('li:contains("BBBBB")').css('background', 'red')
6. 選擇已經隱藏的li
console.log($('li:hidden').length, $('li:hidden')[0])
結果：
7. 選擇有title屬性的li元素 $('li[title]').css('background', 'red')
8. 選擇所有屬性title為hello的li元素
$('li[title="hello"]').css('background', 'red')
9. 選擇下標為偶數的li元素
$("li:even").css('background', 'red')
10. 選擇下標為奇數的li元素
$("li:odd").css('background', 'red')