jQuery選擇器之詳述

2016-07-28 10:42

你不在的日子

閱讀(218)

評論(0)

編輯

舉報

jQuery選擇器

一. 單詞小計

Pervious 上一頁sibling 同級first 第一last 最後not 不

Even 偶數 odd 奇數 header 頁眉

一．jQuery選擇器概述

選擇器是jQuery的根基，在jQuery中，對事件處理、周遊DOM和Ajax操作都依賴于選擇器。是以，如果能熟練的使用選擇器，不僅能簡化代碼，而且可以達到事半功倍的效果。jQuery選擇器完全繼承了CSS的風格。利用jQuery選擇器，可以非常便捷的找出特定的DOM元素，然後為它們添加相應的行為，而無需擔心浏覽器是否支援這一選擇器。

jQuery選擇器與CSS選擇器的不同之處就在于，jQuery選擇器擷取元素後，為該元素添加的是行為，是頁面互動變得更加豐富多彩。

二．通過CSS選擇器擷取元素

jQuery支援大多數CSS選擇器，其中最常用的有CSS的基本選擇器，層次選擇器和屬性選擇器，在jQuery中，與他們對應的分别是jQuery基本選擇器，層次選擇器和屬性選擇器，他們的構成規則與CSS選擇器完全相同。

一．基本選擇器

基本選擇器主要包括标簽選擇器、類選擇器、ID選擇器、并集選擇器、交集選擇器和全局選擇器。

1. id選擇器（指定id元素）

将id="one"的元素背景色設定為黑色。（id選擇器返單個元素）

