jQuery-选择器

前言

jQuery 选择器允许对 HTML 元素组或单个元素进行操作。

jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。

jQuery 中所有选择器都以美元符号开头：$()。

一、标签选择器

特点	示例
直接使用标签名 作为选择器的名字	$("p")、$("div")

二、ID选择器

特点	示例
根据标签的ID属性值进行选择、只能选中一个元素	$("#ID")

三、Class选择器

特点	示例
通过指定的 class 查找元素	$(".class")

四、通配符选择器

特点	示例
匹配所有元素 多用于结合上下文来搜索	$("*")

五、属性选择器

示例	特点	jQuery
[attr]	根据属性名选择元素	$("div[id]")查找所有含有 id 属性的 div 元素
[attr=val]	根据属性=val 选取元素	$("input[name='newsletter']")查找所有 name 属性是 newsletter 的 input 元素
[attr!=val]	对 [attr=val] 取反,选择不存在指定属性，或者指定的属性值不等于给定值的元素	$("input[name!='newsletter']")查找所有 name 属性不是 newsletter 的 input 元素
[attr^=val]	选中 attr 以 val 开头的元素	$("input[name^='news']")查找所有 name 以 ‘news’ 开始的 input 元素
[attr$=val]	选中 attr 以 val 结尾的元素	$("input[name$='letter']") 查找所有 name 以 ‘letter’ 结尾的 input 元素
[attr*=val]	选中 attr 的值 中 包含 val 的元素	$("input[name*='man']")查找所有 name 包含 ‘man’ 的 input 元素
[attr|=val]	选中 attr = val 或者 attr 以 val- 开头的属性	$("[attr|=val]")
[attr~=val]	选中 attr 属性值 包含 val 单词的 元素	$("[attr~=val]")
[…][…]	and 两个属性选择器必须同时满足

六、后代选择器

特点	示例
多个选择器，以 空格 进行分割	$("form input") 找到表单中所有的 input 元素

七、子选择器

特点	示例
多个选择器， 以 > 进行分割	$("form > input")匹配表单中所有的子级input元素

八、同胞选择器

特点	示例
以 + 进行分割、选中 紧邻的 兄弟元素	$("label + input")匹配所有跟在 label 后面的 input 元素
以 ~ 进行分割、选中 后面的所有兄弟元素	$("form ~ input")找到所有与表单同辈的 input 元素

九、分组选择器

分组选择器
特点:
以 逗号 进行分割、 同时选中多个元素

十、子元素选择器

示例	特点	jQuery
:first-child	选中父级元素下第一个子元素	$("ul li:first-child")在每个 ul 中查找第一个 li
:last-child	选中父级元素下最后一个子元素	$("ul li:last-child")在每个 ul 中查找最后一个 li
:first-of-type	选中父级元素下的同类型的第一个子元素	$("span:first-of-type");
:last-of-type	选中父级元素下的同类型的最后一个子元素	$("span:last-of-type");
:nth-child()	选择的他们所有父元素的第n个子元素	$("p:nth-child(2)")
:nth-last-child()	选择所有他们父元素的第n个子元素。计数从最后一个元素开始到第一个	$("ul li:nth-last-child(2)");在每个匹配的ul中查找倒数第二个li
:nth-of-type()	选择同属于一个父元素之下，并且标签名相同的子元素中的第n个	$("p:nth-of-type(2)")
:nth-last-of-type()	选择所有他们父级兄弟元素下具有相同的元素名（比如<li>）的倒数第n个子元素，计数从最后一个元素开始到第一个	$("ul li:nth-last-of-type(2)");在每个匹配的ul中查找倒数第二个li
:only-child	获取父元素中的唯一一个子元素	$("ul li:only-child")在 ul 中查找是唯一子元素的 li

十一、其他选择器

1、基本

示例	特点	jQuery
:first	获取选择器 选中的多个元素中的 第一个元素	$('li:first');获取匹配的第一个元素
:last	获取选择器 选中的多个元素中的最后一个元素	$('li:last')获取匹配的最后个元素
:eq(index)	选中指定索引位置的元素index 从 0 开始	$("tr:eq(1)")查找第二行
:lt(index)	选中 小于index 索引的元素	$("tr:lt(2)")查找第一第二行，即索引值是0和1，也就是比2小
:gt(index)	选中 大于index 索引的元素	$("tr:gt(0)")查找第二第三行，即索引值是1和2，也就是比0大
:not(seletor)	排除 selector选中的元素	$("input:not(:checked)")查找所有未选中的 input 元素
:odd	获取奇 对应的元素	$("tr:odd")查找表格的2、4、6行（即索引值1、3、5…）
:even	获取偶对应的元素	$("tr:even") 查找表格的1、3、5…行（即索引值0、2、4…）
:focus	获取 聚焦的元素	$(':focus')等同为$('*:focus')，使用:focus时，建议在他们前面加一个标签名称或其他选择
:target	获取URL对应的锚点的元素	给定的URI http://example.com/#foo， $( "p:target" )，将选择<p id="foo">元素

2、内容

示例	特点	jQuery
:contains(text)	获取 选中的元素中 包含 指定的文本 元素	$("div:contains('John')")查找所有包含 “John” 的 div 元素
:empty	获取标签体中内容为空的元素（单标签代表 标签体内容为 空）	$("td:empty")查找所有不包含子元素或者文本的空元素
:parent	和 :empty 相反选择所有含有子元素或者文本的父级元素	$("td:parent")查找所有含有子元素或者文本的 td 元素
:has(selector)	查找元素中是否包含 指定选择器的元素	$("div:has(p)").addClass("test");给所有包含 p 元素的 div 元素添加一个 text 类

3、可见性

示例	特点	jQuery
:hidden	可以处理 display:none，可以处理 input:hidden；内容不可见的标签，例如 script, style, title, meta	$("input:hidden")匹配type为hidden的元素
:visible	选择所有可见的元素。	$("tr:visible")查找所有可见的 tr 元素

4、表单对象属性

示例	特点	jQuery
:checked	获取所有被勾选的元素	$("input:checked")查找所有选中的复选框元素
:selected	获取被选中的元素	$("select option:selected")查找所有选中的选项元素
:disabled	获取所有被禁用的元素	$("input:disabled")查找所有不可用的input元素
:enabled	获取所有被启用的元素	$("input:enabled")查找所有可用的input元素

5、选择器中的特殊字符

示例	特点
\ #	如果 ID , class 属性的值 中包含 特殊字符(， . + > ~ \ )，需要对特殊字符进行转义
$.escapeSeletor(selector)	对存在特殊字符的内容进行转义返回转义后的结果