jQuery選擇器

jQuery選擇器支持CSS1艺玲、CSS2的全部和部分CSS3選擇器括蝠，同時(shí)也擁有少量獨(dú)有的選擇器。jQueryt選擇器分為基本選擇器饭聚、層次選擇器忌警、過(guò)濾選擇器和表單選擇器。為了練習(xí)先寫(xiě)一個(gè)html頁(yè)面秒梳。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>jQuery selector</title>
  <script type="text/javascript" src="jQuery/jquery-3.1.0.js"></script>
  <style type="text/css">
    div, span, p{
      width:140px;
      height: 140px;
      margin: 5px;
      background-color: #aaa;
      border: #000 1px solid;
      float: left;
      font-size: 17px;
      font-family: Verdana;
    }
    div.mini{          
      width: 55px;
      height: 55px;
      background-color: #aaa;
      font-size: 12px;
    }
    div.hide{
      display : none;
    }
  </style>
  <script type="text/javascript">
    $(document).ready(function(){
    });
  </script>
</head>
<body>
  <h1>選擇器</h1>
  <div class="one" id="one">
    id為one,class為one的div
    <div class="mini">class為mini</div>
  </div>
  <div class="two" id="two" title="test">
    id為tow,class為one,title為test的div
    <div class="mini" title="other">class為mini,title為other</div>
    <div class="mini" title="test">class為mini,title為test</div>
  </div>
  <div class="one">
    <div class="mini">class為mini</div>
    <div class="mini">class為mini</div>
    <div class="mini">class為mini</div>
    <div class="mini"></div>
  </div>
  <div class="one">
    <div class="mini">class為mini</div>
    <div class="mini">class為mini</div>
    <div class="mini">class為mini</div>
    <div class="mini" title="test">class為mini,title為test</div>
  </div>
  <div style="display:none" class="one">
    style的display為"one"的div
  </div>
   <div class="hide">class為hide的div</div>
  <div>
    包含input的type為"hidden"的div<input type="hidden" size="8" />
  </div>
  <span id="mover">正在執(zhí)行動(dòng)畫(huà)的span</span>
</body>
</html>

基本選擇器

下面講各個(gè)選擇器法绵，并寫(xiě)出示例代碼，添加到ready函數(shù)中并在瀏覽器中看看效果酪碘。
id選擇器：$("#test")朋譬，選取id為test的元素，返回單個(gè)元素

$("#one").css("background", "#bbffaa");//改變id為one的元素的背景色

.class選擇器：$(".test")選取所有class為test的元素兴垦，返回集合元素

$(".mini").css("background", "#bbffaa");//改變class為mini的所有元素的背景色

element選擇器：$("p"),選取所有的<p>元素此熬，返回集合元素

$("div").css("background", "#bbffaa");//改變?cè)孛麨?lt;div>的所有元素的背景色

選擇器：$(""),選擇所有元素，返回集合元素

$("*").css("background", "#bbffaa");//改變所有元素的背景色

selector1,selector2,......,selectorN選擇器：$("div,span,p.myClass")選取所有<div>,<span>和擁有class為myClass的<p>標(biāo)簽的一組元素滑进，返回集合元素

$("span, #two").css("background", "#bbffaa");//改變所有的<span>元素和id為two的元素的背景色

層次選擇器

如果想通過(guò)DOM元素之間的層次關(guān)系來(lái)獲取特定的元素犀忱，例如后代元素、子元素扶关、相鄰元素和同輩元素等阴汇，那么層次選擇器是一個(gè)非常好的選擇。

$("ancestor descendent"),選取ancestor元素里的所有descendent（后代）元素节槐，返回集合元素

$("body div").css("background", "#bbffaa");//改變body內(nèi)所有div元素的背景色

$("parent>child"),選取parent元素下的child(子)元素搀庶，與前一個(gè)選擇器有區(qū)別拐纱，前一個(gè)選擇器選擇的是后代元素，返回集合元素

$("body > div").css("background", "#bbffaa");//改變body內(nèi)子<div>元素的背景色

$("prev + next"),選取緊接在prev元素后的next元素,返回集合元素

$(".one + div").css("background", "#bbffaa");//改變class為one的下一同輩<div>元素的背景色

$("prev~siblings")哥倔，選取prev元素之后的所有silibings元素秸架，返回集合元素

$("#two ~ div").css("background", "#bbffaa");//改變id為two元素之后所有同輩元div元素的背景色

