closest() 从元素本身开始，在DOM 树上逐级向上级元素匹配，并返回最先匹配的祖先元素

closest返回的是包含零个或一个元素的jquery对象，parents返回的是包含零个或一个或多个元素的jquery对象





$("button:first").click(function() {
          $('.item-1').closest('.level-2').css('border','1px solid red');  
    })
 




next() 查找指定元素集合中每一个元素紧邻的后面同辈元素的元素集合,jQuery是一个合集对象，所以通过next匹配合集中每一个元素的下一个兄弟元素




$("button:first").click(function() {
        $('.item-2').next('li').css('border','1px solid red');
    })


$("button:last").click(function() {
//找到所有class=item-3的li
//然后筛选出第一个li，加上蓝色的边
$('.item-2').next(':first').css('border', '1px solid blue')


})　　




prev() 快速查找指定元素集合中每一个元素紧邻的前面同辈元素的元素集合 




 $("button:last").click(function() {
        //找到所有class=item-2的li
        //然后筛选出最后一个，加上蓝色的边
       $('.item-3').prev(':last').css('border', '1px solid blue')
    })





　　


siblings() 快速查找指定元素集合中每一个元素的同辈元素




 $("button:first").click(function() {
        $('.item-2').siblings('li').css('border', '2px solid red')
    })





　　


add(),  $()之后就意味着这个合集对象已经是确定的，用add方法，用来创建一个新的jQuery对象 ，元素添加到匹配的元素集合中，并且对选中的元素统一处理。




$("button:first").click(function() {
         //把p元素添加到li的合集中,同时添加背景色
         $('li').add('p').css('background', 'red')
    })





　　还可以动态创建P标签加入到合集，然后插入到指定的位置，但是这样就改变元素的本身的排列了




$('li').add('<p>新的p元素2</p>').appendTo($('.right')).css('background', 'yellow')





　　


 .each() 方法就是一个for循环的迭代器，它会迭代jQuery对象合集中的每一个DOM元素。每次回调函数执行时，会传递当前循环次数作为参数(从0开始计数)


　　　index 索引 0,1
     element是对应的li节点 li,li
     this 指向的是li




$("button:last").click(function() {
        //遍历所有的li
        //修改偶数li内的字体颜色
        $("li").each(function(index, element) {
            if (index % 2) {
                $(this).css('color','blue')
            }
        })
    })





　　


 


可以在这样的结构下使用以上代码




<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" href="imooc.css" type="text/css">
    <style>
    .left {
        width: auto;
        height: 150px;
    }
    
    .left div {
        width: 150px;
        height: 100px;
        padding: 5px;
        margin: 5px;
        float: left;
        background: #bbffaa;
        border: 1px solid #ccc;
    }
    
    a {
        display: block;
    }
    </style>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
    <h2>siblings方法()</h2>
    <div class="left first-div">
        <div class="div">
            <ul class="level-1">
                <li class="item-1">1</li>
                <li class="item-2">2</li>
                <li class="item-3">3</li>
            </ul>
        </div>
        <div class="div">
            <ul class="level-2">
                <li class="item-1">1</li>
                <li class="item-2">2</li>
                <li class="item-3">3</li>
            </ul>
        </div>
        <div class="div">
            <ul class="level-3">
                <li class="item-1">1</li>
                <li class="item-2">2</li>
                <li class="item-3">3</li>
            </ul>
        </div>
    </div>
    <button>点击：siblingsv无参数</button>
    <button>点击：siblings传递选择器</button>
    <script type="text/javascript">
    $("button:first").click(function() {
        //?
    })
    </script>

    <script type="text/javascript">
    $("button:last").click(function() {
        //找到class=item-2的所有兄弟节点
        //然后筛选出最后一个，加上蓝色的边
       $('.item-2').siblings(':last').css('border', '2px solid blue')
    })
    </script>

</body>

</html>