jquery選擇器常用小筆記

jquery 選擇器

1.id選擇器
通過給定的id匹配元素

html代碼

<div id="notMe"><p>id="notMe"</p></div>
<div id="myDiv">id="myDiv"</div>

jQuery 代碼:
$("#myDiv");

2.查找含有特殊字符的元素

HTML代碼

<span id="foo:bar"></span>
<span id="foo[bar]"></span>
<span id="foo.bar"></span>

jQuery 代碼:

#foo\\[bar\\]

結(jié)果
···
[ <span id="foo[bar]"></span>]
···

element

一個用于搜索的元素。指向 DOM 節(jié)點的標(biāo)簽名嘿架。
jQuery 代碼:

<div>DIV1</div>
<div>DIV2</div>
<span>SPAN</span>
$("div")
結(jié)果   [ <div>DIV1</div>, <div>DIV2</div> ]

類選擇器

根據(jù)給定的css類名匹配元素挪凑。

HTML 代碼:
<div class="notMe">div class="notMe"</div>
<div class="myClass">div class="myClass"</div>
<span class="myClass">span class="myClass"</span>
jQuery 代碼:
$(".myClass");
結(jié)果
[ <div class="myClass">div class="myClass"</div>, <span class="myClass">span class="myClass"</span> ]

* 匹配所有元素多用于結(jié)合上下文來搜索玖喘。

HTML 代碼:
<div>DIV</div
<span>SPAN</span>
<p>P</p>

jQuery 代碼:
$("*")

結(jié)果:[ <div>DIV</div>, <span>SPAN</span>, <p>P</p> ]

selector1,selector2,selectorN

將每一個選擇器匹配到的元素合并后一起返回澎办。
你可以指定任意多個選擇器，并將匹配到的元素合并到一個結(jié)果內(nèi)

HTML 代碼:

<div>div</div>
<p class="myClass">p class="myClass"</p>
<span>span</span>
<p class="notMyClass"><p class="notMyClass"</p>

jQuery 代碼:
$("div,span,p.myClass")

結(jié)果:
[ <div>div</div>, <p class="myClass"><p class="myClass"</p>, <span>span</span> ]

ancestor descendant 在給定的祖先元素下匹配所有的后代元素

用以匹配元素的選擇器窖逗，并且它是第一個選擇器的后代元素

HTML 代碼:
<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />
jQuery 代碼:
$("form input")
結(jié)果:
[ <input name="name" />, <input name="newsletter" /> ]
獲取具體元素 console.log($("form input")[1]);

parent > child

在給定的父元素下匹配所有的子元素

HTML 代碼:
<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />
jQuery 代碼:
$("form > input")
結(jié)果:
[ <input name="name" /> ]

節(jié)點父、子和同胞

1.在節(jié)點樹中餐蔬，頂端節(jié)點被稱為根（root）碎紊。
2.每個節(jié)點都有父節(jié)點、除了根（它沒有父節(jié)點）樊诺。
3.一個節(jié)點可擁有任意數(shù)量的子節(jié)點仗考。
4.同胞是擁有相同父節(jié)點的節(jié)點。

prev + next

匹配所有緊接在 prev 元素后的 next 元素

HTML 代碼:
<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />
jQuery 代碼:
$("label + input")
結(jié)果:
[ <input name="name" />, <input name="newsletter" /> ]

:first 獲取第一個元素

HTML 代碼:
<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>
jQuery 代碼:
$('li:first');
結(jié)果:
[ <li>list item 1</li> ]

:not(selector) 去除所有與給定選擇器匹配的元素

在jQuery 1.3中词爬，已經(jīng)支持復(fù)雜選擇器了（例如:not(div a) 和 :not(div,a)）

HTML 代碼:
<input name="apple" />
<input name="flower" checked="checked" />
jQuery 代碼:
$("input:not(:checked)")
結(jié)果:
[ <input name="apple" /> ]

:even

匹配所有索引值為偶數(shù)的元素秃嗜，從 0 開始計數(shù)
查找表格的1、3顿膨、5...行（即索引值0锅锨、2、4...）

HTML 代碼:
<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>
jQuery 代碼:
$("tr:even")
結(jié)果:
[ <tr><td>Header 1</td></tr>, <tr><td>Value 2</td></tr> ]

:odd

匹配所有索引值為奇數(shù)的元素恋沃，從 0 開始計數(shù)
查找表格的2必搞、4、6行（即索引值1囊咏、3恕洲、5...）

HTML 代碼:
<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>
jQuery 代碼:
$("tr:odd")
結(jié)果:
[ <tr><td>Value 1</td></tr> ]

:eq(index)

匹配一個給定索引值的元素

查找第二行

HTML 代碼:
<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>
jQuery 代碼:
$("tr:eq(1)")
結(jié)果:
[ <tr><td>Value 1</td></tr> ]

:gt(index)

匹配所有大于給定索引值的元素

從 0 開始計數(shù)

>查找第二第三行，即索引值是1和2梅割，也就是比0大

HTML 代碼:
<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>
jQuery 代碼:
$("tr:gt(0)")
結(jié)果:
[ <tr><td>Value 1</td></tr>, <tr><td>Value 2</td></tr> ]