在層次選擇器中，第1咆蒿、2個(gè)選擇器比較常用东抹，面后面2個(gè)因?yàn)樵趈Query里可以使用更簡(jiǎn)單的方法替代，比較少用沃测。$(".one + div")與$(".one").next("div")等價(jià)缭黔；$("#prev ~ div")與$("#prev").nextAll("div");等價(jià)

過(guò)濾選擇器

過(guò)濾選擇器可以分為基本過(guò)濾、內(nèi)容過(guò)濾蒂破、可見(jiàn)性過(guò)濾馏谨、屬性過(guò)濾、子元素過(guò)濾和表單對(duì)象屬性過(guò)濾選擇器

基本過(guò)濾

:first,選取第1個(gè)元素附迷，返回單個(gè)元素

$("div:first").css("background", "#bbffaa");//改變第一個(gè)div元素的背景色

:last,選取最后一個(gè)元素惧互，返回單個(gè)元素

$("div:last").css("background", "#bbffaa");//改變 變最一一個(gè)div元素的背景色

:not(selector)，卻除所有與給定遠(yuǎn)擇器匹配的元素

$("div:not(.one)").css("background", "#bbffaa");//改變class不為one的div元素的背景色

:even喇伯，選取索引值是偶數(shù)的所有元素壹哺，索引從0開(kāi)始

$("div:even").css("background", "#bbffaa");//改變索引值為偶數(shù)的div元素的背景色

:odd，選取索引值是奇數(shù)的所有元素艘刚，索引從0開(kāi)始

$("div:odd").css("background", "#bbffaa");//改變索引值為奇數(shù)的div元素的背景色

:eq(index)管宵，選取索引值等于index的元素

$("div:eq(3)").css("background","#bbffaa");//改變索引值為3的div元素的背景色

:gt(index)，選取索引值大于index的元素

$("div:gt(3)").css("background","#bbffaa");//改變索引值大于3的div元素的背景色

:lt(index),選取索引值小于index的元素

$("div:lt(3)").css("background","#bbffaa");//改變索引值小于3的div元素的背景色

:header攀甚，選取所有的標(biāo)題元素箩朴，便如h1,h2,h3等

$(":header").css("background","#bbffaa");//改變所有標(biāo)題元素的背景色

:animated，選取當(dāng)前正在執(zhí)行動(dòng)畫(huà)的所有元素

$(":animated").css("background","#bbffaa");//改變所有正在執(zhí)行動(dòng)畫(huà)的元素的背景色

:focus秋度，選取當(dāng)前獲取焦點(diǎn)的元素

$(":focus").css("background","#bbffaa");//改變當(dāng)前獲取焦點(diǎn)的元素的背景色

內(nèi)容過(guò)濾

:contains(text),選取含有文本內(nèi)容為"text"的元素

$("div:contains(di)").css("background", "#bbffaa");//改變含有文本"di"的div元素的背景色

:empty炸庞，選取不包含子元素或者文本的空元素

$("div:empty").css("background", "#bbffaa");//改變不包含子元素（包括文本元素）的div元素的背景色

:has(selector)，選取含有選擇器所匹配的元素的元素

$("div:has('.mini')").css("background", "#bbffaa");//改變含有class為mini元素的div元素的背景色

:parent荚斯，選取含有子元素或者文本元素的元素

$("div:parent").css("background", "#bbffaa");//改變含有子元素（包括文本元素）的div元素背景色

屬性過(guò)濾

[attribute]埠居，選取擁有此屬性的元素

$("div[title]").css("background", "#bbffaa");//改變含有屬性title的div元素的背景色

[attribute=value]，選取屬性的值為value的元素

$("div[title=test]").css("background", "#bbffaa");//改變title屬性值等于"test"的div元屬的背景色

[attribute!=value]事期，選取屬性的值不等于value的元素

$("div[title!=test]").css("background", "#bbffaa");//改變title屬性值不等于"test"的div元屬背景色

[attribute^=value]滥壕，選取屬性的值以value開(kāi)始的元素

$("div[title^=te]").css("background", "#bbffaa");//改變屬性title值以"te"開(kāi)始的所有div元素背景色

[attribute$=value]，選取屬性的值以value結(jié)束的元素

$("div[title$=est]").css("background", "#bbffaa");//改變屬性title值以"est"結(jié)尾的所有div元素背景色

[attribute*=value]兽泣，選取屬性的值含有value的元素

$("div[title*=es]").css("background", "#bbffaa");//改變屬性title值包含"es"的div元素的背景色

[attribute|=value]绎橘，選取屬性等于給定字符串或以該字符串為前綴（該字符后跟一個(gè)連字符“-”）的元素

