這是我寫在CSDN 的文章惭缰,原文在此[http://blog.csdn.net/dylan_l/article/details/50338107]
一酒繁、jQuery選擇器優(yōu)勢
1凡简、簡潔的寫法: $("選擇器");
2冀自、支持css1 到 css3 所有選擇器汽纠;
3抬驴、完善的處理機制炼七,無需判斷引用的元素是否存在。
二布持、jQuery選擇器分類
1豌拙、基本選擇器
#id → $("#test") //選取id為test的元素
.clss →$(".test")
element →$("p") //選取所有<p>元素
* → $("*") //選取所有元素
$("div,span,p.myclass"); //選取這些所有的元素
2、層次選擇器
$("div span"); //選擇div中所有span元素
$("div>span"); //選擇div下所有的span子元素
$(".one+div"); //選擇class為one的下一個div同輩元素(選取緊接在class為one的元素后的div元素)
//只選擇該元素后的一個兄弟元素题暖,相當于 $(".one").next("div");
$("#two~div"); //選取id為two的元素后的所有<div>同輩元素按傅;相當于 $("#two").nextAll("div");
3、過濾選擇器
3.1 基本過濾選擇器
$("div:first"); //選取所有div元素中的第一個<div>元素
$("div:last"); //選取所有div元素中的最后一個<div>元素
$("intput:not(.test)"); //選取class不是test的input元素
$("input:even"); //選取索引是偶數(shù)的input元素胧卤,索引從0開始數(shù)
$("input:odd"); //選取索引是奇數(shù)的input元素
$("input:eq(0)"); //選取索引等于0的input元素
$("input:gt(2)"); //選取索引大于2(不包括2)的input元素
$("input:lt(2)"); //選取索引小于2(不包括2)的input元素
$(":header"); //選取網(wǎng)頁中所有h1,h2,h3.....
$("div:animated"); //選取正在執(zhí)行動畫的div元素
$(":focus"); //選取當前獲取焦點的元素
3.2內(nèi)容過濾選擇器
$("div:contains('我')"); //選取含有文本“我”的div元素
$("div:empty"); //選取不包含子元素和文本元素的div空元素
$("div:has(p)"); //選取含有<p>元素的div元素
$("div:parent"); //選取擁有子元素(包括文本元素)的div元素
3.3可見性過濾選擇器
$(":hidden"); //選取所有不可見元素唯绍,包括<input type="hidden" />,display:none,visiblity:hidden 等元素。
//如果只想選取input元素枝誊,可使用$("input:hidden");
$(":visible"); //選取所有可見元素
3.4 屬性過濾選擇器
$("div[id]"); //選取擁有屬性id的元素
$("div[title=test]"); //選取屬性title為test的div元素
$("div[title!=test]"); //選取屬性title不等于test的div元素况芒,包括沒有屬性title的div元素
$("div[title^=test]"); //選取屬性title以test開始的div元素
$("div[title$=test]"); //選取屬性title以test結(jié)束的div元素
$("div[title*=test]"); //選取屬性title含有test的div元素
$("div[title|='en']"); //選取屬性title等于en或以en為前綴(該字符串后跟一個連字符‘-’)的元素;
$("div[title~='uk']"); //選取屬性title用空格分隔的值中包含字符uk的元素
$("div[id][title$='abc']"); //選取擁有屬性id叶撒,并且屬性title以“abc”結(jié)束的div的元素
3.5 子元素過濾選擇器
$("div :nth-child(even)"); //選取每個div父元素下索引值是偶數(shù)的子元素
$("div :nth-child(odd)"); //選取每個div父元素下索引值是奇數(shù)的子元素
$("div :nth-child(2)"); //選取每個div父元素下索引值是2的子元素
$("div :nth-child(3n+1)"); //選取每個div父元素下索引值是(3n+1)的元素(n從1開始算起)
$("ul li:first-child"); //選取每個<ul>中第一個li元素
$("ul li:last-child"); //選取每個<ul>中最后一個li元素
$("ul li:only-child"); //在<ul>中選取是唯一子元素的li元素
3.6 表單對象屬性過濾選擇器
$("#form1 :enabled"); //選取id為“form1”的表單內(nèi)所有可用元素
$("#form1 :disabled"); //選取id為“form1”的表單內(nèi)所有不可用元素
$("input:checked"); //選取所有被選中的input元素
$("select option:selected"); //選取所有被選中的選項元素
----------
$(":input"); //選取所有input绝骚,textarea,select和button元素
$(":text"); //選取所有單行文本框
$(":password"); //選取所有密碼框
$(":radio"); //選取所有單選框
$(":checkbox"); //選取所有復選框
$(":submit"); //選取所有提交按鈕
$(":image"); //選取所有圖像按鈕
$(":reset"); //選取所有重置按鈕
$(":button"); //選取所有按鈕
$(":file"); //選取所有上傳域
$(":hidden"); //選取所有不可見元素
三痊乾、注意事項
1皮壁、選擇請含有“·”、“#”哪审、“(”蛾魄、“]”等特殊字符串,需要在特殊字符前加轉(zhuǎn)義符號 \ 湿滓。
<div id="id[1]">cc</div>
要寫成 $("#id\\[1\\]")
2滴须、jQuery 1.3.1版本后不用在屬性選擇器前添加“@”符號
3、選擇器中含有空格要注意
$(".test :hidden"); // 選取class為test的元素里面的隱藏元素
$(".test:hidden"); // 選取隱藏的 class為test的元素