JQuery遍历

1.祖先
通过JQuery能够向上遍历DOM树，以查找元素的祖先
parent()方法
返回被选元素的直接父元素只会对上一级的DOM树元素进行遍历

<html>
<head>
    <style>
        .ancestors *{
            display:block;
            border:2px solid lightgrey;
            color:lightgray;
            padding:5px;
            margin:15px;
        }
    </style>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
    <script>
        $(document).ready(function () {
            $("span").parent().css({"color":"red","border":"2px solid red"});
            });
       
        </script>
</head>

<body>

    <div class="ancestors">
        <div style="width:50px;">
</div>(曾祖父)
        <ul>
            ul(祖父)
            <li>
                li(直接父)
                <span>
                    span
                </span>
            </li>
        </ul>
    </div>

</body>
</html>

JQuery遍历
parents()方法
返回所有的祖先元素
parentsUntil()方法
界定两个元素间所有的祖先元素
2.后代
children()返回被选元素的所有直接子元素
find()方法返回被选元素的后代元素，一直到最后一个后代
3.同胞
siblings方法：siblings() 方法返回被选元素的所有同胞元素。
jQuery next() 方法：返回被选元素的下一个同胞元素
nextAll()：返回被选元素的所有跟随的同胞元素
nextUntil：返回两个被选参数之间的所有跟随的元素

$(document).ready(function(){
  $("h2").nextUntil("h6");
});

jQuery prev(), prevAll() & prevUntil() 方法
prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素（在 DOM 树中沿着同胞元素向后遍历，而不是向前）。
JQuery过滤
三个最基本的过滤方法
first()

$(document).ready(function(){
  $("div p").first().css("background-color","yellow");
});

last()
eq()
eq() 方法返回被选元素中带有指定索引号的元素。
索引号从 0 开始，因此首个元素的索引号是 0 而不是 1。下面的例子选取第二个

元素（索引号 1）

<script>
$(document).ready(function(){
  $("p").eq(1).css("background-color","yellow");
});
</script>
</head>
<body>

<h1>欢迎来到我的主页</h1>
<p>我是唐老鸭 (index 0)。</p>
<p>唐老鸭 (index 1)。</p>
<p>我住在 Duckburg (index 2)。</p>
<p>我最好的朋友是米老鼠 (index 3)。</p>

</body>

注：这三个方法允许在一组元素中的指定位置来选择一个特定的元素
其他过滤方法，比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。
filter()
filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。
not()
not() 方法返回不匹配标准的所有元素

相关推荐