jQuery之過濾選擇器

在原有選擇器匹配的元素中進一步進行過濾的選擇器
* 基本
* 內容
* 可見性
* 屬性

需求

1. 選擇第一個div
2. 選擇最后一個class為box的元素
3. 選擇所有class屬性不為box的div
4. 選擇第二個和第三個li元素
5. 選擇內容為BBBBB的li
6. 選擇隱藏的li
7. 選擇有title屬性的li元素
8. 選擇所有屬性title為hello的li元素

 

<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</li>
  <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>

實現

$("div:first").css("background","blue")
    // 2. 選擇最后一個class為box的元素
    $("div:last").css("background","blue")
    // 3. 選擇所有class屬性不為box的div
    $("div:not(.box)").css("background","blue")
    
    // 4. 選擇第二個和第三個li元素
    $("li:gt(0):lt(2)").css("background","blue") 不是一起的，是從左到右的，選完一個得到的值從新划基准去選擇
    // 5. 選擇內容為BBBBB的li
    $("li:contains('BBBBB')").css("background","blue")
    // 6. 選擇隱藏的li
    console.log($("li:hidden").length,$("li:hidden")[0])
    // 7. 選擇有title屬性的li元素
    $("li[title]").css("background","blue")
    // 8. 選擇所有屬性title為hello的li元素
    $("li[title='hello']").css("background","blue")