jQuery提供了多种遍历DOM的方法。遍历方法中最大的种类是树遍历。

  • 向上遍历DOM树

parent()：返回被选元素的直接父元素

parents()：返回被选元素的所有祖先元素，它一直遍历到根元素(<html>)

parentsUntil()：返回介于两个元素之间的所有祖先元素。例$("span").parentsUntil("div"),返回介于<span>与<div>元素之间的所有祖先元素；如果不填写参数，则效果等同于parents方法。

  • 向下遍历DOM树

children()：返回被选元素的所有直接子元素。该方法只会向下一级对DOM树进行遍历。

另外，还可以使用参数来过滤对子元素的搜索。例：$("div").children("p.demo")，返回类名为demo的所有<p>元素，并且它们是<div>的直接子元素。

find()：返回被选元素的后代元素，一路向下直到最后一个后代。

例：

$("div").find("span");--返回所有属于<div>后代的所有<span>元素
$("div").find("*");--返回所有<div>的后代
  • 在DOM树种水平遍历

同胞拥有相同的父元素

siblings()：返回被选元素的所有同胞元素

next()：返回被选元素的下一个同胞元素，该方法只返回一个元素

nextAll()：返回被选元素的所有跟随的同胞元素

nextUntil()：返回介于两个给定参数之间的所有跟随的同胞元素

 

prev()、prevAll()、prevUntil()方法工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素。

  • 在DOM树种过滤

三个基本的过滤方法是：first()、last()、和eq()，他们允许你基于其在一组元素中的位置来选择一个特定的元素。

其他过滤方法，比如filter()和not()允许你选取匹配或不匹配某项制定标准的元素。

first()方法返回被选元素的首个元素。例如：$("div p").first();--选取首个<div>元素内部的第一个<p>元素

last()方法返回被选元素的最后一个元素。例如：$("div p").last();--选取最后一个<div>元素中的最后一个<p>元素

equ()方法被选元素中带有指定索引号的元素。索引号从0开始。

filter()方法允许你规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。

例如：$("p").filter(".intro");---返回带有类名"intro"的所有<p>元素

not()方法返回不匹配标准的所有元素

jQuery遍历DOM的更多相关文章

  1. jquery遍历DOM方法总结

    1.jQuery 遍历 - 祖先 向上遍历 DOM 树 这些 jQuery 方法很有用,它们用于向上遍历 DOM 树: parent() parents() parentsUntil() jQuery ...

  2. jQuery 遍历用法

    jQuery 遍历 DOM 树 parent() 方法返回被选元素的直接父元素(找爸爸). parents() 方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (找长辈). parents ...

  3. *jquery操作DOM总结 (原创：最全、最系统、实例展示)

    jquery操作DOM包括八个方面: 一:jquery对DOM节点的基本操作:二:jquery对DOM节点的CSS样式操作:三:jquery遍历DOM节点:四:jquery创建DOM节点:五:jque ...

  4. jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别

    http://www.poluoluo.com/jzxy/201312/253059.html 在这个sprint中,因为要写前端UI,所以用到了jQuery,但是jQuery在向上遍历DOM树的AP ...

  5. JQuery学习笔记（三）遍历 DOM

    遍历 DOM jQuery 提供了多种遍历 DOM 的方法.遍历方法中最大的种类是树遍历(tree-traversal). 向上父节点parent,向下子节点child,同胞next和pre 缩写搜索 ...

  6. jQuery 遍历函数

    转载http://www.cnblogs.com/tylerdonet/archive/2013/04/05/3000618.html jQuery 遍历函数包括了用于筛选.查找和串联元素的方法. 函 ...

  7. jQuery介绍 DOM对象和jQuery对象的转换与区别

    jQuery介绍 DOM对象和jQuery对象的转换与区别 jQuery介绍      jQuery: http://jquery.com/      write less, do more.   j ...

  8. Jquery遍历选中的input标签

    $("input[name='chkAgent']:[checked]").each(function () { alert($(this).attr("value&qu ...

  9. jQuery操作Dom、jQuery事件机制、jQuery补充部分

    jQuery操作Dom: 修改属性: //使用attr()方法 //attr(name, value) //name:要修改的属性的属性名 //value:对应的值 //attr方法,如果当前标签有要 ...

随机推荐

  1. 2、[转]WPF与WinForm的比较

    http://www.cnblogs.com/KnightsWarrior/archive/2010/07/09/1774059.htmlhttp://www.cnblogs.com/zenghong ...

  2. 【BZOJ 1563】 [NOI2009]诗人小G

    Description Input Output 对于每组数据,若最小的不协调度不超过1018,则第一行一个数表示不协调度若最小的不协调度超过1018,则输出"Too hard to arr ...

  3. 预告：准备开个坑，集中学习一下esp32模块

    对这个模块有兴趣的可以关注我以后的更新,寒假会抽空写几篇心得.

  4. Mac 使用phpMyAdmin

    1 把phpMyAdmin-4.6.5.2-all-languages.zip文件解压到“/Library/WebServer/Documents/”中,并改名为phpmyadmin. 2 复制“/L ...

  5. 1030: [JSOI2007]文本生成器 - BZOJ

    Description JSOI交给队员ZYX一个任务,编制一个称之为“文本生成器”的电脑软件:该软件的使用者是一些低幼人群,他们现在使用的是GW文本生成器v6版.该软件可以随机生成一些文章―――总是 ...

  6. Workspace in use or cannot be created, choose a different one.--错误解决办法

    eclipse 使用一段时间后,有时会因为一些故障自己就莫名奇妙的关闭了,再打开时有时没有问题,有时有会提示错误 Workspace Unavailable: 原因:出现这种情况一般是workspac ...

  7. P​H​P​ ​5​.​3​连​接​s​q​l​ ​s​e​r​v​e​r​ ​2​0​0​8​ ​R​2

    我的机器为: xp sp3 sql server 2008 developer apache 2.2.2 php 5.3  从5.3开始,php就不再提供mssql.dll了,所以要php连接sql  ...

  8. RASP 完爆 WAF 的5大理由！

    Web 应用防火墙(WAF)已经成为常见 Web 应用普遍采用的安全防护工具,即便如此,WAF 提供的保护方案仍旧存在诸多不足,笔者认为称 WAF 为好的安全监控工具更为恰当.幸运的是,应用安全保护技 ...

  9. Amzon MWS API开发之订单接口

    Amazon订单接口是Amazon MWS 开发接口中的一大块,我们可以通过接口调用来获得订单数据. 在调用接口之前,首先我们要获得相关店铺商家的店铺密钥等信息.如下: 在此我将所有信息定义在一个类中 ...

  10. nginx负载均衡和反向代理有什么区别

    近在研究nginx的负载均衡和反向代理,先看下这两个简单的配置吧! 负载均衡 worker_processes 1; events { worker_connections 1024; } http{ ...