1、jQuery遍历之children()方法
.children(selector) 方法是返回匹配元素集合中每个元素的所有子元素(仅儿子辈,这里可以理解为就是父亲-儿子的关系)
理解节点查找关系:
<div class="div">
<ul class="son">
<li class="grandson">1</li>
</ul>
</div>
代码如果是$("div").children(),那么意味着只能找到ul,因为div与ul是父子关系,li与div是祖辈关系,因此无法找到。
http://js.jirengu.com/figehirape/1/
2、jQuery遍历之find()方法
children是父子关系查找,find是后代关系(包含父子关系)
<div class="div">
<ul class="son">
<li class="grandson">1</li>
</ul>
</div>
代码如果是$("div").find("li"),此时,li与div是祖辈关系,通过find方法就可以快速的查找到了。
如果我们需要实现对所有后代元素的取回,可以传递通配选择器 '*'。
注意重点:
.find()和.children()方法是相似的
1.children只查找第一级的子节点
2.find查找范围包括子节点的所有后代节点
http://js.jirengu.com/nisuponone/1/
3、jQuery遍历之parent()方法
http://js.jirengu.com/hupekibela/1/
4、jQuery遍历之closest()方法
http://js.jirengu.com/jinedawudo/1/
粗看.parents()和.closest()是有点相似的,都是往上遍历祖辈元素,但是两者还是有区别的,否则就没有存在的意义了
1、起始位置不同:.closest开始于当前元素 .parents开始于父元素
2、遍历的目标不同:.closest要找到指定的目标,.parents遍历到文档根元素,closest向上查找,直到找到一个匹配的就停止查找,parents一直查找到根元素,并将匹配的元素加入集合
3、结果不同:.closest返回的是包含零个或一个元素的jquery对象,parents返回的是包含零个或一个或多个元素的jquery对象
5、jQuery遍历之next()方法
http://js.jirengu.com/kegocazafo/1/
6、jQuery遍历之prev()方法
http://js.jirengu.com/saredicodo/1/
7、jQuery遍历之siblings()
快速查找指定元素集合中每一个元素的同辈元素,此时可以用siblings()方法
http://js.jirengu.com/vaziwulexe/1/
8、jQuery遍历之add()方法?????
http://js.jirengu.com/puhiririjo/1/
9、jQuery遍历之each()
http://js.jirengu.com/lusavetixi/1/
???
<script type="text/javascript">
$("button:last").click(function() {
//遍历所有的li
//修改偶数li内的字体颜色
$("li").each(function(index, element) {
if (index % 2) {
$(this).css('color','blue')
}
})
})
</script>