【前端】jQuer选择器小结

路易斯·李

已于 2023-01-03 19:25:49 修改

阅读量1.5k

点赞数

分类专栏：前端文章标签： jquery jquery选择器

于 2015-12-31 16:51:16 首次发布

本文链接：https://blog.csdn.net/louislee92/article/details/50442612

版权

前端专栏收录该内容

5 篇文章 1 订阅

订阅专栏

1 摘要

工欲善其事必先利其器，要想用好jQuery，就要做好自己的基本功。本篇博客对于jQuery中的选择器进行了一个小结，对于基本选择器、层次选择器、过滤选择器和表单选择器进行了分别列表和解释。

2 什么是jQuery选择器

顾名思义，选择器即选择某个对象或事物的器具。而jQuery选择器的操作对象则是DOM树的某个元素，例如HTML元素中的某个div块、button按钮和a链接，当然也可以是其中的document和window对象。一般我们要做页面效果、事件之前，提前要做的就是选择对应的的操作对象，而这个任务就交由jQuery选择器来完成。

3 为什么要用jQuery选择器

原生Javascript中一般要想获取DOM树中某个元素，只能通过DOM元素的id属性或者标签名字来获取该元素。也就是通过getElementById()和getElementsByTagName()这两个函数来获取。

而jQuery对于这两种方式进行封装，简化为$("#id")和$("tagName")，其中id和tagName分别是元素的id属性和标签名字。显而易见，jQuery相比原生Javascript更加简洁，而且还能避免某些错误。

当然，强大的jQuery是不会满足这两种方式来获取DOM元素，jQuery还支持class选择，层次选择，属性选择等等。下面将详细介绍如何使用jQuery选择器。

4 如何使用jQuery选择器

jQuery选择器分为基本选择器、层次选择器、过滤选择器和表单选择器。下面将所有选择器列入表格内，对于简单易懂的选择器将一带而过，对于复杂的选择器则重点解释介绍。

4.1 基本选择器

表4-1 基本选择器

选择器	描述	返回	示例
#id	根据给定的id匹配一个元素	单个元素	`$("#test")`选取 id 为 test 的元素
.class	根据给定的类名匹配元素	集合元素	`$(".test")`选取所有 class 为 test 的元素
element	根据给定的元素名匹配元素	集合元素	`$("p")`选取所有的`<p>`元素

| 匹配所有元素 | 集合元素 | $("*")选取所有的元素
selector1, selector2, …, selectorN | 将每一个选择器匹配到的元素合并后一起返回 | 集合元素 | $("div,span,p.myClass")选取所有<div>，<span>和拥有 class 为 myClass 的<p>标签的一组元素

4.2 层次选择器

表4-2 层次选择器

选择器	描述	返回	示例
$(“ancestor descendant”)	选取 ancestor 元素里的所有 descendant （后代）元素	集合元素	`$("div span")`选取`<div>`里的所有的`<span>`元素
$(“parent>child”)	选取 parent 元素下的 child （子）元素，与`$("ancestor descendant")`有区别，`$("ancestor descendant")`选择的是后代元素，`$("parent>child")`选择的是直属子元素，仅一代。	集合元素	`$("div > span")`选取`<div>`元素下元素名是`<span>`的子元素
$(“prev + next”)	选取紧接在 prev 元素后的 next 元素	集合元素	`$(".one + div")`选取 class 为 one 的下一个`<div>`同辈元素
$(“prev ~ siblings”)	选取 prev 元素之后的所有 siblings 元素	集合元素	`$("#two ~ div")`选取id为 two 的元素后面的所有 `<div>` 同辈元素

解释：$("prev + next") 选取的是所有 prev 元素后的第一个 next 元素。$("prev ~ siblings")选取的是所有 prev 元素后的所有的 siblings 元素。

4.3 过滤选择器

4.3.1 基本过滤选择器

表4-3 基本过滤选择器

