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语句都以一个美元符号 $ 开始，然后我们将一个选择器放在括号 () 内。这个语法 $(选择器) 足以返回选定的HTML元素，但如果您必须对选定的元素执行任何操作，则需要 action() 部分。

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

示例

以下是几个示例，用于说明基本的jQuery语法。下面的示例将从HTML文档中选择所有的 < 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").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://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>

以下是更改所有 <h1>元素颜色为红色的jQuery语法。

<!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”的元素的颜色。

<!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文档上的工作方式。您可以修改上面方框中给出的代码，然后尝试运行这些程序，以实时观看它们的效果。