jQuery 语法

在本教程中,你将学习如何编写 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 的工作原理,在接下来的章节中,你将了解我们在此详细讨论过的术语。

注意: 你应该将 jQuery 代码放在 document ready 事件中,以便在文档准备就绪时执行代码。