jQuery 選擇器總結(jié)

這是我寫在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的元素
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末叽奥,一起剝皮案震驚了整個濱河市扔水,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌朝氓,老刑警劉巖魔市,帶你破解...
    沈念sama閱讀 222,378評論 6 516
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件主届,死亡現(xiàn)場離奇詭異,居然都是意外死亡待德,警方通過查閱死者的電腦和手機君丁,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,970評論 3 399
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來将宪,“玉大人绘闷,你說我怎么就攤上這事〗咸常” “怎么了印蔗?”我有些...
    開封第一講書人閱讀 168,983評論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長丑勤。 經(jīng)常有香客問我华嘹,道長,這世上最難降的妖魔是什么确封? 我笑而不...
    開封第一講書人閱讀 59,938評論 1 299
  • 正文 為了忘掉前任除呵,我火速辦了婚禮,結(jié)果婚禮上爪喘,老公的妹妹穿的比我還像新娘颜曾。我一直安慰自己,他們只是感情好秉剑,可當我...
    茶點故事閱讀 68,955評論 6 398
  • 文/花漫 我一把揭開白布泛豪。 她就那樣靜靜地躺著,像睡著了一般侦鹏。 火紅的嫁衣襯著肌膚如雪诡曙。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,549評論 1 312
  • 那天略水,我揣著相機與錄音价卤,去河邊找鬼。 笑死渊涝,一個胖子當著我的面吹牛慎璧,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播跨释,決...
    沈念sama閱讀 41,063評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼胸私,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了鳖谈?” 一聲冷哼從身側(cè)響起岁疼,我...
    開封第一講書人閱讀 39,991評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎缆娃,沒想到半個月后捷绒,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體瑰排,經(jīng)...
    沈念sama閱讀 46,522評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,604評論 3 342
  • 正文 我和宋清朗相戀三年疙驾,在試婚紗的時候發(fā)現(xiàn)自己被綠了凶伙。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片郭毕。...
    茶點故事閱讀 40,742評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡它碎,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出显押,到底是詐尸還是另有隱情扳肛,我是刑警寧澤,帶...
    沈念sama閱讀 36,413評論 5 351
  • 正文 年R本政府宣布乘碑,位于F島的核電站挖息,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏兽肤。R本人自食惡果不足惜套腹,卻給世界環(huán)境...
    茶點故事閱讀 42,094評論 3 335
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望资铡。 院中可真熱鬧电禀,春花似錦、人聲如沸笤休。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,572評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽店雅。三九已至政基,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間闹啦,已是汗流浹背沮明。 一陣腳步聲響...
    開封第一講書人閱讀 33,671評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留窍奋,地道東北人荐健。 一個月前我還...
    沈念sama閱讀 49,159評論 3 378
  • 正文 我出身青樓,卻偏偏與公主長得像费变,于是被迫代替她去往敵國和親摧扇。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,747評論 2 361

推薦閱讀更多精彩內(nèi)容