jQuery 使用笔记
叶寻
目次
jQuery 是一个经典的 JavaScript 库，其功能为修改 HTML 元素、处理事件、制作动画、发送请求（Ajax）。jQuery 首次发布于 2006 年 8 月 26 日，现在（2024 年）已经 18 岁了。截止于 2024 年 10 月 23 日，有 75.8% 的网站使用了 jQuery。
虽然 jQuery 的使用率高，但新项目没必要用 jQuery，原生 JavaScript 已经可以实现 jQuery 的操作，参看 You Might Not Need jQuery 和 You-Dont-Need-jQuery。维护老项目时可能会用到 jQuery。
jQuery 的引入方法很多，我在本文采用 CDN 引入。
1
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
|
下面介绍一些常见用法。
获取元素 #
jQuery 使用 CSS 选择器获取元素。
1
2
3
| $(document) // 获取整个文档
$("#id1") // 获取 id 为 id1 的元素
$(".class1") // 获取 class 为 class1 的元素
|
插入元素 #
1
2
| <!-- HTML 示例 -->
<div id="container"><p>Container</p></div>
|
1
2
3
4
| $("#container").append("<p>inside-end</p>"); // 在 #container 末尾插入子元素
$("#container").prepend("<p>inside-start</p>"); // 在 #container 开头插入子元素
$("#container").after("<p>outside-end</p>") // 在 #container 后面插入兄弟元素
$("#container").before("<p>outside-start</p>") // 在 #container 前面插入兄弟元素
|
现在页面上的元素是这样的：
1
2
3
4
5
6
7
| <p>outside-start</p>
<div id="container">
<p>inside-start</p>
<p>Container</p>
<p>inside-end</p>
</div>
<p>outside-end</p>
|
取值与赋值 #
jQuery 使用同一个函数来取值和赋值，根据参数数量进行不同操作。
1
2
| <!-- HTML 示例 -->
<h1 id="title">Title</h1>
|
1
2
3
4
| $("#title").html() // 获取 #title 的值
$("#title").html("Another title") // 修改 #title 的值
$("#title").width() // 获取 #title 的宽度
$("#title").width(1) // 修改 #title 的宽度
|
链式调用 #
jQuery 的每个操作都会返回 jQuery 对象，所以可以进行连续操作。
1
2
3
4
5
| <!-- HTML 示例 -->
<div id="container">
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</div>
|
1
2
3
4
5
6
7
| $("div") // 选择 div 元素
.find("p") // 查找 div 里的 p 元素
.eq(1) // 选择第 2 个元素
.html("end") // 把第 2 个元素内容修改为 end
.end() // 退回到上一个选中的元素，也就是 .find("p")
.eq(0) // 选择第 1 个元素
.html("start") // 将第 1 个元素内容修改为 start
|
现在页面是 start 在上面，end 在下面。
资料 #
giscus 评论。如果评论未加载，giscus 可能被你的互联网服务提供商屏蔽。
Disqus 评论。如果评论未加载，Disqus 可能被你的互联网服务提供商屏蔽。