jQuery选择器总结

Posted 2020-07-30

1、基本选择器：#id,.class,element,*,selector...selectorn

2、层次选择器：

$("ancestor deseendant")[//选取后代元素，子，孙子...],

$("parent>child")[//选取子元素],

$("pre+next")[//选取紧接在pre元素后的next元素，only one||next()],$(".test").next("div")<=>$(".test+div")

$("pre~siblings")[//选取pre元素之后的所有siblings(同辈元素)||nextAll()],$("#pre").nextAll("div")<=>$("#pre~div")

3、过滤选择器

:first

:last

:not(selector)

:even[//索引偶数]

:odd[//索引奇数]

:eq(index)

:gt(index)[//索引大于index,index 从0开始]

:lt(index)[//夺银小于index，index从0开始]

:header[//选取所有标题元素]

:animated[//选取当前正在执行动画的所有元素]

:focus[//选取当前获取焦点的元素]

4、内容过滤选择器

:contains(text)[//选取含有文本内容为“text”的元素],$(div:contains(‘me‘))

:empty,$(":empty")[//选取不包含子元素的<div>空元素]

:has(selector)[//选取含有选择器所匹配的元素],$("div:has(p)")

:parent[//选取含有子元素或者文本的元素],$("div:parent")

5、可见性过滤选择器

:hidden

:visible

6、属性过滤选择器

[attribute]:选取拥有此属性的元素,$("div[class]")

[attribute=value]:选取属性的值为value的元素,$("div[title=ken]")

[attribute !=value]

[attribute ^=value]:选取属性值以value开始的元素

[attribute $=value]:选取属性值以value结束的元素

[attribute *=value]:选取属性值含有value的元素

[attribute1][attribute2][attribute3]：用属性选择器合并成一个复合属性选择器,满足多个条件，每选择一次缩小一次范围，$("img[id][title=‘pretty‘]")

7、表单过滤选择器

:enabled,$("#form:enable")

:disabled

:checked,$("input:checked"),选取所有被选中的<input>元素

:selected,$("select option:selected"):选取所有被选中的选项元素，$("input:checked").length[//获取多选框选中的个数]

$("select:selected").text()[//获取下拉框中选中的内容]

8、表单选择器

:input

:text

:password

:radio

:checkbox

:submit

:image

:button

:file

:hidden

9、选择器含有特殊符号

1、选择器含有"."、"#"、"("、"]"、等特殊字符

根据W3C的规定，属性值中是不能含有这些特殊字符的——解决方法：使用转义符转义

demo:error:$("#id#id"),=>$("#id\\#id")

         error:$("#id(1)"),=>$("#id\\(1\\)")

9、选择器含有空格的注意事项