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. nodejs的模块系统（实例分析exprots和module.exprots）

    前言:工欲善其事,必先利其器.模块系统是nodejs组织管理代码的利器也是调用第三方代码的途径,本文将详细讲解nodejs的模块系统.在文章最后实例分析一下exprots和module.exprots ...

  2. C# 白话系列之——白话委托

    今天看到首页有个委托的文章,但大都写的太专业,而且没有实用的例子场景.正好昨天做了一个有关委托的功能,所以也来凑个热闹,用白话掰掰 一.委托是什么 我们都知道数据类型,简单点的如,想给一个变量赋值整数 ...

  3. MYsqli 绑定插入与查询实例

    <?php $conn = new mysqli('localhost','root','','orders'); //连接 $prepare = "insert into t100 ...

  4. TWaver3D入门探索——3D拓扑图之绽放的小球花

    这样一簇绚烂丰满艳丽多姿的3D小球花,要多少代码才能完成?其实不足百行,您信吗?下面咱就看一下具体实现过程,让您分分钟学会用TWaver HTML5制作3D拓扑图. 搭建3D空间 首先为花簇的绽放建一 ...

  5. Svg 画图(电池)

    公司现在在做充电桩项目,其中要显示充电桩的电池充电情况,功能展示的时候要画图,之前做的时候准备使用HightChar来画,但是,hightchar好像没有这样的电池图形,最后,项目经理要我自己通过sv ...

  6. Contest2037 - CSU Monthly 2013 Oct (problem B ：Scoop water)

    http://acm.csu.edu.cn/OnlineJudge/problem.php?cid=2037&pid=1 [题解]:卡特兰数取模 h(n) = h(n-1)*(4*n-2)/( ...

  7. hdu 4722 Good Numbers（规律题）

    http://acm.hdu.edu.cn/showproblem.php?pid=4722 [题意]: 找GoodNumbers一个数N,如果它每一个位数字之和可以整除10,那么它就是GoodNum ...

  8. 使用Docker解决同一服务器运行不同版本PHP方案。

    前言: 最近公司有两个站点,分别是两种系统进行二次开发,基于LNMP架构的网站.一般想PHP这种非编译型语言想要对外出售源码都会进行加密,加密方法有很多种,大部分都是使用Zend Guard来进行加密 ...

  9. Matlab中rand('state',sum(clock))解析

    一.问题来源 来自于一份PSO代码,PSO中需要初始化粒子位置和速度. 二.问题探究 众所周知,Matlab中的rand()函数产生的是伪随机数,但一般用来也可以接受.但是,如果我们知道伪随机数的初始 ...

  10. [转载]在網頁上加入HTML5 的Video Tag，直接播放MP4、OGG…等

    在之前有一篇文章提到HTML5(為何iPhone,iPod,iPad不支援Flash,HTML5將更普及於網路世界!!)的重要性,而Html 5的主要革新是在他的語意標籤,像是<video> ...