版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/miao_9/article/details/73883445
jQuery 遍历函数包括了用于筛选、查找和串联元素的方法。
向下遍历方法
- .children() 获得匹配元素集合中每个元素的所有子元素;
- .find() 获得当前匹配元素集合中每个元素的后代,由选择器进行筛选;
style.css 设置样式
#div1{
width:500px;
height:200px;
border:3px solid fuchsia;
}
#div2{
width:400px;
height: 150px;
margin-top:10px;
margin-left:10px;
border:3px solid fuchsia;
}
p{
margin-left:10px;
margin-top:10px;
width:150px;
height:80px;
border:3px solid fuchsia;
}
TraversingDown.html
<div id="div1">div1
<div id="div2">div2
<p>
<a>
hello
</a>
</p>
</div>
</div>
TraversingDown.js
/*
向下遍历的方法
* children
* find*/
$(document).ready(function () {
$("#div1").children("p").css({ //#div2是可选参数,只能是下一级,不能越级
border:"3px solid red"
});
// $("#div1").find("a").css({ //p是必选参数,可以是任一层级
// border:"3px solid red"
// });
});
向上遍历方法
- .parent() 获得当前匹配元素集合中每个元素的父元素,由选择器筛选(可选)。
- .parents() 获得当前匹配元素集合中每个元素的祖先元素,由选择器筛选(可选)。
- .parentsUntil() 获得当前匹配元素集合中每个元素的祖先元素,直到遇到匹配选择器的元素为止。
TraversingUp.html
<div id="div1">div1
<div id="div2">div2
<p>
<a>
hello
</a>
</p>
</div>
</div>
TraversingUp.js
/*
* 向上遍历的方法
* parent()
* parents()
* parentsUntil()
* */
$(document).ready(function () {
// $("a").parent().css({border:"3px solid red"}) //只能指向向上一级的父级元素;
// $("a").parents().css({border:"3px solid red"}) //向上遍历所有的父级元素,也可设置参数指定;
$("a").parentsUntil("#div1").css({border:"3px solid red"}) //指定区间;
});
同级遍历
- siblings() 获得匹配元素集合中所有元素的同辈元素,由选择器筛选(可选)。
- next() 获得匹配元素集合中每个元素紧邻的同辈元素。
nextAll() 获得匹配元素集合中每个元素之后的所有同辈元素,由选择器进行筛选(可选)。
nextUntil() 获得每个元素之后所有的同辈元素,直到遇到匹配选择器的元素为止。
- prev() 获得匹配元素集合中每个元素紧邻的前一个同辈元素,由选择器筛选(可选)。
- prevAll()获得匹配元素集合中每个元素之前的所有同辈元素,由选择器进行筛选(可选)。
- prevUntil()获得每个元素之前所有的同辈元素,直到遇到匹配选择器的元素为止。
过滤
- first()将匹配元素集合缩减为集合中的第一个元素。
- not()从匹配元素集合中删除元素。
- last()将匹配元素集合缩减为集合中的最后一个元素。
- filter()将匹配元素集合缩减为匹配选择器或匹配函数返回值的新元素。
- eq() 将匹配元素集合缩减为位于指定索引的新元素。
函数 | 描述 |
---|---|
.add() | 将元素添加到匹配元素的集合中。 |
.andSelf() | 把堆栈中之前的元素集添加到当前集合中。 |
.children() | 获得匹配元素集合中每个元素的所有子元素。 |
.closest() | 从元素本身开始,逐级向上级元素匹配,并返回最先匹配的祖先元素。 |
.contents() | 获得匹配元素集合中每个元素的子元素,包括文本和注释节点。 |
.each() | 对 jQuery 对象进行迭代,为每个匹配元素执行函数。 |
.end() | 结束当前链中最近的一次筛选操作,并将匹配元素集合返回到前一次的状态。 |
.eq() | 将匹配元素集合缩减为位于指定索引的新元素。 |
.filter() | 将匹配元素集合缩减为匹配选择器或匹配函数返回值的新元素。 |
.find() | 获得当前匹配元素集合中每个元素的后代,由选择器进行筛选。 |
.first() | 将匹配元素集合缩减为集合中的第一个元素。 |
.has() | 将匹配元素集合缩减为包含特定元素的后代的集合。 |
.is() | 根据选择器检查当前匹配元素集合,如果存在至少一个匹配元素,则返回 true。 |
.last() | 将匹配元素集合缩减为集合中的最后一个元素。 |
.map() | 把当前匹配集合中的每个元素传递给函数,产生包含返回值的新 jQuery 对象。 |
.next() | 获得匹配元素集合中每个元素紧邻的同辈元素。 |
.nextAll() | 获得匹配元素集合中每个元素之后的所有同辈元素,由选择器进行筛选(可选)。 |
.nextUntil() | 获得每个元素之后所有的同辈元素,直到遇到匹配选择器的元素为止。 |
.not() | 从匹配元素集合中删除元素。 |
.offsetParent() | 获得用于定位的第一个父元素。 |
.parent() | 获得当前匹配元素集合中每个元素的父元素,由选择器筛选(可选)。 |
.parents() | 获得当前匹配元素集合中每个元素的祖先元素,由选择器筛选(可选)。 |
.parentsUntil() | 获得当前匹配元素集合中每个元素的祖先元素,直到遇到匹配选择器的元素为止。 |
.prev() | 获得匹配元素集合中每个元素紧邻的前一个同辈元素,由选择器筛选(可选)。 |
.prevAll() | 获得匹配元素集合中每个元素之前的所有同辈元素,由选择器进行筛选(可选)。 |
.prevUntil() | 获得每个元素之前所有的同辈元素,直到遇到匹配选择器的元素为止。 |
.siblings() | 获得匹配元素集合中所有元素的同辈元素,由选择器筛选(可选)。 |
.slice() | 将匹配元素集合缩减为指定范围的子集。 |