jQuery 选择器

jQuery 提供的最重要的功能是通过它的 选择器 来实现的。本教程将用简单的示例解释jQuery选择器，涵盖所有三种标准选择器。

jQuery选择器

jQuery选择器用于从HTML文档中选择HTML元素。假设给定了一个HTML文档，并且您需要从该文档中选择所有的<div>。这就是jQuery选择器的作用所在。

jQuery选择器可以根据以下内容找到HTML元素（即选择HTML元素）：

HTML元素名称
元素ID
元素类名
元素属性名称
元素属性值
其他更多条件

jQuery库利用层叠样式表（CSS）选择器的强大功能，让我们可以快速简便地访问文档对象模型（DOM）中的元素或元素组。

jQuery选择器在HTML文档上的工作方式与 SQL Select语句 在数据库上选择记录的方式非常相似。

jQuery选择器语法

以下是选择HTML元素的jQuery选择器语法：

$(document).ready(function(){
    $(selector)
});

一个jQuery选择器以美元符号 $ 开头，然后我们在大括号中放一个 选择器 。 () 这里的 $() 被称为 工厂函数 ，它在选择给定文档中的元素时使用以下三个构建块：

选择器名称	描述
`element` 选择器	表示DOM中可用的HTML元素名称。例如， `$('p')` 选择文档中所有的`<p>`段落。
`#id` 选择器	表示DOM中具有给定ID的HTML元素。例如， `$('#some-id')` 选择文档中具有ID为 some-id 的单个元素。
`.class` 选择器	表示DOM中具有给定类的HTML元素。例如， `$('.some-class')` 选择文档中所有具有类 some-class 的元素。

所有上述选择器可以单独使用，也可以与其他选择器组合使用。所有的jQuery选择器都基于相同的原理，只是有些微调。

元素element选择器

jQuery 元素选择器根据元素名称选择HTML元素。以下是元素选择器的简单语法：

$(document).ready(function(){
    $("Html Element Name")
});

请注意，在使用元素名称作为jQuery选择器时，我们不会将尖括号与元素一起给出。例如，我们只给出普通的p，而不是 < p>。

示例

以下是一个示例，选择HTML文档中的所有 < p>元素，然后更改这些段落的背景颜色。您在此示例生成的输出中看不到任何 < p>元素。您还可以更改代码以使用不同的元素名称作为选择器。

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
    $(document).ready(function() {$ ("p").css("background-color", "yellow");
   });
</script>
</head>
<body>
   <h1>jQuery element Selector</h1>

   <p>This is p tag</p>
   <span>This is span tag</span>
   <div>This is div tag</div>
</body>
</html>

id选择器

jQuery的 #id 选择器根据HTML元素的 id 属性选择HTML元素。以下是 #id 选择器的简单语法：

$(document).ready(function(){
    $("#id of the element")
});

为了使用jQuery的 #id 选择器，你需要确保所有的DOM元素都分配了唯一的 id 属性。如果你的元素有相似的id，则会产生不正确的结果。

示例

以下是一个示例，选择 < p>元素，该元素的 id 是 foo ，并改变这些段落的背景颜色。你也可以更改代码，使用不同的元素id属性作为选择器。

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
    $(document).ready(function() {$ ("#foo").css("background-color", "yellow");
   });
</script>
</head>
<body>
   <h1>jQuery #id Selector</h1>

   <p id="foo">This is foo p tag</p>
   <span id="bar">This is bar span tag</span>
   <div id="bill">This is bill div tag</div>
</body>
</html>

.class选择器

jQuery .class 选择器根据元素的 class 属性选择HTML元素。以下是一个简单的 .class 选择器的语法：

$(document).ready(function(){
    $(".class of the element")
});

因为一个类可以被赋予多个HTML元素，所以很有可能使用一个 .class 选择器语句来找到多个元素。

示例

以下是一个例子，选择所有的class为 foo 的元素，并改变这些元素的背景颜色。你也可以改变代码，使用不同的元素类名作为选择器。

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src = "https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
    $(document).ready(function() {$ (".foo").css("background-color", "yellow");
   });
</script>
</head>
<body>
   <h1>jQuery .class Selector</h1>

   <p class="foo">This is foo p tag</p>
   <p class="foo">This is one more foo p tag</p>
   <span class="bar">This is bar span tag</span>
   <div class="bill">This is bill div tag</div>
</body>
</html>

到目前为止，我们只覆盖了三个标准的jQuery选择器。如果您想要详细了解所有这些jQuery选择器，您可以查看 jQuery选择器参考指南。