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. css3 旋转效果加上双面显示效果

    在学习Css3的过程中,我想做一个类似金字塔,菱形翻页效果,如图这种效果 如是,我自己设计了一个,不带js的旋转效果: 1>第一步我先设计了一个方块,内含一个旋转了45deg的小方块,代码如下: ...

  2. PHP视频教程 > PHP面向对象编程视频教程

    当前位置: 主页 > 编程开发 > PHP视频教程 > PHP面向对象编程视频教程 > kingstone金士顿手机内存卡16G仅65元 1.1.什么是面向对象和类 上传日期: ...

  3. 【BZOJ 1088】 [SCOI2005]扫雷Mine

    Description 相信大家都玩过扫雷的游戏.那是在一个n*m的矩阵里面有一些雷,要你根据一些信息找出雷来.万圣节到了,“余”人国流行起了一种简单的扫雷游戏,这个游戏规则和扫雷一样,如果某个格子没 ...

  4. velocity语法

    1.声明变量 #set($var = XXX) 右边可以是以下的内容 Variable reference String literal Property reference Method refer ...

  5. sql之表连接和group by +组函数的分析

    1.首先我们来先看一个简单的例子: 有[Sales.Orders]订单表和[Sales.Customers]顾客表,表的机构如下 业务要求:筛选  来自“按时打算”国家的用户以及所下的订单数 sele ...

  6. NOSQL Mongo入门学习笔记 - MongoDB的安装(一)

    手上的工作不是很忙,所以来学习学习很久就像接触的MongoDb,无奈前段时间工作时间都比较多.记录在这里供以后参考 环境: Centos 7 64位 开始: 1. 在官网下载Mongo : wget  ...

  7. 闭包小demo

    var a = (function(){ var c= 0; return function(){ return ++c; } }()); var g = a(); console.log(g); v ...

  8. ./configure详解

    'configure'脚本有大量的命令行选项.对不同的软件包来说,这些选项可能会有变化,但是许多基本的选项是不会改变的.带上'--help'选项执行'configure'脚本可以看到可用的所有选项.尽 ...

  9. <转>struts2中Convention中的basePackage与locators配置种种

    用了Convention插件来实现所谓的0配置, 1. struts.convention.package.locators.basePackage=com.ZTest.web.action 这个属性 ...

  10. js jquery学习

    1.js api   http://api.vfreesoft.com/ 2.26个jquery小技巧  http://www.cnblogs.com/shouce/p/5084565.html 3. ...