Jquery 简明教程

jQuery - Selectors

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

The most important functionality of jQuery is provided by it’s Selectors. This tutorial will explain jQuery Selectors with simple examples covering all the three standard selectors.

jQuery Selectors

jQuery 选择器用于从 HTML 文档中选择 HTML 元素。考虑一个给定的 HTML 文档，您需要从中选择所有 <div>。这就是 jQuery 选择器将提供帮助的地方。

jQuery Selectors are used to select HTML element(s) from an HTML document. Consider an HTML document is given and you need to select all the <div> from this document. This is where jQuery Selectors will help.

jQuery 选择器可以基于以下条件查找 HTML 元素（即选择 HTML 元素）：

jQuery Selectors can find HTML elements (ie. Select HTML elements) based on the following:

HTML element Name
Element ID
Element Class
Element attribute name
Element attribute value
Many more criteria

jQuery 库利用 Cascading Style Sheets （CSS）选择器的强大功能，使我们能够快速轻松地访问文档对象模型（DOM）中的元素或元素组。

The jQuery library harnesses the power of Cascading Style Sheets (CSS) selectors to let us quickly and easily access elements or groups of elements in the Document Object Model (DOM).

jQuery 选择器对 HTML 文档的处理方式与 SQL Select Statement 在数据库中选择记录的处理方式非常相似。

jQuery Selectors works in very similar way on an HTML document like an SQL Select Statement works on a Database to select the records.

jQuery Selector Syntax

以下是如何使用 jQuery 选择语法选择 HTML 元素：

Following is the jQuery Selector Syntax for selecting HTML elements:

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

jQuery 选择器以美元符号 $ 开头，然后在花括号 () 内添加 selector 。此处的 $() 称为 factory function ，它在给定文档中选择元素时使用以下三个基本模块：

A jQuery selector starts with a dollar sign $ and then we put a selector inside the braces (). Here $() is called factory function, which makes use of following three building blocks while selecting elements in a given document:

Selector Name

Description

The element Selector

Represents an HTML element name available in the DOM. For example $('p') selects all paragraphs <p> in the document.

The #id Selector

Represents a HTML element available with the given ID in the DOM. For example $('#some-id') selects the single element in the document that has some-id as element Id.

The .class Selector

Represents a HTML elements available with the given class in the DOM. For example $('.some-class') selects all elements in the document that have a class of some-class.

所有这些选择器都可以单独使用，或与其他选择器组合使用。除了进行一些调整，所有 jQuery 选择器都基于相同的原理。

All the above selectors can be used either on their own or in combination with other selectors. All the jQuery selectors are based on the same principle except some tweaking.

The element Selector

jQuery element 选择器基于元素名称选择 HTML 元素。以下是元素选择器的简单语法：

The jQuery element selector selects HTML element(s) based on the element name. Following is a simple syntax of an element selector:

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

请注意，当使用元素名称作为 jQuery 选择器时，我们不会将尖括号与该元素一起提供。例如，我们仅提供 p 而不是 <p> 。

Please note while using element name as jQuery Selector, we are not giving angle braces alongwith the element. For example, we are giving only plain p instead of <p>.

Examples

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

Following is an example to select all the <p> elements from an HTML document and then change the background color of those paragraphs. You will not see any <p> element in the output generated by this example. You can also change the code to use different element names as selector and then click the icon to verify the result.

<!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>

The

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

The jQuery #id selector selects an HTML element based on the element id attribute. Following is a simple syntax of a #id selector:

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

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

To use jQuery #id selector, you need to make sure that id attribute should be uniquely assigned to all the DOM elements. If your elements will have similar ids then it will not produce correct result.

Examples

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

Following is an example to select the <p> element whose id is foo and change the background color of those paragraphs.. You can also change the code to use different element id attribute as selector and then click the icon to verify the result.

<!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>

The .class Selector

jQuery .class 选择器基于元素 class 属性选择 HTML 元素。以下是 .class 选择器的简单语法：

The jQuery .class selector selects HTML element(s) based on the element class attribute. Following is a simple syntax of a .class selector:

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

因为一个类可以分配给 HTML 文档中多个 HTML 元素，所以完全有可能使用单个 .class 选择器语句找出多个元素。

Because a class can be assigned to multiple HTML elements with in an HTML document, so it is very much possible to find out multiple elements with a single .class selector statement.

Examples

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

Following is an example to select all the elements whose class is foo and change the background color of those elements. You can also change the code to use different element class name as selector and then click the icon to verify the result.

<!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 Selectors Reference 了解。

So far we have covered only three standard jQuery Selectors. For a complete detail of all these jQuery selectors, you can go to through jQuery Selectors Reference.