jQuery - 语法

jQuery 用于从 HTML 文档中选择任何 HTML 元素，然后对该选定的元素执行任何操作。要选择 HTML 元素，可以使用 jQuery 选择器，我们将在下一章详细学习这些选择器。现在让我们先看看基本的jQuery 语法，以了解如何查找、选择或查询元素，然后对选定的元素执行操作。

文档就绪事件

在深入了解jQuery 语法之前，让我们先尝试了解什么是文档就绪事件。实际上，在我们执行任何 jQuery 语句之前，我们希望等待文档完全加载。这是因为 jQuery 在 DOM 上运行，如果在执行 jQuery 语句之前 DOM 未完全可用，那么我们将无法获得期望的结果。

以下是文档就绪事件的基本语法

$(document).ready(function(){

  // jQuery code goes here...

});

或者，您也可以使用以下语法表示文档就绪事件

$(function(){

  // jQuery code goes here...

});

您应该始终将文档就绪事件块放在<script>...</script>标签内，并且您可以将此脚本标签放在<head>...</head>标签内或页面底部<body>标签关闭之前。

您可以使用这两种语法中的任何一种，将您的 jQuery 代码放在此块内，该块仅在完整 DOM 下载并准备好进行解析时才执行。

jQuery 语法

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

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

任何 jQuery 语句都以美元符号$开头，然后我们将选择器放在括号()内。此语法$(selector)足以返回选定的 HTML 元素，但如果您必须对选定的元素执行任何操作，则需要action()部分。

工厂函数$()是jQuery()函数的同义词。因此，如果您使用的是任何其他 JavaScript 库，其中 $ 符号与其他内容冲突，则可以将$符号替换为 jQuery 名称，并且可以使用函数jQuery()代替$()。

示例

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

<!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").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()方法而不是$()方法重写上述示例

<!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() {
      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>

以下是将所有<h1>元素的颜色更改为红色的 jQuery 语法。尝试点击图标运行以下 jQuery 代码

<!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() {
      $("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 代码

<!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() {
      $(".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 文档上运行。您可以修改上述框中给出的代码，然后尝试运行这些程序以查看它们在实际中的运行情况。

打印页面