jq的选择器 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jq里的操作 - 遍历</title>
</head>
<body>
    <div>1</div>
</body>
    <script type="text/javascript">
    // 1 add(); add() 方法将元素添加到匹配元素的集合中
        $('div').css('border','2px solid red')
                        .add('p')
                        .css('background','yellow');

    // 2. children()  find() 和 children 类似 不过后者只沿着DOM树向下遍历单一层级
        $('div').children('.selected').css('color','blue');

    // 3. cloest() 方法获得匹配选择器的第一个祖先元素，从当前元素沿DOM树向上

    // 4. 找到段落中所有的文本节点， 并用粗体标签包装他们
    //     contents() 方法获得匹配元素集合中每个元素的子节点，包括文本和注释节点
         $('p').contents().filter(function(){return this.nodeType != 1;}).wrap('<b/>');

         $('.container').contents().filter(fucntion(){
             return this.nodeType == 3;
         })
             .wrap('<p></P>')
             .end()
             .filter('br')
             .remove();
    // .contents() 和 children()方法类似  不同的是前者在结果jquery对象中包含了文本节点以及html 元素

    // 5. each()
        $('button').click(function(){
            $('li').each(function(){
                alert($(this).text())
            });
        });

    // each的点击事件
        mydd = $('.plist');
        mydd.each(function(i){
            $(this).click(function(){
                mydd.eq(i).css('background','#000');
            })
        })

    //6. end() 方法结束当前链条中的最近的筛选操作，并将匹配元素还原为之前的状态

    // 选择所有段落，找到这些段落中的span元素, 然后将它们恢复为段落，并把段落设置为两像素的红色边框

        $('p').find('span').end().css('border','2px solid red')

    //7 .eq() 方法将匹配元素集缩到制定的index 上的一个
        $('li').eq(2).css('background-color','red');
        $('li').eq(-2).css('background-color','red');  //负数表示从末尾开始算

    // 8. filter() 

        $('div').css('background','#fff')
                        .filter('.middle')
                        .css('border-color','red')

        $('li').filter(':even').css('background-color','red');

        $('li').filter(function(index){
            return $('strong',this).length == 1;
        }).css('background-color','red');

    // 9.find()

        var item1 = $('li.item-1')[0];
        $('li.item-li').find(item1).css('background-color','red');

    // 10.has() 检查某个元素是否在另一个元素中

        $('ul').append("<li>" + ($('ul').has('li').length ? "yes" : 'no')  + "</li>");
        $('ul').has('li').addClass('full');

    // 11. is()
    //    返回false  因为input的元素的父元素是p元素
    
        var isFormParent = $('input[type = "checkbox"').parent().is('form');

    // 12 .map();
    // map() 把每个元素通过函数传递到当前匹配集合中，生成包含新返回值的新的jqery对象

    $('p').append($('input').map(function(){
        return $(this).val();
    }).get().join(","));

    $('p').append($(':checkbox').map(function(){
        return this.id;
    }).get().join(','));

    // 13 .next();
    // 查找每个段落中的下一个同胞元素, 仅选中类名为'selected'的段落

        $('p').next(".selected").css('background','yellow');

    // 14 .nextAll();
    //    查找第一个div之后的所有类名，并为他们添加类名
        $('div:first').nextAll().addClass("after");

    // 15 .nextUntil 获得每个元素所有跟随的同胞元素，但不包括被选择器和jqury对象匹配的元素  直到什么为止

        $('#term-2').nextUntil('dt').css('background-color','red');

    // 16 .not() 从包含所有段落中的集合中删除id为 "selected" 的段落

        $('p').not("#selected")

    // 17. parent() 当前元素的父元素  parents 当前元素的祖先元素


    //18 .parentsUntil(a)  获取到当前匹配元素集合中每个元素的祖先元素，直到 a 为止
    $('li.item-a').parentUntil(".leval-1")
                                .css('background-color','red')

    // 19.检索每个段落，找到类名为 "selected" 的前一个同胞元素：

        $("p").prev(".selected")

    //20. 定位最后一个 div 之前的所有 div，并为它们添加类：

        $("div:last").prevAll().addClass("before");

    //21. prevUntil() 方法

        $("#term-2").prevUntil("dt").css("background-color", "red");

    // 22. 查找每个 p 元素的所有类名为 "selected" 的所有同胞元素：

        $('p').siblings('.selected')

    //选中所有段落，然后将所选内容缩减为只包含第一和第二个段落：

    $("p").slice(0, 2).wrapInner("");
    $('p').slice(2,4).css('background-color','red')

    </script>
</html>

 

请使用手机"扫一扫"x

posted @ 2017-08-03 14:40  金桔柠檬茶  阅读(138)  评论(0)  编辑  收藏  举报