举例讲解jQuery对DOM元素的向上遍历、向下遍历和水平遍历
一、jQuery的向下遍历
rush:xhtml;">
hello world
div1{
width:500px;
height:200px;
border:3px solid coral;
}
div2{
width:400px;
height:150px;
margin-top:10px;
margin-left:10px;
border: 3px solid coral;
}
p1{
margin-left:10px;
margin-top:10px;
width:150px;
height:80px;
border:3px solid coral;
}
1.children()方法的元素遍历
rush:js;">
$(document).ready( function (){
$("#div1").children().css({border:"3px solid black"});
});
可以看到此时div1的儿子div2的边框颜色变成了黑色。
2.find()方法的元素遍历
rush:js;">
$(document).ready( function (){
$("#div1").find("a").css({border:"3px solid grey"});
});
可以看到此时div1的重孙子a元素出现了灰色边框。、
.children()与.find()方法的区别是:children只能对元素的儿子元素进行修改,而find则可以对其所有的子元素进行修改。
二、jQuery的向上遍历
顾名思义,向上遍历就是从子集找到父集。
rush:js;">
.parent()
$(document).ready( function (){
$("#div2").parent().css({border:"3px solid black"});
});
div2的父元素div1边框发生了改变
rush:js;">
.parents()
$(document).ready( function (){
$("a").parents().css({border:"3px solid grey"});
});
a元素除外,a元素的所有父级元素都发生了改变
rush:js;">
.parentUntil()
$(document).ready( function (){
$("a").parentsUntil("#div1").css({border:"3px solid grey"})
});
从a元素到div1元素之前的元素边框发生了改变。
三个方法的区别是,.parent()只能向上遍历一层;.parents()则可以指定父级元素的id进行跨越遍历;.parentUntil()则具有区间性质,将会遍历包含于区间中的所有元素。
三、遍历 - 同级(兄弟)
同级元素拥有相同的父级元素。
在 DOM 树中水平遍历。
有许多有用的方法让我们在 DOM 树进行水平遍历:
- siblings()
- next()
- nextAll()
- nextUntil()
- prev()
- prevAll()
- prevUntil()
1.JQuery siblings()
siblings() 方法返回被选元素的所有同胞元素。
rush:js;">
$(document).ready(function () {
//
获取h1
标签的所有同级元素
var elem = $('h1').siblings();
console.log(elem); // p p
});
2.JQuery next()
next() 方法返回被选元素的下一个同胞元素
rush:js;">
$(document).ready(function () {
//
获取h1
标签的下
一个同级元素
var elem = $('h1').next();
console.log(elem); // p
});
3.JQuery nextAll()
nextAll() 方法返回被选元素的所有跟随的同胞元素。
rush:js;">
$(document).ready(function () {
//
获取p
标签的后面的所有同级元素
var elem = $('p').nextAll();
console.log(elem); // p
});
4.JQuery nextUntil()
nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。
rush:js;">
$(document).ready(function () {
//
获取
var elem = $('h1').nextUntil('h2');
console.log(elem); // p p
});
5.JQuery prev() & prevAll() & prevUntil()
prev(),prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似,只不过方向相反而已:它们返回的是前面的同级元素(在 DOM 树中沿着同胞元素向后遍历,而不是向前)。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。