文章图片
1 基础选择器
1.1 基本选择器
基本选择器在开发中使用的频率是最高的，主要有以下4种：
- 元素选择器：语法为
$("元素名称")
$("p").css("color","red");
- id选择器：语法为
$("#id名称")，别忘记写#
$("#submit").css("color","red");
- class选择器：语法为
$(".类名称")，别忘记写.
$(".btn").css("color","red");
- 群组选择器：即同时对几个选择器进行相同的操作，语法为
$("选择器1, 选择器2, ... , 选择器n")
$("h3,div,p,span").css("color","red");
1.2 层次选择器
常见的层次关系有：父子、后代、兄弟、相邻，而在jQuery中，层次选择器则有以下4种：
- 后代选择器：语法为
$("M N")，注意M与N之间用空格隔开，如下例子所示：表示选取id="first"的元素内部的所有p元素，不论是子代还是后代都会被选中。
$("#first p")
- 子代选择器：语法为
$("M>N")，它只选取子元素，不包括其他后代元素。
- 兄弟选择器：语法为
$("M~N")，即选取元素后面（不包括前面）的某一类兄弟元素。
- 相邻选择器：语法为
$("M+N")，选取元素后面的某一个相邻的兄弟元素。
注：兄弟选择器选择的是
某一类元素，而相邻选择器选择的是
某一个元素。
1.3 属性选择器
属性选择器即通过元素的属性来选择元素的一种方式，常见的属性选择器如下所示（E代表element，即元素）：
属性选择器经常用于选取
表单元素。
| 选择器 |
说明 |
E[attr] |
选择元素E，其中E元素必须带有attr属性 |
E[attr="value"] |
选择元素E，其中E元素的attr属性取值是value |
E[attr!= "value"] |
选择元素E，其中E元素的attr属性取值不是value |
E[attr^= "value"] |
选择元素E，其中E元素的attr属性取值是以value开头的任何字符 |
E[attr$="value"] |
选择元素E，其中E元素的attr属性取值是以value结尾的任何字符 |
E[attr*= "value"] |
选择元素E，其中E元素的attr属性取值是包含value的任何字符 |
E[attr| = "value"] |
选择元素E，其中E元素的attr属性取值等于value或者以value开头 |
E[attr~= "value"] |
选择元素E，其中E元素的attr属性取值等于value或者包含value |
2 伪类选择器
2.1 位置伪类选择器
【jQuery基础之-jQuery选择器(一)】位置伪类选择器：即根据页面中的位置来选取元素。常见的选择器如下表所示：
| 选择器 |
说明 |
:first |
选取某元素的第一个 |
:last |
选取某元素的最后一个 |
:odd |
选取某种元素中序号为“奇数”的所有元素，由于序号从0开始，选中的为偶数行 |
:even |
选取某种元素中序号为“偶数”的所有元素，由于序号从0开始，选中的为奇数行 |
:eq(n) |
选取某种元素的第n个，n是一个整数，从0开始 |
:lt(n) |
选取某种元素中小于n的所有元素，n是一个整数，从0开始 |
:gt(n) |
选取某种元素中大于n的所有元素，n是一个整数，从0开始 |
2.2 子元素伪类选择器
子类伪类选择器：即选取某个元素的子元素，其可以分为两大类：按位置和按类型位置（分类名自己起的）。
第一类如下表所示：E代表子元素。
| 选择器 |
说明 |
举例 |
E:first-child |
选择父元素下的第一个子元素 |
$("ul li:first-child") |
E:last-child |
选择父元素下的最后一个子元素 |
$("ul li:last-child") |
E:nth-child(n) |
选择父元素下的第n个子元素或奇偶元素，n取值有3种：数字、odd、even，注意：n从1开始 |
略 |
E:only-child |
选择父元素下唯一的子元素，该父元素只有一个子元素 |
略 |
第二类如下表所示：同样地，E代表子元素。
| 选择器 |
说明 |
E:first-of-type |
选择父元素下的第一个E类型的子元素 |
E:last-of-type |
选择父元素下的最后一个E类型的子元素 |
E:nth-of-type(n) |
选择父元素下的第n个E类型的子元素或奇偶元素，n取值有3种：数字、odd、even，注意：n从1开始 |
E:only-of-type |
选择父元素下唯一的E类型的子元素，注意：该父元素可以有多个子元素 |
2.3 可见性伪类选择器
可见性伪类选择器，指的是根据元素的可见与不可见两种状态来选取元素。
| 选择器 |
说明 |
E:visible |
选取所有可见元素 |
E:hidden |
选取所有不可见元素 |
如下例子所示：我们将li标签隐藏，待点击按钮后将会显示出来。
隐藏的元素
2.4 内容伪类选择器
| 选择器 |
说明 |
:contains(text) |
选取包含指定文本的元素 |
:has(selector) |
选取包含指定选择器的元素 |
:parent |
选取内部含有文本或者子元素的元素（多读几遍，定语太多） |
:empty |
选取空元素，即不含有文本内容且没有子元素。 |
举例：
$("p:contains(jQuery)") //取文本内容包含“jQuery”的p元素
$("div:has(span)")//选取内部含有span的div元素
$("td:empty") //选取内部没有文本也没有子元素的td元素
$("td:parent")//表示选取内部有文本或者子元素的td元素
2.5 表单伪类选择器
表单伪类选择器是用来专门操作表单元素的。常用的如下表所示：
$("input:checkbox").attr("checked", "checked");
//选取所有的复选框，并设置复选框的checked属性值为checked
2.6 表单属性伪类选择器
表单属性伪类选择器，指的是根据表单元素的属性来选取的一种伪类选择器。具体有：
| 选择器 |
说明 |
:checked |
选取所有被选中的表单元素，一般是单选框或复选框 |
:selected |
选取被选中的表单元素的选项，一般是下拉列表 |
:enabled |
选取所有可用的表单元素 |
:disabled |
选取所有不可用的表单元素 |
:read-only |
选取所有只读的表单元素 |
:focus |
选取所有获得焦点的表单元素 |
举例：获取被选中复选框的值。
2.7 其他伪类选择器
如下表所示：
| 选择器 |
说明 |
:not(selector) |
选取除了某个选择器之外的所有元素 |
:animated |
选取所有正在执行动画的元素 |
:root |
选取页面根元素，即html元素 |
:header |
选取h1~h6的标题元素 |
:target |
选取锚点元素 |
:lang(language) |
选取特定语言的元素 |
举例：则选取除第4项之外的所有其他项。
- HTML
- CSS
- JavaScript
- jQuery
- Vue.js
推荐阅读
