前言
jQuery選擇器非常非常強大而且靈活,要完全掌握它是需要狠下一番功夫的。當然,掌握了主要的部分後,其它的瞭解就好,因爲一些比較偏的畢竟用得少,而且可以有其它方法來實現。
選擇器
1 基本選擇器
1.1 #id選擇器,通過元素的id來查找對象,
例:$("#txtTime")
查找id爲txtTime的元素
1.2 html標籤選擇器,通過html標籤來查找對象,例:
$("div")
查找標籤爲div的所有元素
1.3 .css類選擇器,通過元素使用的css類名來查找對象,例:
$(".title")
查找css類名爲title的元素
1.4 *,選取所有元素,例:$("*")
1.5 xx,xx,xx多選擇器,多個選擇器一起使用(逗號分隔),例:
$("div,#txtname")
查找所有的div元素和id爲txtName的元素
2 層級關係選擇器
2.1 在所有子孫元素中匹配(使用空格),例:
$("body div")
查找body元素下的所有子孫節點中的div元素
2.2 在所有子元素中匹配(使用>號),例:
$("body>div");
查找body元素下所有兒子節點中的div元素
3 簡單條件選擇器
3.1 :not(…) :非選擇器,祛除匹配的元素,例:
$("div:not(.txtRed)");
查找所有的div元素,並排除css類名爲txtRed的div元素
3.2 :eq(index) :匹配一個給定索引值的元素,例:
$("div:eq(1)");
查找所有div元素,並只取查找到的元素數組的索引號爲1的div元素
3.3 :gt(index) :匹配大於給定索引值的元素,例:
$("div:gt(1)");
查找所有div元素,並取查找到的元素數組的索引號大於1的div元素
3.4 :lt(index) :匹配小於給定索引值的元素,例:
$("div:lt(1)");
查找所有div元素,並取查找到的元素數組的索引號小於1的div元素
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等於title的div(注意:值應該用引號括起來,如’value’)
4.3 […][…][…] :多屬性聯合使用,例:
$("div[id='txt'][class='title']")
查找id爲txt且class爲title的div
$("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()
查找id爲dd的元素的最近的上級div元素
5.3 $("...").find("...") :查找元素下的匹配元素(所有子孫節點),例:
$("body").find("div").length
獲取body節點下的所有div元素
5.4 $("...").parent() :獲取元素的父親節點元素,例:
$("#yy").parent().html()
獲取id爲yy的節點的父親節點
5.5 $("...").parents("...") :獲取元素的所有祖先節點或其中的匹配節點,例:
$("#yy").parents().length
獲取id爲yy的節點的所有祖先節點
$("#yy").parents("body").html()
獲取id爲yy的節點的祖先節點爲body標籤的元素
reference url : http://blog.csdn.net/soldierluo/article/details/5784292