[attribute~=value]，選取屬性用空格分隔的值中包含一個(gè)給定值的元素

[attribute1][attribute2][attributeN]唠倦，用屬性選擇器并成一個(gè)復(fù)合屬性選擇器称鳞，滿足多個(gè)條件的元素

$("div[id][title*=es]").css("background", "#bbffaa");//改變含有屬性id且屬性title值含有"es"的div元素的背景色

可見(jiàn)性過(guò)濾

:hidden涮较，選取所有不可見(jiàn)的元素

$("div:hidden").show(3000);//顯示隱藏的div元素

:visible，選取所有可見(jiàn)的元素

$("div:visible").css("background", "#ff6500");//改變所有可見(jiàn)的div元素的背景色

子元素過(guò)濾

:nth-chile(index/even/odd/equation)冈止，選取每個(gè)父元素下的第index個(gè)子元素或者奇偶元素（index從1開(kāi)始算起狂票。詳細(xì)功能如下：

:nth-child(even)能選取每個(gè)父元素下的索引值是偶數(shù)的元素
:nth-child(odd)能選取每個(gè)父元素下索引值是奇數(shù)的元素
:nth-child(2)能選取每個(gè)父元素下索引值等于2的元素
:nth-child(3n)能選取每個(gè)父元素下的索引值是3的倍數(shù)的元數(shù)，n從1開(kāi)始
:nth-child(3n+1)能選取每個(gè)父元素下的索引值是3n+1的元素,n從1開(kāi)始

 $("div.one :nth-child(2)").css("background", "#bbffaa");//改變每個(gè)class為one的div父元素下的第2個(gè)子元素的背景色

:first-child熙暴，選取父元素的第1個(gè)子元素

$("div.one :first-child").css("background", "#bbffaa");//改變每個(gè)class為one的div父元素下的第1個(gè)子元素的背景色

:last-child 選取每個(gè)父元素的最后一個(gè)子元素

$("div.one :last-child").css("background", "#bbffaa");//改變每個(gè)class為one的div父元素下的最后1個(gè)子元素的背景色

:only-child闺属，如果某個(gè)元素是它父元素中惟一的子元素，那么將會(huì)匹配怨咪，如果父元素中含有其他元素屋剑，剛不會(huì)被匹配

$("div.one :only-child").css("background", "#bbffaa");//改變每個(gè)class為one的div父元素只有一個(gè)子元素润匙，則改變背景色

表單對(duì)象屬性過(guò)濾

這個(gè)選擇器主要是對(duì)所選擇的表單元素進(jìn)行過(guò)濾诗眨。

為了學(xué)習(xí)表單對(duì)象屬性過(guò)濾選擇器需要新建一個(gè)html頁(yè)面包含表單

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表單對(duì)象屬性過(guò)濾選擇器</title>
</head>
<body>
  <form action="#" id="form1">
    可用元素:<input name="add" value="可用文本框" /><br />
    不可用元素:<input name="email" disabled="disabled" value="不可用文本框" /><br />
    可用元素:<input name="che" value="可用文本框" /><br />
    不可用元素:<input name="name" disabled="disabled" value="不可用文本框" /><br />
    <br />
    多選框：<br />
    <input type="checkbox" name="newsletter" checked="checked" value="test1" />test1
    <input type="checkbox" name="newsletter" value="test2" />test2
    <input type="checkbox" name="newsletter" value="test3" />test3
    <input type="checkbox" name="newsletter" checked="checked" value="test4" />test4
    <input type="checkbox" name="newsletter" value="test5" />test5
    <div></div>
    <br /><br />
    下拉列表1：<br />
    <select name="test" multiple="multiple" style="height:100px">
      <option>浙江</option>
      <option selected="selected">湖南</option>
      <option>北京</option>
      <option selected="selected">天津</option>
      <option>廣州</option>
      <option>湖北</option>
    </select>
    <br />
    <br />
    下拉列表2：<br />
    <select name="test2">
      <option>浙江</option>
      <option>湖南</option>
      <option selected="selected">北京</option>
      <option>天津</option>
      <option>廣州</option>
      <option>湖北</option>
    </select>
  </form>
</body>
</html>

:enabled，選取所有可用元素

:disabled孕讳，選取所有不可用元素

:checked匠楚，選取所有被選中的元素（單選框，復(fù)選框)

:selected厂财，選取所有被選中的選項(xiàng)元素(下拉列表)

表單選擇器