选择器	描述	返回	示例
:first	选取第 1 个元素	单个元素	`$("div:first")`选取所有`<div>`元素中第 1 个`<div>`元素
:last	选取最后一个元素	单个元素	`$("div:last")`选取所有`<div>`元素中最后一个`<div>`元素
:not(selector)	去除所有与给定选择器匹配的元素	集合元素	`$("input:not(.myClass)")`选取 class 不是 myClass 的`<input>`元素
:even	选取索引是偶数的所有元素，索引从 0 开始	集合元素	`$("input:even")`选取索引是偶数的`<input>`元素
:odd	选取索引是奇数的所有元素，索引从 0 开始	集合元素	`$("input:odd")`选取索引是奇数的`<input>`元素
:eq(index)	选取索引等于 index 的元素（index 从 0 开始）	集合元素	`$("input:eq(1)")`选取索引等于 1 的`<input>`元素
:gt(index)	选取索引大于 index 的元素（index 从 0 开始）	集合元素	`$("input:eq(1)")`选取索引大于 1 的`<input>`元素
:lt(index)	选取索引小于 index 的元素（index 从 0 开始）	集合元素	`$("input:eq(1)")`选取索引小于 1 的`<input>`元素
:header	选取所有的标题元素，例如h1，h2，h3等等	集合元素	`$(":header")`选取网页中所有的`<h1>`，`<h2>`，`<h3>`…
:animated	选取当前正在执行动画的所有元素	集合元素	`$("div:animated")`选取正在执行动画的`<div>`元素
:focus	选取当前获取焦点的元素	集合元素	`$(":focus")`选取当前获取焦点的元素

4.3.2 内容过滤选择器

表4-3 内容过滤选择器

选择器	描述	返回	示例
:contains(text)	选取含有文本内容为“text”的元素	集合元素	`$("div:contains('我')")`选取含有文本“我”的`<div>`元素
:empty	选取不包含子元素或者文本的空元素	集合元素	`$("div:empty")`选取不包含子元素（包括文本元素）的`<div>`空元素
:has(selector)	选取含有选择器所匹配的元素的元素	`$("div:has(p)")`选取含有`<p>`元素的`<div>`元素
:parent	选取含有子元素或者文本的元素	集合元素	`$("div:parent")`选取拥有子元素（包括文本元素）的`<div>`元素

4.3.3 可见性过滤选择器

表4-3 可见性过滤选择器

选择器	描述	返回	示例
:hidden	选取所有不可见的元素	集合元素	`$(":hidden")`选取所有不可见的元素。包括`<input type="hidden"/>`，`<div style="display: none;">`和`<div style="visibility: hidden;">`等元素。如果只想选取`<input>`元素，可以使用`$("input:hidden")`
:visible	选取所有可见元素	集合元素	`$("div:visible")`选取所有可见的`<div>`元素

4.3.4 属性过滤选择器

表4-4 属性过滤选择器

选择器	描述	返回	示例
[attribute]	选取拥有此属性的元素	集合元素	`$("div[id]")`选取拥有属性id的元素
[attribute=value]	选取属性的值为 value 的元素	集合元素	`$("div[title=test]")`选取属性 title 为“test”的`<div>`元素
[attribute!=value]	选取属性的值不等于 value 的元素	集合元素	`$("div[title!=test]")`选取属性 title 不等于“test”的`<div>`元素（注意：没有属性 title 的`<div>`元素也会被选取）
[attribute^=value]	选取属性的值以 value 开始的元素	集合元素	`$("div[title^=test]")`选取属性 title 以“test”开始的`<div>`元素
[attribute$=value]	选取属性的值以 value 结束的元素	集合元素	`$("div[title$=test]")`选取属性 title 以“test”结束的`<div>`元素
[attribute*=value]	选取属性的值含有 value 的元素	集合元素	`$("div[title*=test]")`选取属性 title 含有“test”的`<div>`元素
[attribute\|=value]	选取属性等于给定字符串或以该字符串为前缀（该字符串后跟一个连字符“-”）的元素	集合元素	`$("div[title\|='en']")`选取属性 title 等于 en 或以 en 为前缀（该字符串后跟一个连字符“-”）的元素
[attribute~=value]	选取属性用空格分隔的值中包含给定值 value 的元素	集合元素	`$("div[title~='uk']")`选取属性 title 用空格分隔的值中包含字符 uk 的元素
[attribte1][attribte2][attribteN]	用属性选择器合并成一个符合属性选择器，满足多个条件。每选择一次，缩小一次范围	集合元素	`$("div[id][title$='test']")`选取拥有属性 id ，并且属性 title 以“test”结束的`<div>`元素

