jQuery - 元素遍历

孤人 提交于 2019-11-30 08:53:24

什么是遍历:

jQuery 遍历,意为"移动",用于根据其相对于其他元素的关系来"查找"(或选取)HTML 元素。以某项选择开始,并沿着这个选择移动,直到抵达您期望的元素为止。
下图展示了一个家族树。通过 jQuery 遍历,能够从被选(当前的)元素开始,轻松地在家族树中向上移动(祖先),向下移动(子孙),水平移动(同胞)。这种称为对DOM进行遍历。
Alt
JQuery的遍历方法最大的种类就是树的遍历

jQuery遍历-- 祖先

通过jQuery能够向上遍历DOM树,查找元素的祖先

1.parent()

  parent()方法返回被选元素的直接父元素,该方法只会向上一级对DOM树进行遍历

例子: 返回每个元素的直接父元素

$(document).ready(function(){
    $("span").parent();
})

2.parents()

  parents() 方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素(<html>)

例子: 返回所有 元素的所有祖先

$(document).ready(function(){
    $("span").parents("ul");
})

Alt
3.parentsUntil()

方法返回介于两个给定元素之间的所有祖先元素

例子: 返回介于

元素之间的所有祖先元素

$(document).ready(function(){
   $("span").parentsUntil("div");
})

结果:
Alt

jQuery遍历–后代:

后代是子 ,孙,曾孙 等

通过jQuery,我们可以向下遍历DOM树,以查找元素的后代

1.children()

方法返回被选元素的所有直接子元素,只会对最近的下一级Dom树进行遍历

例子:返回每个

元素的所有直接子元素:

$(document).ready(function(){
    $("div").children();
 })

也可以使用参数来过滤子元素

例子: 返回所有类名为"1" 的所有

元素,并且他们是

的直接子元素

$(document).ready(function(){
  $("div").children("p.1");
})

2.find()

返回被选元素的后代元素,一路向下直到最后一代

例子: 返回属于

后代的所有标签

$(document).ready(function(){
   $("div").find("span");
})

jQuery遍历–兄弟

兄弟之间拥有相同的父元素,通过jQuery能够在DOM树中遍历元素的同胞元素

在DOM树中水平遍历

1.siblings() 方法 返回被选元素的所有同胞元素

实例: 返回<h2>的所有兄弟元素

$(documen).ready(function(){
    $("h2").siblings();
})

1.1可以使用参数来过滤对兄弟元素的选择

例子: 返回属于<h2>同胞元素的所有<p>元素


$(document).ready(function(){
    $("h2").siblings("p");
})

2. next()方法

该方法返回被选元素的下一个同胞元素,该方法只返回一个元素

例子: 下面的例子返回 <h2>的下一个兄弟元素

$(document).ready(function(){
    $("h2").next();
})

3.nextAll()方法 返回被选元素的所有跟随的兄弟元素

例子: 返回<h2>的所有跟随的兄弟元素

$(document).ready(function(){
    $("h2").nextAll();
})

4.nextUntil() 方法 返回介于两个给定参数之间的所有跟随的兄弟元素

例子:返回介于<h2><h6>元素之间的所有兄弟元素

$(document).ready(function(){
    $("h2").nextUntil("h6");
})

5.prev() 方法返回前面的兄弟元素,和next()方法的使用一样
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_30631063/article/details/103190333
————————————————
版权声明:本文为CSDN博主「赫于富」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/qq_30631063/article/details/103190333

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!