jQuery 语法

Created: October-14, 2018

在本教程中，你将学习如何编写 jQuery 代码。

标准的 jQuery 语法

jQuery 语句通常以美元符号（$）开头，以分号（;）结尾。

在 jQuery 中，美元符号（$）只是 jQuery 的别名。让我们考虑以下示例代码，它演示了 jQuery 的最基本的语法。

<script type="text/javascript">
    $(document).ready(function(){
        // Some code to be executed...
        alert("Hello World!");
    });
</script>

上面的示例只显示一条警告消息 Hello World! 给用户。

代码说明

如果你对 jQuery 完全陌生，那么你可能会想到该代码的全部内容。好的，让我们一个一个地浏览这个脚本的每个部分。

<script> 元件-由于 jQuery 是只是一个 JavaScript 库，所以 jQuery 代码可以放在<script> 内部。但是，如果要将其放在首选的外部 JavaScript 文件中，则只需删除此部分即可。
$(document).ready(handler); -这种说法通常被称为 ready 事件。当处理器基本上是传递给 ready() 方法的函数，准备好文档被操纵即当 DOM 分层已全部构建安全地尽快执行。

jQuery ready() 方法通常与匿名函数一起使用。所以，上面的例子也可以用这样的简写符号写成：

<script type="text/javascript">
    $(function(){
        // Some code to be executed...
        alert("Hello World!");
    });
</script>

提示： 你可以使用任何你喜欢的语法，因为语法都是等效的。但是，在阅读代码时，文档就绪事件更容易理解。

此外，在事件处理函数内部，你可以编写 jQuery 语句以执行基本语法之后的任何操作，例如： $(selector).action();

其中， $(selector) 基本上从 DOM 树中选择 HTML 元素，以便可以对其进行操作，并对 action() 所选元素应用某些操作，例如更改 CSS 属性值，或设置元素的内容等。让我们考虑另一个设置 DOM 准备就绪后的段落文本：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery Document Ready Demo</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script src="js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("p").text("Hello World!");
        });
    </script>
</head>
<body>
    <p>Not loaded yet.</p>
</body>
</html>

在上面示例的 jQuery 语句（第 10 行）中， p 是一个 jQuery 选择器，它选择所有段落，就是文档中的 <p> 元素，稍后 text() 方法将段落的文本内容设置为“Hello World！”。文本。

当文档准备好时，上面示例中的段落文本将自动替换。但是如果我们希望用户在执行 jQuery 代码之前执行某些操作来替换段落文本会怎样。让我们考虑最后一个例子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery Click Handler Demo</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script src="js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("button").click(function(){
                $("p").text("Hello World!");
            });            
        });
    </script>
</head>
<body>
    <p>Not loaded yet.</p>
    <button type="button">Replace Text</button>
</body>
</html>

在上面的示例中，只有在"Replace Text" <button> 上发生单击事件时才会替换段落文本，这仅仅意味着当用户单击此按钮时。

现在你已经基本了解了 jQuery 的工作原理，在接下来的章节中，你将了解我们在此详细讨论过的术语。