4.3.5 子元素过滤选择器

表4-5 子元素过滤选择器

选择器	描述	返回	示例
:nth-child(index/even/odd/equation)	选取每个父元素下的第 index 个子元素或则奇偶元素。（ index 从 1 算起）	集合元素	`:eq(index)`值匹配一个元素，而 `:nth-child` 将为每一个父元素匹配子元素，并且 `:nth-child(index)` 的 index 是从 1 开始的，而 `:eq(index)` 是从 0 算起的
:first-child	选取每个父元素的第 1 个子元素	集合元素	`:first` 只返回单个元素，而 `:first-child` 选择符将为每个父元素匹配第 1 个子元素。例如`$("ul li:first-child")`；选择每个`<ul>`中第 1 个`<li>`元素
:last-child	选取每个父元素的最后一个子元素	集合元素	同样 `:last` 只返回单个元素，而 `:last-child` 选择符将为每个父元素匹配最后一个子元素。例如`$("ul li:last-child")`；选择每个`<ul>`中最后一个`<li>`元素
:only-child	如果某个元素是它父元素中唯一的子元素，那么将会被匹配。如果父元素中含有其他元素，则不会被匹配	集合元素	`$("ul li:only-child")` 在`<ul>`中选取是唯一子元素的`<li>`元素

4.3.6 表单对象属性过滤选择器

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

选择器	描述	返回	示例
:enabled	选取所有可用元素	集合元素	`$("#form1 :enabled")`选取 id 为“form1”的表单内的所有可用元素
:disabled	选取所有不可用元素	集合元素	`$("form2 :disabled")`选取 id 为“form2”的表单内的所有不可用元素
:checked	选取所有被选中的元素（单选框，复选框）	集合元素	`$("input:checked")`选取所有被选中的`<input>`元素
:selected	选取所有被选中的选项元素（下拉列表）	集合元素	`$("select option:selected")`选取所有被选中的选项元素

4.4 表单选择器

表4-7 表单对象属性过滤选择器

选择器	描述	返回	示例
:input	选取所有的`<input>`、`<textarea>`、`<select>`和`<button>`元素	集合元素	`$(":input")`选取所有`<input>`、`<textarea>`、`<select>`和`<button>`元素
:text	选取所有的单行文本框	集合元素	`$(":text")`选取所有的单行文本框
:password	选取所有的密码框	集合元素	`$(":password")`选取所有的密码框
:radio	选取所有的单选框	集合元素	`$(":radio")`选取所有的单选框
:checkbox	选取所有的多选框	集合元素	`$(":checkbox")`选取所有的多选框
:submit	选取所有的提交按钮	集合元素	`$(":submit")`选取所有的提交按钮
:image	选取所有的图像按钮	集合元素	`$(":image")`选取所有的图像按钮
:reset	选取所有的重置按钮	集合元素	`$(":text")`选取所有的重置按钮
:button	选取所有的按钮	集合元素	`$(":button")`选取所有的按钮
:file	选取所有的上传域	集合元素	`$(":file")`选取所有的上传域
:hidden	选取所有的不可见元素	集合元素	`$(":hidden")`选取所有的不可见元素