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")

jQuery之過濾選擇器

過濾選擇器 1.基本選擇器 2.內容選擇器 3.可見性選擇器 4.子元素過濾器 過濾選擇器簡稱 過濾器。它其實也是一種選擇器，而這種選擇器類似於css3 裡的偽類,可以讓不支援css3的 瀏覽器也能支援。和常規的選擇器一樣，jquery為了更方便開發者使用，提供了很多獨有的過濾器。一 基本過濾器 過...

9 JQuery選擇器之過濾選擇器

過濾選擇器 1.首元素選擇器 語法 first 獲得選擇的元素中的第乙個元素 2.尾元素選擇器 語法 last 獲得選擇的元素中的最後乙個元素 3.非元素選擇器 語法 not selector 不包括指定內容的元素 4.偶數選擇器 語法 even 偶數，從 0 開始計數 5.奇數選擇器 語法 odd...

jQuery過濾選擇器 基本過濾選擇器

過濾選擇器主要是通過特定的過濾規則來篩選出所需的dom元素，過濾規則與css中的偽類選擇器語法相同，即選擇器都以乙個冒號 開頭。按照不同的過濾規則，過濾選擇器可以分為基本過濾 內容過濾 可見性過濾 屬性過濾 子元素過濾和表單物件屬性過濾選擇器。基本過濾選擇器 選擇器 描述 返回 示例 first 選...