一、基础
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()方法。