jQuery选择器基础

一、基础
1）支持CSS1、CSS2、CSS3不同版本的选择器
2）不用考虑浏览器兼容性问题
3）依然依靠j原生方法
4）如果jQuery选择器没有匹配元素，则会返回一个空的伪数组对象。、
Ps：$是jQuery的别名，如$()等效于jQuery()，将jQuery对象转换为DOM对象有两种方法，一是借助下标，二是借助jQuery方法如get（)方法

二、基本选择器
1、ID选择器
在$()中传入id的字符串即可，同原生js方法
这种选择器没有原生js效率高，没必要情况下直接适用原生js选择器
在执行jQuery函数时，jQuery使用正则表达式来匹配参数值，并判断当前参数是否为ID值。当出现特殊符号时，需要用” \\ “进行转义
2、类型选择器
同原生js方法
同样存在效率低下的问题，而且还需要进行多路判断
3、类选择器（略）
4、通配选择器（略）
5、分组选择器
支持CSS的方式

ps：对于简单的选择器应用，我们直接使用原生js获取DOM对象，然后直接转换成jQuery对象

三、结构选择器
强大同CSS选择器，即使元素没有定义id和class，一样不影响控制各级元素样式

四、子选择器
主要包含:nth-child()、:first-child、:last-child、:only-child 四种选择器

五、过滤选择器
1、定位过滤器

选择器	说明
:first	匹配找到的第一个元素。例如，$(“tr:first”)表示匹配到表格的第一行
:last	匹配找到的最后一个元素。例如，$(“tr:last”)表示匹配表格的最后一行
:not	去除所有与给定选择器匹配的元素。在jQuery 1.3中，已经支持复杂选择器了。例如$(“input:not(:checked)”)
:even	匹配所有索引值为偶数的元素，从0开始计数。
:odd	匹配所有索引值为奇数的元素，从0开始计数。
:eq	匹配一个给定索引值的元素，从0开始计数。
:gt	匹配所有大于给定索引值的元素，从0开始计数。
:lt	匹配所有小于给定索引值的元素，从0开始计数。
:header	匹配如h1、h2、h3之类的标题元素
:animated	匹配所有正在执行动画效果的元素

2、内容过滤器

选择器	说明
:contains	匹配包含给定文本的元素。例如，$(“div:contains(‘图片’)”)匹配所有包含“图片”的div元素
:empty	匹配所有不包含子元素或者文本的空标签
:has	匹配含有选择器所匹配的元素的元素。例如，$(“div:has(p)”)匹配所有包含p元素的div元素
:parent	匹配含有子元素或者文本的元素

$("#test:empty").css("background","#ff1");

3、可见过滤器

选择器	说明
:hidden	匹配所有不可见元素，或者type为hidden的元素
:visible	匹配所有的可见元素

$("p:odd").hidden();
$("p:hidden").show();

六、属性选择器

选择器	说明
[attribute]	匹配含有给定属性的元素
[attribute=value]	匹配属性等于特定值的元素
[attribute!=value]	匹配所有不含有指定的属性，或者不含有特定属性值的元素
[attribute^=value]	匹配给定的属性是以某些值开始的元素
[attribute$=value]	匹配给定的属性是以某些值结束的元素
[attribute*=value]	匹配给定的属性是包含某些值的元素
[selector1] [selector2] [selectorN]	复合属性选择器，例如$(“input [ name*=’text’ ] [ id ] “)

七、表单选择器
1、基本表单选择器

选择器	说明
:input	匹配所有input、textarea、select和button元素
:text	匹配所有单行文本框
:password	匹配所有密码框
:radio	匹配所有单选按钮
:checkbox	匹配所有复选框
:submit	匹配所有提交按钮
:image	匹配所有图像域
:reset	匹配所有重置按钮
:button	匹配所有按钮
:file	匹配所有文件域
:hidden	匹配所有不可见元素，或者type为hidden的元素

$("#id :text").val("修改后的文本域")

2、高级表单选择器

选择器	说明
:enabled	匹配所有可用元素
:disabled	匹配所有不可用元素
:checked	匹配所有被选中的元素，不包含select中option
:selected	匹配所有选中的option元素

$("#test :checked").removeAttr("checked");
$("#test :selected").removeAttr("selected");

八、jQuery选择器优化
ID选择器是最快的，其次是类型选择器，最慢的是Class选择器
所以：
1）多用ID选择器。
2）少直接用Class选择器，可以使用tag.class代替.class。
3）多用父子关系，少用嵌套关系，使用parent>child 代替 parent child。
4）缓存jQuery对象，提高性能。

九、使用原生选择器（ querySelector() 和 querySelectorAll() 方法 ）
Document、Document.Fragment、Element都实现了NodeSelector接口，即这三种类型的节点都拥有querySelector()和querySelectorAll()方法。