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 选择器以美元符号$开头，然后我们将选择器放在括号()内。这里$()称为工厂函数，在选择给定文档中的元素时，它使用以下三个构建块：

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

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

元素选择器

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://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 选择器根据元素的id属性选择 HTML 元素。以下是#id选择器的简单语法：

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

要使用 jQuery #id 选择器，您需要确保id属性应唯一分配给所有 DOM 元素。如果您的元素具有相同的 id，则不会产生正确的结果。

示例

以下是一个示例，用于选择id为foo的<p>元素，并更改这些段落的背景颜色。您也可以更改代码以使用不同的元素 id 属性作为选择器，然后单击图标来验证结果。

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://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 文档中的多个 HTML 元素，所以使用单个.class选择器语句找出多个元素是完全可能的。

示例

以下是一个示例，用于选择所有class为foo的元素，并更改这些元素的背景颜色。您也可以更改代码以使用不同的元素类名作为选择器，然后单击图标来验证结果。

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src = "https://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 选择器参考。

打印页面