JQuery 選擇器 xpath 語法應(yīng)用
更新時(shí)間：2010年05月13日 00:15:30 作者：
我們根據(jù)實(shí)例來解釋JQuery選擇器（selectors）中xpath幾種常用的用法
比如下面html代碼
<ul>
<li class="aaaa" title="ttt">li-1</li>
<li class="bbbb">li-2</li>
<li title="fffff">li-2</li>
</ul>
<div class="aaaa" title="ttt">li-1</div>
<div class="bbbb">li-2</div>
<div title="fffff">li-2</div>
第一種根據(jù)屬性選擇E[@attr]
$("[@title]").click()..........
即選擇所有元素內(nèi) 屬性帶有title的元素
即
<li class="aaaa" title="ttt">li-1</li>
<li title="fffff">li-2</li>
<div class="aaaa" title="ttt">li-1</div>
<div title="fffff">li-2</div>
$("div[@title]").click()..........
選擇所有div標(biāo)簽下的所有帶title的元素
即
<div class="aaaa" title="ttt">li-1</div>
<div title="fffff">li-2</div>
第二種根據(jù)屬性值選擇E[@attr=val]
$("div[@title=ttt]").click()................
選擇div下所有title屬性等于ttt的元素
即
<div class="aaaa" title="ttt">li-1</div>
如果是 $("[@title=ttt]").click()................
所有元素下屬性title等于ttt的元素
<li class="aaaa" title="ttt">li-1</li>
<div class="aaaa" title="ttt">li-1</div>
第三種根據(jù)屬性值開始字母選擇E[@attr^=val]
$("div[@title^=t]").click()................
所有div元素下所有屬性title值是以t為開頭的元素
第三種根據(jù)屬性值開始字母選擇E[@attr$=val]
$("div[@title$=t]").click()................
所有div元素下所有屬性title值是以t為結(jié)尾的元素
第三種根據(jù)屬性值包含字母選擇E[@attr*=val]
$("div[@title*=t]").click()................
所有div元素下所有屬性title值是包含t的所有元素
第三種根據(jù)多個(gè)屬性選擇E[@attr=val][@attr=val]
$("div[@title=ttt][@class=aaaa]").click()................
所有div元素下所有屬性title值是等于ttt并且屬性class等于aaaa的元素
復(fù)制代碼 代碼如下:
<ul>
<li class="aaaa" title="ttt">li-1</li>
<li class="bbbb">li-2</li>
<li title="fffff">li-2</li>
</ul>
<div class="aaaa" title="ttt">li-1</div>
<div class="bbbb">li-2</div>
<div title="fffff">li-2</div>
第一種根據(jù)屬性選擇E[@attr]
$("[@title]").click()..........
即選擇所有元素內(nèi) 屬性帶有title的元素
即
<li class="aaaa" title="ttt">li-1</li>
<li title="fffff">li-2</li>
<div class="aaaa" title="ttt">li-1</div>
<div title="fffff">li-2</div>
$("div[@title]").click()..........
選擇所有div標(biāo)簽下的所有帶title的元素
即
<div class="aaaa" title="ttt">li-1</div>
<div title="fffff">li-2</div>
第二種根據(jù)屬性值選擇E[@attr=val]
$("div[@title=ttt]").click()................
選擇div下所有title屬性等于ttt的元素
即
<div class="aaaa" title="ttt">li-1</div>
如果是 $("[@title=ttt]").click()................
所有元素下屬性title等于ttt的元素
<li class="aaaa" title="ttt">li-1</li>
<div class="aaaa" title="ttt">li-1</div>
第三種根據(jù)屬性值開始字母選擇E[@attr^=val]
$("div[@title^=t]").click()................
所有div元素下所有屬性title值是以t為開頭的元素
第三種根據(jù)屬性值開始字母選擇E[@attr$=val]
$("div[@title$=t]").click()................
所有div元素下所有屬性title值是以t為結(jié)尾的元素
第三種根據(jù)屬性值包含字母選擇E[@attr*=val]
$("div[@title*=t]").click()................
所有div元素下所有屬性title值是包含t的所有元素
第三種根據(jù)多個(gè)屬性選擇E[@attr=val][@attr=val]
$("div[@title=ttt][@class=aaaa]").click()................
所有div元素下所有屬性title值是等于ttt并且屬性class等于aaaa的元素
相關(guān)文章
這篇文章給大家介紹了jquery自定義圖片上傳插件的實(shí)例代碼，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友一起看看吧2017-04-04
這篇文章主要介紹了Jquery中CSS選擇器用法,實(shí)例分析了jQuery中常用的5種css選擇器的使用技巧,需要的朋友可以參考下2015-02-02
今天我再來向大家介紹一款jquery圖表插件jqplot，下面是一些中文說明，希望對(duì)你有所幫助2012-02-02
基于jquery實(shí)現(xiàn)的圖片在各種分辨率下未知的容器內(nèi)上下左右居中
這篇文章主要介紹了基于jquery實(shí)現(xiàn)的圖片在各種分辨率下未知的容器內(nèi)上下左右居中的方法,需要的朋友可以參考下2014-05-05
JQuery中DOM實(shí)現(xiàn)事件移除的方法
這篇文章主要介紹了JQuery中DOM實(shí)現(xiàn)事件移除的方法,涉及jQuery中unbind方法移除事件綁定的相關(guān)技巧,需要的朋友可以參考下2015-06-06
jquery心形點(diǎn)贊關(guān)注效果的簡(jiǎn)單實(shí)現(xiàn)
下面小編就為大家?guī)硪黄猨query心形點(diǎn)贊關(guān)注效果的簡(jiǎn)單實(shí)現(xiàn)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-11-11
jQuery DataTables插件自定義Ajax分頁實(shí)例解析
這篇文章主要為大家詳細(xì)介紹了jQuery DataTables插件自定義Ajax分頁的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-05-05
下面小編就為大家?guī)硪黄贘query Ajax type的4種類型(詳解)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08
jQuery Ajax 實(shí)現(xiàn)在html頁面實(shí)時(shí)顯示用戶登錄狀態(tài)
本文給大家分享jQuery Ajax 實(shí)現(xiàn)在html頁面實(shí)時(shí)顯示用戶登錄狀態(tài)的實(shí)現(xiàn)方法，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下2016-12-12
本文給大家總結(jié)了幾種使用jQuery實(shí)現(xiàn)的分頁插件，效果非常不錯(cuò)，有需要的小伙伴可以參考下。2015-11-11