JQuery选择器的小总结

今天估计是抽筋了，听着我嵩歌的有何不可，总结下jquery的选择器。

1、基本选择器：

        id选择器：$("#b03").css("background","red");      //选上了id为b03的标签，并设置它的样式

        类选择器：$(".liItem").css("background","red");        //选择所有类名为littem的标签

        标签选择器：$("li").css("background","red")；         //选择所有的li标签

        * 通配符选择器：$("*").css("font-size","20px")          // 选择所有的元素标签

        , 并集选择器：$(".liItem,div").css("background","blue")   选择上类名为littem的标签和div标签

        交集选择器：$("li#b03").css("font-size","20px")              //选择id为b03 的li标签

2、层级选择器：侧重层次关系的选择

        后代选择器：$(".wrap li").css("background","red")     //选择 .wrap下所有li标签，注意后代选择器的中间有空格，与交集选择器有区别。

        紧邻选择器 +： $(".wrap + div").css("font-size","30px");    // 紧邻选择器 如果后面有多个div 只选中了兄弟后面的第一个div,如果后面没跟div而是p，则浏览器不渲染，不起作用

        子代选择器 >：$(".wrap > ul > li").css("font-size","30px");        //选择的是直接子代元素，与后代选择器有分别，

        兄弟选择器 ~：$(".liItem ~ li").css("font-size","40px");          

3、基本过滤选择器：在选择元素的里面进行过滤

          $("li:odd").css("background","red");                      //选择索引号为技术的 元素

          $("li:even").css("background","green");                //选择索引号为偶数的元素

          $("ul li:eq(4)").css("font-size","30px");                   //选择索引号为4的元素

          $("li:lt(6)").css("font-size","30px");                        //选择索引号小于6的元素

         $(".ulList1 li:gt(7)").css("font-size","40px");        //选择索引号大于7的元素

        $(".ulList li:first").css("font-size","40px");            //选择第一个li元素

        $("li:last").css("font-size","40px");                    //选择最后一个li元素

4、属性选择器，用的比较少

            /*$("a[href]").css("color","red");*/

            // a[attr=value]   选择attr属性值为valuet的所有a（某）标签

            $("a[href='http://web.itcast.cn']").css("font-size","40px");

            //a [attr!=value]   选择attr属性值不为valuet的所有a标签

            $("a[href!='http://www.baidu.com']").css("font-size","40px");

            // [attr^=value]        选择attr属性值以valuet开头的所有a标签

            $("a[href^='http']").css("font-size","40px");

            // [attr$=value]        选择attr属性值以valuet结尾的所有a标签

            $("a[href$='cn']").css("font-size","40px");

            // [attr*=value]        选择attr属性值带有valuet的所有a标签

            $("a[href*='it']").css("font-size","40px");

            // [attr][attr] 都满足 交集

            $("a[href][title*='的']").css("font-size","40px");

5、筛选选择器：在选择元素的外面进行第二次筛选，基本上都是方法。

            // 类比 ":eq(index)" 选择器

            $("span").eq(1).css("font-size","40px");

          // .first()  没有参数    类比 ":first" 选择器

            $("span").first().css("font-size", "40px");

            //.parent() 没有参数      选择父亲元素

            $("#sp").parent().css("background", "gold");

          // 加入一个参数，选择ID为div的div

            $("p").parent("#div").css("background", "gold");

            //.siblings()      没有参数

            //选择所有的兄弟元素,除了自己    带了参数就是选择兄弟时，只选择了带了参数的那个兄弟。

            $("#li04").siblings(".liItem").css("background", "gold");

            //.find() 没有参数

            //查找所有后代元素 带参数则指后代中是参数的那个

            $("div").find("#li04").css("background", "gold");