笔记4，jQuery选择器

1，jQuery选择器

    jQuery选择器类似于CSS选择器，用来选取网页中的元素

     $("h3").css("background","#09F");

        获取并设置网页中所有<h3>元素的背景 “

        h3”为选择器语法，必须放在$()中

        $(“h3”)返回jQuery对象

        .css()是为jQuery对象设置样式的方法

2，jQuery选择器功能强大，种类也很多，分类如下   

    类css选择器

        基本选择器

        层次选择器

        属性选择器

    过滤选择器

        基本过滤选择器

        可见性过滤选择器

     基本选择器包括

        

        

         层次选择器

        

  $(document).ready(function() {

          $("h2").click(function(){

                       //$("#menu span").css("background-color","#09F");//后代选择器，

                       //$("#menu>span").css("background-color","#09f");//子选择器

                       //$("h2+dl").css("background-color","#09F");//相邻选择器

                       $("h2~dl").css("background-color","#09F");//同辈选择器

          });

});

     属性选择器

    

    

$(document).ready(function() {

      $("h2").click(function(){

                //$("h2[title]").css("background-color","#09F");

                //改变含有title属性的<h2>元素的背景颜色

                //$("[class=odds]").css("background-color","#09F");

                //改变class属性的值为odds的元素的背景颜色

                //$("[id!=box]").css("background-color","#09F");

                //改变id属性的值不为box的元素的背景颜色

                //$("[title^=h]").css("background-color","#09F");

                //改变title属性的值中以h开头的元素的背景颜色

                $("[title$=jp]").css("background-color","#09F");

                //改变title属性的值中以jp结尾的元素的背景颜色

                //$("[title*=s]").css("background-color","#09F");

                //改变title属性的值中含有s的元素的背景颜色

                //$("li[class][title*=y]").css("background-color","#09F");

                //改变包含class属性，且title属性的值中含有y的<li>元素的背景颜色  

      });

});

     过滤选择器

    过滤选择器通过特定的过滤规则来筛选元素，语法特点是使用“:”,如使用$("li:first")来选取第一个li元素

    主要分类如下：

        基本过滤选择器

        可见性过滤选择器

        表单对象过滤选择器

        内容过滤选择器，子内容过滤选择器

        

        

        

        

         $("li:first").css("background-color","#09F");//改变第1个<li>元素的背景颜色

        //$("li:last").css("background-color","#09F");//改变最后一个<li>元素的背景颜色

        //$("li:not(.three)").css("background-color","#09F");//改变class不为three的<li>元素的背景颜色

    //$("li:even").css("background-color","#09F");//改变索引值为偶数的<li>元素的背景颜色

    //$("li:odd").css("background-color","#09F");//改变索引值为奇数的<li>元素的背景颜色

    //$("li:eq(1)").css("background-color","#09F");//改变索引值等于1的<li>元素的背景颜色

    //$("li:gt(1)").css("background-color","#09F");//改变索引值大于1的<li>元素的背景颜色

    //$("li:lt(1)").css("background-color","#09F");//改变索引值小于1的<li>元素的背景颜色

    //$(":header").css("background-color","#09F");//改变所有标题元素，例如<h1>,<h2>,<h3>……这些元素的背景颜色

    //$(":focus").css("background-color","#09F");//改变当前获取焦点的元素的背景颜色

注意事项：

    1，选择器中的特殊符号需要转义，在如下html代码中

        例如：<div class="id#a">dddd</div>

                   <div class="id[2]">aaaa</div>

        $("#id\\#a");

        $("#id\\[2\\]");

    2,选择器的书写规范很严格，多一个空格或少一个空格，都会影响选择器的效果

        var $t_a = $( ".test :hidden"); //带空格的jQuery选择器

        选取class为“test”的元素内部的隐藏元素

        var $t_b = $(" .test:hidden");  //不带空格的jQuery选择器

        选取隐藏的class为“test”的元素