jquery---筛选总结

jQuery中筛选这块内容较多，就简单的说明一下说用方法和能有什么样效果，就不弄案例来说明了；

第一类：过滤

1.eq(index|-index)

        $("p").eq(1).css("color","red")//选取第几个p改变字体颜色

2.first()

        $("p").first().css("color","pink")//选取第一个p改变字体颜色

3.last()

        $("p").last().css("color","green")//选取最后一个p改变字体颜色

4.hasClass(class)

        $("p").click(function(){
            if($(this).hasClass("protected")){
                $(this).css("color","blue")
            }
          })
//  选取所有的p给当前p添加点击事件，给当前点击的p里面包含的protected类元素，添加字体颜色;

5.filter(expr|obj|ele|fn)

        $("p").filter(".selected").css("color","blue");//筛选class属性值为selected的p标签改变字体颜色;

6.is(expr|obj|ele|fn)

        //$("input[type='checkbox']").parent().is("form");//如果input[type='checkbox']的父元素是form，返回值true，或者添加方法;

7.map(callback)

        $("p").append($("input").map(function(){
           return $(this).val();
         }).get().join(", ") );
 //map():让每个input里的val值转换成数组,get():获取这些数组,join(, )并以逗号隔开，append():放置到p里的后方;

8.has(expr|ele)

        $('li').has('ul').css('background-color', 'red');//选取所有的li筛选出来里面包含ul元素的li保留下来改变背景色;

9.not(expr|ele|fn)

        $("p").not( $("#selected")[0] ).css("color","pink");//去除带有id名为selected的p，把其他的p改变字体颜色;

10.slice(start, [end])

        $("p").slice(0, 2).wrapInner("<b></b>");//获取所有的p，从0开始选取2个使其里边的内容被b包裹;

第二类：查找

11.children([expr])

        $("div").children().css("color","pink")//查找所有div中包含子元素的，改其字体颜色;

12.closest(expr,[context]|object|element)

        $("li:first").closest("html").css("background","pink");//选取第一个li向父元素查找一层一层找直到找到我们想要找的HTML元素;

13.find(expr|obj|ele)

        ("p").find("span").css("color","red");//选取p元素向后代元素查找。找到我们想要的span元素改其字体颜色;

14.next([expr])

        $("p").next().css("color","red");//选取p元素下边紧邻的兄弟元素改变字体颜色;

15.nextAll([expr])

        $("div:first").nextAll().addClass("after");//选取第一个div元素下边所有的兄弟元素添加class类名"after";

16.nextUntil([exp|ele][,fil])

        $('#term-2').nextUntil('dt').css('background-color', 'red');//选取id为term-2的元素之后dt之前的所有兄弟元素添加背景颜色;

17.offsetParent()

        $("button").click(function(){
            $("p").offsetParent().css("background-color","red");
         });
 //选取button添加点击事件，使其p元素找到带有定位的和最近的祖先元素添加背景色;

18.parent([expr])

        $("p").parent().css('background-color', 'red');//选取所有的p使其父元素添加背景颜色;

19.parents([expr])

        $("span").parents("body").css('background-color', 'red')//找到span元素的body祖先元素改变背景颜色；不包含根元素;

20.parentsUntil([expr|element][,filter])

        $('li.item-a').parentsUntil('.level-1').css('background-color', 'red');//选取li.item-a元素找到他的父元素或祖先元素直到找到.level-1的元素为止改变背景颜色;

21.prev([expr])

        $("p").prev().css('color', 'red')//选取p元素找到它前边紧邻的兄弟元素改变字体颜色;

22.prevAll([expr])

        $("div:last").prevAll().addClass("before");//选取最后一个div找到它所有前边的同辈元素添加类名和值before;

23.prevUntil([exp|ele][,fil])

        $('#term-2').prevUntil('dt').css('background-color', 'red');//选取#term-2的元素逐个往前找之前的兄弟元素直到知道到dt的元素他俩之间的兄弟元素给变背景颜色不包括他们两个元素;

24.siblings([expr])

        $("div").siblings().css("color","blue")//选取div的元素使它的同辈元素给变字体颜色;

第三类：串联

25.add(expr|ele|html|obj[,con])

        $("p").add("span").css("color","blue");//选取p元素add是和的意思就是说p和span;

26.andSelf()

        $("div").find("p").andSelf().addClass("border");//选取div下的所有p，andSelf()给之前选取的div和p都加上类名/值

27.contents()

        $("p").contents().not($("*")).wrap("<b/>");//查找p下边所有的子文本节点用b标签包裹起来；

28.end()

        $("p").find("span").addClass("span").end().addClass("p1");//选取p元素找到下边的span元素，给span加上类名/值，然后在返回p元素添加类名/值;

希望看到这篇博客的同事都能够工作顺利。