7 selectors 的xpath语法应用

我们根据实例来解释jquery选择器（selectors）中xpath几种常用的用法

比如下面html代码

1. <ul>
2. <li class="aaaa" title="ttt">li-1</li>
3. <li class="bbbb">li-2</li>
4. <li title="fffff">li-2</li>
5. </ul>
6. <div class="aaaa" title="ttt">li-1</div>
7. <div class="bbbb">li-2</div>
8. <div title="fffff">li-2</div>

复制代码

第一种根据属性选择E[@attr]

1. $("[@title]").click()..........

复制代码

即选择所有元素内 属性带有title的元素
即

1. <li class="aaaa" title="ttt">li-1</li>
2. <li title="fffff">li-2</li>
3. <div class="aaaa" title="ttt">li-1</div>
4. <div title="fffff">li-2</div>
6. $("div[@title]").click()..........

复制代码

选择所有div标签下的所有带title的元素
即

1. <div class="aaaa" title="ttt">li-1</div>
2. <div title="fffff">li-2</div>

复制代码

第二种根据属性值选择E[@attr=val]

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

复制代码

选择div下所有title属性等于ttt的元素
即

1. <div class="aaaa" title="ttt">li-1</div>

复制代码

如果是 $("[@title=ttt]").click()................

所有元素下属性title等于ttt的元素

1. <li class="aaaa" title="ttt">li-1</li>
2. <div class="aaaa" title="ttt">li-1</div>

复制代码

第三种根据属性值开始字母选择E[@attr^=val]

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

复制代码

所有div元素下所有属性title值是以t为开头的元素


第三种根据属性值开始字母选择E[@attr$=val]

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

复制代码

所有div元素下所有属性title值是以t为结尾的元素

第三种根据属性值包含字母选择E[@attr*=val]

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

复制代码

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

第三种根据多个属性选择E[@attr=val][@attr=val]

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

复制代码

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