`

jquery基础教程七 选择器(selectors 的xpath语法应用)

阅读更多

我们根据实例来解释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的元素

分享到:
评论

相关推荐

    基于jquery的H5移动端选择器,日期选择器,自定义级联选择器,自定义html选择器

    总的来说,基于jQuery的H5移动端选择器是现代Web开发中不可或缺的一部分,它们提高了移动应用的交互性和用户满意度。通过学习和使用像lay-picker这样的库,开发者可以快速实现功能强大的选择器,同时保持代码的简洁...

    jQuery基础教程第四版+配套源码

    首先,jQuery的核心概念包括选择器(Selectors),这是jQuery的基础,用于在DOM(文档对象模型)中找到特定的元素。例如,`$("#id")`用于选取ID为"id"的元素,`$(".class")`则选取所有class为"class"的元素。通过...

    JQuery基础教程(圣思园)

    《JQuery基础教程(圣思园)》是...通过以上分析,可以看出圣思园的《JQuery基础教程》不仅涵盖了JQuery选择器的基础知识,还深入探讨了不同选择器的细节和应用场景,对于初学者理解和掌握JQuery选择器具有极高的价值。

    jquery基础教程源码

    《jQuery基础教程源码》是一份面向初学者和开发者的学习资源,旨在帮助他们掌握JavaScript库jQuery的基本用法和核心概念。jQuery是一个强大的JavaScript框架,它简化了HTML文档遍历、事件处理、动画制作以及Ajax交互...

    经典的jQuery选择器应用例子

    在JavaScript的世界里,jQuery是一个非常流行且...在jQuerySelectors压缩包中,你将会找到这些选择器的实例代码,通过实际运行和调试,你将更深入地理解它们的工作原理和应用场景。动手实践,是掌握这些知识点的关键。

    jQuery-Selectors-源码.rar

    jQuery选择器基于W3C的CSS选择器标准,包括ID选择器(#id)、类选择器(.class)、标签选择器(tagname)、属性选择器([attribute])等。这些选择器可以组合使用,构建复杂的选取规则。 2. **Sizzle引擎** ...

    jquery实用教程

    1. **选择器(Selectors)** jQuery提供了丰富的选择器,如ID选择器(`#id`), 类选择器(`.class`), 属性选择器(`[attribute]`)等,使你可以精准地定位到页面上的HTML元素。同时,还可以组合使用这些选择器,实现更...

    选择器(Selectors)是用来指定哪些元素样式规则将被应用到的一个模式 选择器可以基于元素的名称、ID、类、属性或它们的组合

    选择器(Selectors)是用来指定哪些元素样式规则将被应用到的一个模式。选择器可以基于元素的名称、ID、类、属性或它们的组合等多种方式选择器(Selectors)是用来指定哪些元素样式规则将被应用到的一个模式。选择器...

    jQuery基础教程及部分API

    首先,jQuery的核心概念是选择器(Selectors),它允许开发者通过CSS样式规则轻松选取页面上的元素。例如,`$("#myID")`会选择ID为"myID"的元素,`$(".myClass")`会选择所有类名为"myClass"的元素。此外,jQuery还...

    jQuery Selectors Refcard

    jQuery 选择器是 jQuery 库中最核心的功能之一,它利用 CSS 熟悉的语法帮助网页开发者快速且准确地定位到文档对象模型(DOM)中的元素集合。通过理解并熟练掌握 jQuery 选择器,开发者可以更高效地操作网页元素。 #...

    获取网页上 xpath , css 路径的插件, 方便爬虫、自动化测试相关软件工作者快速获取页面上html元素路径

    其次,CSS选择器(Cascading Style Sheets Selectors)则是用于选择HTML或XML文档中元素的一种方式,常用于CSS样式定义,但同样在JavaScript操作DOM或自动化测试中广泛应用。CSS选择器通过元素标签名、类名、ID等...

    jQuery的各种实例的编写 教你很快掌握jQuery的语法

    本教程将通过一系列实例,帮助你快速理解并掌握jQuery的语法。 一、选择器(Selectors) jQuery的选择器是其强大的功能之一,它们基于CSS选择器,允许你精准地选取页面中的元素。例如,`$("#id")`用于选取ID为"id...

    Jquery选择器

    其中,jQuery选择器是其核心功能之一,它允许开发者用类似于CSS的选择器语法来选取DOM元素,并对其进行操作。 #### 二、jQuery选择器分类 jQuery选择器主要分为四大类:基本选择器、层次选择器、过滤选择器和表单...

    testcafe-react-selectors, 用于响应应用的TestCafe选择器扩展.zip

    testcafe-react-selectors, 用于响应应用的TestCafe选择器扩展 testcafe-react-selectors这个插件提供了选择器扩展,使得使用 TestCafe 测试ReactJS组件变得更容易。 这些扩展允许你以React的方式选择页面元素。安装...

    jquery api 大全 CHM

    首先,jQuery的核心概念是选择器(Selectors),它是jQuery的灵魂,通过选择器可以轻松选取DOM元素。例如,`$("#id")`用于选取ID为指定值的元素,`$(".class")`则选取所有类名为指定值的元素。jQuery还支持CSS选择器...

    jQuery基础自学笔记(pink老师jQuery全内容)

    jQuery 提供了丰富的选择器,如 ID 选择器 (`#id`),类选择器 (`.class`),元素选择器 (`element`) 等,可以快速选取DOM元素。复合选择器如 `$('div.class1, div.class2')` 可以同时选取多个元素。 3. **DOM 操作...

    Jquery入门教程 比较经典的学习Jquery框架的书

    1. **选择器(Selectors)**:jQuery的选择器类似于CSS选择器,用于在文档中找到特定的HTML元素。例如,`$("#myID")`选择具有特定ID的元素,`$(".myClass")`选择所有class为"myClass"的元素。 2. **DOM操作(DOM ...

    jQuery 3.1 参考手册.CHM_语法_

    选择器(Selectors) jQuery的选择器基于CSS,允许开发者快速准确地定位到页面上的元素。例如,`$("#id")` 用于选取ID为特定值的元素,`$(".class")` 选取所有class属性包含指定类名的元素,`$("tag")` 则选取指定...

    jQuery Selectors(选择器)的使用(二、层次篇)

    在"jQuery Selectors(选择器)的使用(二、层次篇)"中,我们将探讨与元素层级相关的选择器,这些选择器帮助我们基于元素之间的关系来选取元素。 1. **后代选择器(Descendant Selector)** 后代选择器使用空格分隔两...

    jquery 中文教程

    jQuery的核心特性包括选择器(Selectors)、DOM操作、事件处理、动画效果和Ajax交互。 ### 二、jQuery选择器 jQuery选择器是基于CSS选择器的扩展,使得选取DOM元素变得简单。例如,`$("#id")`用于选取ID为"id"的...

Global site tag (gtag.js) - Google Analytics