:last()

獲取最后個元素
獲取匹配的最后個元素

HTML 代碼:
<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>
jQuery 代碼:
$('li:last')
結(jié)果:
[ <li>list item 5</li> ]

:lt(index)

匹配所有小于給定索引值的元素
查找第一第二行霜第，即索引值是0和1，也就是比2小

HTML 代碼:
<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>
jQuery 代碼:
$("tr:lt(2)")
結(jié)果:
[ <tr><td>Header 1</td></tr>, <tr><td>Value 1</td></tr> ]

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

查找所有包含 "John" 的 div 元素

HTML 代碼:
<div>John Resig</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J. Ohn
jQuery 代碼:
$("div:contains('John')")
結(jié)果:
[ <div>John Resig</div>, <div>Malcom John Sinclair</div> ]

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

給所有包含 p 元素的 div 元素添加一個 text 類

HTML 代碼:
<div><p>Hello</p></div>
<div>Hello again!</div>
jQuery 代碼:
$("div:has(p)").addClass("test");
結(jié)果:
[ <div class="test"><p>Hello</p></div> ]

:parent 匹配含有子元素或者文本的元素

查找所有含有子元素或者文本的 td 元素

HTML 代碼:
<table>
  <tr><td>Value 1</td><td></td></tr>
  <tr><td>Value 2</td><td></td></tr>
</table>
jQuery 代碼:
$("td:parent")
結(jié)果:
[ <td>Value 1</td>, <td>Value 2</td> ]

:hidden 匹配所有不可見元素户辞，或者type為hidden的元素

查找隱藏的 tr

HTML 代碼:
<table>
  <tr style="display:none"><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>
jQuery 代碼:
$("tr:hidden")
結(jié)果:
[ <tr style="display:none"><td>Value 1</td></tr> ]

匹配type為hidden的元素

HTML 代碼:
<form>
  <input type="text" name="email" />
  <input type="hidden" name="id" />
</form>
jQuery 代碼:
$("input:hidden")
結(jié)果:
[ <input type="hidden" name="id" /> ]

:visible 匹配所有的可見元素

查找所有可見的 tr 元素

HTML 代碼:
<table>
  <tr style="display:none"><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>
jQuery 代碼:
$("tr:visible")
結(jié)果:
[ <tr><td>Value 2</td></tr> ]

[attribute]

匹配包含給定屬性的元素泌类。注意，在jQuery 1.3中咆课，前導(dǎo)的@符號已經(jīng)被廢除末誓！如果想要兼容最新版本扯俱，只需要簡單去掉@符號即可。

查找所有含有 id 屬性的 div 元素

HTML 代碼:
<div>
  <p>Hello!</p>
</div>
<div id="test2"></div>
jQuery 代碼:
$("div[id]")
結(jié)果:
[ <div id="test2"></div> ]

[attribute=value] 匹配給定的屬性是某個特定值的元素

查找所有 name 屬性是 newsletter 的 input 元素

HTML 代碼:
<input type="checkbox" name="newsletter" value="Hot Fuzz" />
<input type="checkbox" name="newsletter" value="Cold Fusion" />
<input type="checkbox" name="accept" value="Evil Plans" />
jQuery 代碼:
$("input[name='newsletter']").attr("checked", true);
結(jié)果:
[ <input type="checkbox" name="newsletter" value="Hot Fuzz" checked="true" />, <input type="checkbox" name="newsletter" value="Cold Fusion" checked="true" /> ]

[attribute!=value]

匹配所有不含有指定的屬性喇澡，或者屬性不等于特定值的元素迅栅。

此選擇器等價于 :not([attr=value]) 要匹配含有特定屬性但不等于特定值的元素，請使用[attr]:not([attr=value])

描述:
查找所有 name 屬性不是 newsletter 的 input 元素

HTML 代碼:
<input type="checkbox" name="newsletter" value="Hot Fuzz" />
<input type="checkbox" name="newsletter" value="Cold Fusion" />
<input type="checkbox" name="accept" value="Evil Plans" />
jQuery 代碼:
$("input[name!='newsletter']").attr("checked", true);
結(jié)果:
[ <input type="checkbox" name="accept" value="Evil Plans" checked="true" /> ]

[selector1][selector2][selectorN]

復(fù)合屬性選擇器晴玖，需要同時滿足多個條件時使用读存。

描述:
找到所有含有 id 屬性，并且它的 name 屬性是以 man 結(jié)尾的

HTML 代碼:
<input id="man-news" name="man-news" />
<input name="milkman" />
<input id="letterman" name="new-letterman" />
<input name="newmilk" />
jQuery 代碼:
$("input[id][name$='man']")
結(jié)果:
[ <input id="letterman" name="new-letterman" /> ]

:first-child

匹配所給選擇器( :之前的選擇器)的第一個子元素

類似的:first匹配第一個元素呕屎，但是:first-child選擇器可以匹配多個：即為每個父級元素匹配第一個子元素让簿。這相當(dāng)于:nth-child(1)

在每個 ul 中查找第一個 li

