jQuery选择器-CSDN博客

* jQuery和DOM

           //DOM和jQuery不可以使用对方的任何方法
            var h1 = $("#test").html();  
            var h2 = document.getElementById("test").innerHTML;

           //DOM和jQuery对象互转， 或者使用$j1.get(0);
            var $j1 = $("#test");
            var d1 = $j1[0];  

            var d2 = document.getElementById("test");
            var $j2 = $(d2);

* jQuery选择器

见上图

1.基本选择器

改变id为div1的所有div的背景色

$('#div1').css('background','#bbffaa');

改变所有p标签和class为one的div的背景色

$('p,.one').css('background','#bbffaa');

2. 层次选择器

2.1 css选择器

选取div里的所有span元素，包括子孙，相当$("div").find("span");

$('div span');

选取div下元素名是span的子元素，只是直接子元素, 相当$("div").children("span");

$('div > span');

选取class是one的下一个<div>同辈元素，同胞的下一个元素，相当$(".one").next("div");

$('.one + div');

选取class是one的后面的所有的<div>同辈元素, 所有的同胞元素,相当于$(".one").siblings("div");

$('.one ~ div');

2.2 jQuery遍历

- 祖先

            /*祖先:
            * 1、parent() 返回被选元素的直接父元素；
            * 2、parents() 所有祖先元素，直到文档的根元素；parents("ul")返回所有祖先元素并且是ul的元素；
            * 3、parentsUntil("div") 两个元素之间的所有祖先元素；
            * */
            $("p").parent().css({border:"2px solid red", color:"red"}); //直接父
            $("i").parents().css({border:"2px solid blue"});  //所有父
            $("i").parents("div").css({border:"2px solid blue"}); //指定父
            $("i").parentsUntil("div").css({border:"2px solid blue"});  //两个元素之间的父

- 后代

            /*后代：
            * 1、children() 直接子； children("li") 指定的直接子元素
            * 2、find("*")  所有子； find("i")  指定的后代元素，包括子孙
            * */
            $("ul").children().css({border:"2px solid pink"});  //直接子
            $("ul").children("#l1").css({border:"2px solid yellow"}); //指定直接子
            $("ul").find("*").css({border:"2px solid pink"});  //所有子,包括后代
            $("ul").find("#l1").css({border:"2px solid pink"});  //指定的子孙

- 同胞

            /*同胞
            * 1、sibings()所有同胞； sibings("div")同胞元素并且是div的元素；
            * 2、next()下一个同胞元素；
            * 3、nextAll()该元素后面的所有同胞元素；
            * 4、nextUntil("h6") 该元素与h6之间的所有同胞元素；
            * 5、prev()、prevAll()、prevUntil()
            * */

- 过滤

            /*过滤
            * 1、first() 、last()；
            * 2、eq();  注意下标是从0开始
            * 3、filter();
            * 4、not(); 与filter相反
            * */
            $("div").eq(0).css("background-color","pink"); //第一个div
            $("li").filter("#l1").css("background-color","pink");  //带有id=l1的li元素