举例讲解jQuery对DOM元素的向上遍历、向下遍历和水平遍历
一、jQuery的向下遍历
<scriptsrc="../JS/Extend.js"></script> <scriptsrc="../JS/my.js"></script> <linktype="text/css"rel="stylesheet"href="../CSS3/my.css"> </head> <body> <divid="div1"> <divid="div2"> <pid="p1"> <a>helloworld</a> </p> </div> </div> #div1{ width:500px; height:200px; border:3pxsolidcoral; } #div2{ width:400px; height:150px; margin-top:10px; margin-left:10px; border:3pxsolidcoral; } #p1{ margin-left:10px; margin-top:10px; width:150px; height:80px; border:3pxsolidcoral; }
1.children()方法的元素遍历
$(document).ready(function(){ $("#div1").children().css({border:"3pxsolidblack"}); });
可以看到此时div1的儿子div2的边框颜色变成了黑色。
2.find()方法的元素遍历
$(document).ready(function(){ $("#div1").find("a").css({border:"3pxsolidgrey"}); });
可以看到此时div1的重孙子a元素出现了灰色边框。、
.children()与.find()方法的区别是:children只能对元素的儿子元素进行修改,而find则可以对其所有的子元素进行修改。
二、jQuery的向上遍历
顾名思义,向上遍历就是从子集找到父集。
.parent() $(document).ready(function(){ $("#div2").parent().css({border:"3pxsolidblack"}); });
div2的父元素div1边框发生了改变
.parents() $(document).ready(function(){ $("a").parents().css({border:"3pxsolidgrey"}); });
a元素除外,a元素的所有父级元素都发生了改变
.parentUntil() $(document).ready(function(){ $("a").parentsUntil("#div1").css({border:"3pxsolidgrey"}) });
从a元素到div1元素之前的元素边框发生了改变。
三个方法的区别是,.parent()只能向上遍历一层;.parents()则可以指定父级元素的id进行跨越遍历;.parentUntil()则具有区间性质,将会遍历包含于区间中的所有元素。
三、遍历-同级(兄弟)
同级元素拥有相同的父级元素。
在DOM树中水平遍历。
有许多有用的方法让我们在DOM树进行水平遍历:
- siblings()
- next()
- nextAll()
- nextUntil()
- prev()
- prevAll()
- prevUntil()
1.JQuerysiblings()
siblings()方法返回被选元素的所有同胞元素。
<section> <h1>文章的<span>标题</span>啦</h1> <p>文章的内容内容内容内容内容内容</p> <p>结尾部分</p> </section>
$(document).ready(function(){ //获取h1标签的所有同级元素 varelem=$('h1').siblings(); console.log(elem);//pp });
2.JQuerynext()
next()方法返回被选元素的下一个同胞元素
<section> <h1>文章的<span>标题</span>啦</h1> <p>文章的内容内容内容内容内容内容</p> <p>结尾部分</p> </section>
$(document).ready(function(){ //获取h1标签的下一个同级元素 varelem=$('h1').next(); console.log(elem);//p });
3.JQuerynextAll()
nextAll()方法返回被选元素的所有跟随的同胞元素。
<section> <h1>文章的<span>标题</span>啦</h1> <p>文章的内容内容内容内容内容内容</p> <p>结尾部分</p> </section>
$(document).ready(function(){ //获取p标签的后面的所有同级元素 varelem=$('p').nextAll(); console.log(elem);//p });
4.JQuerynextUntil()
nextUntil()方法返回介于两个给定参数之间的所有跟随的同胞元素。
<section> <h1>文章的<span>标题</span>啦</h1> <p>文章的内容内容内容内容内容内容</p> <p>结尾部分</p> <h2>重点注意</h2> </section>
$(document).ready(function(){ //获取 varelem=$('h1').nextUntil('h2'); console.log(elem);//pp });
5.JQueryprev()&prevAll()&prevUntil()
prev(),prevAll()以及prevUntil()方法的工作方式与上面的方法类似,只不过方向相反而已:它们返回的是前面的同级元素(在DOM树中沿着同胞元素向后遍历,而不是向前)。