[jQuery]：jQuery选择器总结
jQuery选择器是继承了CSS和Xpath的部分语法，总体分为四种：基本选择器、层次选择器、过滤选择器和表单选择器。
基本选择器
| 基本选择器 |
功能描述 |
简单示例 |
| #id ID选择器 |
根据指定 id 匹配一个元素 |
$("#abc") 获取id为abc的元素 |
| .class 类选择器 |
根据指定类名匹配元素 |
$(".abc") 获取类名为abc的元素 |
| element 元素选择器 |
根据指定元素名匹配元素，即标签。 |
$("div") 获取所有的 元素 |
| selector1,s2,s3.群组选择器 |
将匹配到的所有元素合并到返回的jQuery对象 |
$("div, p, h1, .abc ") 获取所有的 、 、 元素及类名为abc的元素 |
| * 通配选择器 |
匹配所有元素 |
$("*") 获取所有元素 |
div标签
p标签
H1标签
H2标签
span1
span2
p2
层次选择器
| 层次选择器 |
功能描述 |
简单示例 |
| $("E F") 后代选择器 |
匹配祖先元素 E 中所有的后代元素 F | $("div .test") 选取div元素中，类名为test的所有元素 |
| $("E > F") 子选择器 |
匹配父元素 E 中所有的子元素 F | $("#test > div") 匹配所有div元素，父元素是id为test元素 |
| $("E + F") 相邻兄弟选择器 |
匹配紧接着 E 元素后的相邻元素 F |
省略，看实例。 |
| $("E ~ F") 通用兄弟选择器
|
匹配 E 元素之后的所有 F 元素
|
省略，看实例。 |
inter_1的h1
inter_1的p
inter_2的h1
inter_2的p
outer的h1
outer的p
层次选择器和基本选择器常常结合起来使用，使用时要注意区分后代选择器和子选择器的层次关系：一个是祖先关系，一个是父系。
关于相邻兄弟选择器和通用兄弟选择器，jQuery有两个方法和它们是等价的，next() 和 nextAll()。
next()返回下一个元素，nextAll()返回后续全部元素。注意这是无参时，因为jQuery有些方法都有个特点，就是担当get和set的功能，就像text()或者html()，无参就返回相应结果，传参就设置相关值。这两个也一样，实例如下：
//在id为inter_2的祖先元素中匹配h1元素之后的p元素。相当于nextAll("p")[0]
$("#inter_2 h1 + p") == $("#inter_2 h1").next("p")
//在id为inter_2的祖先元素中匹配h1元素之后的所有p元素
$("#inter_2 h1 ~ p") == $("#inter_2 h1").nextAll("p")过滤选择器
| 基本过滤选择器 | 功能描述 | 简单实例 |
|---|---|---|
| :first first() | 获取第一个元素 | $("p:first") 选取第一个 元素。 |
| :last last() | 获取最后一个元素 | $("p:last") 最后一个 元素 |
| :even | 获取所有索引值为偶数的元素,索引从0开始 | $("tr:even") 所有偶数 |
| :odd | 获取所有索引值为奇数的元素,索引从0开始 | $("tr:odd") 所有奇数 |
| :eq(index) | 获取所有等于指定索引值的元素，索引从0 | $("ul li:eq(3)") 列表中的第四个元素（索引从 0 开始） |
| :gt(index) | 获取所有大于指定索引值的元素，索引从0 | $("ul li:gt(3)") 列出 index 大于 3 的元素 |
| :lt(index) | 获取所有小于指定索引值的元素，索引从0 | $("ul li:lt(3)") 列出 index 小于 3 的元素 |
| :header | 获取所有标题元素- |
$("#test :header") 匹配id为test元素中的所有标题元素 |
| :not(selector) | 获取除指定选择器之外的所有元素。取反！ | $("input:not(:empty)") 所有不为空的 input 元素 |
| :animated | 获取正在执行动画效果的元素 | |
| 内容过滤选择器 | -------------------------------------------- | -------------------------------------------------------- |
| :contains(text) | 获取所有包含指定文本的元素 | $(":contains('文本字符')") 包含 “文本字符” 字符串的所有元素 |
| :empty | 获取所有不包含子元素或者文本的空元素 | $("p:empty") 获取不包含子元素或者文本的p元素 |
| :has(selector) | 获取包含指定选择器所匹配元素的所有元素 | $("div:has('p')") 获取所有div元素，过滤出只包含p元素的div元素 |
| :parent | 获取包含子元素或者文本的元素 | $("#d :parent") 获取id为d 元素中包含子元素或者文本的元素 |
| 可见性过滤选择器 | -------------------------------------------- | -------------------------------------------------------- |
| :hidden | 获取所有不可见元素或type=hidden的表单元素 | $("p:hidden") 所有隐藏的 元素 |
| :visible | 获取所有可见的元素 | $("table:visible") 所有可见的表格 |
| 属性过滤选择器 | 功能描述 | 简单实例 |
|---|---|---|
| [attribute] | 获取包含指定属性的元素 | $("[id]") 所有具有id 属性的元素 |
| [attr = value] | 获取指定的属性等于该属性值的元素 | $("[href='#']") 所有 href 属性的值等于 "#" 的元素 |
| [attr != value] | 获取指定的属性不等于该属性值的元素 | $("[href!='#']") 所有 href 属性的值不等于 "#" 的元素 |
| [attr ^= value] | 获取指定的属性是以value作为开始的元素 | $("[class^=abc]")所有class属性以abc作为前缀的元素 |
| [attr $= value] | 获取指定的属性是以value作为结尾的元素 | $("[href$='.jpg']") 所有 href 属性的值包含以 ".jpg" 结尾的元素 |
| [attr ~= value] | 获取指定的属性用空格分隔的值中包含一个给定值的元素 | |
| [attr |= value] | 获取指定的属性等于value或以value作为前缀的元素 | $("[class |= t]") 选取class属性等于t 或以 t作为前缀的元素 |
| [attr *= value] | 获取指定的属性是以包含了value值的元素 | $("[class *= t]") 选取class属性中包含了t值的元素 |
| [attr1] [attr2] [attrN] | 获取包含了多个指定属性的元素 | $("[class *= t][ab][xyz]") 选取class属性中包含t值 ，具有ab属性和xyz属性的元素 |
除此之外，还有一个专门针对子元素的过滤选择器，语法如下：
:nth-child(index/even/odd/equation) 选取每个父元素下第index个子元素(父元素中的子元素都有个索引号，表明顺序)或者奇偶元素，index是从1开始。
:first-child 选取每个父元素的第一个子元素。
:last-child 选取每个父元素的最后一个子元素。
:only-child 选取只有一个子元素的父元素。
使用注意： 使用过滤选择器时一定要注意空格问题，例如：
console.log( $(".abc :first") ); //选取class=abc的所有元素，匹配后代元素中第一个元素
console.log( $(".abc").first() );//选取class=abc的所有元素，匹配第一个class=abc的元素表单选择器
在前端开发中，通过表单来提交和传递数据非常频繁，所以jQuery为了更加方便、高效地获取表单元素，专门提供一个表单选择器。语法和过滤选择器差不多，以冒号开头，但后续名称都是表单类型名和表单属性，非常容易记忆。 可以简单理解成：以表单相关内容作为过滤规则的过滤选择器。想了解表单元素有哪些，请戳表单元素总结
| 事件名 |
触发该事件 |
| :input |
获取所有 |