jQuery 選擇器理解
$的選擇器部分:
凡是運(yùn)用$,其返回值是一個(gè)object
$選擇器主要用于選擇標(biāo)簽.基本用法是同css的選擇器.但是,很讓人興奮的是,他支持常見的瀏覽器,而css中很多選擇器是IE6所不支持的.
1.基本選擇器(3種): ----凡是運(yùn)用$,其返回值是一個(gè)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)做一個(gè)約定:把"標(biāo)簽名或#id名或.class名"記作mix,則mix表示一個(gè)標(biāo)簽名,或一個(gè)#id或一個(gè).class.
$("mix,mix,mix,..."),如:$("div,#test1,p,.test2,#test3")
3.后代選擇器: ----3種基本選擇器的組合,“ ”隔開,直系皆生效
$("mix mix"),當(dāng)然可以是多個(gè)嵌套,但后代選擇器可以是深層子代,所以$("mix mix mix ...")這種寫法作用不大.例子:$("div .test"):在div標(biāo)簽內(nèi)的所有具有test的class的后代元素(就是被div嵌套的class屬性為test的標(biāo)簽)
4.子選擇器: ----3種基本選擇器的組合,“>”隔開,只親子有效
$("mix>mix"),這個(gè)放在后代選擇器后面是為了和它做對(duì)比.子選擇器只能選擇第一代子代.不處理深層嵌套.例子:
$("div>.test")
<div><p class="test"></p></div>對(duì)這里的p段落標(biāo)簽有效.但對(duì)
<div><p><p class="test"></p></p></div>對(duì)這里的p段落標(biāo)簽無效,這里要用
$("div .test)
5.臨近選擇器: ----3種基本選擇器的組合,“+”隔開,只下一個(gè)兄弟節(jié)點(diǎn)
$("mix+mix"),選取下一個(gè)兄弟節(jié)點(diǎn).如:$("div +#test"),id為test的的節(jié)點(diǎn)必須是div的下一個(gè)兄弟節(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. 限定選擇器:
這個(gè)名稱是我自己起的,其實(shí)選擇器組合都有限定的意思,你明白后面所介紹的知識(shí)即可.
具有限定子節(jié)點(diǎn)選擇器:$("mix1[mix2]"):返回包含mix2的mix1節(jié)點(diǎn).如:$("div[a]"):包含a標(biāo)簽的div.
這個(gè)和$("div a")不相同.后者表示div中的a標(biāo)簽,返回的是a標(biāo)簽對(duì)象,前者返回的是div標(biāo)簽對(duì)象
冒號(hào)限定結(jié)點(diǎn)選擇器:$("mix:condition"):mix標(biāo)簽,并且滿足限定條件.
E:root:類型為E,并且是文檔的根元素
E:nth-child(n):是其父元素的第n個(gè)類型為E的子元素 ,基數(shù)從1開始
E:first-child:是其父元素的第1個(gè)類型為E的子元素
E:last-child:是其父元素的最后一個(gè)類型為E的子元素
E:only-child:且是其父元素的唯一一個(gè)類型為E的子元素
相關(guān)文章
jQuery中innerWidth()方法用法實(shí)例
這篇文章主要介紹了jQuery中innerWidth()方法用法,實(shí)例分析了innerWidth()方法的功能、定義及獲取第一個(gè)匹配元素內(nèi)部區(qū)域?qū)挾鹊氖褂眉记?需要的朋友可以參考下2015-01-01jQuery插件HighCharts繪制2D帶Label的折線圖效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery插件HighCharts繪制2D帶Label的折線圖效果,結(jié)合實(shí)例形式分析了jQuery圖形繪制插件HighCharts實(shí)現(xiàn)折線圖效果的具體操作步驟與相關(guān)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03jQuery技巧大放送 學(xué)習(xí)jquery的朋友可以看下
jQuery技巧大放送 學(xué)習(xí)jquery的朋友可以看下,非常不錯(cuò)的整理,推薦。2009-10-10jQuery DataTables插件自定義Ajax分頁(yè)實(shí)例解析
這篇文章主要為大家詳細(xì)介紹了jQuery DataTables插件自定義Ajax分頁(yè)的相關(guān)資料,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-05-05用jquery寫的菜單從左往右滑動(dòng)出現(xiàn)
這篇文章主要介紹了用jquery寫的菜單從左往右滑動(dòng)出現(xiàn)的效果,需要的朋友可以參考下2014-04-04分享20個(gè)提升網(wǎng)站界面體驗(yàn)的jQuery插件
今天為大家整理20個(gè)提升網(wǎng)站界面的體驗(yàn)的jQuery插件,這些都是比較“新款”的代碼,喜歡的請(qǐng)用到你的網(wǎng)站項(xiàng)目上吧2014-12-12jquery動(dòng)態(tài)加載圖片數(shù)據(jù)練習(xí)代碼
這里我只是隨便做了下,上面是照片列表和兩個(gè)按鈕,單擊小圖片下面顯示大圖片,當(dāng)點(diǎn)擊按鈕時(shí)可以查看下一頁(yè),上一頁(yè)的圖片。2011-08-08js判斷checkbox是否選中個(gè)數(shù)的方法(超簡(jiǎn)單)
下面小編就為大家?guī)硪黄猨s判斷checkbox是否選中個(gè)數(shù)的方法(超簡(jiǎn)單)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08jQuery實(shí)現(xiàn)錨點(diǎn)scoll效果實(shí)例分析
這篇文章主要介紹了jQuery實(shí)現(xiàn)錨點(diǎn)scoll效果,實(shí)例分析了錨點(diǎn)scoll效果的實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03