| 标题 | 举例讲解jQuery对DOM元素的向上遍历、向下遍历和水平遍历 |
| 内容 | 一、jQuery的向下遍历 <script src="../JS/Extend.js"></script> <script src="../JS/my.js"></script> <link type="text/css" rel="stylesheet" href="../CSS3/my.css"> </head> <body> <div id="div1"> <div id="div2"> <p id="p1"> <a>hello world</a> </p> </div> </div> #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()方法的元素遍历 $(document).ready( function (){ $("#div1").children().css({border:"3px solid black"}); }); 可以看到此时div1的儿子div2的边框颜色变成了黑色。 2.find()方法的元素遍历 $(document).ready( function (){ $("#div1").find("a").css({border:"3px solid grey"}); }); 可以看到此时div1的重孙子a元素出现了灰色边框。、 .children()与.find()方法的区别是:children只能对元素的儿子元素进行修改，而find则可以对其所有的子元素进行修改。 二、jQuery的向上遍历 顾名思义，向上遍历就是从子集找到父集。 .parent() $(document).ready( function (){ $("#div2").parent().css({border:"3px solid black"}); }); div2的父元素div1边框发生了改变 .parents() $(document).ready( function (){ $("a").parents().css({border:"3px solid grey"}); }); a元素除外，a元素的所有父级元素都发生了改变 .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() 方法返回被选元素的所有同胞元素。 <section> <h1>文章的<span>标题</span>啦</h1> <p>文章的内容内容内容内容内容内容</p> <p>结尾部分</p> </section> $(document).ready(function () { // 获取h1标签的所有同级元素 var elem = $('h1').siblings(); console.log(elem); // p p }); 2.JQuery next() next() 方法返回被选元素的下一个同胞元素 <section> <h1>文章的<span>标题</span>啦</h1> <p>文章的内容内容内容内容内容内容</p> <p>结尾部分</p> </section> $(document).ready(function () { // 获取h1标签的下一个同级元素 var elem = $('h1').next(); console.log(elem); // p }); 3.JQuery nextAll() nextAll() 方法返回被选元素的所有跟随的同胞元素。 <section> <h1>文章的<span>标题</span>啦</h1> <p>文章的内容内容内容内容内容内容</p> <p>结尾部分</p> </section> $(document).ready(function () { // 获取p标签的后面的所有同级元素 var elem = $('p').nextAll(); console.log(elem); // p }); 4.JQuery nextUntil() nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。 <section> <h1>文章的<span>标题</span>啦</h1> <p>文章的内容内容内容内容内容内容</p> <p>结尾部分</p> <h2>重点注意</h2> </section> $(document).ready(function () { // 获取 var elem = $('h1').nextUntil('h2'); console.log(elem); // p p }); 5.JQuery prev() & prevAll() & prevUntil() prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同级元素（在 DOM 树中沿着同胞元素向后遍历，而不是向前）。 |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。