jQuery
jQuery

jQuery 入门

# jQuery 入门

# 1. jQuery 的优点

轻量级：核心文件只有几十KB，不会影响页面加载速度。
跨浏览器兼容：基本兼容现在主流的浏览器。
链式编程、隐式迭代：简化代码书写。
对事件、样式、动画支持：大大简化了DOM操作。
支持插件扩展开发：有丰富的第三方插件，例如：树形菜单、日期控件、轮播图等。
免费、开源。

# 2. 引入 jQuery

要使用 jQuery，需要先在 HTML 页面中引入 jQuery 库。可以通过以下两种方式引入：

通过 CDN 引入：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 示例</title>
    <!-- 引入 jQuery 库 -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12

下载并本地引入：

首先从 jQuery 官方网站 (opens new window) 下载 jQuery 库文件，然后在 HTML 页面中引入：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 示例</title>
    <!-- 引入本地 jQuery 库 -->
    <script src="path/to/your/jquery.min.js"></script>
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12

# 3. jQuery 的基本使用

# 3.1 jQuery 的入口函数

// 方法一：推荐使用
$(function() {
    // 此处是页面 DOM 加载完成的入口
});

// 方法二：等效于方法一，但不常用
$(document).ready(function() {
    // 此处是页面 DOM 加载完成的入口
});

/*
1. 等待 DOM 结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery 帮我们完成了封装。
2. 相当于原生 JavaScript 中的 DOMContentLoaded 事件。
3. 不同于原生 JavaScript 中的 load 事件，load 事件是等页面文档、外部的 JS 文件、CSS 文件、图片加载完毕才执行内部代码。
4. 更推荐使用第一种方式。
*/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 3.2 jQuery 的顶级对象 `$`

$ 是 jQuery 的别称，在代码中可以使用 jQuery 代替 $，但一般为了方便，通常都直接使用 $。
$ 是 jQuery 的顶级对象，相当于原生 JavaScript 中的 window。把元素利用 $ 包装成 jQuery 对象，就可以调用 jQuery 的方法。

# 3.3 jQuery 对象和 DOM 对象

用原生 JavaScript 获取来的对象就是 DOM 对象。
jQuery 方法获取的元素就是 jQuery 对象。
jQuery 对象本质是：利用 $ 对 DOM 对象包装后产生的对象（伪数组形式存储）。

注意：只有 jQuery 对象才能使用 jQuery 方法，DOM 对象则使用原生的 JavaScript 方法。

DOM 对象与 jQuery 对象之间是可以相互转换的。

DOM 对象转换为 jQuery 对象：

var domElement = document.getElementById('example'); // 获取 DOM 对象
var jqueryElement = $(domElement); // 转换为 jQuery 对象

1
2

jQuery 对象转换为 DOM 对象（两种方式）：

var jqueryElement = $('#example'); // 获取 jQuery 对象
var domElement1 = jqueryElement[0]; // 转换为 DOM 对象，使用索引号
var domElement2 = jqueryElement.get(0); // 转换为 DOM 对象，使用 get 方法

1
2
3

# 4. 示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        // 使用 jQuery 的入口函数
        $(function() {
            // 获取 DOM 对象
            var domElement = document.getElementById('example');
            console.log(domElement); // 输出 DOM 对象

            // 将 DOM 对象转换为 jQuery 对象
            var jqueryElement = $(domElement);
            console.log(jqueryElement); // 输出 jQuery 对象

            // 将 jQuery 对象转换为 DOM 对象
            var domElement1 = jqueryElement[0];
            var domElement2 = jqueryElement.get(0);
            console.log(domElement1); // 输出 DOM 对象
            console.log(domElement2); // 输出 DOM 对象
        });
    </script>
</head>
<body>
    <div id="example">Hello jQuery</div>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

编辑此页

上次更新: 2024/12/28, 18:32:08

jQuery 选择器→