$(document).ready(function () {
        $(\'#one\').css(\'background\', \'#000\');
 });

2. class選擇器（周遊css類元素）

将class="cube"的元素背景色設為黑色

$(document).ready(function () {
        $(\'.cube\').css(\'background\', \'#000\');
});

3. 标簽選擇器（周遊html元素）

将p元素的文字大小設定為12px

$(document).ready(function () {
        $(\'p\').css(\'font-size\', \'12px\');
});

4. 全局（*）選擇器（周遊所有元素）

$(document).ready(function () {
        // 周遊所有元素，将字型顔色設定為紅色
        $(\'*\').css(\'color\', \'#FF0000\');
});

5. 并集選擇器

$(document).ready(function () {
        // 将p元素和div元素的顔色設為紅色
        $(\'p, div\').css(\'color\', \'#FF0000\');

}

6. 交集選擇器

$(document).ready(function () {

      // 将所有擁有class為tittle的h2元素顔色設為紅色              $(‘h2.tittle’).css(\'color\', \'#FF0000\')
}

二、層次選擇器

jQuery中有4種層次選擇器，他們分别是後代選擇器，子選擇器，相鄰元素選擇器和同輩元素選擇器，其中最常用的是後代選擇器和子選擇器，他們和css中的後代選擇器的文法及選取範圍均相同。

子選擇器的範圍要比後代選擇器的選取範圍小

1.子選擇器 parent > child（直系子元素）

$(document).ready(function () {
        // 選取div下的第一代span元素，将字型顔色設為紅色
        $(\'div > span\').css(\'color\', \'#FF0000\');
    });

下面的代碼，隻有第一個span會變色，第二個span不屬于div的一代子元素，顔色保持不變。

<div>
        <span>123</span>
        <p>
            <span>456</span>
        </p>
</div>

2.相鄰元素選擇器 prev + next（下一個兄弟元素，等同于next()方法）

$(document).ready(function () {
    // 選取class為item的下一個div兄弟元素
    $(\'.item + div\').css(\'color\', \'#FF0000\');
    // 等價代碼
    //$(\'.item\').next(\'div\').css(\'color\', \'#FF0000\');
});

下面的代碼，隻有123和789會變色，而456不是相鄰，是以不會變色

<p class="item"></p>
<div>123</div>
<div>456</div>
<span class="item"></span>
<div>789</div>

3. 同輩元素選擇器prev ~ siblings（prev元素的所有兄弟元素，等同于nextAll()方法）

$(document).ready(function () {
    // 選取class為inside之後的所有div兄弟元素
    $(\'.inside ~ div\').css(\'color\', \'#FF0000\');
    // 等價代碼
    //$(\'.inside\').nextAll(\'div\').css(\'color\', \'#FF0000\');
});

下面的代碼，G2和G4會變色

<div class="inside">G1</div>
<div>G2</div>
<span>G3</span>
<div>G4</div>

4. 後代選擇器

$(function()){

// 選取id為myid下的所有<span>元素

$(‘#myid span’).css(\'color\', \'#FF0000\');

};

下面的代碼000和222都會變色

<div id="myid">

   <h1>111</h1>

   <p><span>222</span></p>

   <span>000</span>

</div>

三．屬性選擇器

1. [attribute]用法

定義：比對包含給定屬性的元素,判斷擁有某個屬性的元素

$("div[id]").addClass("highlight"); 

//查找所有含有ID屬性的div元素

2. [attribute=value]用法

定義：比對給定的屬性是某個特定值的元素，判斷某個元素的屬性值相等

$("input[name=\'basketball\']").attr("checked",true); 

  //name屬性值為basketball的input元素選中

3. [attribute!=value]用法

定義：比對給定的屬性是不包含某個特定值的元素，判斷某個元素的屬性值不等

$("input[name!=\'basketball\']").attr("checked",true); 

  //name屬性值不為basketball的input元素選中 

  //此選擇器等價于:not([attr=value])

要比對含有特定屬性但不等于特定值的元素，請使用

[attr]:not([attr=value])

  $("input:not(input[name=\'basketball\'])").attr("checked",true);

4. [attribute^=value]用法

定義：比對給定的屬性是以某些值開始的元素，判斷某個屬性值以value為開始值

$("input[name^=\'foot\']").attr("checked",true);

//查找所有 name 以 \'foot\' 開始的 input 元素

5. [attribute$=value]用法

定義：比對給定的屬性是以某些值結尾的元素，判斷某個屬性值以value為結尾值

$("input[name$=\'ball\']").attr("checked",true);

//查找所有 name 以 \'ball\' 結尾的 input 元素

6. [attribute*=value]用法

定義：比對給定的屬性是以包含某些值的元素，判斷某個屬性值包含value

$("input[name*=\'sket\']").attr("checked",true);

//查找所有 name 包含 \'sket\' 的 input 元素

7. [selector1][selector2][selectorN]用法

定義：複合屬性選擇器，需要同時滿足多個條件時使用，多個屬性值去交集

$("input[id][name$=\'ball\']").attr("checked",true);

//找到所有含有 id屬性，并且它的 name屬性是以 ball結尾的input 元素

三．通過條件過濾選取元素

過濾選擇器主要通過特定的過濾規則來篩選出所需的DOM元素，過濾規則與CSS中的僞類文法相同，即選擇器都以一個冒号（：）開頭，冒号前是進行過濾的元素。

按照不同的過濾條件，過濾選擇器可以分為基本過濾，内容過濾，可見性過濾，屬性過濾，子元素過濾和表單對象屬性過濾選擇器。

一．基本過濾選擇器

1 :first和:last（取第一個元素或最後一個元素）

$(document).ready(function () {

$(\'span:first\').css(\'color\', \'#FF0000\');

$(\'span:last\').css(\'color\', \'#FF0000\');

});下面的代碼，G1（first元素）和G3（last元素）會變色

2 :not（取非元素）

$(document).ready(function () {

$(\'div:not(.wrap)\').css(\'color\', \'#FF0000\');

});下面的代碼，G1會變色

但是，請注意下面的代碼：

<div>

</div>

當G1所在div和G2所在div是父子關系時，G1和G2都會變色。

3 :even和:odd（取偶數索引或奇數索引元素，索引從0開始，even表示偶數，odd表示奇數）

$(document).ready(function () {

$(\'li:even\').css(\'background\', \'#EEE\'); // 偶數行顔色

$(\'li:odd\').css(\'background\', \'#DADADA\'); // 奇數行顔色

});A、C行顔色#EEE（第一行的索引為0），B、D行顔色#DADADA

<ul>

</ul>

4 :eq(x) （取指定索引的元素）

$(document).ready(function () {

$(\'li:eq(2)\').css(\'background\', \'#FF0000\');

});更改第三行的背景色，在上面的代碼中C的背景會變色。

5 :gt(x)和:lt(x) （取大于x索引或小于x索引的元素）

$(document).ready(function () {

$(\'ul li:gt(2)\').css(\'color\', \'#FF0000\');

$(\'ul li:lt(2)\').css(\'color\', \'#0000FF\');

});L4和L5會是紅色，L1和L2會是藍色，L3是預設顔色

<ul>

</ul>

6 :header（取H1~H6标題元素）

$(document).ready(function () {

$(\':header\').css(\'background\', \'#EFEFEF\');

});下面的代碼，H1~H6的背景色都會變

7. :focus (目前擷取焦點的元素)

$(document).ready(function () {

$(\':focus\').css(\'background\', \'#000\');

});改變目前擷取焦點的元素的背景顔色

二．可見性過濾選擇器

在jQuery中，通過元素顯示狀态選取元素的選擇器稱為可見性過濾選擇器

1 :hidden（取隐藏(不可見)的元素）

jQuery至1.3.2之後的:hidden選擇器僅比對display:none或<input type="hidden" />的元素，而不比對visibility: hidden或opacity:0的元素。這也意味着hidden隻比對那些“隐藏的”并且不占空間的元素，像visibility:hidden或opactity:0的元素占據了空間，會被排除在外。

div {

margin: 10px;

width: 200px;

height: 40px;

border: 1px solid #FF0000;

display: block;

}

.hid-1 {

display: none;

}

.hid-2 {

visibility: hidden;

}

</style>

$(document).ready(function () {

$(\'div:hidden\').show(500);

alert($(\'input:hidden\').val());

});

</script>

</head>

<body>

<div class="hid-1">display: none</div>

<div class="hid-2">visibility: hidden</div>

</body>

先彈出"hello"對話框，然後hid-1會顯示，hid-2仍然是不可見的。

2 :visible（取可見的元素）

$(document).ready(function() {

$(\'div:visible\').css(\'background\', \'#EEADBB\');

});

</script>

<div class="hid-1">display: none</div>

<div class="hid-2">visibility: hidden</div>

<div>

我有背景色

</div>

代碼中，最後一個div會有背景色

四．jQuery選擇器注意事項

一．選擇器中含有特殊符号的注意事項

在W3C規範中，規定屬性值中不能含有某些特殊字元，但在實際開發中，可能會遇到表達式中有“#”和“.”等特殊字元情況，如果按照普通方式處理就會出錯。課用轉義符轉義解決。

按照普通方式擷取，如

$(‘#id#a’);

$(‘#id[2]’);

不能正确擷取元素，正确寫法如下

$(‘#id\\#a’);

$(‘#id\\[2\\]’);

二．選擇器中含有空格的注意事項

選擇器中空格是不容忽視的，多一個空格或少一個空格，可能會得到截然不同的結果。

jQuery選擇器

一. 單詞小計

Pervious 上一頁sibling 同級first 第一last 最後not 不

Even 偶數 odd 奇數 header 頁眉

一．jQuery選擇器概述

jQuery選擇器與CSS選擇器的不同之處就在于，jQuery選擇器擷取元素後，為該元素添加的是行為，是頁面互動變得更加豐富多彩。

二．通過CSS選擇器擷取元素

一．基本選擇器

基本選擇器主要包括标簽選擇器、類選擇器、ID選擇器、并集選擇器、交集選擇器和全局選擇器。

1. id選擇器（指定id元素）

将id="one"的元素背景色設定為黑色。（id選擇器返單個元素）

$(document).ready(function () {

$(\'#one\').css(\'background\', \'#000\');

});

2. class選擇器（周遊css類元素）

将class="cube"的元素背景色設為黑色

$(document).ready(function () {

$(\'.cube\').css(\'background\', \'#000\');

});

3. 标簽選擇器（周遊html元素）

将p元素的文字大小設定為12px

$(document).ready(function () {

$(\'p\').css(\'font-size\', \'12px\');

});

4. 全局（*）選擇器（周遊所有元素）

$(document).ready(function () {

// 周遊所有元素，将字型顔色設定為紅色

$(\'*\').css(\'color\', \'#FF0000\');

});

5. 并集選擇器

$(document).ready(function () {

// 将p元素和div元素的顔色設為紅色

$(\'p, div\').css(\'color\', \'#FF0000\');

}

6. 交集選擇器

$(document).ready(function () {

// 将所有擁有class為tittle的h2元素顔色設為紅色 $(‘h2.tittle’).css(\'color\', \'#FF0000\')

}

二、層次選擇器

子選擇器的範圍要比後代選擇器的選取範圍小

1.子選擇器 parent > child（直系子元素）

$(document).ready(function () {

// 選取div下的第一代span元素，将字型顔色設為紅色

$(\'div > span\').css(\'color\', \'#FF0000\');

});下面的代碼，隻有第一個span會變色，第二個span不屬于div的一代子元素，顔色保持不變。

<div>

<p>

</p>

</div>

2.相鄰元素選擇器 prev + next（下一個兄弟元素，等同于next()方法）

$(document).ready(function () {

// 選取class為item的下一個div兄弟元素

$(\'.item + div\').css(\'color\', \'#FF0000\');

// 等價代碼

//$(\'.item\').next(\'div\').css(\'color\', \'#FF0000\');

});下面的代碼，隻有123和789會變色，而456不是相鄰，是以不會變色

3. 同輩元素選擇器prev ~ siblings（prev元素的所有兄弟元素，等同于nextAll()方法）

$(document).ready(function () {

// 選取class為inside之後的所有div兄弟元素

$(\'.inside ~ div\').css(\'color\', \'#FF0000\');

// 等價代碼

//$(\'.inside\').nextAll(\'div\').css(\'color\', \'#FF0000\');

});下面的代碼，G2和G4會變色

4. 後代選擇器

$(function()){

// 選取id為myid下的所有<span>元素

$(‘#myid span’).css(\'color\', \'#FF0000\');

};下面的代碼000和222都會變色

</div>

三．屬性選擇器

1. [attribute]用法

定義：比對包含給定屬性的元素,判斷擁有某個屬性的元素

$("div[id]").addClass("highlight");

//查找所有含有ID屬性的div元素

2. [attribute=value]用法

定義：比對給定的屬性是某個特定值的元素，判斷某個元素的屬性值相等

$("input[name=\'basketball\']").attr("checked",true);

//name屬性值為basketball的input元素選中

3. [attribute!=value]用法

定義：比對給定的屬性是不包含某個特定值的元素，判斷某個元素的屬性值不等

$("input[name!=\'basketball\']").attr("checked",true);

//name屬性值不為basketball的input元素選中

//此選擇器等價于:not([attr=value])

要比對含有特定屬性但不等于特定值的元素，請使用[attr]:not([attr=value])

$("input:not(input[name=\'basketball\'])").attr("checked",true);

4. [attribute^=value]用法

定義：比對給定的屬性是以某些值開始的元素，判斷某個屬性值以value為開始值

$("input[name^=\'foot\']").attr("checked",true);

//查找所有 name 以 \'foot\' 開始的 input 元素

5. [attribute$=value]用法

定義：比對給定的屬性是以某些值結尾的元素，判斷某個屬性值以value為結尾值

$("input[name$=\'ball\']").attr("checked",true);

//查找所有 name 以 \'ball\' 結尾的 input 元素

6. [attribute*=value]用法

定義：比對給定的屬性是以包含某些值的元素，判斷某個屬性值包含value

$("input[name*=\'sket\']").attr("checked",true);

//查找所有 name 包含 \'sket\' 的 input 元素

7. [selector1][selector2][selectorN]用法

定義：複合屬性選擇器，需要同時滿足多個條件時使用，多個屬性值去交集

$("input[id][name$=\'ball\']").attr("checked",true);

//找到所有含有 id屬性，并且它的 name屬性是以 ball結尾的input 元素

三．通過條件過濾選取元素

按照不同的過濾條件，過濾選擇器可以分為基本過濾，内容過濾，可見性過濾，屬性過濾，子元素過濾和表單對象屬性過濾選擇器。

一．基本過濾選擇器

1 :first和:last（取第一個元素或最後一個元素）

$(document).ready(function () {

$(\'span:first\').css(\'color\', \'#FF0000\');

$(\'span:last\').css(\'color\', \'#FF0000\');

});下面的代碼，G1（first元素）和G3（last元素）會變色

2 :not（取非元素）

$(document).ready(function () {

$(\'div:not(.wrap)\').css(\'color\', \'#FF0000\');

});下面的代碼，G1會變色

但是，請注意下面的代碼：

<div>

</div>

當G1所在div和G2所在div是父子關系時，G1和G2都會變色。

3 :even和:odd（取偶數索引或奇數索引元素，索引從0開始，even表示偶數，odd表示奇數）

$(document).ready(function () {

$(\'li:even\').css(\'background\', \'#EEE\'); // 偶數行顔色

$(\'li:odd\').css(\'background\', \'#DADADA\'); // 奇數行顔色

});A、C行顔色#EEE（第一行的索引為0），B、D行顔色#DADADA

<ul>

</ul>

4 :eq(x) （取指定索引的元素）

$(document).ready(function () {

$(\'li:eq(2)\').css(\'background\', \'#FF0000\');

});更改第三行的背景色，在上面的代碼中C的背景會變色。

5 :gt(x)和:lt(x) （取大于x索引或小于x索引的元素）

$(document).ready(function () {

$(\'ul li:gt(2)\').css(\'color\', \'#FF0000\');

$(\'ul li:lt(2)\').css(\'color\', \'#0000FF\');

});L4和L5會是紅色，L1和L2會是藍色，L3是預設顔色

<ul>

</ul>

6 :header（取H1~H6标題元素）

$(document).ready(function () {

$(\':header\').css(\'background\', \'#EFEFEF\');

});下面的代碼，H1~H6的背景色都會變

7. :focus (目前擷取焦點的元素)

$(document).ready(function () {

$(\':focus\').css(\'background\', \'#000\');

});改變目前擷取焦點的元素的背景顔色

二．可見性過濾選擇器

在jQuery中，通過元素顯示狀态選取元素的選擇器稱為可見性過濾選擇器

1 :hidden（取隐藏(不可見)的元素）

div {

margin: 10px;

width: 200px;

height: 40px;

border: 1px solid #FF0000;

display: block;

}

.hid-1 {

display: none;

}

.hid-2 {

visibility: hidden;

}

</style>

$(document).ready(function () {

$(\'div:hidden\').show(500);

alert($(\'input:hidden\').val());

});

</script>

</head>

<body>

<div class="hid-1">display: none</div>

<div class="hid-2">visibility: hidden</div>

</body>

先彈出"hello"對話框，然後hid-1會顯示，hid-2仍然是不可見的。

2 :visible（取可見的元素）

$(document).ready(function() {

$(\'div:visible\').css(\'background\', \'#EEADBB\');

});

</script>

<div class="hid-1">display: none</div>

<div class="hid-2">visibility: hidden</div>

<div>

我有背景色

</div>

代碼中，最後一個div會有背景色

四．jQuery選擇器注意事項

一．選擇器中含有特殊符号的注意事項

按照普通方式擷取，如

$(‘#id#a’);

$(‘#id[2]’);

不能正确擷取元素，正确寫法如下

$(‘#id\\#a’);

$(‘#id\\[2\\]’);

二．選擇器中含有空格的注意事項

選擇器中空格是不容忽視的，多一個空格或少一個空格，可能會得到截然不同的結果。

标簽 jQuery選擇器

, jquery

, 選擇器

jQuery選擇器 之詳述 - 你不在的日子

jQuery選擇器 之詳述

jQuery選擇器

一. 單詞小計

一．jQuery選擇器概述

二．通過CSS選擇器擷取元素

一．基本選擇器

二、 層次選擇器

三．屬性選擇器

三．通過條件過濾選取元素

一．基本過濾選擇器

二．可見性過濾選擇器

四．jQuery選擇器注意事項

一．選擇器中含有特殊符号的注意事項

二．選擇器中含有空格的注意事項

jQuery選擇器

一. 單詞小計

一．jQuery選擇器概述

二．通過CSS選擇器擷取元素

一．基本選擇器

二、 層次選擇器

三．屬性選擇器

三．通過條件過濾選取元素

一．基本過濾選擇器

二．可見性過濾選擇器

四．jQuery選擇器注意事項

一．選擇器中含有特殊符号的注意事項

二．選擇器中含有空格的注意事項

jQuery選擇器之詳述 - 你不在的日子

jQuery選擇器之詳述

二、層次選擇器

二、層次選擇器