jQuery基础(二)—DOM篇——遍历

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>