HTML 代碼:
<ul>
  <li>John</li>
  <li>Karl</li>
  <li>Brandon</li>
</ul>
<ul>
  <li>Glen</li>
  <li>Tane</li>
  <li>Ralph</li>
</ul>
jQuery 代碼:
$("ul li:first-child")
結(jié)果:
[ <li>John</li>, <li>Glen</li> ]

:last-child

匹配最后一個子元素:last 只匹配最后一個元素，而此選擇符將為每個父元素匹配最后一個子元素

在每個 ul 中查找最后一個 li

HTML 代碼:
<ul>
  <li>John</li>
  <li>Karl</li>
  <li>Brandon</li>
</ul>
<ul>
  <li>Glen</li>
  <li>Tane</li>
  <li>Ralph</li>
</ul>
jQuery 代碼:
$("ul li:last-child")
結(jié)果:
[ <li>Brandon</li>, <li>Ralph</li> ]

:only-child

如果某個元素是父元素中唯一的子元素秀睛，那將會被匹配如果父元素中含有其他元素尔当，那將不會被匹配。（注：這里的其他元素并不包含文本節(jié)點蹂安，如：<p><img/>圖片</p>椭迎，用$('p img:only-child')是可以匹配，感謝：nwujiajie 指正）

在 ul 中查找是唯一子元素的 li

HTML 代碼:
<ul>
  <li>John</li>
  <li>Karl</li>
  <li>Brandon</li>
</ul>
<ul>
  <li>Glen</li>
</ul>
jQuery 代碼:
$("ul li:only-child")
結(jié)果:
[ <li>Glen</li> ]

** 一些比較常用的小田盈，僅供參考畜号，詳細(xì)文檔請查看（http://jquery.cuishifeng.cn/id.html）**

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

人面猴
序言：七十年代末，一起剝皮案震驚了整個濱河市允瞧，隨后出現(xiàn)的幾起案子简软，更是在濱河造成了極大的恐慌，老刑警劉巖述暂，帶你破解...
沈念sama閱讀 222,183評論 6贊 516
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件痹升，死亡現(xiàn)場離奇詭異，居然都是意外死亡贸典，警方通過查閱死者的電腦和手機视卢，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 94,850評論 3贊 399
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來廊驼，“玉大人据过，你說我怎么就攤上這事《士妫” “怎么了绳锅？”我有些...
開封第一講書人閱讀 168,766評論 0贊 361
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長酝掩。經(jīng)常有香客問我鳞芙，道長，這世上最難降的妖魔是什么？我笑而不...
開封第一講書人閱讀 59,854評論 1贊 299
?港島之戀（遺憾婚禮）
正文為了忘掉前任原朝，我火速辦了婚禮驯嘱，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘喳坠。我一直安慰自己鞠评，他們只是感情好，可當(dāng)我...
茶點故事閱讀 68,871評論 6贊 398
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布壕鹉。她就那樣靜靜地躺著剃幌，像睡著了一般。火紅的嫁衣襯著肌膚如雪晾浴。梳的紋絲不亂的頭發(fā)上负乡，一...
開封第一講書人閱讀 52,457評論 1贊 311
城市分裂傳說
那天，我揣著相機與錄音脊凰，去河邊找鬼抖棘。笑死，一個胖子當(dāng)著我的面吹牛笙各，可吹牛的內(nèi)容都是我干的钉答。我是一名探鬼主播，決...
沈念sama閱讀 40,999評論 3贊 422
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼杈抢，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了仑性？” 一聲冷哼從身側(cè)響起惶楼，我...
開封第一講書人閱讀 39,914評論 0贊 277
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎诊杆，沒想到半個月后歼捐，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
沈念sama閱讀 46,465評論 1贊 319
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡晨汹，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 38,543評論 3贊 342
?白月光啟示錄
正文我和宋清朗相戀三年豹储，在試婚紗的時候發(fā)現(xiàn)自己被綠了。大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片淘这。...
茶點故事閱讀 40,675評論 1贊 353
活死人
序言：一個原本活蹦亂跳的男人離奇死亡剥扣，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出铝穷，到底是詐尸還是另有隱情钠怯，我是刑警寧澤，帶...
沈念sama閱讀 36,354評論 5贊 351
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布曙聂，位于F島的核電站晦炊，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜断国，卻給世界環(huán)境...
茶點故事閱讀 42,029評論 3贊 335
男人毒藥：我在死后第九天來索命
文/蒙蒙一贤姆、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧稳衬，春花似錦霞捡、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 32,514評論 0贊 25
一樁弒父案弄砍，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽。三九已至输涕，卻和暖如春音婶，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背莱坎。一陣腳步聲響...
開封第一講書人閱讀 33,616評論 1贊 274
情欲美人皮
我被黑心中介騙來泰國打工衣式，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人檐什。一個月前我還...
沈念sama閱讀 49,091評論 3贊 378
代替公主和親
正文我出身青樓碴卧，卻偏偏與公主長得像，于是被迫代替她去往敵國和親乃正。傳聞我的和親對象是個殘疾皇子住册，可洞房花燭夜當(dāng)晚...
茶點故事閱讀 45,685評論 2贊 360