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排序及應(yīng)用實(shí)現(xiàn)Tab欄特效
這篇文章主要介紹了基于jQuery排序及應(yīng)用實(shí)現(xiàn)Tab欄特效，jquery是基于JavaScript語言寫出來的一個(gè)框架，它封裝JavaScript常用的功能代碼，提供一種簡便的JavaScript設(shè)計(jì)模式，但實(shí)質(zhì)上還是js，所以JQuery也屬于網(wǎng)頁編程語言。下面更多內(nèi)容需要的小伙伴可以參考一下2022-03-03
這篇文章主要介紹了jQuery1.9+中刪除了live以后的替代方法 的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-06-06
jQuery僅用3行代碼實(shí)現(xiàn)的顯示與隱藏功能完整實(shí)例
這篇文章主要介紹了jQuery僅用3行代碼實(shí)現(xiàn)的顯示與隱藏功能,以完整實(shí)例形式分析了jQuery實(shí)現(xiàn)鼠標(biāo)響應(yīng)及頁面元素屬性變換的相關(guān)技巧,需要的朋友可以參考下2015-10-10
jquery 文本上下無縫滾動(dòng),鼠標(biāo)放上去就停止 小例子
jquery 文本上下無縫滾動(dòng),鼠標(biāo)放上去就停止 小例子，需要的朋友可以參考一下2013-06-06
淺析LigerUi開發(fā)中謹(jǐn)慎載入common.css文件
這一句是載頁面載入時(shí)，顯示正在載入動(dòng)畫效果，但是極大影響了程序開發(fā)里的調(diào)試。給新手的建議，希望可以參考下2013-07-07
JQuery textlimit 顯示用戶輸入的字符數(shù) 限制用戶輸入的字符數(shù)
顯示用戶輸入的字符數(shù) 限制用戶輸入的字符數(shù)的實(shí)現(xiàn)方法。2009-05-05
項(xiàng)目中做角色授權(quán)時(shí)，需要做一個(gè)下拉框帶樹結(jié)構(gòu)的 并且可以多選的組件，就想到了easyui的combotree，下面通過實(shí)例代碼給大家介紹下Easyui 下拉樹組件combotree2016-12-12
jQuery 移動(dòng)端拖拽（模塊化開發(fā)，觸摸事件，webpack）
這篇文章主要介紹了jQuery 移動(dòng)端拖拽（模塊化開發(fā)，觸摸事件，webpack）的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下2016-10-10
網(wǎng)站如何做到完全不需要jQuery也可以滿足簡單需求
據(jù)統(tǒng)計(jì)，目前全世界57.3%的網(wǎng)站使用它。也就是說，10個(gè)網(wǎng)站里面，有6個(gè)使用jQuery。如果只考察使用工具庫的網(wǎng)站，這個(gè)比例就會(huì)上升到驚人的91.7%2013-06-06
jQuery實(shí)現(xiàn)獲取隱藏div高度的方法示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)獲取隱藏div高度的方法,結(jié)合實(shí)例形式較為詳細(xì)的分析了jQuery針對頁面元素屬性操作的相關(guān)技巧,需要的朋友可以參考下2017-02-02