jQuery 选择器——0715

jQuery选择器匹配到的是一个元素集合。
由于jQuery 可以隐式迭代，所以可以一次操作多个dom，但如果要获取匹配到的元素的属性，默认获取到的是第一个的。

隐式迭代： 在方法的内部会为匹配到的所有元素进行循环遍历，执行相应的方法；而不用我们再进行循环，简化我们的操作，方便我们调用。
链式编程： 比如.show()和.html()可以连写成.show().html()。
链式编程原理：return this。
通常情况下，只有设置操作才能把链式编程延续下去。因为获取操作的时候，会返回获取到的相应的值，无法返回 this。

下边是 jQuery 选择器的用法示例：

（1）基本

    console.log($("*"));
    console.log($("button"));  	//element
    console.log($(".btn"));   	//class
    console.log($("#anniu"));  	//id
    console.log($("#anniu,#anniu2"));   //复合

（2）层级

    console.log($("ul li"));   //所有后代元素
    console.log($("ul.menu>li"));  //所有子元素
    console.log($(".menu>li:nth-child(1)+li"));   //+ 紧跟其后的那一个
    console.log($(".menu>li:nth-child(1)~li"));   //~ 之后的所有

（3）基本

    console.log($(".menu>li:first"));   //第一个li
    console.log($(".menu>li:last"));   //最后一个li
    console.log($(".menu>li:not(.child)"));  //除了指定元素
    console.log($(".menu>li:even"));  //奇数
    console.log($(".menu>li:odd"));  //偶数
    console.log($(".menu>li:eq(2)"));  //根据索引筛选
    console.log($(".menu>li:lt(2)"));  //索引小于某个值的元素
    console.log($(".menu>li:gt(2)"));  //索引大于某个值的元素
    console.log($("div:lang(en)"));  //选择指定某个语言的所有元素。
    console.log($("body :header"));  //匹配如 h1, h2, h3之类的标题元素
    // :animated  匹配所有正在执行动画效果的元素
    $("input").focus();  //默认获得焦点
    console.log($("body:focus"));  //选择获得焦点的元素
    console.log($(":root"));  //选择该文档的根元素  永远是html

（4）内容

    console.log($("div:contains(你)"));  //选择包含给定文本的元素  子元素包含，同名父元素也会被筛选
    console.log($("div:empty"));  //匹配所有不包含子元素或者文本的空元素
    console.log($("ul:has(.child)"));  //匹配含有选择器所匹配的元素的元素
    console.log($("div:parent"));  //匹配的元素必须有子元素或者 内容(包括空格 回车等空白内容)

（5）可见性

    console.log($(":visible"));  //匹配所有的可见元素
    console.log($(":hidden"));  //匹配所有不可见元素，或者type为hidden的元素

（6）属性

    console.log($("input[type]"));  //包含某个属性的元素
    console.log($("input[type='text']"));
    console.log($("input[type!='text']"));
    console.log($("input[type^='t']"));
    console.log($("input[type$='t']"));
    console.log($("input[type*='ex']"));   //给定属性包含某些值的元素
    console.log($("input[type][class][id]"));  //同时包含多个给定属性的元素

（7）子元素

    console.log($("#nav>li:first-child"));   // 如果li是nav的第一个子元素
    console.log($("#nav>li:last-child"));  //如果li是nav的最后一个子元素
    console.log($("#nav>li:first-of-type"));  //nav里边的li中的第一个
    console.log($("#nav>li:last-of-type"));  //nav里边的li中的最后一个
    console.log($("#nav>li:nth-child(3)"));  //如果li是nav的第三个子元素
    console.log($("#nav>li:nth-last-child(2)"));  //如果li是nav的倒数第二个子元素
    console.log($("#nav>li:nth-of-type(2)"));  //nav里边的第二个li
    console.log($("#nav>li:nth-last-of-type(2)"));  //nav里边的倒数第二个li
    console.log($("input:only-child"));  //匹配到的元素是父元素的唯一子元素
    console.log($("input:only-of-type"));  //匹配到的元素是父元素的唯一子元素

（8）表单

    console.log($(":input"));  //匹配到所有input元素  相当于$("input")
    console.log($(":text"));
    console.log($(":password"));
    console.log($(":radio"));
    console.log($(":checkbox"));
    console.log($(":submit"));
    console.log($(":image"));
    console.log($(":reset"));  //匹配所有重置按钮
    console.log($(":button"));
    console.log($(":file"));  //匹配所有文件域

（9）表单对象属性

    console.log($(":input:disabled"));  //不可用元素
    console.log($(":input:enabled"));   //可用
    console.log($(":input[type='radio']:checked"));  //针对于单选框和复选框
    console.log($("select>option:selected"));  //针对于下列表option

（10）转义元素名中的特殊字符
$.escapeSelector("#span") 3.0版本以上的 jQuery 库可用，用来转义元素名中的特殊字符，以便正确匹配元素。

    console.log($.escapeSelector("#span"));   //\#span
    console.log($("#" + $.escapeSelector("#span")));  //匹配id为#span的元素    id名中有特殊字符
    console.log($("." + $.escapeSelector("+span")));  //匹配class名为+span的元素