jQuery 遍历
一、遍歷大體分三種情況：? 遍歷祖先、后代、同輩
? ?1）、遍歷祖先用到的方法：
? ? ? ?1、parent()：返回距離指定元素最近的也是直接的父級元素。即父元素
? ? ? ?2、parents()：返回指定元素的所有父級元素。即父元素、祖父元素、曾祖父元素
? ? ? ?3、parents(” 元素名 “)：返回指定元素的父級元素中指定的父級元素
4、parentsUntil()：返回介于給定兩個元素之間的所有父級元素。即返回的父級元素中有很多個，但是只返回其中一部分而不是全部。
?
2）、遍歷后代用到的方法：
? ? ? ? 1、children()：返回指定元素的所有子集元素，即靠近指定元素最近的子集元素，而不是所有子集元素
2、find(" 元素名 ")：返回指定元素指定的后代元素。
3、find(" * ")：返回指定元素的所有后代元素。?切忌沒有?findAll()?這種方法的說法
?
3）、遍歷同輩用到的方法：
1、siblings()：返回指定元素的所有同輩元素
2、siblings(" 元素名 ")：返回指定元素的同輩元素中指定的元素。
3、next()：返回指定元素的同輩元素中的后面一個（緊跟著的）。返回值只有一個
4、nextAll()：返回指定元素的同輩元素中所有同輩元素。
5、nextUntil()：返回指定的兩個同輩元素中間的所有同輩元素。
6、prev()：回指定元素的緊挨著的前面一個同輩元素
7、?prevAll()：返回指定元素的所有前面的同輩元素
8、prevUntil()：返回指定元素的同輩元素的前面的所有元素。
?
二、html源碼部分
?
<body class="ancestors">body (曾曾祖父元素)<div style="width:500px;">div (曾祖父元素)
<ul>ul (祖父元素)
<li class="demo">li (父元素)
<span>span</span>
<b>b b</b>
<i>i</i>
<p>pp</p>
<div class="box">div</div>
</li>
</ul>
</div>
<div style="width:500px;">div (曾祖父元素)
<ul>ul (祖父元素)
<li>li (父元素)
<span>span</span>
</li>
</ul>
</div>
</body>
</body>
?
三、js部分：
1、遍歷祖先：
<script>// 遍歷祖先
$(document).ready(function(){
// parent是指距離最近的即直接的父級元素；parents是指所有的父級包括祖父，曾祖父，曾曾祖父
$("span").parents().css({"color":"red","border":"1px solid red"});
// 返回span的所有祖先，且是ul
$("span").parents("ul").css({"color":"blue","border":"1px solid blue"})
// 返回介于給定的兩個元素之間的所有父級元素
$("span").parentsUntil("div").css({"color":"green","border":"1px solid green"});
});
</script>
2、遍歷后代：
<script>//遍歷后代
$(document).ready(function(){
// children() 方法返回被選元素的所有直接子元素。即靠近div最近的元素不是所有子元素
$("div").children().css({"color":"red"});
// 返回類名為 "demo" 的所有 <li> 元素，并且它們是 <ul> 的直接子元素：
$("ul").children("li.demo").css({"color":"green"});
// find() 方法返回指定元素的指定的后代元素
$("div").find("span").css({"color":"blue"});
// find(“*”) 方法返回所有的后代元素
$("div").find("*").css({"color":"yellow"});
});
</script>
?
3、遍歷同輩：
?
<script>//遍歷同胞
$(document).ready(function () {
//siblings()方法 ：返回指定元素的所有同輩元素
$("i").siblings().css({"color": "red"});
// 返回屬于 <i> 的同胞元素中所有 <span> 元素：
$("i").siblings("span").css({"color": "blue"});
// next() 方法:返回指定元素的同輩元素中的后面一個（緊跟著的）。
$("i").next().css({"color": "#f0f"});
// nextAll() 方法返回指定元素的所有跟隨的同輩元素。
$("span").nextAll().css({"color": "#f00f"});
// nextUntil() 方法返回介于兩個給定參數之間的所有跟隨的同胞元素。
$("span").nextUntil("p").css({"color": "#00c6ff"});
// prev()方法返回指定元素的緊挨著的前面一個同輩元素
$("p").prev().css({"color":"green"});
// prevAll()方法返回指定元素的所有前面的同輩元素
$("div").prevAll().css({"color":"blue"});
// prevUntil()方法:返回指定元素的同輩元素的前面的所有元素
$(".box").prevUntil().css({"color":"yellow"});
});
</script>
?
轉載于:https://www.cnblogs.com/LindaBlog/p/9212606.html
總結
- 上一篇： 【软件构造】（转） 设计模式
- 下一篇： uri和url的区别