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. make问题：make[1] entering directory

    执行make distclean命令.

  2. IOS 透​视​投​影​矩​阵​推​导(转)

    http://wenku.baidu.com/link?url=wDkyQR9fDI_tZas1BlMRUnNNoKwiQDygltm2wWxRr_sDwcDB51_QCDfR4Gb5wYrIUZ_t ...

  3. 常见架构TLB miss处理方法（转）

    转自网站:http://blog.sina.com.cn/s/blog_633f462901018reb.html 0.       综述 总的来说TLB miss处理分为硬件处理和软件处理两种,硬件 ...

  4. python 知识 rstrip,strip,lstrip

    rstrip,strip,lstrip 作用:去除字符串中的空格或指定字符 一.默认用法:去除空格str.strip()  : 去除字符串两边的空格str.lstrip() : 去除字符串左边的空格s ...

  5. Extjs布局——layout: 'card'

    先看下此布局的特性: 下面演示一个使用layout: 'card'布局的示例(从API copy过来的)——导航面板(注:导航面板切换下一个或上一个面板实际是导航面板的布局--layout调用指定的方 ...

  6. Objective C 四舍五入,float处理

    NSLog(@"平方:%.f", pow(3,2) ); //result 9 NSLog(@"上舍入:%.f", ceil(3.000000000001)); ...

  7. hdu 3682

    将每个格子标记为 x*n*n+y*n+z  每个格子会有一个独特的编号  将它放入vector中  去重  我一开始用 set 超时 #include <cstdio> #include ...

  8. POJ3282+模拟

    模拟题 /* 模拟 注意:相同一边的车有先后顺序! */ #include<stdio.h> #include<string.h> #include<stdlib.h&g ...

  9. mvc学习

    视频: http://edu.51cto.com/index.php?do=lession&id=14581 博客: http://www.cnblogs.com/chsword/archiv ...

  10. [itint5]两有序数组的交和并

    这一题也简单,唯一有意思的地方是提炼了一个函数用来做数组索引去重前进. int forward(vector<int> &arr, int i) { while (i+1 < ...