JQuery 選擇器 xpath 語法應用

2019-11-21 00:30:53

字體：大中小

來源：轉載

供稿：網友

比如下面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> 

第一種根據屬性選擇E[@attr]
$("[@title]").click()..........

即選擇所有元素內屬性帶有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標簽下的所有帶title的元素
即
<div class="aaaa" title="ttt">li-1</div>
<div title="fffff">li-2</div>

第二種根據屬性值選擇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>

第三種根據屬性值開始字母選擇E[@attr^=val]

$("div[@title^=t]").click()................

所有div元素下所有屬性title值是以t為開頭的元素

第三種根據屬性值開始字母選擇E[@attr$=val]

$("div[@title$=t]").click()................

所有div元素下所有屬性title值是以t為結尾的元素

第三種根據屬性值包含字母選擇E[@attr*=val]

$("div[@title*=t]").click()................

所有div元素下所有屬性title值是包含t的所有元素

第三種根據多個屬性選擇E[@attr=val][@attr=val]

$("div[@title=ttt][@class=aaaa]").click()................

所有div元素下所有屬性title值是等于ttt并且屬性class等于aaaa的元素

上一篇：jquery validate.js表單驗證的基本用法入門

下一篇：代碼短小的js div層拖動實現代碼[兼容IE與Firefox]