`
wangyongfei
  • 浏览: 23163 次
  • 性别: Icon_minigender_1
文章分类
社区版块
存档分类
最新评论

jQuery选择器的常用方法(节点选择)

阅读更多

1.查找所有符合条件的元素 find()

$('ul').find('li').addClass('tmpExample');

 查找页面中ul元素下的所有li元素,并为查找到的li元素增加tmpExample样式。

2.查找指定元素的兄弟节点 siblings()

$('li#tmpCarrot').slblings().addClass('tmpExample');

查找ID为tmpCarrot的li元素所有的兄弟节点,并为查找到的兄弟节点增加tmpExample样式。

可以在slblings()的括号中添加选择器来查找指定条件的兄弟节点。如:slblings('.tmpClass'),就是查找类为tmpClass的兄弟节点。

3.查找指定节点的下一个兄弟节点 next()

$('li#tmpBroccoli').next().addClass('tmpExample');

 查找ID为tmpBroccoli的li节点的下一兄弟节点。并为查找到的兄弟节点增加tmpExample样式。

4.查找指定节点的后面的所有兄弟节点 nextAll()

$('li#tmpBroccoli').nextAll().addClass('tmpExample');

 查找ID为tmpBroccoli的li节点后面的所有兄弟节点。并为查找到的兄弟节点增加tmpExample样式。

5.查找指定节点的前一个兄弟节点 prev()

$('li#tmpBroccoli').prev().addClass('tmpExample');

 查找ID为tmpBroccoli的li节点的前一个兄弟节点。并为查找到的兄弟节点增加tmpExample样式。

6.查找指定节点的前面所有的兄弟节点 prevAll()

$('li#tmpBroccoli').prevAll().addClass('tmpExample');

 查找ID为tmpBroccoli的li节点的前面所有的兄弟节点。并为查找到的兄弟节点增加tmpExample样式。

可以在prevAll()的括号中添加选择器来查找指定条件的兄弟节点。如:prevAll('li.tmpClass'),就是查找当前节点前面所有类为tmClass的兄弟节点。

7.查找所有符合条件的上级节点 parents()

$('li#tmpCarrot').parents('div#tmpSelection').addClass('tmpExample');

 查找ID为tmpCarrot的li节点所有id为tmpSelection的div上级节点。并为查找到的节点增加tmpExample样式。

8.查找上级节点 parent()

$('li#tmpCarrot').parent().addClass('tmpExample');

查找ID为tmpCarrot的li节点的上级节点。并为查找到的节点增加tmpExample样式。

9.查找子节点 children()

$('div.tmpList').children('h4').addClass('tmpExample');

 查找class为tmplist的div下面的子节点中为h4标签的。并为查找到的节点增加tmpExample样式。

10.查找到的节点集合中反选 not()

$('ul li').not('li.tmpVegetables').addClass('tmpExample');

查找到的li集合中,除了class为tmpVegetables的节点,都增加一个tmpExample样式。

11.选择节点集合中的片段 slice()

$('ul li').slice(1,4).addClass('tmpExample');

 查找到的li集合中,选择从第1个(从0计数,第一个其实是第二个)节点开始的,向后4个节点,并为这4个节点增加tmpExample样式。

12.向查找的结果集中添加节点 add()

$('ul#tmpAnimals li').add('li#tmpBrocoli,li#tmpPepper').addClass('tmpExample');

 id为tmpAnimals的ul节点下的li节点集,添加id为tmpBrocoli的li节点和添加id 为tmpPepper的li节点。并将组合后的集合中所有li节点增加tmpExample样式。

13.结果集中选择指定元素 eq()

$('ul li').eq(10).addClass('tmpExample');

 页面ul下面的li集合中,给第10元素增加tmpExample样式。

 

分享到:
评论

相关推荐

    jQuery选择器全解.

    本文将深入解析jQuery选择器的功能与使用方法,帮助读者掌握这一重要的前端技术。 #### 二、jQuery选择器概览 jQuery选择器主要分为两大类:“选择”和“过滤”。选择器用于指定目标元素,而过滤器则进一步细化...

    jQuery选择器速查表

    总的来说,jQuery选择器为我们提供了丰富的方法来定位和操作页面元素,使得DOM操作变得简单、高效。了解并熟练使用这些选择器,对于前端开发人员而言是十分必要的。在实际开发中,可以根据需要灵活组合选择器,以...

    jQuery选择器大全(48个代码片段 21幅图演示)

    **jQuery选择器大全** jQuery库以其易用性和强大的选择器功能而闻名,使得JavaScript开发者能够更轻松地操作DOM(文档对象模型)。以下是一份详细的知识点概述,涵盖了jQuery中的主要选择器及其应用。 1. **基本...

    Java模拟Jquery选择器

    总之,使用Java模拟jQuery选择器主要涉及HTML文档的解析、节点过滤以及操作。通过`org.htmlparser.Parser`库,我们可以实现对HTML文档的解析,并利用自定义的过滤器来模拟jQuery选择器的功能。然而,由于JavaScript...

    jquery样式选择器插件源码demo

    通过阅读和理解这段源码,开发者不仅可以学习到jQuery选择器的工作原理,还能提升对CSS选择器、DOM操作以及JavaScript性能优化的理解。 总结来说,这个"jquery样式选择器插件"是一个浓缩的精华,它展示了如何用最少...

    jquery 选择器 描述

    通过以上详尽的解析,我们可以看到jQuery选择器的强大功能和灵活性,以及jQuery提供的DOM操作方法,它们共同构成了前端开发中不可或缺的工具箱。无论是选择特定元素进行样式调整,还是动态创建和操作DOM节点,jQuery...

    JQuery 选择器、DOM节点操作练习实例

    综合以上,JQuery选择器、DOM节点操作练习实例的知识点包括JQuery选择器的使用,DOM节点操作的方法,以及事件处理。文档通过实际的代码示例,使读者能够更好地理解和掌握JQuery在实际开发中的应用,包括如何使用...

    Jquery选择器大全

    在本文中,我们将全面探讨各种 jQuery 选择器的详细说明和实例。 首先,我们有基本选择器,它们是最简单直接的选取方式: 1. `$("#myElement")` - 通过 ID 选取唯一元素,ID 必须在整个文档中是唯一的。 2. `$("div...

    jquery 选择器 大全

    jQuery选择器是jQuery库的核心功能之一,它使得开发者能够高效地选取HTML文档中的特定元素,进行操作或应用样式。在jQuery中,选择器分为多种类型,包括基本选择器、层次选择器、过滤器选择器以及内容和属性过滤器。...

    jQuery选择器全面总结

    这篇文章将对jQuery选择器进行全面总结,帮助开发者更好地理解和运用这些工具。 首先,我们要了解基本选择器,这是jQuery选择器的基础。包括: 1. **ID选择器**: 使用`#`符号后跟元素的ID,如`jQuery("#ID")`,它...

    JQuery选择器详解JQuery选择器详解

    JQuery选择器是jQuery库中的核心功能之一,它极大地简化了JavaScript中对DOM元素的选取,使得开发者可以更高效地操作网页元素。本篇将详细阐述JQuery选择器的使用和原理。 一、基础选择器 JQuery的基础选择器包括ID...

    Jquery选择器总结

    本文将对jQuery选择器进行深入的总结。 ### 1. 基本选择器 基本选择器包括ID选择器、类选择器、标签选择器和通用选择器。 - **ID选择器**: 使用`#`符号选取具有特定ID的元素,例如`$("#myID")`。 - **类选择器**:...

    jQuery树形选择器代码.zip

    《jQuery树形选择器代码详解》 在网页开发中,数据的展示方式多种多样,其中树形结构是一种常见的数据组织形式,尤其适用于层次关系复杂的场景。jQuery作为一个强大的JavaScript库,提供了丰富的选择器来操作DOM...

    jquery选择器的几种用法

    本文将深入探讨jQuery选择器的几种常见用法,帮助你更好地理解和运用这个强大的工具。 1. 基本选择器: jQuery的基本选择器包括ID选择器(`#id`),类选择器(`.class`)和元素选择器(`tag`)。例如,`$("#myID")...

    jquery节点删除子节点方法应用

    如果只想删除子节点而不删除父元素,可以通过选择器参数来实现。但在本例中,`empty()`方法更为合适,因为它只清除子节点,保留了父元素`checkList`。 ```javascript $("#checkList *").remove(); ``` 上述代码会...

    Jquery节点插入、复制和替换方法

    `replaceAll()`方法则与`replaceWith()`相反,它会用当前集合中的元素替换另一个选择器匹配的元素。例如: ```javascript $("新的内容</div>").replaceAll("#oldElement"); ``` 这段代码将创建一个新的`<div>`元素...

    jquery选择器---懒人之爱

    本文档将详细介绍jQuery选择器的使用方法及其相关知识点。 首先,选择器允许开发者根据元素的ID、类名、标签名等属性来选取元素。例如,`$("#lastname")`可以选取ID为lastname的元素,而`$(".intro")`可以选择所有...

    jQuery选择器源码解读(八):addCombinator函数

    addCombinator函数是jQuery选择器引擎中的一部分,主要用于生成基于给定关系选择器的执行函数。选择器引擎是jQuery用于解析和执行CSS选择器的部分,它能够将CSS选择器转换为能够匹配DOM元素的函数。 在详细解读...

    jquery可见性过滤选择器使用示例

    在实际应用中,这两个选择器可以与其他jQuery选择器结合使用,以实现更复杂的操作。比如,如果你想隐藏所有可见的div,可以这样做: ```javascript $("div:visible").hide(); ``` 或者,如果要切换元素的可见性,...

    jQuery树结构菜单选择器代码.zip

    3. **jQuery交互**:jQuery的选择器和方法是实现动态效果的关键。例如,可以使用`.click()`方法监听点击事件,`.children()`获取子元素,`.toggleClass()`切换类名来控制展开和折叠。`.find()`用于查找子孙元素,`....

Global site tag (gtag.js) - Google Analytics