jQuery自適應輪播圖插件Swiper用法示例
1264
2024-02-20
一、jQuery的向下遍歷
<script src="http://www.gimoo.net/t/JS/Extend.js"></script>
<script src="http://www.gimoo.net/t/JS/my.js"></script>
<link type="text/css" rel="stylesheet" >
</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 樹中沿著同胞元素向后遍歷，而不是向前）。
