笙亿网络策划

jQuery 语法怎么写？jQuery 基本语法规则有哪些？

约 8 分钟读完 35 阅
文章导读
Previous Quiz Next jQuery 用于从 HTML 文档中选择任何 HTML 元素，然后对所选元素执行任何操作。要选择 HTML 元素，使用 jQuery selector，我们将在下一章详细学习这些 selector。现在，让我们来看看基本的 jQuer
📋 目录
  1. 一 文档就绪事件
  2. 二 jQuery 语法
  3. 三 示例
A A

jQuery - 语法

Previous
Quiz
Next

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

文档就绪事件

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

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

$(document).ready(function(){

  // jQuery 代码写在这里...

});

或者，您也可以使用以下语法来实现文档就绪事件：

$(function(){

  // jQuery 代码写在这里...

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

您可以使用这两种语法中的任意一种，将 jQuery 代码放在块内，该块仅在完整 DOM 下载并就绪解析时执行。

jQuery 语法

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

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

任何 jQuery 语句都以美元符号 $ 开头，然后在括号 () 内放置一个 selector。这种语法 $(selector) 足以返回所选的 HTML 元素，但如果您需要在所选元素上执行任何操作，则需要 action() 部分。

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

示例

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

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.example.com"></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.example.com"></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> 元素的颜色更改为红色。尝试点击图标 run button 来运行以下 jQuery 代码：

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.example.com"></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>

类似地，你可以更改所有 class 为 "red" 的元素的颜色。尝试点击图标 run button 来运行以下 jQuery 代码：

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.example.com"></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 文档上工作。你可以修改上面框中的代码，然后尝试运行这些程序来实时查看它们的效果。