JQuery 选择器 xpath 语法应用
更新时间:2010年05月13日 00:15:30 作者:
我们根据实例来解释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>
第一种根据属性选择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的元素
复制代码 代码如下:
<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实现的图片在各种分辨率下未知的容器内上下左右居中
这篇文章主要介绍了基于jquery实现的图片在各种分辨率下未知的容器内上下左右居中的方法,需要的朋友可以参考下2014-05-05jQuery DataTables插件自定义Ajax分页实例解析
这篇文章主要为大家详细介绍了jQuery DataTables插件自定义Ajax分页的相关资料,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2016-05-05jQuery Ajax 实现在html页面实时显示用户登录状态
本文给大家分享jQuery Ajax 实现在html页面实时显示用户登录状态的实现方法,非常不错,具有参考借鉴价值,需要的朋友参考下2016-12-12
最新评论