免费AI编程助手
选择器
jQuery - 选择器
jQuery 库利用级联样式表(CSS)选择器让我们快速而方便地访问文档对象模型(DOM)中的元素或元素组。
jQuery 选择器是一个函数，基于给定的标准，利用表达式从 DOM 中找出匹配的元素。简单来说，选择器是使用 jQuery 来选择一个或多个 HTML 元素。当一个元素被选中，然后我们对所选元素可以执行各种操作。
$() 工厂函数
jQuery 选择器以 dollar 符号和括号开始 —— $()。工厂函数 $() 使用了以下三个部分来从给定的文档中选取元素 ——
| 序号 | 选择器 & 描述 |
|---|---|
| 1 |
标签名
代表在 DOM 中可用的标签名。例如 $('p') 选择文档中所有的段落 <p>。 |
| 2 |
标签 ID
代表在 DOM 中带有给定 ID 的一个可用的标签。例如 $('#some-id') 选择文档中带有 ID 为 some-id 的单个元素。 |
| 3 |
标签类
代表在 DOM 中带有指定类的可用的标签。例如 $('.some-class') 选择文档中带有 some-class 类的所有元素。 |
上述所有项目可以单个使用或结合其他的选择器使用。所有 jQuery 选择器除了一些调整外，都是基于同样的原则。
注意 —— 工厂函数 $() 是 jQuery() 函数的同义词。所以如果你使用的是任何其他 JavaScript 库，其中 $ 符号和一些其他的事情有冲突的话，你可以用 jQuery 名称来取代 $ 符号，并且你也可以使用 jQuery() 函数来替代 $() 函数。
示例
下面是使用标签选择器的一个简单的例子。它会选取带有标签名称 p 的全部的元素，并把它们的背景色设置为 “黄色”。
<html>
<head>
<title>The jQuery Example</title>
<script type="text/javascript" src="https://atts.w3cschool.cn/attachments/image/wk/jquery/jquery.min.js">
</script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("p").css("background-color", "yellow");
});
</script>
</head>
<body>
<div>
<p class="myclass">This is a paragraph.</p>
<p id="myid">This is second paragraph.</p>
<p>This is third paragraph.</p>
</div>
</body>
</html>这将产生如下所示结果 ——
如何使用选择器？
选择器非常有用，在使用 jQuery 的每一步都需要使用选择器。它们会从 HTML 文档中获得你想要的正确的元素。
下表列出了一些基本的选择器并用示例进行了解释。
| 序号 | 选择器 & 描述 |
|---|---|
| 1 |
名称
选择出与给定的元素 Name 匹配的所有元素。 |
| 2 |
#ID
选择出与给定的 ID 相匹配的单个元素。 |
| 3 |
.Class
选择出与给定的 Class 匹配的全部元素。 |
| 4 |
Universal (*)
选择出在 DOM 中全部可用的元素。 |
| 5 |
多个元素 E, F, G
选择出所有指定的选择器 E, F 或 G 的所有组合结果。 |
选择器示例
与上述语法和实例类似，下面的例子会使你对使用其他类型的选择器有一个大致的了解 ——
| S.N. | Selector & Description |
|---|---|
| 1 |
$('*')
该选择器选出文档中所有的元素。 |
| 2 |
$("p > *")
该选择器选择出段落元素的所有子元素。 |
| 3 |
$("#specialID")
该选择器函数获取 id="specialID" 的元素。 |
| 4 |
$(".specialClass")
该选择器获取带有 specialClass 类的所有元素。 |
| 5 |
$("li:not(.myclass)")
选择出与 <li> 匹配并且不带有 class="myclass" 类的所有元素。 |
| 6 |
$("a#specialID.specialClass")
该选择器与 id 为 specialID 的链接匹配并且带有 specialClass 类。 |
| 7 |
$("p a.specialClass")
该选择器与带有 specialClass 类的链接匹配并且该类在 <p> 元素内声明。 |
| 8 |
$("ul li:first")
该选择器获取 <ul> 的第一个 <li> 元素。 |
| 9 |
$("#container p")
选择与 <p> 匹配并且是带有 container id 元素的后代的全部元素。 |
| 10 |
$("li > ul")
选择与 <ul> 匹配并且是与 <li> 匹配的元素的孩子的全部元素。 |
| 11 |
$("strong + em")
选择与 <em> 匹配并且紧跟一个与 <strong> 匹配的兄弟元素的全部元素。 |
| 12 |
$("p ~ ul")
选择与 <ul> 匹配并且后面有一个与 <p> 匹配的兄弟元素的全部元素。 |
| 13 |
$("code, em, strong")
选择所有与 <code> 或 <em> 或 <strong> 匹配的元素。 |
| 14 |
$("p strong, .myclass")
选择与 <strong> 匹配并且是与 <p> 匹配的元素的后代，同样所有的元素都要有 myclass 类的全部元素。 |
| 15 |
$(":empty")
选择出所有没有孩子的元素。 |
| 16 |
$("p:empty")
选择出所有与 <p> 匹配并且没有孩子的元素。 |
| 17 |
$("div[p]")
选择出与 <div> 匹配并且包含一个与 <p> 匹配的元素的所有元素。 |
| 18 |
$("p[.myclass]")
选择出与 <p> 匹配并且包含一个带有 myclass 类的元素的所有元素。 |
| 19 |
$("a[@rel]")
选择出与 <a> 匹配并且带有 rel 属性的全部元素。 |
| 20 |
$("input[@name=myname]")
选择出所有与 <input> 匹配并且 name 值恰好等于 myname 的元素。 |
| 21 |
$("input[@name^=myname]")
选择出所有与 <input> 匹配并且 name 值以 myname 开始的元素。 |
| 22 |
$("a[@rel$=self]")
选择出所有与 <a> 匹配并且带有以 self 结尾的 rel 属性值的元素。 |
| 23 |
$("a[@href*=domain.com]")
选择出所有与 <a> 并且带有一个包含 domain.com 的超链接值的元素。 |
| 24 |
$("li:even")
选择出与 <li> 匹配并且带有一个 even 索引值的全部元素。 |
| 25 |
$("tr:odd")
选择出与 <tr> 匹配并且有 odd 索引值的全部元素。 |
| 26 |
$("li:first")
选择出第一个 <li> 元素。 |
| 27 |
$("li:last")
选择出最后一个 <li> 元素。 |
| 28 |
$("li:visible")
选择出与 <li> 匹配并且可见的全部元素。 |
| 29 |
$("li:hidden")
选择出与 <li> 匹配并且不可见的全部元素。 |
| 30 |
$(":radio")
选择出表单中全部的单选按钮。 |
| 31 |
$(":checked")
选择出表单中全部的复选框。 |
| 32 |
$(":input")
只选择表单元素 (输入，选择，文本区，按钮)。 |
| 33 |
$(":text")
只选择文本元素 (input[type=text])。 |
| 34 |
$("li:eq(2)")
选择第三个 <li> 元素。 |
| 35 |
$("li:eq(4)")
选择第五个 <li> 元素。 |
| 36 |
$("li:lt(2)")
选择第三个之前的与 <li> 元素匹配的所有元素；换句话说，也就说前两个 <li> 元素。 |
| 37 |
$("p:lt(3)")
选择第四个之前的与 <p> 元素匹配的全部元素；换句话说，也就是前三个 <p> 元素。 |
| 38 |
$("li:gt(1)")
选择第二个之后的与 <li> 匹配的全部元素。 |
| 39 |
$("p:gt(2)")
选择第三个之后与 <p> 匹配的全部元素。 |
| 40 |
$("div/p")
选择与 <p> 匹配并且是与 <div> 匹配的元素的孩子的全部元素。 |
| 41 |
$("div//code")
选择与 <code> 匹配并且是与 <div> 匹配的元素的后代的全部元素。 |
| 42 |
$("//p//a")
选择与 <a> 匹配并且是与 <p> 匹配的元素后代的全部元素。 |
| 43 |
$("li:first-child")
选择与 <li> 匹配并且是它们父亲的第一个孩子的全部元素。 |
| 44 |
$("li:last-child")
选择与 <li> 匹配并且是它们父亲的最后一个孩子的全部元素。 |
| 45 |
$(":parent")
选择出是另一个元素的父亲的全部元素，包括文本。 |
| 46 |
$("li:contains(second)")
选择与 <li> 匹配并且包含文本 second 的全部元素。 |
你可以用任何 HTML/XML 元素以通用的方式使用上述所有选择器。例如，如果选择器 $("li:first") 为 < li> 元素工作，那么 $("p:first") 也会为 < p> 元素工作。
更多建议：