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. jdbc mysql 取数，突然取不到数据，数据库中有数据

    项目用的是jdbc+mysql,局网取数据的时候,数据一切正常,但是传到服务器上以后,曾经是好的 不知道为什么,近期一传就取不到数据,发现android写的也没有问题,至少大体上没有语法问题. 跟踪后 ...

  2. 微软职位内部推荐-SENIOR PRODUCER

    微软近期Open的职位: Role Based in Shanghai, ChinaTitle: ProducerWe are seeking a Senior Producer to lead Pr ...

  3. ios 中定时器:NSTimer, CADisplayLink, GCD

    #import "ViewController.h" #import "RunloopViewController.h" @interface ViewCont ...

  4. JS两种声明函数的方法以及调用顺序

    两种声明方法: 1. var a = function () {...}; 2. function a() {...}; 第一种方式必须先声明后调用,而第二种方式函数调用在声明之前之后都可以. //第 ...

  5. HTML5 中的块级链接

    英文叫做 “Block-level” links,我以为只有我厂那些鸟毛不知道,没想到不知道的还挺多, 需要普及一下. 最近看了 kejun 的 PPT 前端开发理论热点面对面:从怎么看,到怎么做?, ...

  6. 用CSS截断字符串的两种实用方法

    方法一: 复制代码 代码如下: <div style="width:300px; overflow:hidden; text-overflow:ellipsis; white-spac ...

  7. PAT-乙级-1042. 字符统计(20)

    1042. 字符统计(20) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CHEN, Yue 请编写程序,找出一段给定文字中出现最 ...

  8. IDFA问题，苹果上传问题。improper Advertising identifier [IDFA] Usage.

    原地址: 报告 improper Advertising identifier [IDFA] Usage. Your app contains the Advertising Identifier [ ...

  9. Data transfer object

    Data transfer object (DTO) is a design pattern used to transfer data between software application su ...

  10. Grok debugger

    http://www.cnblogs.com/vovlie/p/4227027.html http://it.taocms.org/10/5802.htm