欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

舉例講解jQuery對DOM元素的向上遍歷、向下遍歷和水平遍歷

 更新時間：2016年07月07日 18:05:53   作者：onejustone  
使用jQuery可以更加容易地遍歷DOM的父級、子級和同級元素,這里我們就來舉例講解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元素出現(xiàn)了灰色邊框。、

.children()與.find()方法的區(qū)別是:children只能對元素的兒子元素進行修改，而find則可以對其所有的子元素進行修改。

二、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元素的所有父級元素都發(fā)生了改變

.parentUntil()
$(document).ready( function (){
  $("a").parentsUntil("#div1").css({border:"3px solid grey"})
});

從a元素到div1元素之前的元素邊框發(fā)生了改變。

三個方法的區(qū)別是，.parent()只能向上遍歷一層；.parents()則可以指定父級元素的id進行跨越遍歷；.parentUntil()則具有區(qū)間性質(zhì)，將會遍歷包含于區(qū)間中的所有元素。

三、遍歷 - 同級（兄弟）
同級元素擁有相同的父級元素。

在 DOM 樹中水平遍歷。

有許多有用的方法讓我們在 DOM 樹進行水平遍歷：

  • siblings()
  • next()
  • nextAll()
  • nextUntil()
  • prev()
  • prevAll()
  • prevUntil()

1.JQuery siblings()

siblings() 方法返回被選元素的所有同胞元素。

<section>
 <h1>文章的<span>標題</span>啦</h1>
 <p>文章的內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容</p>
 <p>結(jié)尾部分</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>文章的內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容</p>
 <p>結(jié)尾部分</p>
</section>

$(document).ready(function () {
 // 獲取h1標簽的下一個同級元素
 var elem = $('h1').next();
 console.log(elem); // p
});

3.JQuery nextAll()

nextAll() 方法返回被選元素的所有跟隨的同胞元素。

<section>
 <h1>文章的<span>標題</span>啦</h1>
 <p>文章的內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容</p>
 <p>結(jié)尾部分</p>
</section>


$(document).ready(function () {
 // 獲取p標簽的后面的所有同級元素
 var elem = $('p').nextAll();
 console.log(elem); // p
});

4.JQuery nextUntil()

nextUntil() 方法返回介于兩個給定參數(shù)之間的所有跟隨的同胞元素。

<section>
 <h1>文章的<span>標題</span>啦</h1>
 <p>文章的內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容</p>
 <p>結(jié)尾部分</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 樹中沿著同胞元素向后遍歷，而不是向前）。

相關(guān)文章

最新評論