Jquery 简明教程

jQuery - Syntax

jQuery 用于从 HTML 文档中选择任何 HTML 元素，然后对所选元素执行任何操作。要选择 HTML 元素，使用 jQuery 选择器，我们将在下一章详细学习这些选择器。现在，让我们看一下基本的 jQuery Syntax 来查找、选择或查询元素，然后对所选元素执行操作。

jQuery is used to select any HTML element from an HTML document and then perform any action on that selected element. To select an HTML element, jQuery selectors are used, we will study these selectors in detail in the next chapter. For now let’s have a look of basic jQuery Syntax to Find out or to Select or to Query an element and then perform an action on the selected element.

Document Ready Event

在我们查看 jQuery Syntax 之前，让我们尝试了解 Document Ready Event 是什么。事实上，在我们执行任何 jQuery 语句之前，我们希望等待文档完全加载。这是因为 jQuery 在 DOM 上工作，如果在执行 jQuery 语句之前完整的 DOM 不可获取，则我们不会获得所需的结果。

Before we look into jQuery Syntax, let’s try to understand what is Document Ready Event. Actually, before we execute any jQuery statement, we would like to wait for the document to be fully loaded. This is because jQuery works on DOM and if complete DOM is not available before executing jQuery statements, then we will not get desired result.

以下是 Document Ready Event 的基本语法：

Following is basic syntax of a Document Ready Event:

$(document).ready(function(){

  // jQuery code goes here...

});

或者，你还可以对文档准备就绪事件使用以下语法：

Alternatively you can also use the following syntax for document ready event:

$(function(){

  // jQuery code goes here...

});

你可以使用这两个语法中的任何一个来将 jQuery 代码保留在块中，该块仅在完成 DOM 下载并准备解析后才执行。

You can use either of these two syntax to keep your jQuery code inside the block which will be executed only when complete DOM is downloaded and ready to be parses.

jQuery Syntax

以下是选择 HTML 元素，然后对所选元素执行某些操作的基本语法：

Following is the basic syntax for selecting HTML elements and then performing some action on the selected element(s):

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

任何 jQuery 语句都以美元符号 $ 开头，然后我们在括号 () 中放置 selector 。该语法 $(selector) 足以返回所选的 HTML 元素，但如果你必须对所选元素执行任何操作，则 action() 部分是必需的。

Any jQuery statement starts with a dollar sign $ and then we put a selector inside the braces (). This syntax $(selector) is enough to return the selected HTML elements, but if you have to perform any action on the selected element(s) then action() part is required.

Examples

以下是几个示例来说明基本的 jQuery 语法。以下示例将从 HTML 文档中选择所有 <p> 元素，并将隐藏这些元素。尝试单击图标来运行以下 jQuery 代码：

Below are few examples to illustrate the basic jQuery Syntax. Following example will select all the <p> elements from an HTML document and will hide those elements. Try to click the icon to run the following jQuery code:

<!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").hide()
   });
</script>
</head>
<body>
   <h1>jQuery Basic Syntax</h1>

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

让我们改用 jQuery() 方法，而不是 $() 来重写上述示例：

Let’s re-write the above example using jQuery() method instead of $():

<!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() {
      jQuery("p").hide()
   });
</script>
</head>
<body>
   <h1>jQuery Basic Syntax</h1>

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

以下为 jQuery 语法，用于将所有 <h1> 元素的颜色更改为红色。尝试单击图标来运行以下 jQuery 代码：

Following is the jQuery Syntax to change the color of all the <h1> elements to red. Try to click the icon to run the following jQuery code:

<!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() {
      $("h1").css("color", "red")
   });
</script>
</head>
<body>
   <h1>jQuery Basic Syntax</h1>

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

以类似的方式，你可以更改所有类为“red”的元素的颜色。尝试单击图标来运行以下 jQuery 代码：

Similar way you can change the color of all the elements whose class is "red". Try to click the icon to run the following jQuery code:

<!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() {
      $(".red").css("color", "red")
   });
</script>
</head>
<body>
   <h1>jQuery Basic Syntax</h1>

   <p>This is p tag</p>
   <span>This is span tag</span>
   <div class="red">This is div tag</div>
</body>
</html>

在本文中，你会看到很多基本的 jQuery 语法示例，以便让你清楚地了解 jQuery 如何确切地在 HTML 文档中发挥作用。你可以修改上面方框中给出的代码，然后尝试运行这些程序，以亲身查看这些程序如何在实战中运行。

So far, we have seen you very basic examples of jQuery Syntax to give you clear understanding on how exactly jQuery is going to work on an HTML document. You can modify the code given in the above boxes and then try to run these programs to see them live in action.