选择器是行为与文档内容之间连接的纽带,jQuery 选择器的写法类似于 CSS 选择器的写法

一、基本选择器

选择器 描述 返回
#id 根据给定的 id 匹配一个元素 单个元素
.class 根据给定的类名匹配元素 集合元素
element 根据给定的元素名匹配元素 集合元素
* 匹配所有元素 集合元素
selector1,selector2,selector3…,selectorN 将每一个选择器匹配到的元素合并后一起返回 集合元素

二、层级选择器

选择器 描述 返回
ancestor descendant 选取 ancestor 元素里所有 descendant 元素 集合元素
parent > child 选取 parent 元素下的 child 元素 集合元素
prev + next 选取紧接在 prev 元素后的 next 元素 集合元素
prev ~ siblings 选取 prev 元素之后的所有 siblings 元素 集合元素

在层级选择器中,第 1 个和第 2 个选择器比较常用,后面两个在 jQuery 里可以用更加简单的方法代替

  1. $(".one + div")
  2. // 等价于
  3. $(".one").next("div")
  4. $("#prev~div")
  5. // 等价于
  6. $("#prev").nextAll("div")
  7. siblings 方法能够匹配到所有的同辈节点,无论前后
  8. $("prev").siblings("div")

三、过滤选择器

1. 基本过滤选择器

选择器 描述 返回
:first 选取第一个元素 单个元素
:last 选取最后一个元素 单个元素
:not(selector) 去除所有给定选择器匹配的元素 集合元素
:even 选取索引是偶数的所有元素,索引从 0 开始 集合元素
:odd 选取索引是偶数的所有元素,索引从 0 开始 集合元素
:eq(index) 选取索引等于 index 的元素(index 从 0 开始) 单个元素
:gt(index) 选取索引大于 index 的元素(index 从 0 开始) 集合元素
:lt(index) 选取索引小于 index 的元素(index 从 0 开始) 集合元素
:header 选取所有标题元素,例如 h1,h2,h3 等等 集合元素
:animated 选取当前正在执行动画的所有元素 集合元素
:focus 选取当前获取焦点的元素 集合元素

2. 内容过滤选择器

选择器 描述 返回
:contains(text) 选取含有文本内容为“text”的元素 集合元素
:empty 选取不包含子元素或者文本的空元素 集合元素
:has(selector) 选取含有选择器所匹配的元素的元素 集合元素
parent 选取含有子元素或者文本的元素 集合元素

3. 可见性过滤选择器

选择器 描述 返回
:hidden 选取所有不可见的元素 集合元素
:visible 选取所有课件的元素 集合元素

4. 属性过滤选择器

选择器 描述 返回
[attribute] 选取拥有此属性的元素 集合元素
[attribute=value] 选取属性的值为 value 的元素 集合元素
[attribute!=value] 选取属性的值不等于 value 的元素 集合元素
[attribute^=value] 选取属性的值以 value 开始的元素 集合元素
[attribute$=value] 选取属性的值以 value 结束的元素 集合元素
[attribute*=value] 选取属性的值含有 value 开始的元素 集合元素
[attribute|=value] 选取属性等于给定字符串或以改字符串为前缀的元素 集合元素
[attribute~=value] 选取属性用空格分隔的值中包含一个给定值的元素 集合元素
[attribute][attribute2][attributeN] 用属性选择器合并成一个复合属性选择器,满足多个条件。每选择一次,缩小一次范围 集合元素

5. 子元素过滤选择器

选择器 描述 返回
:nth-child(index/even/odd/
equation)
选取每个父元素下的第 index 个子元素或者奇偶元素。(index 从 1 算起) 集合元素
:first-child 选取每个父元素的第 1 个子元素 集合元素
:last-child 选取每个父元素的最后一个子元素 集合元素
:only-child 如果每个元素是它父元素中唯一的子元素,那么将会被匹配。如果父元素中含有其他元素,则不会被匹配。 集合元素

:nth-child() 选择器的详细功能如下:

  1. :nth-child(even)
  2. :nth-child(odd)
  3. :nth-child(2)
  4. :nth-child(3n)
  5. :nth-child(3n+1)

6. 表单对象属性过滤选择器

选择器 描述 返回
:enabled 选取所有可用元素 集合元素
:disabled 选取所有不可用元素 集合元素
:checked 选取所有被选中的元素(单选框,复选框) 集合元素
:selected 选取所有被选中的选项元素(下拉列表) 集合元素

四、表单选择器

选择器 描述 返回
:input 选取所有的