jQuery 入门

Created: November-22, 2018

使用以下内容创建文件 hello.html：

<!DOCTYPE html>
<html>
<head>
    <title>Hello, World!</title>
</head>
<body>
    <div>
        <p id="hello">Some random text</p>
    </div>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#hello').text('Hello, World!');
        });
    </script>
</body>
</html>

JSBin 现场演示

在 Web 浏览器中打开此文件。因此，你将看到一个包含文本的页面：Hello, World!

代码说明

从 jQuery CDN 加载 jQuery 库：
```
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
```
这引入了 $ 全局变量，jQuery 函数和命名空间的别名。

请注意，包含 jQuery 时最常见的错误之一是在任何其他可能依赖或使用它的脚本或库之前未能加载库。

当 jQuery 检测到 DOM（文档对象模型）被 准备好时，推迟执行的函数：

// When the `document` is `ready`, execute this function `...`
$(document).ready(function() { ... });

// A commonly used shorthand version (behaves the same as the above)
$(function() { ... });

一旦 DOM 准备就绪，jQuery 就会执行上面显示的回调函数。在我们的函数内部，只有一个调用可以执行两个主要操作：
1. 获取 id 属性等于 hello 的元素（我们的选择器 #hello）。使用选择器作为传递参数是 jQuery 功能和命名的核心; 整个库基本上是从扩展 document.querySelectorAll MDN演变而来的。
2. 设置 text() 内所选元素 Hello, World!。
```
#    ↓ - Pass a `selector` to `$` jQuery, returns our element
$('#hello').text('Hello, World!');
#             ↑ - Set the Text on the element
```

有关更多信息，请参阅 jQuery - Documentation 页面。