jQuery选择器

一、jQuery选择器概念

• jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素。
  注意：jQuery选择器返回的是jQuery对象。

• jQuery选择器基本兼容了CSS1到CSS3所有的选择器，并且jQuery还添加了很多扩展性的选择器。
  注意：jQuery选择器之间可以相互替代，就是说获取一个元素，你会有很多种方法获取到。所以我们平时真正能用到的只是少数的最常用的选择器。

二、选择器类型

1、常用选择器

常用选择器	特点	示例
* 通配符选择器	匹配所有元素	$(" * ") 获取所有元素
#id ID选择器	根据指定 id 匹配一个元素	$(" #b ") 获取ID值为b的元素
.class 类选择器	根据指定类名匹配元素	$(" .a ") 获取class类名为a的所有元素
element 标签选择器	根据指定标签名匹配元素	$("div") 获取所有的div标签
selecter1,selecter2 分组选择器	以 逗号 进行分割、 同时选中多个元素	$("div, p, #b, .a ") 同时获取标签为div，p，ID为b，类名为a的所有元素

2、层次选择器

层次选择器	特点	示例
sel1> sel2 子选择器	多个选择器， 以 > 进行分割	$(" .a>#b ")获取类名为a的元素所有的ID为b的子元素
sel1 sel2 后代选择器	多个选择器，以 空格 进行分割	$(".a #b") 获取类名为a的元素中所有的ID为b的后代元素
+ 同胞选择器	以 + 进行分割、选中 紧邻的 兄弟元素	$(".a+#b ") 获取类名为a的下一个兄弟元素
~ 同胞选择器	以 ~ 进行分割、选后面的所有兄弟元素	$(".a~p") 获取类名为a的所有p标签兄弟元素

3、属性选择器

属性选择器	特点	示例
[attribute]	获取包含指定属性的元素	$("[id]") 所有具有id 属性的元素
[attr = value]	获取指定的属性等于该属性值的元素	$("[type='password']") 所有 type属性的值等于 “password” 的元素
[attr != value]	获取指定的属性不等于该属性值的元素	$([type='password']") 所有 type属性的值等于 “password” 的元素
[attr ^= value]	获取指定的属性是以value作为开始的元素	$("[class^=a]")所有class属性以a作为前缀的元素
[attr $= value]	获取指定的属性是以value作为结尾的元素	$("[class$=a]")所有class属性以a作为结尾的元素
[attr ~= value]	选中 attr 属性值 包含 value 单词的 元素	$("[class~=value]")所有class属性以value作为类名的元素
[attr |= value]	获取指定的属性等于value或以value作为前缀的元素	$("[class|=value]")所有class属性以value作为类名或者类名前缀的元素
[attr *= value]	选中 attr 的值 中 包含 value 的元素	$("[class|=value]")所有class属性类名包含value的元素
[…][…]	相当于and 两个属性选择器必须同时满足	$("[class *= t][a][x]") 选取class属性中包含t值 ，具有a属性和x属性的元素

4、子元素选择器

子元素选择器	特点	示例
:first-child/ :last-child	选中父级元素下第一个/最后一个 子元素	$("ul li:first-child")在每个 ul 中查找第一个 li $("ul li:last-child")在每个 ul 中查找最后一个 li
:first-of-type/:last-of-type	选中父级元素下的 同类型的第一个/最后一个 子元素	$("span:first-of-type");选择所有相同的元素名称的第一个span兄弟元素。 $("span:last-of-type");选择所有相同的元素名称的最后一个span兄弟元素
:nth-child() / :nth-last-child()	子元素的第n个/倒数第n个	$("p:nth-child(2)")选取以p标签为父元素的第二个子元素
:nth-of-type()/ :nth-last-of-type()	类型的第n个/倒数第n个	$("p:nth-of-type(2)")选择父元素的第二个段落p元素
:only-child	选取只有一个子元素的父元素	$("ul li:only-child")在 ul 中查找是唯一子元素的 li
:only-of-type	选择所有没有兄弟元素，且具有相同的元素名称的元素	$("ul li:only-child")在 ul 中查找是只有一个子元素的 li

5、内容过滤选择器

子元素选择器	特点	示例
:contains(text)	获取所有包含指定文本的元素	$(":contains('文本字符')") 包含 “文本字符” 字符串的所有元素
:empty	获取所有不包含子元素或者文本的空元素	$("p:empty") 获取不包含子元素或者文本的p元素
:has(selector)	获取包含指定选择器所匹配元素的所有元素	$("div:has('p')") 获取所有div元素，过滤出只包含p元素的div元素
:parent	获取包含子元素或者文本的元素	$("#d :parent") 获取id为d 元素中包含子元素或者文本的元素

6、可见性选择器

子元素选择器	特点	示例
:hidden	获取所有不可见元素或type=hidden的表单元素	$("p:hidden") 所有隐藏的 <p> 元素
:visible	获取所有可见的元素	$("table:visible") 所有可见的表格

7、基本选择器

子元素选择器	特点	示例
:first/:last	获取选择器 选中的多个元素中的 第一个/最后一个元素	$("p:first") 选取第一个 <p> 元素。 $("p:last") 最后一个 <p> 元素
:even/:odd	获取所有索引值为偶数/奇数的元素,索引从0开始	$("tr:even") 所有偶数 <tr> 元 $("tr:odd") 所有奇数 <tr> 元素
:eq(index)	选中指定索引位置的元素index 从 0 开始	$("ul li:eq(3)") 列表中的第四个元素（索引从 0 开始）
:gt(index)/:lt(index)	选中 <index / >index 索引的元素	$("ul li:gt(3)") 列出 index 大于 3 的元素 $("ul li:lt(3)") 列出 index 小于 3 的元素
:target	获取URL对应的锚点的元素	$("#test :target") 获取地址栏的id锚点
:not(selector)	排除 selector选中的元素	$("input:not(:empty)") 所有不为空的 input 元素
:focus	获取 聚焦的元素	$("input:focus") 获取光标移动到的input标签

8、表单选择器

子元素选择器	特点
:input	获取所有 <input> <select> <textarea><button> 元素
:text	获取所有 type=text 的 <input> 元素。文本框
:password	获取所有 type=password 的 <input> 元素。加密文本框。
:radio	获取所有 type=radio 的 <input> 元素。单选框
:checkbox	获取所有 type=checkbox 的 <input> 元素。复选框
:submit	获取所有 type=submit 的 <input> 元素。提交表单按钮
:reset	获取所有 type=reset 的 <input> 元素。重置表单内容按钮
:file	获取所有 type=file 的 <input> 元素。 文件上传
:button	获取所有 type=button 的 <input> 元素。按钮框,已被<button>代替。
:image	获取所有 type=image 的 <input> 元素。 图像提交按钮。
:hidden	获取所有 type=hidden 的 <input> 元素。即不可见
:checked	获取表单中所有被选中的元素。
:selected	获取表单中所有被选中的<option>元素。
:enabled	获取表单中所有属性为可用的元素。
:disabled	获取表单中所有属性为不可用的元素。

三、选择器中的特殊字符

当选择器名字中含有特殊字符，例如， . + > ~ \ 等，有以下两种解决方法：

1. 如果 ID , class 属性的值 中包含 特殊字符，
   需要用\\对特殊字符进行转义 , 例如 \\#
2. $.escapeSeletor(selector)
   对存在特殊字符的内容进行转义
   返回转义后的结果
   **注意：**第二种方法只有将 jQuery 3.0以上版本才支持，如果使用，需要注意