jQuery 選擇器理解
$的選擇器部分:
凡是運(yùn)用$,其返回值是一個object
$選擇器主要用于選擇標(biāo)簽.基本用法是同css的選擇器.但是,很讓人興奮的是,他支持常見的瀏覽器,而css中很多選擇器是IE6所不支持的.
1.基本選擇器(3種): ----凡是運(yùn)用$,其返回值是一個object
$("標(biāo)簽名"),如$("p")是選取了所有的p標(biāo)簽節(jié)點(diǎn)
$("#id名"),如$("#test")是選取了id為test的標(biāo)簽節(jié)點(diǎn)
$(".class名"),如$(".test")是選取了所有class為test的標(biāo)簽節(jié)點(diǎn)
上面的$("標(biāo)簽名")和$(".class名")返回的都是所有滿足的節(jié)點(diǎn),至于進(jìn)一步篩選可以添加一些函數(shù),如eq,gt,lt等等.
2.組選擇器: ----3種基本選擇器的組合，“,”隔開
下面還是現(xiàn)做一個約定:把"標(biāo)簽名或#id名或.class名"記作mix,則mix表示一個標(biāo)簽名,或一個#id或一個.class.
$("mix,mix,mix,..."),如:$("div,#test1,p,.test2,#test3")
3.后代選擇器: ----3種基本選擇器的組合，“ ”隔開，直系皆生效
$("mix mix"),當(dāng)然可以是多個嵌套,但后代選擇器可以是深層子代,所以$("mix mix mix ...")這種寫法作用不大.例子:$("div .test"):在div標(biāo)簽內(nèi)的所有具有test的class的后代元素(就是被div嵌套的class屬性為test的標(biāo)簽)
4.子選擇器: ----3種基本選擇器的組合，“>”隔開，只親子有效
$("mix>mix"),這個放在后代選擇器后面是為了和它做對比.子選擇器只能選擇第一代子代.不處理深層嵌套.例子:
$("div>.test")
<div><p class="test"></p></div>對這里的p段落標(biāo)簽有效.但對
<div><p><p class="test"></p></p></div>對這里的p段落標(biāo)簽無效,這里要用
$("div .test)
5.臨近選擇器: ----3種基本選擇器的組合，“+”隔開，只下一個兄弟節(jié)點(diǎn)
$("mix+mix"),選取下一個兄弟節(jié)點(diǎn).如:$("div +#test"),id為test的的節(jié)點(diǎn)必須是div的下一個兄弟節(jié)點(diǎn).
<div></div><p id="test"></p>在$("div + #test")中能取到p段落節(jié)點(diǎn)
<div></div><p></p><p id="test"></p>則不能取到
6.屬性選擇器: ----“ |=|^|$|*”
把屬性選擇器不放在css選擇器里面是因?yàn)閖Query中寫法是不一樣的.至于css中寫法可以參考我之前寫的一篇css的選擇器一文.jQuery中是和xPath類似的寫法:
$("mix[@attr]"):選取所有該mix且具有attr屬性的節(jié)點(diǎn)
$("mix[@attr=a_value"]):選取所有該mix且具有attr屬性并滿足屬性值為a_value的節(jié)點(diǎn)
$("mix[@attr^=a_value_head"]):attr屬性的屬性值是以a_value_head開頭的
$("mix[@attr$=a_value_end"]):attr屬性的屬性值是以a_value_end結(jié)尾的
$("mix[@attr*=a_value"]):attr屬性的屬性值中包含a_value
7. 限定選擇器:
這個名稱是我自己起的,其實(shí)選擇器組合都有限定的意思,你明白后面所介紹的知識即可.
具有限定子節(jié)點(diǎn)選擇器:$("mix1[mix2]"):返回包含mix2的mix1節(jié)點(diǎn).如:$("div[a]"):包含a標(biāo)簽的div.
這個和$("div a")不相同.后者表示div中的a標(biāo)簽,返回的是a標(biāo)簽對象,前者返回的是div標(biāo)簽對象
冒號限定結(jié)點(diǎn)選擇器:$("mix:condition"):mix標(biāo)簽,并且滿足限定條件.
E:root:類型為E,并且是文檔的根元素
E:nth-child(n):是其父元素的第n個類型為E的子元素 ,基數(shù)從1開始
E:first-child:是其父元素的第1個類型為E的子元素
E:last-child:是其父元素的最后一個類型為E的子元素
E:only-child:且是其父元素的唯一一個類型為E的子元素
相關(guān)文章
jQuery 快速結(jié)束當(dāng)前正在執(zhí)行的動畫
要快速結(jié)束一個當(dāng)前正在執(zhí)行的jquery 動畫時可以在執(zhí)行當(dāng)前動畫的對象上執(zhí)行 stop(true)方法，下面有個不錯的示例感興趣的朋友不要錯過2013-11-11
Jquery的擴(kuò)展方法extend是我們在寫插件的過程中常用的方法，該方法有一些重載原型，在此，我們一起去了解了解2012-02-02
jquery ajaxfileupload異步上傳插件使用詳解
這篇文章主要為大家詳細(xì)介紹了jquery ajaxfileupload異步上傳插件的使用，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
Jquery UI震動效果實(shí)現(xiàn)原理及步驟
如果你想你的博客頁面某些部分引起讀者的注意，你可以使這些部分震動，如廣告等等，今天這篇文章將介紹怎樣使你的頁面中的元素震動起來,感興趣的你可不要錯過了哦，或許對你學(xué)習(xí)jquery ui 有所幫助2013-02-02
jqPlot是一個灰常強(qiáng)大的圖表工具，曲線，柱狀，餅圖，應(yīng)該有盡有，更要命的是，調(diào)用方便~~2016-06-06
本文主要是給大家分享了一則使用EasyUI實(shí)現(xiàn)同步樹的代碼，主要是使用遞歸實(shí)現(xiàn)，非常實(shí)用的方法，推薦給小伙伴們。2015-03-03
利用jquery如何從json中讀取數(shù)據(jù)追加到html中
這篇文章主要給大家介紹了關(guān)于利用jquery如何從json中讀取數(shù)據(jù)追加到html中的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編一起來看看吧。2017-12-12
jQuery移動端跑馬燈抽獎特效升級版(抽獎概率固定)實(shí)現(xiàn)方法
這篇文章主要介紹了jQuery移動端跑馬燈抽獎特效升級版(抽獎概率固定)實(shí)現(xiàn)方法,涉及jQuery數(shù)值運(yùn)算及條件判斷等相關(guān)操作技巧,需要的朋友可以參考下2019-01-01
據(jù)jQuery官方博客5月3日的最新消息，jQuery 1.6 正式版已經(jīng)可以下載使用。jQuery 1.6 版本包括了對屬性(Attribute)模型的重要重寫，還有諸多性能優(yōu)化。借此機(jī)會感謝jQuery開發(fā)團(tuán)隊(duì)和jQuery錯誤分類團(tuán)隊(duì)的成員。2011-05-05
這篇文章向大家推薦15個最佳 jQuery 圖片效果插件。jQuery是最流行的Javascript框架，使用簡單靈活，同時還有許多成熟的插件可供選擇2011-11-11