:input 選取所有的<input>,<textarea>,<select>,<button>元素
:text 先取所有單行文本框
:password 選取所有密碼框
:radio 選取所有單選框
:checkbox 選取所有多選框
:submit 選取所有拉交按鈕
:image 選取所有的圖像按鈕
:reset 選取所有的重置按鈕
:button 選取所有的按鈕
:file 選取所有上傳域
:hidden 選取所有不可見(jiàn)的元素（已經(jīng)在不可見(jiàn)性過(guò)濾選擇器中講過(guò)）

最后編輯于：2017.12.04 02:43:27

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末芋簿，一起剝皮案震驚了整個(gè)濱河市，隨后出現(xiàn)的幾起案子璃饱，更是在濱河造成了極大的恐慌与斤，老刑警劉巖，帶你破解...
沈念sama閱讀 218,755評(píng)論 6贊 507
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件荚恶，死亡現(xiàn)場(chǎng)離奇詭異撩穿，居然都是意外死亡，警方通過(guò)查閱死者的電腦和手機(jī)谒撼，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 93,305評(píng)論 3贊 395
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門(mén)食寡，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)，“玉大人廓潜，你說(shuō)我怎么就攤上這事抵皱。” “怎么了辩蛋？”我有些...
開(kāi)封第一講書(shū)人閱讀 165,138評(píng)論 0贊 355
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵呻畸，是天一觀的道長(zhǎng)。經(jīng)常有香客問(wèn)我悼院，道長(zhǎng)擂错，這世上最難降的妖魔是什么？我笑而不...
開(kāi)封第一講書(shū)人閱讀 58,791評(píng)論 1贊 295
?港島之戀（遺憾婚禮）
正文為了忘掉前任樱蛤，我火速辦了婚禮钮呀，結(jié)果婚禮上剑鞍，老公的妹妹穿的比我還像新娘。我一直安慰自己爽醋，他們只是感情好蚁署，可當(dāng)我...
茶點(diǎn)故事閱讀 67,794評(píng)論 6贊 392
惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
文/花漫我一把揭開(kāi)白布。她就那樣靜靜地躺著蚂四，像睡著了一般光戈。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上遂赠，一...
開(kāi)封第一講書(shū)人閱讀 51,631評(píng)論 1贊 305
城市分裂傳說(shuō)
那天久妆，我揣著相機(jī)與錄音，去河邊找鬼跷睦。笑死筷弦，一個(gè)胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的抑诸。我是一名探鬼主播烂琴，決...
沈念sama閱讀 40,362評(píng)論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開(kāi)眼，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼蜕乡！你這毒婦竟也來(lái)了奸绷？” 一聲冷哼從身側(cè)響起，我...
開(kāi)封第一講書(shū)人閱讀 39,264評(píng)論 0贊 276
萬(wàn)榮殺人案實(shí)錄
序言：老撾萬(wàn)榮一對(duì)情侶失蹤层玲，失蹤者是張志新（化名）和其女友劉穎号醉，沒(méi)想到半個(gè)月后，有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體辛块，經(jīng)...
沈念sama閱讀 45,724評(píng)論 1贊 315
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡畔派，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 37,900評(píng)論 3贊 336
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了憨降。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片父虑。...
茶點(diǎn)故事閱讀 40,040評(píng)論 1贊 350
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡，死狀恐怖授药，靈堂內(nèi)的尸體忽然破棺而出士嚎，到底是詐尸還是另有隱情，我是刑警寧澤悔叽，帶...
沈念sama閱讀 35,742評(píng)論 5贊 346
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布莱衩，位于F島的核電站，受9級(jí)特大地震影響娇澎，放射性物質(zhì)發(fā)生泄漏笨蚁。R本人自食惡果不足惜，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 41,364評(píng)論 3贊 330
男人毒藥：我在死后第九天來(lái)索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望括细。院中可真熱鬧伪很，春花似錦、人聲如沸奋单。這莊子的主人今日做“春日...
開(kāi)封第一講書(shū)人閱讀 31,944評(píng)論 0贊 22
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽(yáng)览濒。三九已至呆盖，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間贷笛，已是汗流浹背应又。一陣腳步聲響...
開(kāi)封第一講書(shū)人閱讀 33,060評(píng)論 1贊 270
情欲美人皮
我被黑心中介騙來(lái)泰國(guó)打工，沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留乏苦，地道東北人株扛。一個(gè)月前我還...
沈念sama閱讀 48,247評(píng)論 3贊 371
代替公主和親
正文我出身青樓，卻偏偏與公主長(zhǎng)得像邑贴，于是被迫代替她去往敵國(guó)和親席里。傳聞我的和親對(duì)象是個(gè)殘疾皇子叔磷，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 44,979評(píng)論 2贊 355