jQuery再學習之二、jQuery選擇器

 前言

jQuery選擇器非常非常強大而且靈活,要完全掌握它是需要狠下一番功夫的。當然,掌握了主要的部分後,其它的瞭解就好,因爲一些比較偏的畢竟用得少,而且可以有其它方法來實現。

 

 

選擇器

1          基本選擇器

1.1        #id選擇器,通過元素的id來查找對象,

例:$("#txtTime") 

查找idtxtTime的元素

 

1.2        html標籤選擇器,通過html標籤來查找對象,例:

$("div")

查找標籤爲div的所有元素

 

1.3        .css類選擇器,通過元素使用的css類名來查找對象,例:

$(".title")

查找css類名爲title的元素

 

1.4        *,選取所有元素,例:$("*")

 

1.5        xx,xx,xx多選擇器,多個選擇器一起使用(逗號分隔),例:

$("div,#txtname")

查找所有的div元素和idtxtName的元素

 

 

2          層級關係選擇器

2.1        在所有子孫元素中匹配(使用空格),例:

$("body div")

查找body元素下的所有子孫節點中的div元素

 

2.2        在所有子元素中匹配(使用>號),例:

$("body>div");

查找body元素下所有兒子節點中的div元素

 

 

3          簡單條件選擇器

3.1        :not(…) :非選擇器,祛除匹配的元素,例:

$("div:not(.txtRed)");

查找所有的div元素,並排除css類名爲txtReddiv元素

 

3.2        :eq(index) :匹配一個給定索引值的元素,例:

$("div:eq(1)");

查找所有div元素,並只取查找到的元素數組的索引號爲1div元素

 

3.3        :gt(index) :匹配大於給定索引值的元素,例:

$("div:gt(1)");

查找所有div元素,並取查找到的元素數組的索引號大於1div元素

 

3.4        :lt(index) :匹配小於給定索引值的元素,例:

$("div:lt(1)");

查找所有div元素,並取查找到的元素數組的索引號小於1div元素

 

3.5        :contains(text) :匹配包含給定文本的元素,例:

$("div:contains('name')");

查找所有div元素,並取查找到的元素包含name文本的div元素

 

3.6        :hidden:visible :匹配所有隱藏的、可見的元素,例:

$("div:hidden");

查找所有div元素,並取所有隱藏了的div元素

 

 

4          屬性選擇器

4.1        […] :匹配包含給定屬性的元素,例:

$("div[id]")

查找包含id屬性的div元素

 

4.2        [attribute(=/!=/^=/$=/*=)value] :匹配給定的屬性值(等於、不等於、開頭爲、結束爲、包含)給定的value值,例:

$("div[id='title']")

查找id等於titlediv注意:值應該用引號括起來,如’value’

 

4.3        […][…][…] :多屬性聯合使用,例:

$("div[id='txt'][class='title']")

查找idtxtclasstitlediv

 

$("input[type='checkbox'][checked='true']")

查找所有的被勾選了的複選框

 

 

5          查找選擇器

5.1        $("...").children([]) 獲取所有匹配元素的兒子節點的匹配元素,例:

$("body").children().length

獲取body元素的所有兒子節點元素

 

$("body").children("div").length

獲取body元素的所有兒子節點元素中的div元素

 

5.2        $("...").closest("...") : 從元素本身開始,逐級向上查找匹配的元素,並返回最新查找到的元素,例:

$("#dd").closest("div").html()

查找iddd的元素的最近的上級div元素

 

5.3        $("...").find("..."查找元素下的匹配元素(所有子孫節點),例:

$("body").find("div").length

獲取body節點下的所有div元素

 

5.4        $("...").parent() 獲取元素的父親節點元素,例:

$("#yy").parent().html()

獲取idyy的節點的父親節點

 

5.5        $("...").parents("..."獲取元素的所有祖先節點或其中的匹配節點,例:

$("#yy").parents().length

獲取idyy的節點的所有祖先節點

 

$("#yy").parents("body").html()

獲取idyy的節點的祖先節點爲body標籤的元素

 


reference url : http://blog.csdn.net/soldierluo/article/details/5784292

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章