一、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"});
});
可以看到此時(shí)div1的兒子div2的邊框顏色變成了黑色。
2.find()方法的元素遍歷
$(document).ready( function (){
$("#div1").find("a").css({border:"3px solid grey"});
});
可以看到此時(shí)div1的重孫子a元素出現(xiàn)了灰色邊框。、
.children()與.find()方法的區(qū)別是:children只能對(duì)元素的兒子元素進(jìn)行修改，而find則可以對(duì)其所有的子元素進(jìn)行修改。
二、jQuery的向上遍歷
顧名思義，向上遍歷就是從子集找到父集。
.parent()
$(document).ready( function (){
$("#div2").parent().css({border:"3px solid black"});
});
div2的父元素div1邊框發(fā)生了改變
.parents()
$(document).ready( function (){
$("a").parents().css({border:"3px solid grey"});
});
a元素除外，a元素的所有父級(jí)元素都發(fā)生了改變
.parentUntil()
$(document).ready( function (){
$("a").parentsUntil("#div1").css({border:"3px solid grey"})
});
從a元素到div1元素之前的元素邊框發(fā)生了改變。
三個(gè)方法的區(qū)別是，.parent()只能向上遍歷一層；.parents()則可以指定父級(jí)元素的id進(jìn)行跨越遍歷；.parentUntil()則具有區(qū)間性質(zhì)，將會(huì)遍歷包含于區(qū)間中的所有元素。
三、遍歷 - 同級(jí)（兄弟）
同級(jí)元素?fù)碛邢嗤母讣?jí)元素。
在 DOM 樹中水平遍歷。
有許多有用的方法讓我們?cè)?DOM 樹進(jìn)行水平遍歷：
siblings()
next()
nextAll()
nextUntil()
prev()
prevAll()
prevUntil()
1.JQuery siblings()
siblings() 方法返回被選元素的所有同胞元素。
<section>
<h1>文章的<span>標(biāo)題</span>啦</h1>
<p>文章的內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容</p>
<p>結(jié)尾部分</p>
</section>
$(document).ready(function () {
// 獲取h1標(biāo)簽的所有同級(jí)元素
var elem = $('h1').siblings();
console.log(elem); // p p
});
2.JQuery next()
next() 方法返回被選元素的下一個(gè)同胞元素
<section>
<h1>文章的<span>標(biāo)題</span>啦</h1>
<p>文章的內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容</p>
<p>結(jié)尾部分</p>
</section>
$(document).ready(function () {
// 獲取h1標(biāo)簽的下一個(gè)同級(jí)元素
var elem = $('h1').next();
console.log(elem); // p
});
3.JQuery nextAll()
nextAll() 方法返回被選元素的所有跟隨的同胞元素。
<section>
<h1>文章的<span>標(biāo)題</span>啦</h1>
<p>文章的內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容</p>
<p>結(jié)尾部分</p>
</section>
$(document).ready(function () {
// 獲取p標(biāo)簽的后面的所有同級(jí)元素
var elem = $('p').nextAll();
console.log(elem); // p
});
4.JQuery nextUntil()
nextUntil() 方法返回介于兩個(gè)給定參數(shù)之間的所有跟隨的同胞元素。
<section>
<h1>文章的<span>標(biāo)題</span>啦</h1>
<p>文章的內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容</p>
<p>結(jié)尾部分</p>
<h2>重點(diǎn)注意</h2>
</section>
$(document).ready(function () {
// 獲取
var elem = $('h1').nextUntil('h2');
console.log(elem); // p p
});
5.JQuery prev() & prevAll() & prevUntil()
prev(), prevAll() 以及 prevUntil() 方法的工作方式與上面的方法類似，只不過方向相反而已：它們返回的是前面的同級(jí)元素（在 DOM 樹中沿著同胞元素向后遍歷，而不是向前）。
公眾號(hào)
事業(yè)單位
當(dāng)前位置：
公考類
招聘類
各類考試