二、jquery选择器

1、css选择器
    1）标签选择器： p{} h1{}
    2）ID选择器：#menu{}
    3）class选择器：.has_children{}
    4）群组选择器： h1,h2,h3,p,#menu{}
    5）后代选择器：div span{}
    6）通配选择器：*{}
    7）子选择器：div > span{}
    8）相邻选择器：label + input{}
    9）伪选择器：a:active{}
    10）同辈选择器 form ~ input{}
    其中前六种主流浏览器都支持，jquery的选择器完全继承了css的风格,除了支持css选择器外，也有少量独有的选择器。

2、松耦合
    css 使得网页的内容与样式相分离，css找到元素后给元素添加样式。
    jquery 使得网页的内容与行为相分离，jquery找到元素后给元素添加行为。

3、判断某个元素是否存在
    不管指定的元素是否存在，返回的jquery对象都不会为空，所以要判断jquery对象是否存在需要这样判断
    if($('#ff').length>0) // to do ... 或者 if($('#ff')[0]) // to do ...

4、jquery选择器
    1）基本选择器
        $("#one").css('background-color', '#bbffaa');    // id选择器  
        $('div.mini').css('background-color','#bbffaa'); // class选择器
        $('div').css('background-color','#bbffaa');      // 标签选择器
        $('*').css('background-color','#bbffaa');        // 通配选择器，匹配页面中所有元素
        $('span, #two').css('background-color','#bbffaa'); // 群组选择器,将span的匹配结果与#two的匹配结果合并在一起
    2）层次选择器
        $('body div').css('background-color','#bbffaa');   //后代选择器
        $('body > div').css('background-color','#bbffaa'); //子代选择器
        $('#one + div').css('background-color','#bbffaa'); //相邻选择器向后匹配，完全等价与 $('#one').next("div").css('background-color','#bbffaa');
        $('#two ~ div').css('background-color','#bbffaa'); //后续兄弟选择器，完全等价与 $('#two').nextAll('div').css('background-color','#bbffaa');
        $('#two').siblings('div').css('background-color','#bbffaa'); // 兄弟选择器，匹配所有#two的同辈div，不分前后顺序，要区别去后续兄弟选择器
    3）过滤选择器
        (1)基本过滤
            $('div:first').css('background-color','#bbffaa');    // 第一个div元素
            $('div:last').css('background-color','#bbffaa');     // 最后一个div元素
            $('div:not(.one)').css("background-color","#bbffaa");  // 不排除指定选择器的div元素
            $('div:even').css("background-color","#bbffaa");     // 索引为偶数的元素
            $('div:odd').css("background-color","#bbffaa");      // 索引为奇数的元素
            $('div:eq(3)').css("background-color","#bbffaa");    // 索引为3的元素，从0开始
            $('div:gt(3)').css("background-color","#bbffaa");    // 索引大于3的元素
            $('div:lt(3)').css("background-color","#bbffaa");    // 索引小于3的元素
            $(':header').css("background-color","#bbffaa");      // <h>系列标题元素
            $(':animated').css("background-color","#bbffaa");    // 正在活动的
        (2)内容过滤
            $('div:contains("two")').css("background-color","#bbffaa"); // 含有指定文本的div元素
            $('.mini:empty').css("background-color","#bbffaa");     // 不含有任何子元素或者文本的class="mini"的元素
            $('span:has(.mini)').css("background-color","#bbffaa"); // 含有子元素为.mini的span元素
            $('div:parent').css("background-color","#bbffaa");      // 含有任何子元素或者文本的div元素
        (3)可见性过滤
            $('div:hidden').show(3000).css("background-color","red");  // 选取所有不可见的元素 $('input:hidden')可以选取隐藏域
            $('div:visiable').css("background-color","#bbffaa");   // 选取所有可见的元素
        (4)属性过滤
            $('div[title]').css('background-color','#BBFFAA');     // 包含title属性的div元素
            $('div[title=test]').css('background-color','#BBFFAA');  // 包含title属性并且值为test的div元素
            $('div[title!=test]').css('background-color','#BBFFAA'); // 包含title属性并且值不为test的div元素与不包含title属性的div元素的集合
            $('div[title^=te]').css('background-color','#BBFFAA');   // 包含title属性并且值以te开头的div元素
            $('div[title$=est]').css('background-color','#BBFFAA');  // 包含title属性并且值以est结尾的div元素
            $('div[title*=es]').css('background-color','#BBFFAA');   // 包含title属性并且值包含es的div元素
            $('div[id][title*=es]').css('background-color','#BBFFAA'); // 包含id属性与title属性并且title属性值包含es的div元素
        (5)子元素过滤
            $(':nth-child(2)').css('background-color','#BBFFAA');   // 为每个父元素匹配索引为2的子元素，索引从1开始
            $(':nth-child(odd)').css('background-color','#BBFFAA'); // 为每个父元素匹配索引为奇数的子元素, even为偶数
            $(':nth-child(3n+1)').css('background-color','#BBFFAA');// 为每个父元素匹配索引为3n+1的子元素, n从0开始
            $(':first-child').css('background-color','#BBFFAA');    // 为每个父元素匹配第一个子元素
            $(':last-child').css('background-color','#BBFFAA');     // 为每个父元素匹配最后一个子元素
            $(':only-child').css('background-color','#BBFFAA');     // 为每个父元素匹配有且仅有一个的子元素
        (6)表单元素属性过滤
            $('#form1 :enabled');            // 表单中所有可用的元素
            $('#form1 :disabled');            // 表单中所有不可用的元素
            $('#form1 input:checked');        // radio或checkbox的选中项
            $('#form1 select :selected');   // 下拉列表或多选框的选中项
    4）表单选择器
        $("#form1 :input")        // 匹配所有表单元素包括input、select、textarea、button,注意与$("#form1 input")的区别
        $("#form1 :text")        // 匹配 <input type="text"/>元素
        $("#form1 :password")    // 匹配 <input type="password"/>元素
        $("#form1 :radio")        // 匹配 <input type="radio"/>元素
        $("#form1 :checkbox")    // 匹配 <input type="checkbox"/>元素
        $("#form1 :submit")        // 匹配 <input type="submit"/>和<button>元素
        $("#form1 :image")        // 匹配 <input type="image"/>图像按钮
        $("#form1 :reset")        // 匹配 <input type="reset"/>元素
        $("#form1 :button")        // 匹配 <input type="button"/>和<button>元素
        $("#form1 :file")        // 匹配 <input type="file"/>元素
        $("#form1 :hidden")        // 匹配 <input type="hidden"/>和所有不可见的元素，如<div style="display:none;">元素
   
5、选择器的一些注意事项
    1）选择器中含有".","[","("等特殊字符,这种情况下需要对特殊字符转义才行
        <div id="id.a">aa</div>        // 获取方式$("#id\\.a")
        <div id="id#b">bb</div>        // 获取方式$("#id\\#b")
        <div id="id[1]">cc</div>    // 获取方式$("#id\\[1\\]")
    2）一些常用的方法
        $category.is(":hidden")     // 判断当前元素是否为隐藏的 is() 返回boolean值
        $("ul li").filter(":contains('佳能'),:contains('尼康')")        // 筛选出与指定表达式匹配的元素集合，其中表达式可以是多个选择器的组合
        addClass("promoted")        // 可以为匹配的元素添加类名
        $("div.showmore > a").toggle(fun,fun);    // 可以给匹配的元素添加一组交互事件