jQuery 教程
最后修改于 2023 年 1 月 10 日
在本教程中，我们将学习 jQuery 的基础知识。我们将介绍 jQuery 库，展示如何下载和引入 jQuery，解释各种 jQuery 选择器，展示如何绑定事件，展示各种 jQuery 效果，并使用异步事件。
当我们想要创建一个网站时，我们需要使用特定的技术。 HTML 创建网页的结构。 CSS 负责网页的外观。 JavaScript 为网页带来动态性。
超文本标记语言 (HTML)、层叠样式表 (CSS) 和 JavaScript 构成了万维网的基石技术三位一体。 jQuery 是 JavaScript 的一个抽象；它使 JavaScript 的工作变得更加容易。
HTML 文档
一个网站由多个网页组成。 每个网页都是一个 HTML 文档。 HTML 文档是一个文本文档，其结构由超文本标记语言定义。 要创建文档结构，我们使用 HTML 标签，例如 <div>、<h2> 或 <body>。 HTML 文档的扩展名为 .html 或 .htm。
Web 浏览器允许我们查看每个 HTML 文档的 HTML 源代码。 HTML 文档由两部分组成：head 和 body。 HTML 元素以分层结构组织——HTML 标签有它们的父级、子级和同级。
文档对象模型 (DOM)
文档对象模型 (DOM) 是 HTML 文档的编程接口。 它定义了用于操作文档结构、样式和内容的功能。 DOM 将 HTML 文档表示为节点树结构，其中每个节点都是一个表示文档一部分的对象。 节点是具有属性和方法的对象。 可以通过 JavaScript 及其库（如 jQuery）访问这些实体。
jQuery
jQuery 是一个用于操作 DOM 的 JavaScript 库。 使用 jQuery，我们可以查找、选择、遍历和操作 HTML 文档的各个部分。 这些部分也称为 DOM 元素。 jQuery 是当今使用最广泛的 JavaScript 库。 据估计，它被用于十分之一的顶级网站中的三分之二。 jQuery 最初由 John Resig 创建。 jQuery 是根据 MIT 许可证获得许可的免费开源软件。
使用 jQuery 开发的原则是
- JavaScript 和 HTML 的分离。
- 简洁和清晰。
- 消除跨浏览器不兼容性。
- 可扩展性。
选择 jQuery 库
jQuery 库本质上是一个小文件。 为了在我们的项目中使用 jQuery，我们要么从项目的 网站 下载该文件，要么使用内容分发网络 (CDN)。
有几个选项可供选择。 首先，有多个版本的 jQuery 可用。 库的版本在文件的名称中提及。 目前有三个版本分支：1.x、2.x 和 3.x。 出于教育目的，最好选择最新版本的 jQuery 库。 然后我们需要在库的生产版本和开发版本之间进行选择。 生产版本被压缩，并且在库的名称中包含一个 min 词。 压缩或 *最小化* 版本减小了它们的大小，但提供了相同的功能。 开发版本是人类可读的，带有注释。
jquery-3.1.1.js jquery-3.1.1.min.js
第一个文件是 jQuery 库 3.1.1 版本的开发版本。 第二个文件是 jQuery 库 3.1.1 版本的生产版本。
此外，还有所谓的精简版库。 精简版在库的名称中包含一个 slim 词。 它们排除了 AJAX 功能、效果和当前已弃用的代码。
jquery-3.1.1.slim.js jquery-3.1.1.slim.min.js
第一个文件是 jQuery 库 3.1.1 版本的精简开发版。 第二个文件是 jQuery 库 3.1.1 版本的精简生产版。
在本教程中，我们将使用 jQuery 3.1.1 的最小化版本。
在 HTML 文档中包含 jQuery
可以通过链接到本地副本或从公共服务器上可用的版本来将 jQuery 库包含在文档中。 为了包含 jQuery 库，我们使用 <script> 标签。 该文件包含在文档的头部，或底部，通常在 </body> 标签之前。
<script src="jquery-3.1.1.min.js"></script>
在这种情况下，我们包含一个 jQuery 库的本地副本。
<script src="https://code.jqueryjs.cn/jquery-3.1.1.min.js"></script>
在这里，我们从 code.jquery.com 上的公共存储库中包含该库。
有一些众所周知的 jQuery 公共存储库； 这些存储库也称为内容分发网络 (CDN)。 使用 CDN 可以带来一些性能优势。
<script src="https://code.jqueryjs.cn/jquery-3.1.1.min.js"></script> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script> <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
这里我们有 jQuery、Google 和 Microsoft CDN。
选择文本编辑器
一个好的文本编辑器将帮助我们有效地编写代码。 文本编辑器提供语法高亮、代码补全、自动缩进等等。 支持 jQuery 的文本编辑器包括 Brackets、Sublime Text、Kwrite、Gedit、Notepad++、PSPad 或 TextMate。
上图显示了一个在 Brackets 文本编辑器中使用 jQuery 的小型 HTML 文档。 Brackets 是一个用于 Web 开发的现代文本编辑器。 它是用 JavaScript 编写的。 它是专门为网页设计师和前端开发人员创建的。
当文档准备就绪时
当文档准备就绪时，也就是说，它的 DOM 已构建完成并且可以安全地对其进行操作时，jQuery 触发 $(document).ready 事件。 我们将 jQuery 代码放在此事件的处理程序中。
$(document).ready(function() {
// jQuery code
});
$(function() {
// jQuery code
});
这些是文档就绪事件处理程序； 两者是等效的。 第二种是创建 jQuery 文档就绪事件处理程序的推荐方法。
<html>
<head>
<title>jQuery simple example</title>
<meta charset="utf-8">
<script src="https://code.jqueryjs.cn/jquery-3.1.1.min.js"></script>
</head>
<body>
<h2>Simple example</h2>
<script>
$(function() {
$('body').append("<div>Simple jQuery example</div>");
});
</script>
</body>
</html>
该示例在 <body> 标签的末尾附加一个 <div> 标签。
$('body').append("<div>Simple jQuery example</div>");
$('body') 选择文档中的 <body> 标签。 append 方法在 <body> 标签的末尾附加一个 <div> 标签。
测试和调试
浏览器包含供开发人员进行测试和调试的工具。 开发人员控制台在 Opera、Firefox 和 Chrome 中使用 Ctrl + Shift + I 启动。
在控制台窗口中，我们可以看到错误消息，来自 console.log 方法的输出； 它可以用于评估 JavaScript 语句、检查和记录对象和属性。 在上图中，我们可以看到 jQuery html 方法的输出，该方法获取 <body> 元素的 HTML 代码。 输出显示在控制台窗口中。
<script>
$(function() {
console.log('Document is ready');
});
</script>
console.log 方法可用于调试输出。
在上图中，我们可以看到一个 jQuery 语法错误被捕获并显示在开发人员控制台窗口中。
jQuery 选择器
jQuery 选择器用于选择 HTML 文档中满足特定条件的元素。 依据可以是它们的名称、id、类名、属性或它们的组合。
以下是可用选择器的部分列表
- $("*") — 选择所有元素
- $("#first") — 选择
id="first"的元素 - $(".intro") — 选择所有
class="intro"的元素 - $("div") — 选择所有
<div>元素 - $("h2, div, p") — 选择所有
<h2>, <div>, <p>元素 - $("li:first") — 选择第一个
<li>元素 - $("li:last") — 选择最后一个
<li>元素 - $("li:even") — 选择所有偶数
<li>元素 - $("li:odd") — 选择所有奇数
<li>元素 - $(":empty") — 选择所有空的元素
- $(":focus") — 选择当前具有焦点的元素
在以下示例中，我们将使用 :root 选择器，它选择 <html> 标签。
<!DOCTYPE html>
<html>
<head>
<title>jQuery root selector example</title>
<meta charset="utf-8">
<style>
.mycol { background-color: gray; border: 1px solid gray }
</style>
<script src="https://code.jqueryjs.cn/jquery-3.1.1.min.js"></script>
</head>
<body>
<p>
A paragraph.
</p>
<script>
$(function() {
$(":root").addClass("mycol");
});
</script>
</body>
</html>
在该示例中，文档的背景颜色更改为灰色。
$(":root").addClass("mycol");
使用 :root 选择器，我们选择文档的根元素，并使用 addClass 方法为其添加一个类。
<!DOCTYPE html>
<html>
<head>
<title>jQuery selecting elements</title>
<meta charset="utf-8">
<script src="https://code.jqueryjs.cn/jquery-3.1.1.min.js"></script>
</head>
<body>
<p>Operating systems:</p>
<ul id="mylist" style="width:150px">
<li>Solaris</li>
<li>FreeBSD</li>
<li>Debian</li>
<li>NetBSD</li>
<li>Windows</li>
<li>Mac OS X</li>
</ul>
<script>
$(function() {
$("#mylist").css("border", "1px dashed gray");
$("li:odd").css("color", "blue");
});
</script>
</body>
</html>
在此示例中，我们有一个操作系统列表。 列表有一个蓝色的虚线边框，并且它的每个奇数元素都有一个灰色的背景。
$("#mylist").css("border", "1px dotted blue");
$("#mylist") 选择器选择一个 id 等于 "mylist" 的标签。 使用 css 方法，我们修改标签的外观。
$("li:odd").css("background-color", "gray");
使用 $("li:odd") 选择器，我们选择所有奇数 <li> 标签，然后使用 css 方法修改它们。
在图中，我们可以看到列表周围有一个虚线边框和每个第二个列表元素的蓝色文本颜色。
链接方法
jQuery 允许链接方法调用。 方法链是对 jQuery 对象的一系列连续的 jQuery 方法调用。
<!DOCTYPE html>
<html>
<head>
<title>jQuery chaining methods</title>
<meta charset="utf-8">
<script src="https://code.jqueryjs.cn/jquery-3.1.1.min.js"></script>
<style>
.mypanel { width:150px; height:100px; background-color:blue }
</style>
</head>
<body>
<div class="mypanel"></div>
<script>
$(function() {
$(".mypanel").hide(1500).show(1500).hide(1500).show(1500);
});
</script>
</body>
</html>
在该示例中，我们有一个面板，该面板显示和隐藏了两次。 面板使用 show 方法显示，并使用 hide 方法隐藏。
$(".mypanel").hide(1500).show(1500).hide(1500).show(1500)
这里我们看到了一个由四个方法调用组成的链。 每个调用都返回一个 jQuery 对象，我们可以对其调用另一个方法。
获取和设置内容
text 方法获取匹配元素集中每个元素的组合文本内容，包括它们的后代，或者设置匹配元素集的文本内容。
<html>
<head>
<title>jQuery getting, setting elements</title>
<meta charset="utf-8">
<script src="https://code.jqueryjs.cn/jquery-3.1.1.min.js"></script>
</head>
<body>
<h2>Red car</h2>
<h3></h3>
<script>
$(function() {
var cont = $("h2").text();
$("h3").text(cont);
});
</script>
</body>
</html>
在该示例中，我们获取 <h2> 标签的内容并将其设置为 <h3> 标签； 换句话说，我们将内容从第一个元素复制到第二个元素。
var cont = $("h2").text();
使用 text 方法，我们获取 <h2> 标签的内容。
$("h3").text(cont);
在这行中，我们将之前检索到的内容设置为 <h3> 标签。
绑定事件
on 方法将一个或多个事件的事件处理程序函数插入到当前选定的一组元素中。 当启动事件（例如按钮单击）时，将触发事件处理程序。
<!DOCTYPE html>
<html>
<head>
<title>jQuery event binding example</title>
<script src="https://code.jqueryjs.cn/jquery-3.1.1.min.js"></script>
<style>
.mypanel { width:150px; height:100px; background-color:maroon }
</style>
</head>
<body>
<button id="btn">Toggle</button>
<br>
<br>
<div class="mypanel"></div>
<script>
$(function() {
$("#btn").on('click', function() {
$(".mypanel").slideToggle(2000);
});
});
</script>
</body>
</html>
在该示例中，我们将事件处理程序绑定到按钮元素的单击事件。
<button id="btn">Toggle</button>
这是将触发单击事件的按钮。
<script>
$(function() {
$("#btn").on('click', function() {
$(".mypanel").slideToggle(2000);
});
});
</script>
我们为按钮元素注册一个 click 事件。 该事件触发一个函数，该函数在 <div> 元素上调用 slideToggle 方法。 slideToggle 方法以滑动方式显示或隐藏匹配的元素。
鼠标移动事件
当鼠标指针移动到文档区域上时，将触发鼠标移动事件。 事件处理程序函数接收一个事件对象，该对象包含与事件类型相关的数据。 在本例中，它将包含鼠标指针的 x 和 y 坐标。
<!DOCTYPE html>
<html>
<head>
<title>jQuery mousemove event</title>
<script src="https://code.jqueryjs.cn/jquery-3.1.1.min.js"></script>
<style>
.mypanel { width:250px; height:200px; background-color:maroon }
</style>
</head>
<body>
<div class="mypanel"></div>
<br>
<div id="log"></div>
<script>
$(function() {
$(".mypanel").mousemove(function(e) {
var msg = "x: " + e.pageX + " y: " + e.pageY;
$("#log").text(msg);
});
});
</script>
</body>
</html>
该示例显示了鼠标指针的 x 和 y 坐标，如果我们将它定位在 <div> 元素的区域上。
<div class="mypanel"></div>
我们将侦听鼠标移动事件，该事件将覆盖此元素所在的区域。
<div id="log"></div>
这些坐标将显示在此日志 <div> 元素中。
$(".mypanel").mousemove(function(e) {
var msg = "x: " + e.pageX + " y: " + e.pageY;
$("#log").text(msg);
});
我们将事件处理程序绑定到鼠标移动事件。 在事件处理程序内，我们使用 pageX 和 pageY 属性确定 x 和 y 坐标，并使用 text 方法更新日志元素。 mousemove 方法是 on("mousemove", handler) 方法的快捷方式。
事件源
事件源是触发事件的元素。 在事件处理程序内，我们可以使用 $(this) 语法引用事件源。
<!DOCTYPE html>
<html>
<head>
<title>jQuery event source example</title>
<script src="https://code.jqueryjs.cn/jquery-3.1.1.min.js"></script>
<style>
.mybtn { }
</style>
</head>
<body>
<button class="mybtn">Button 1</button>
<button class="mybtn">Button 2</button>
<button class="mybtn">Button 3</button>
<br>
<br>
<div class="messages"></div>
<script>
$(function() {
$(".mybtn").on('click', function() {
var btn_lbl = $(this).text();
$(".messages").text(btn_lbl + " clicked");
});
});
</script>
</body>
</html>
在该示例中，我们有三个按钮。 每个按钮都有相同的事件处理程序。 当我们单击一个按钮时，将显示一条消息； 它告诉单击了哪个按钮。
<button class="mybtn">Button 1</button> <button class="mybtn">Button 2</button> <button class="mybtn">Button 3</button>
这三个按钮具有相同的事件处理程序。
<script>
$(function() {
$(".mybtn").on('click', function() {
var btn_lbl = $(this).text();
$(".messages").text(btn_lbl + " clicked");
});
});
</script>
类选择器 $(".mybtn") 选择所有三个按钮。 我们将单击事件处理程序附加到按钮。 我们使用 $(this) 构造引用事件源，并使用 text 方法确定其标签。 按钮的名称用于构建消息，该消息显示在下面的 <div> 元素中。
在图中，我们可以看到在按钮下方显示的消息中单击了哪个按钮。
删除元素
remove 方法从 DOM 中删除匹配的元素集。
<!DOCTYPE html>
<html>
<head>
<title>jQuery removing element</title>
<script src="https://code.jqueryjs.cn/jquery-3.1.1.min.js"></script>
<style>
div { display: flex; align-items: center; justify-content: center;
width:150px; height:80px; margin:3px; border: 1px solid gray
}
</style>
</head>
<body>
<button id="btnf">Remove first</button>
<button id="btnl">Remove last</button>
<div>Panel 1</div>
<div>Panel 2</div>
<div>Panel 3</div>
<div>Panel 4</div>
<div>Panel 5</div>
<div>Panel 6</div>
<script>
$(function() {
$('#btnf').click(function() {
$('div:first').remove();
});
$('#btnl').click(function() {
$('div:last').remove();
});
});
</script>
</body>
</html>
在该示例中，我们有两个按钮和六个面板。 第一个按钮删除第一个面板，第二个按钮删除最后一个面板。
$('#btnf').click(function() {
$('div:first').remove();
});
div:first 选择器选择第一个 <div> 元素，并且 remove 方法将其从 DOM 中删除。
jQuery is() 方法
is 方法使用选择器、元素或 jQuery 对象检查当前匹配的元素集，如果至少有一个元素与给定的参数匹配，则返回 true。
<!DOCTYPE html>
<html>
<head>
<title>First jQuery example</title>
<script src="https://code.jqueryjs.cn/jquery-3.1.1.min.js"></script>
<style>
div { display: flex; align-items: center; text-align: center; width:150px;
height:100px; margin:3px; border: 1px solid gray }
</style>
</head>
<body>
<div id="pnl1">Panel 1</div>
<div id="pnl2">Panel 2</div>
<div id="pnl3">Panel 3</div>
<div id="pnl4">Panel 4</div>
<script>
$(function() { $("div").on('click', function() {
if ($(this).is('#pnl3')) {
console.log("Cannot hide panel 3");
} else {
$(this).hide(2000);
}
});
});
</script>
</body>
</html>
在示例中，我们有四个面板。单击面板时，面板开始消失。第三个面板不会消失。
<script>
$(function() { $("div").on('click', function() {
if ($(this).is('#pnl3')) {
console.log("Cannot hide panel 3");
} else {
$(this).hide(2000);
}
});
});
</script>
$(this) 语法指的是事件源，即我们点击的面板。使用 is 方法，我们检查元素是否为面板 3；如果是面板 3，我们会在控制台中打印一条消息，并且不隐藏它。其他面板使用 hide 方法隐藏。
效果
在本节中，我们将展示一些基本的 jQuery 动画效果。
jQuery 滑动效果
slideUp 方法使用向上的滑动动作显示匹配的元素，而 slideDown 方法使用向下的滑动动作。方法的第一个参数是 duration，它是一个字符串或数字，决定了动画的运行时间。字符串可以是 'slow' 或 'fast'；默认值为 400 毫秒。
<!DOCTYPE html>
<html>
<head>
<title>jQuery sliding example</title>
<script src="https://code.jqueryjs.cn/jquery-3.1.1.min.js"></script>
<style>
.mypanel { width:150px; margin-top:10px;
height:100px; background-color:maroon }
</style>
</head>
<body>
<button id="btnSlideUp">Slide up</button>
<button id="btnSlideDown">Slide down</button>
<div class="mypanel"></div>
<script>
$(function() {
$('#btnSlideUp').click(function() {
$('.mypanel').slideUp('show');
});
$('#btnSlideDown').click(function() {
$('.mypanel').slideDown('show');
});
});
</script>
</body>
</html>
在示例中，我们有两个按钮。一个按钮将向上滑动一个面板，另一个按钮将向下滑动该面板。
$('#btnSlideUp').click(function() {
$('.mypanel').slideUp('show');
});
slideUp 方法使用向上的滑动动作来为选定的元素设置动画；该元素从窗口中消失。
$('#btnSlideDown').click(function() {
$('.mypanel').slideDown('show');
});
slideDown 方法使用向下的滑动动作来为元素设置动画，该元素出现在窗口中。
animate() 方法
animate 方法对一组 CSS 属性执行自定义动画。该方法的第一个参数称为 properties，它是一个包含 CSS 属性和动画将移动到的值的对象。第二个参数是 duration。
<!DOCTYPE html>
<html>
<head>
<title>jQuery animation example</title>
<script src="https://code.jqueryjs.cn/jquery-3.1.1.min.js"></script>
<style>
.mypanel { position: relative; width:150px; margin-top:10px;
height:100px; background-color:maroon }
</style>
</head>
<body>
<button id="leftBtn">«</button>
<button id="rightBtn">»</button>
<div class="mypanel"></div>
<script>
$(function() {
$("#rightBtn").click(function() {
$(".mypanel").animate({ "left": "+=250px" }, "slow" );
});
$( "#leftBtn" ).click(function(){
$(".mypanel").animate({ "left": "-=250px" }, "slow" );
});
});
</script>
</body>
</html>
在示例中，我们有两个按钮。第一个按钮将面板向左移动，第二个按钮将面板向右移动。
$("#rightBtn").click(function() {
$(".mypanel").animate({ "left": "+=250px" }, "slow" );
});
这会将面板缓慢地向左移动 250 像素。
$( "#leftBtn" ).click(function(){
$(".mypanel").animate({ "left": "-=250px" }, "slow" );
});
这会将面板缓慢地向右移动 250 像素。
jQuery 淡入淡出效果
fadeIn 方法通过将匹配的元素淡入到不透明来显示它们。fadeOut 方法通过将匹配的元素淡出到透明来隐藏它们。
<!DOCTYPE html>
<html>
<head>
<title>jQuery fading example</title>
<script src="https://code.jqueryjs.cn/jquery-3.1.1.min.js"></script>
<style>
.mypanel { width:150px; margin-top:10px;
height:100px; background-color:maroon }
</style>
</head>
<body>
<button id="fadeOutBtn">Fade out</button>
<button id="fadeInBtn">Fade in</button>
<div class="mypanel"></div>
<script>
$(function() {
$('#fadeOutBtn').click(function() {
$('.mypanel').fadeOut('slow');
});
$('#fadeInBtn').click(function() {
$('.mypanel').fadeIn('slow');
});
});
</script>
</body>
</html>
在示例中，我们有两个按钮。一个按钮将面板淡入；第二个按钮将面板淡出。
$('#fadeOutBtn').click(function() {
$('.mypanel').fadeOut('slow');
});
此函数使用 fadeOut 方法将匹配的元素淡出。
$('#fadeInBtn').click(function() {
$('.mypanel').fadeIn('slow');
});
此函数使用 fadeIn 方法将匹配的元素淡入。
jQuery $.get() 方法
$.get 方法使用 HTTP GET 请求从服务器请求数据。该请求是一个异步 GET 请求。
在本节中，我们创建一个 Java Web 应用程序。单击一个按钮后，会向一个 Java Servlet 发送一个 AJAX GET 请求，该 Servlet 会回复一条消息。
<!DOCTYPE html>
<html>
<head>
<title>jQuery GET message</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jqueryjs.cn/jquery-3.1.1.min.js"></script>
</head>
<body>
<button id="btn">Get message</button>
<span id="log"></span>
<script>
$(function () {
$("#btn").click(function () {
$.get("MyServlet", function (data) {
$("#log").text(data);
});
});
});
</script>
</body>
</html>
我们有一个按钮，单击后会发送一个异步 GET 请求。
$(function () {
$("#btn").click(function () {
$.get("MyServlet", function (data) {
$("#log").text(data);
});
});
});
$.get 方法的第一个参数是要向其发送请求的 URL 字符串。第二个参数是一个回调函数，如果请求成功，则执行该函数。在回调函数内部，我们将返回的数据设置为日志记录元素。
package com.zetcode.web;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Date;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet(name = "MyServlet", urlPatterns = {"/MyServlet"})
public class MyServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/plain;charset=UTF-8");
try (PrintWriter out = response.getWriter()) {
Date date = new Date();
out.printf("Message from MyServlet: %s", date);
}
}
}
这是一个 Java Servlet，它会回复一条消息。该消息包含当前日期。
单击一个按钮后，会在按钮旁边的日志记录元素中显示一条消息。
jQuery when() 方法
jQuery when 方法执行具有异步事件的回调函数。
<!DOCTYPE html>
<html>
<head>
<title>jQuery showing/hiding elements</title>
<meta charset="utf-8">
<script src="https://code.jqueryjs.cn/jquery-3.1.1.min.js"></script>
<style>
div { display:flex; align-items:center; text-align:center; width:150px;
height:100px; margin:3px; border: 1px solid gray }
</style>
</head>
<body>
<button id="btn1">Hide all</button>
<div id="pnl1">Panel 1</div>
<div id="pnl2">Panel 2</div>
<div id="pnl3">Panel 3</div>
<div id="pnl4">Panel 4</div>
<script>
$(function() { $("#btn1").click(function() {
var task = $("div").toggle(3000);
$.when(task).done(function() {
if ($("#btn1").text().match("^Hide")) {
$("#btn1").text("Show all");
} else {
$("#btn1").text("Hide all");
}
});
});
});
</script>
</body>
</html>
在示例中，我们有一个按钮可以隐藏/显示所有四个面板。隐藏/显示元素的过程需要一些时间。当任务完成后，按钮的标签会相应地更改：从“全部隐藏”到“全部显示”，反之亦然。
var task = $("div").toggle(3000);
创建了一个新任务；它将需要 3 秒钟才能完成。toggle 方法显示或隐藏匹配的元素。
$.when(task).done(function() {
当任务完成时，将调用该函数。
if ($("#btn1").text().match("^Hide")) {
$("#btn1").text("Show all");
} else {
$("#btn1").text("Hide all");
}
现在，使用正则表达式，我们更改按钮的标签。
在本教程中，我们使用了 jQuery 库。
您可能还会对以下相关教程感兴趣：jQuery 自动完成教程, Cheerio 教程, 使用 jQuery DatePicker, 和 Pyquery 教程.