jQuery2-秘籍-全-
jQuery2 秘籍（全）
一、JQuery 基础知识
在这一章中，我们将讨论 jQuery 的基础知识，比如选择元素、应用样式等等。我们将在本章中介绍以下食谱:
在网页上包含 jQuery 库
在处理之前准备好文档
将样式应用于包装集
将样式应用于特定段落
对特定类别的段落进行计数并对其应用样式
返回到先前的选择
移除 DOM(文档对象模型)并预先计划和追加元素
应用链接以便对选定的列表元素应用样式
使用一个
for循环来显示一个无序列表的柠檬替换 DOM 元素
替换文本和 HTML
克隆 DOM
显示兄弟姐妹
设置和获取属性
计算 DOM 中节点的数量并显示它们的文本
获取元素的 HTML
将相同的类名分配给不同的 HTML
在开始之前，让我们快速回顾一些 JQuery 基础知识。
1.1 什么是 jQuery？
jQuery 是一个轻量级的跨平台 JavaScript 库。由于其易于使用的语法，jQuery 使得在任何网站上包含 JavaScript 变得非常容易。它不仅简化了复杂的编码，而且减少了代码的大小。
以下是 jQuery 的一些特性:
jQuery 是一个开放源码项目，根据 MIT 许可证授权，允许在任何网站上免费使用，如果需要，可以根据 GNU 公共许可证重新授权，以包含在其他 GNU 授权的开放源码项目中。
它有一个庞大的用户和贡献者社区，每天都在使它变得更好。它的社区发布了大量关于 bug 修复和增强的帖子。
它有大量的插件，使你能够添加功能到你的网页，并开发与不同平台兼容的应用。
它的 API 是完全文档化的，使得它易于使用和访问它的全部特性。
它支持大多数 CSS3 选择器。此外，jQuery 具有强大的 DOM 交互和操作方法。也就是说，jQuery 提供了几个方法，使得选择所需的 DOM 以及迭代和遍历 DOM 变得非常容易。
它的学习曲线很浅。因为它使用了 CSS 和 HTML，所以学习它的概念非常容易。
它针对大多数现代浏览器进行了优化，包括 Chrome、Internet Explorer、Opera、Firefox 和 Safari。
jQuery 中的编码大大减少了，因为它支持链式方法调用。链式方法调用意味着一个接一个地调用方法，一个方法的结果作为输入提供给另一个方法，因此减少了大量语句。
要使用 jQuery，不需要安装。直接从官网下载 jQuery， http://jquery.com/ ，里面有几个版本的 jQuery。可以下载最稳定的版本。
将 jQuery 下载到本地文件系统后，只需使用 HTML <script>元素引用文件的位置。此外，jQuery 可以通过内容交付网络(cdn)免费获得。许多公司，如 Google 和 Microsoft，在分布在世界各地的强大、低延迟的服务器上提供 jQuery 文件，以便快速访问。由于服务器分布和缓存，CDN 托管的 jQuery 副本访问起来相当快，但是如果您无法访问互联网，您可以随时下载 jQuery 副本并从本地磁盘访问它。
在本书中，我们将非常频繁地使用两个术语， DOM 和选择器。所以，在我们开始第一个食谱之前，让我们先了解它们。
1.2 了解 DOM
DOM 将 HTML 元素表示为一个对象网络，就像页面上的元素树。以下示例将帮助您理解元素树在网页上的存在方式:
<html>
<head>
<title>web page title</title>
</head>
<body>
<ul>
<li>First list item</li>
<li>Second list item</li>
<li>Third list item</li>
</ul>
</body>
</html>
这里，<html>是网页上所有元素的祖先或父元素。即所有元素都是<html>的后代或子代。<head>和<body>元素是<html>的后代或子代。<li>元素是<ul>的子元素或子元素。<ul>元素是所有<li>元素的父元素，所有<li>元素是彼此的兄弟元素。
1.3 选择器
顾名思义，jQuery 选择器有助于根据 id、名称、类型、属性、类等在 HTML 文档中找到 DOM 元素。jQuery 选择器返回元素或元素列表。
选择器的类型
可以使用不同的元素属性(如类型、类、id、属性或索引位置)来选择网页上的元素，如下所示:
- **类型:**下面的 jQuery 选择器将选择所有的
<p>元素:
$("p")
$("*")将选择所有元素。
- Class: 下面的 jQuery 选择器将选择名为
info的类的所有元素。
$(".info")
$(".info,.features")将选择类别为info或features的所有元素。
- ID: 下面的 jQuery 选择器将选择 ID 为
ElectronicsProducts的元素:
$("#ElectronicsProducts")
- **属性:**下面的 jQuery 选择器将选择定义了
href属性的所有元素:
$("[href]")
- **索引位置:**下面的 jQuery 选择器将选择第二个
<p>元素。像所有编程语言一样，索引是从 0 开始的，所以第一个元素被认为是在索引 0 处，第二个元素是在索引 1 处，依此类推。
$("p:eq(1)")
1.4 1-1.在网页中包含 jQuery 库
问题
您希望在 web 页面中使用 jQuery JavaScript 库。
解决办法
考虑下面的 HTML 文件，您希望在其中使用 jQuery 库:
selectprg.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>First jQuery Example</title>
<link rel="stylesheet" href="selectprgstyle.css" type="text/css" media="screen" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="selectprgjq.js" type="text/javascript"></script>
</head>
<body>
.....
</body>
</html>
要包含 jQuery JavaScript 库，您需要使用 HTML <script>元素，并在 jQuery 文件的src属性中提供 URL 或目录路径。
在网页中嵌入 jQuery 库有两种方式:
使用任何托管内容交付网络将 jQuery 包含在网页中。
从
jQuery.com下载 jQuery，并在文件系统的网页中使用它。
为了使用 Google 托管的 CDN，请在 HTML 页面中使用以下语句:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
在上面的 HTML 文件中，selectprgstyle.css被假定为级联样式表文件，selectprgjq.js被假定为包含要在网页上应用的 jQuery 代码的文件。
它是如何工作的
HTML <script>元素将通过其在当前网页中的src=""属性链接在指定 URL 上提供的 jQuery 库。使用 Google 托管版本的 jQuery 的好处是，您可以获得一个稳定、可靠、无错误、全球可用的 jQuery 副本。
如果您无法访问互联网并且不想使用 Google 托管的 jQuery 代码副本，您可以随时从jQuery.com下载 jQuery 并将其托管在您的本地文件系统中，并用 jQuery 文件位置的目录路径替换src属性值。以下脚本标记包括本地文件系统中的 jQuery 库:
<script src="jquery-3.5.1.js" type="text/javascript"></script>
1.5 1-2.在处理之前准备好文档
问题
在遍历或操作 DOM 之前，必须确保 DOM 在被操作之前被加载。不仅仅是 DOM 您希望确保在应用 jQuery 代码之前加载图像和其他文件。
解决办法
当 JavaScript 代码出现在浏览器中并且正在处理标题时，它会立即运行。因此，您需要延迟代码的执行，直到 DOM 可以应用处理。换句话说，您需要延迟 jQuery 函数的执行，直到 DOM“准备好”被处理。使用$(document).ready()方法，jQuery 会推迟函数调用，直到 DOM 加载完毕
一旦 DOM 准备就绪，jQuery 将执行回调函数，该函数执行以下任务:
使用所需的选择器访问元素。选择器返回匹配的元素。
操作选定的元素或对其应用所需的任务。
下面是 jQuery 代码，它演示了在对文档执行任何 jQuery 代码之前，如何等待文档准备就绪:
$(document).ready(function() {
..................
..................
})
它是如何工作的
更准确地说，ready()方法指定了当 DOM 完全加载时要执行的函数。function关键字不带函数名，函数体包含要应用于 DOM 的代码。函数体也作为参数传递给ready方法，因为您希望函数立即执行，但只执行一次。
1.6 1-3.将样式应用于包装集
问题
您需要获得 jQuery 包装器集并应用样式。当您从 HTML 页面中选择某些 DOM 元素时，它们被包装了 jQuery 功能。对于这个包装器集，您希望应用不同的 jQuery 函数和属性。我们来看看是怎么做的。
解决办法
这是一个 HTML 文件，包含几个段落元素和一个标题 1 元素。使用标题级别 1 显示文本欢迎来到我们的网站。三个<p>元素用于显示特定文本。
Wrapperpage.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>jQuery Wrapper Set</title>
<link rel="stylesheet" href="wrapperstyle.css" type="text/css" media="screen" />
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="wrapperjq.js" type="text/javascript"></script>
</head>
<body>
<H1>Welcome to our site </H1>
<p> We deal with electronic products like mobile phones, laptops, washing machine at very reasonable prices </p>
<p> We do provide home delivery also </p>
<p> Best products and very reasonable prices </p>
</body>
</html>
您希望对 HTML 文件的所有段落元素应用某种样式。创建了wrapperstyle.css文件，并在其中创建了一个样式，如图所示。
Wrapperstyle.css
.highlight{
font-style: italic;
background-color: #0f0;
}
在上面的 CSS 样式表文件中，创建了一个名为highlight的 CSS 样式类，将字体样式改为斜体，背景颜色改为绿色。
为了将 CSS 文件中定义的名为highlight的样式应用于 HTML 页面的段落元素，在wrapperjq.js文件中编写了以下 jQuery 代码:
Wrapperjq.js
$(document).ready(function() {
$('p').addClass('highlight');
})
它是如何工作的
为了选择想要的 DOM，您需要使用 jQuery 中的选择器 API。要使用选择器 API，只需编写一个名为$(美元符号)的对象。美元符号也可以用字符串"jQuery"代替。事实上，$变量包含了整个 jQuery 框架，并且是开始 jQuery 编码所必需的。$变量有几个成员属性和方法，可以调用它们来选择所需的 DOM。简而言之，$变量是 jQuery 函数和名称空间的别名。$()函数通常将一个字符串作为参数，这个参数可以是一个 CSS 选择器，它返回一个新的 jQuery 对象实例，这个实例可能包含零个或多个 DOM 元素，可以对这些元素应用所需的处理。
jQuery 将扫描整个 HTML 页面，并将所有的<p>元素放在包装器集中，这样 jQuery 方法就可以应用于它们。隐式迭代是自动应用的，因此观察包装器集中的每个 DOM 元素，并将指定的高亮类应用于包装器集中的每个段落元素。addClass方法应用于页面上的每个<p>元素，没有使用任何循环，这意味着隐式迭代应用于包装器集合中的所有元素。
运行 HTML 文件时，您会看到 H1 标题级别显示了最高标题级别的文本。同样，在应用名为highlight的 CSS 类时，三个段落的文本将以斜体显示，背景颜色为绿色，如图 1-1 所示。
图 1-1
将样式应用到
元素
1.7 1-4.将样式应用于特定段落
问题
您有一个 HTML 文件，您想根据段落的位置来选择段落，并对其应用样式。
解决办法
考虑下面的 HTML 文件，它包含一个标题级别 1 元素和三个段落:
selectprg.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>JQuery Examples</title>
<link rel="stylesheet" href="selectprgstyle.css" type="text/css" media="screen" />
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="selectprgjq.js" type="text/javascript"></script>
</head>
<body>
<H1>Welcome to our site </H1>
<p> We deal with electronic products like mobile phones, laptops, washing machine at very reasonable prices </p>
<p> We do provide home delivery also </p>
<p> Best products and very reasonable prices </p>
</body>
</html>
在这个 HTML 文件中，文本Welcome to we site显示在标题级别 1 中，三个段落元素用于显示某些文本。
selectprgstyle.css
.highlight1{
font-style: italic;
background-color: #0f0;
}
.highlight2{
font-style: bold;
background-color: #f00;
}
这个样式表文件中出现了两个 CSS 样式，highlight1和highlight2。highlight1样式包含使文本以斜体显示并将背景改为绿色的代码。highlight2样式包含使文本以粗体显示并将背景颜色改为红色的代码。
selectprgjq.js
$(document).ready(function() {
$('p:even').addClass('highlight1');
$('p:eq(1)').addClass('highlight2');
})
上面的 jQuery 代码中，使用了addClass()方法，我们来看看这个方法。
addClass()方法
.addClass()方法将一个 CSS 类应用到选中的 DOM 元素。
语法
$(selector).addClass(class_name)
其中class_name参数表示要添加的类。
您可以使用.removeClass()方法从选定的 DOM 中移除指定的 CSS 类。
它是如何工作的
p:even选择器选择偶数索引位置的段落元素(即第 0、第 2、第 4 索引位置，依此类推)。请记住，几乎所有编程语言都使用基于 0 的索引，因此第 0 个索引位置的段落元素表示第一个段落，第 2 个索引位置的段落元素表示第三个段落，样式highlight1将应用于它们。
eq(1)选择器选择第一个索引位置的<p>元素，因此样式highlight2将应用于第二个段落元素。
在这段代码中，您可以找到文档中位于偶数索引位置的所有<p>元素(即位于第 0 个索引位置、第 2 个索引位置、第 4 个索引位置的<p>元素，依此类推)。类别highlight1适用于所有这些<p>元素。
注意将类添加到所有偶数索引的<p>元素不需要迭代，因为 jQuery 在其中使用了隐式迭代。
在运行 HTML 文件时，您将看到 CSS 样式highlight1应用于索引位置为 0 和 2 的段落元素，使文本以斜体模式和绿色背景色显示。此外，CSS 样式highlight2应用于索引位置为 1 的段落元素，使其文本以粗体显示，背景颜色为红色，如图 1-2 所示。
图 1-2
不同的样式应用于偶数索引位置的
元素和第一个索引位置的
元素
1.8 1-5.对特定类别的段落进行计数并对其应用样式
问题
网页中有一些段落，您想对分配了特定类的段落进行计数，并想对它们应用 CSS 样式类。
解决办法
考虑下面的 HTML 文件，它有一个标题级别 1 元素和几个段落，这些段落被分配了特定的类来区分它们:
countprg.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>JQuery Examples</title>
<link rel="stylesheet" href="countprgstyle.css" type="text/css" media="screen" />
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="countprgjq.js" type="text/javascript"></script>
</head>
<body>
<H1>Welcome to our site </H1>
<p class="info"> We deal with electronic products like mobile phones, laptops, washing machine at very reasonable prices </p>
<p> We do provide home delivery also </p>
<p class="info"> Best products and very reasonable prices </p>
</body>
</html>
您可以在上面的代码中看到，标题级别 1 中显示了一条文本消息，欢迎来到我们的网站。三个段落元素用于显示某些文本。第一个和第三个段落元素被分配了类别info。
以下是包含要应用于所选段落的样式规则的 CSS 文件:
countprgstyle.css
.highlight1{
font-style: italic;
background-color: #0f0;
}
CSS 文件包含名为highlight1的样式，该样式包含使文本以斜体显示并将其背景颜色设置为绿色的代码。
countprgjq.js
$(document).ready(function() {
alert($('p').filter('.info').length+" paragraphs match the given class");
$('p').filter('.info').addClass('highlight1');
})
它是如何工作的
方法显示一个带有指定消息的对话框。该对话框有一个“确定”按钮，在用户单击“确定”按钮之前，显示消息的对话框会一直保持在那里。换句话说，警告对话框将焦点从当前窗口移开，并迫使查看者阅读消息。alert方法显示一个对话框，显示具有类info.的段落元素的数量
.filter()方法遍历匹配的元素集(即遍历所有的<p>元素),并将筛选出具有info类的元素。也就是说，选择并返回所有具有类info的<p>元素，以便样式highlight1可以应用于它们。不具有类别info的所有<p>元素被过滤掉(即，从匹配集中移除)。
将出现警告对话框，显示与info类匹配的段落数(见图 1-3 (a))。计数 2 将通过警告对话框显示，highlight1的 CSS 样式将应用于具有info类的段落(即，第一和第三段的文本将变为斜体模式，其背景颜色将变为绿色)。参见图 1-3(b) 。
图 1-3
(a)显示具有特定样式的
元素计数的警告对话框(b)应用于 info 类的
元素的样式
1.9 1-6.返回到先前的选择
问题
您已经使用选择器选择了某个 DOM，现在您想返回到上一个 DOM 来执行某个任务。
解决办法
下面是一个 HTML 文件，它包含一个标题级别 1 元素和几个段落:
Returnpriorpage.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>JQuery Examples</title>
<link rel="stylesheet" href="returnpriorstyle.css" type="text/css" media="screen" />
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="returnpriorjq.js" type="text/javascript"></script>
</head>
<body>
<H1>Welcome to our site </H1>
<p class="info"> We deal with electronic products like mobile phones, laptops, washing machine at very reasonable prices </p>
<p> We do provide home delivery also </p>
<p class="info"> Best products and very reasonable prices. <a href="bmharwani.com">Click for details </a> </p>
</body>
</html>
您可以在上面的代码中看到，标题级别 1 元素用于显示文本欢迎来到我们的网站。某些文本通过三个段落元素显示。为了在 jQuery 代码中明确地访问它们，第一段和第三段被分配了类info。
以下是包含要应用于所选段落的样式的 CSS 文件:
Returnpriorstyle.css
.highlight1{
font-style: italic;
background-color: #0f0;
}
highlight1样式包含使文本以斜体显示并将其背景颜色设置为绿色的代码。
以下是 jQuery 代码，用于区分需要应用 CSS 样式的段落:
Returnpriorjq.js
$(document).ready(function() {
$('p').filter('.info').addClass('highlight1');
})
它是如何工作的
类别为info的段落元素被过滤掉(即选中并应用highlight1的 CSS 样式，使其文本以斜体和绿色背景色显示，如图 1-4 。
图 1-4
highlight1 的 CSS 样式应用于带有类信息的
元素
如果添加了end()方法，控件将返回到之前的 DOM(即所有三个段落元素):
$(document).ready(function() {
$('p').filter('.info').end().addClass('highlight1');
})
因此，highlight1的 CSS 样式将应用于所有三个段落元素，如图 1-5 所示。
图 1-5
应用于所有三个
元素的 CSS 样式
您可以在 jQuery 代码上应用filter()和find()方法来更精确地选择段落:
$(document).ready(function() {
$('p').filter('.info').find('a').addClass('highlight1');
})
类别为info的段落元素被过滤掉(选中)，其中的<a>元素(超链接)被搜索，CSS 样式highlight1被应用到找到的超链接。最终，只有超链接文本以斜体和绿色背景显示(见图 1-6 )。
图 1-6
应用于超链接的 CSS 样式
Note
您可以应用一个以上的end()方法来进入更多先前选择的 DOM。
1.10 1-7.移除 DOM 并预先计划和追加元素
问题
在这个菜谱中，您将学习如何删除不需要的 DOM，以及如何在 web 页面上的所需位置预先计划和添加所需的元素。
解决办法
以下是包含标题级别 1 元素和三个段落的 HTML 文件:
removingdom.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>JQuery Examples</title>
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="removingdomjq.js" type="text/javascript"></script>
</head>
<body>
<H1>Welcome to our site </H1>
<p> We deal with electronic products like mobile phones, laptops, washing machine at very reasonable prices </p>
<p> We do provide home delivery also </p>
<p> Best products and very reasonable prices </p>
</body>
</html>
您可以看到，在上面的代码中，文本Welcome to we site出现在标题级别 1。三个段落元素用于显示某些文本。
removingdomjq.js
$(document).ready(function() {
$('H1').remove();
$('p:eq(0)').prepend('<img src="a1.jpg" /></a><br/>');
$('p:eq(2)').remove();
$('p:eq(1)').append('<p>Festivals Offers starts</p>');
})
在上面的 jQuery 代码中，使用了一些方法:remove()、prepend()和append。我们来看看这三种方法。
移除( )
remove()方法从 DOM 中删除匹配的元素。它不仅会删除指定的元素，还会删除其中的所有元素。换句话说，匹配元素的所有子元素也被删除。
语法
$(selector).remove(selector)
其中参数selector表示要移除的一个或多个元素。如果要删除多个元素，需要用逗号(，)分隔这些元素。
前置( )
prepend()方法用于在所选元素的开头插入指定的内容。
语法:
$(selector).prepend(content_to_be_inserted)
其中,selector用于选择需要插入内容的元素，而content_to_be_inserted参数是将在通过选择器选择的 DOM 之前添加的内容。
追加( )
append()方法将指定的内容插入到所选元素的末尾。
语法:
$(selector).append(content_to_append)
其中selector帮助选择要添加内容的 DOM，而content_to_append是必须添加到所选 DOM 末尾的内容。
它是如何工作的
标题 1 元素将从网页中删除。在索引位置 0 处的段落元素之前(即，在第一个段落之前)，添加名为a1.jpg的图像。此后，插入换行符，并且从网页中移除索引位置 2 处的段落元素(即，第三段)。此外，在索引位置 1 处的段落元素之后(即，在第二段之后)，添加具有文本 Festivals Offers starts 的段落元素。运行程序后，您会得到如图 1-7 所示的输出。
图 1-7
删除 H1、添加图像、删除索引位置 2 处的
元素并添加文本后的输出
1.11 1-8.应用链接以对选定的列表元素应用样式
问题
您有一个包含几个列表项的无序列表，并且您想使用链接对所需的列表项应用某种样式。
解决办法
jQuery 中的链接使您能够用一条语句在同一个元素上运行多个 jQuery 方法。链接中使用的多个 jQuery 方法将在所选元素上一个接一个地执行。对于链接，只需在前一个动作的基础上添加另一个 jQuery 动作。
以下是显示无序列表的 HTML 文件:
chaining.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>JQuery Examples</title>
<link rel="stylesheet" href="chainingstyle.css" type="text/css" media="screen" />
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="chainingjq.js" type="text/javascript"></script>
</head>
<body>
<ul id="ElectronicsProducts">
<li>Cameras</li>
<li>Cell Phones</li>
<li>Laptops</li>
</ul>
</body>
</html>
您可以在上面的代码中看到，一个无序列表是用 idElectronicsProducts创建的，由三个列表项组成:Cameras、Cell Phones和Laptops。
若要将样式应用于选定的列表项，请将以下样式规则写入 CSS 文件:
chainingstyle.css
.highlight1{
font-style: italic;
background-color: #0f0;
}
.highlight2{
font-style: bold;
background-color: #f00;
}
样式表包含两个名为highlight1和highlight2的样式。highlight1样式包含了将文本转换成斜体并将其背景颜色改为绿色的代码。类似地，highlight2类包含将文本转换为粗体并将背景颜色改为红色的代码。
为了利用链接方法对无序列表的不同列表项应用不同的样式，编写了以下 jQuery 代码:
chainingjq.js
$(document).ready(function() {
$('li:contains(Cell Phones)').parent().find('li:eq(0)')
.addClass('highlight1').end().find('li:eq(2)')
.addClass('highlight2');
});
在上面的 jQuery 代码中，使用了find()方法，所以我们来看看这个方法。
查找( )
find()方法用于查找所选元素的所有后代元素。该方法扫描所有元素，直到 DOM 中选定元素的最后一片叶子。以下是使用find()方法的两种方式:
语法:
$(selector).find()
其中selector是必须找到其所有后代元素的元素。该函数返回所有找到的派生元素。
语法:
selector.find( selector )
其中find方法左边的selector帮助选择其后代必须被扫描的元素，并且作为参数发送到 find 方法的selector用于从找到的后代中选择元素。
它是如何工作的
搜索所有列表项，查看是否有任何列表项包含字符串 Cell Phones 。如果找到该列表项，则选择其父项。在第二个列表项中找到了Cell Phones文本，并且<li>元素的父元素是<ul>元素，因此选择了一个无序列表元素，并且从其后代中选择了第 0 个索引位置处的列表项(即第一个列表项)元素(即，选择了具有文本Cameras的列表项，并且对其应用了样式highlight1)。当调用end()方法时，控制返回到父元素(即，无序列表元素)。同样，从无序列表的后代中，选择第二个索引位置处的列表项元素(即，第三个列表项)(具有文本Laptops)并对该列表项应用样式highlight2(如图 1-8 所示)。
图 1-8
highlight1 样式应用于索引位置 0 的列表项，highlight2 样式应用于第二个索引位置的列表项
1.12 1-9.使用 for 循环显示无序列表的元素
问题
您有一个某些列表项的无序列表。您希望使用一个for循环来显示无序列表的所有列表项。
解决办法
下面的 HTML 程序包含一个无序列表，其中包含几个列表项。
fordisplay.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title> </title>
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="fordisplayjq.js" type="text/javascript"></script>
</head>
<body>
<ul id="ElectronicsProducts">
<li>Cameras</li>
<li>Cell Phones</li>
<li>Laptops</li>
</ul>
</body>
</html>
您可以在上面的代码中看到，一个无序列表是用 idElectronicsProducts创建的，由三个列表项组成:Cameras、Cell Phones和Laptops。id 被分配给无序列表，以便可以在 jQuery 代码中精确地访问它。
下面是访问无序列表的列表项并显示它们的 jQuery 代码:
fordisplayjq.js
$(document).ready(function() {
var $nodes = $('#ElectronicsProducts').children();
alert('Number of nodes is '+$nodes.length);
var txt="";
for (var i = 0; i < $nodes.length; i++){
txt+=$('#ElectronicsProducts').find('li:eq('+i+')').text()+" ";
}
alert("Items in the unordered lists are "+txt);
});
上面的 jQuery 代码中使用了children()方法，我们先来看看。
儿童( )
children()方法找到所选元素的所有子元素并返回它们。该方法遍历所有子元素，直到所选元素的叶元素，并返回所有子元素。
语法:
$(selector).children()
其中selector是必须返回其子元素的元素。
它是如何工作的
id 为ElectronicsProducts的元素的所有子节点都将被访问并返回给nodes变量。无序列表的 id 为ElectronicsProducts，因此它的三个列表项将被赋给变量nodes。因为有多个列表项，所以节点将成为包含三个列表项的数组。
将显示一个警告对话框，显示子项目的数量(即列表项目的数量)，因此对话框中将显示 3(参见图 1-9(a) )。
一个字符串变量被初始化，一个for循环被设置为从索引值 0 开始执行，直到比节点数组的长度小 1。也就是说，for循环将在变量i的值从 0 到 2 的范围内运行。使用从第 0 个值到第 2 个值的for循环，访问索引位置 0 到 2 的列表项，并将它们的文本连接到字符串变量txt。前三个列表项(即Cameras、Cell Phones和Laptops)的文本被分配给txt变量。最后，三个列表项的文本通过警告对话框显示(见图 1-9(b) )。
图 1-9
(a)显示节点计数的警告对话框(b)显示所有列表项文本的警告对话框
1.13 1-10.替换 DOM 元素
问题
您在 HTML 文件中有一个段落元素，您想用一个无序列表替换它。
解决办法
下面的 HTML 程序包含三个带有特定文本的段落元素。为了区分段落，给它们分配了独特的类别。
replacedom.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>JQuery Examples</title>
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="replacedomjq.js" type="text/javascript"></script>
</head>
<body>
<p class="features"> We deal with electronic products like mobile phones, laptops, washing machine at very reasonable prices </p>
<p class="info"> We do provide home delivery also </p>
<p class="features"> Best products and very reasonable prices </p>
</body>
</html>
在上面的 HTML 代码中，您可以看到某些文本是通过三个段落元素显示的。第一个和第三个段落元素被分配类别features，第二个段落元素被分配类别info。
下面是用无序列表替换段落元素的 jQuery 代码:
replacedomjq.js
$(document).ready(function() {
$( "p.info" ).replaceWith( "<ul>We provide: <li>Free Home Delivery</li><li>Fast Delivery with Charges </li></ul>" );
});
在上面的 jQuery 代码中，使用了一个叫做replaceWith()的方法，我们来看看这个方法。
replaceWith(新内容)
此方法用所需的新内容替换选定元素集中的每个元素。参数new_content可以是 HTML 字符串、DOM 元素、数组或 jQuery 对象。记住，所选元素的内容将被删除，而new_content将被粘贴到它的位置。
它是如何工作的
第二个段落(即具有类别info的段落)由一个无序列表替换，该列表由文本We provide和两个列表项Free Home Delivery和Fast Delivery with Charges组成。因此，在第一段和第三段之间会出现一个无序列表，如图 1-10 所示。
图 1-10
被无序列表替换的
元素
1.14 1-11.替换文本和 HTML
问题
您有一个标题元素和一个段落元素，您想要替换标题元素的文本，并将 HTML 代码分配给段落元素。
解决办法
以下 HTML 文件有一个标题元素和一个段落元素:
Replacehtmltextpage.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>JQuery Examples</title>
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="replacehtmltextjq.js" type="text/javascript"></script>
</head>
<body>
<H1>Welcome to our site </H1>
<p> We deal with electronic products like mobile phones, laptops, washing machine at very reasonable prices </p>
</body>
</html>
在上面的代码中，您可以看到一条文本消息，Welcome to we site，通过标题级别 1 显示。标题下面是显示一些文本的段落元素。
替换标题级别 1 元素的文本并为段落元素设置 HTML 的 jQuery 代码如下:
Replacehtmltextjq.js
$(document).ready(function() {
$("h1").text("Welcome to latest Innovations");
$("p").html("<b>Latest Laptops, Cameras, Mobile Phones at attractive prices available</b>");
})
它是如何工作的
标题级别 1 的文本替换为文本欢迎使用最新创新。段落元素的文本替换为 HTML < b >最新款笔记本电脑、相机、手机价格优惠< /b > 。该文本将以粗体显示，并将取代原始段落文本，如图 1-11 所示。
图 1-11
H1 的文本和
元素被替换
1.15 1-12.克隆 DOM
问题
你有 HTML 元素，你想复制它。更准确地说，您希望复制一个段落元素，并将其粘贴到所需的位置。
解决办法
下面是一个 HTML 程序，它包含显示某些文本的某些段落元素:
cloningdom.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title> </title>
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="cloningdomjq.js" type="text/javascript"></script>
</head>
<body>
<p> We deal with electronic products like mobile phones, laptops, washing machine at very reasonable prices </p>
<p class="info"> We do provide home delivery also </p>
<p class="features"> Best products and very reasonable prices </p>
</body>
</html>
您可以在上面的代码中看到，某些文本是通过三个段落元素显示的。为了通过 jQuery 代码访问它们，第二段和第三段分别被赋予了类info和features。
用于复制段落元素并将其粘贴到另一个段落之后的 jQuery 代码如下:
cloningdomjq.js
$(document).ready(function() {
$( "p.info" ).clone().appendTo("p.features");
});
它是如何工作的
clone()方法复制选定的元素，包括其子元素。顾名思义，这个方法制作了元素的精确副本，包括文本和属性。
选择类别为info的段落元素，制作其克隆体(即其副本)，并将该克隆体添加到类别为features的段落元素的末尾，如图 1-12 所示。
图 1-12
制作类信息的
元素的克隆，并附加到类特征的
元素
Note
当使用.clone()方法时，您可以在插入之前修改克隆的元素或它的外观。
让我们将样式应用到被克隆的段落元素。为此，请用以下 jQuery 脚本文件替换脚本行:
<script src="cloningdombjq.js" type="text/javascript"></script>
其中cloningdombjq.js包含以下 jQuery 代码:
$(document).ready(function() {
$( "p.info" ).clone().appendTo("p.features").addClass('highlight1');
});
您可以看到，选择了具有类info的段落元素，并制作了它的克隆。然后用类features将克隆添加到段落元素的末尾。对克隆的段落元素应用 CSS 类highlight1。
要将样式应用于克隆的段落，请在 HTML 文件的<head>元素中添加以下语句来访问 CSS 文件:
<link rel="stylesheet" href="cloningdomstyle.css" type="text/css" media="screen" />
其中cloningdomstyle.css包含以下 CSS 样式:
.highlight1{
font-style: italic;
background-color: #0f0;
}
.highlight2{
font-style: bold;
background-color: #f00;
}
CSS 文件包含两个 CSS 类，highlight1和highlight2。您将在 jQuery 代码中使用highlight1风格。CSS 样式highlight1包含将文本转换为斜体模式并将其背景颜色改为绿色的代码。在运行程序时，你可以看到克隆的段落(即在它被添加到末尾之前的第二个图形)首先应用了 CSS 样式highlight1，如图 1-13 所示。
图 1-13
在对其应用样式后，制作并附加了一个
元素的克隆
1.16 1-13.显示兄弟姐妹
问题
某些 HTML 元素相互嵌套，您希望显示或找出某个特定 HTML 元素的兄弟元素。
解决办法
下面的 HTML 程序包含一个<div>元素和嵌套在其中的其他几个 HTML 元素:
Siblingpage.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>JQuery Examples</title>
<link rel="stylesheet" href="siblingstyle.css" type="text/css" media="screen" />
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="siblingjq.js" type="text/javascript"></script>
</head>
<body>
<div>
<p> Electronic Products </p>
<ul>
<li>Cameras</li>
<li>Cell Phones</li>
<li>Laptops</li>
</ul>
<H1> Snacks </H1>
<ul>
<li>Pizza</li>
<li>Burger</li>
</ul>
</div>
</body>
</html>
在上面的 HTML 程序中可以看到，制作了一个<div>元素。在<div>元素中有一个<p>元素，一个<ul>元素，一个<H1>元素，还有一个<ul>元素。两个<ul>元素有各自的<li>元素。
要将样式应用于所需 HTML 元素的兄弟元素，请在 CSS 文件中定义某些样式规则，如下所示:
Siblingstyle.css
.highlight{
font-style: italic;
background-color: #0f0;
}
您可以看到 CSS 文件包含一个名为highlight的样式，它将文本转换为斜体模式，并将其背景颜色更改为绿色。
以下是显示<div>元素的兄弟元素的 jQuery 代码:
Siblingjq.js
$(document).ready(function() {
$('div').siblings();
})
它是如何工作的
如图 1-14 所示，显示<div>元素的兄弟元素(即，段落元素，由三个列表项组成的无序列表，标题级别 1 元素，以及带有两个列表项的无序列表)。
图 1-14
显示
元素的两个兄弟元素
要将highlight样式仅应用于<div>元素的特定兄弟元素(即，仅应用于无序列表)，请修改 jQuery 代码，如下所示:
$(document).ready(function() {
$('p').siblings('ul').addClass('highlight');
})
在<div>元素的所有兄弟元素中(即在<p>, <ul>, <h1>,和<ul>元素中)，选择<ul>元素，并将highlight样式应用于两个无序列表项，将列表项的文本转换为斜体模式，并将它们的背景色更改为绿色(参见图 1-15 )。
图 1-15
突出显示样式应用于同级的无序列表元素
1.17 1-14.设置和获取属性
问题
您希望动态地设置和获取 HTML 元素的属性。在这个菜谱中，您将学习如何访问超链接的属性值，以及如何设置或更改其属性值。
解决办法
下面的 HTML 文件有两个用特定文本定义的段落元素。第二段被分配类别info，此后超链接被定义如下:
Getsetattribpage.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>jQuery Examples</title>
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="getsetattribjq.js" type="text/javascript"></script>
</head>
<body>
<p> We do provide home delivery also </p>
<p class="info"> Best products and very reasonable prices. </p>
<a href="http://bmharwani.com">Click for details </a>
</body>
</html>
您将用来获取和设置 HTML 元素属性值的方法是attr()，所以现在让我们来看看attr()方法。
属性( )
attr()方法用于获取和设置 HTML 元素的属性值。当单个参数被传递给.attr()函数时，它返回所选元素上被传递属性的值。
语法:
$([selector]).attr([attribute name]);
为了给某个元素赋值，需要在属性名后面提供属性值。
语法:
attr(attributeName, attributeValue)
示例:
$('a').attr('title', 'Click for details');
标题attribute有助于将文本分配给当鼠标悬停在 HTML 元素上时出现的元素。
为了设置和获取超链接属性值，您需要编写以下 jQuery 代码:
Getsetattribjq.js
$(document).ready(function() {
alert($('a').attr('href'));
$('a').attr('title', 'Click for bmharwani.com');
$('a').attr('href','http://jquery.com');
alert($('a').attr('href'));
})
它是如何工作的
超链接的属性值将通过警告对话框显示。因为超链接最初是指向 http://bmharwani.com 的，所以这个 URL 会显示在提醒对话框中(见图 1-16 (a))。超链接的标题设置为“点击查看 bmharwani.com ”,因此，当指向超链接时，将显示标题(参见图 1-16(c) )。超链接设置为指向 http://query.com 。超链接的href属性通过警告对话框显示(即，超链接指向的 URL 使用警告对话框显示)。参见图 1-16 (b)。
图 1-16
(a)显示超链接指向的 URL 的警告对话框;( b)显示超链接的 href 属性的警告对话框;( c)在指向超链接时显示的超链接的标题
1.18 1-15.计算 DOM 中节点的数量并显示它们的文本
问题
您希望通过 jQuery 访问 DOM 及其节点。
解决办法
在 DOM 中，网页以树结构的形式表示，具有根节点(父节点)和几个分支(子节点)，其中每个 HTML 元素以节点的形式表示。在 jQuery 的帮助下，可以根据需要访问和操作这些节点。
让我们看看下面的 HTML 页面:
countnodes.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>JQuery Examples</title>
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="countnodesjq.js" type="text/javascript"></script>
</head>
<body>
<div id="root">
<div>Darjeeling</div>
<div>Assam</div>
<div>Kerala</div>
</div>
</body>
</html>
您可以看到前面的 HTML 文件包括用于加载 jQuery 库的<script>标记，以及用于包含包含 jQuery 代码的 JavaScript 文件的标记(countnodesjq.js)。您还可以看到 HTML 文件包含一个带有id="root"的div元素。这个div元素中的所有元素都是子元素(即带有id="root"的div是其内部描述的所有div元素的父元素)。要计算 DOM 节点数并显示它们的文本，请编写以下 jQuery 代码:
countnodesjq.js
$(document).ready(function() {
var $nodes = $('#root').children();
alert('Number of nodes is '+$nodes.length);
var txt="";
$('#root').children().each( function() {
txt+=$(this).text();
});
alert(txt);
});
它是如何工作的
id="root"的 div 的所有子元素都被访问并赋给变量$nodes。您使用第一个警告语句显示子节点集合的长度(参见图 1-17(a) )。此后，在each()方法的帮助下，您可以一次一个地访问$nodes中存储的所有元素。使用text()方法，访问并连接字符串变量$txt中元素的文本。最后，通过另一种alert()方法显示所有子节点的文本，如图 1-17(b) 所示。
图 1-17
(a)通过警告对话框显示的节点计数,( b)显示的 HTML 元素的文本内容
让我们逐一看看前面的 jQuery 代码中使用的方法。
每个( )
each()是一种方法，用于迭代包装集合中的每个元素(所选元素)。它包含一个迭代器函数，您可以在其中编写应用于集合中每个单独元素的代码。
文本( )
text()是 jQuery 对象的一个方法，用于访问所选元素的文本内容。所选元素的文本内容以字符串的形式组合并返回。要查看段落元素的文本内容，可以编写以下 jQuery 代码:
alert($('p').text());
假设段落元素如下例所示:
<p>Styles make the formatting job much easier and more efficient. To give an attractive look to web sites, styles are heavily used.
<span>jQuery is a powerful JavaScript library that allows us to add dynamic elements to our web sites. </span>Not only is it easy to learn, but it's easy to implement too.<br>
<a href="a1.htm"> jQuery Selectors</a> are used for selecting the area of the document where we want to apply styles </p>
前面的 jQuery 代码将显示如图 1-18 所示的输出。
图 1-18
HTML 文件的段落元素的文本内容
您可以使用以下语句查看段落元素的子元素的文本内容:
$(document).ready(function() {
alert($('p').children().text());
});
父级( )
parent()方法是一种树遍历方法，它搜索每个所选元素的直接父元素，并返回一个新的 jQuery 对象。这个方法在 DOM 树中只向上移动一层。要获取 span 元素的父元素的文本内容，可以使用以下 jQuery 代码:
alert($('span').parent().text());
1.19 1-16.获取元素的 HTML
问题
您想要查看所选元素的 HTML 代码。
解决办法
首先，假设 HTML 文件包含以下段落元素:
obtainhtml.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>JQuery Examples</title>
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="obtainhtmljq.js" type="text/javascript"></script>
</head>
<body>
<p>Styles make the formatting job much easier and more efficient. To give an attractive look to web sites, styles are heavily used.
<span>jQuery is a powerful JavaScript library that allows us to add dynamic elements to our web sites. </span>Not only is it easy to learn, but it's easy to implement too.<br>
<a href="a1.htm"> jQuery Selectors</a> are used for selecting the area of the document where we want to apply styles </p>
</body>
</html>
显示段落元素的 HTML 代码的 jQuery 代码如下所示:
obtainhtmljq.js
$(document).ready(function() {
alert($('p').html());
});
它是如何工作的
段落元素的内容被访问，并在html()方法及其 HTML 代码的帮助下显示出来。html()方法获取所选元素的第一个元素的 HTML 内容。它以字符串的形式返回 HTML 内容。html()和text()的区别在于text()方法可以在 XML 和 HTML 文档中使用，而html()只能在 HTML 文档中使用。另一个区别是html()方法显示标签和文本。
您将得到的输出如图 1-19 所示。您可以看到输出包括标签和文本。
图 1-19
HTML 文件的段落元素的 HTML 内容
要获取 span 元素的 HTML 内容，可以使用以下语句:
alert($('span').html());
要获取 span 元素的父元素的 HTML 内容，可以使用以下 jQuery 代码:
alert($('span').parent().html());
1.20 1-17.为不同的 HTML 元素分配相同的类名并对它们应用样式
问题
您希望为两个 HTML 元素分配相同的类名，并对它们应用样式。这两个元素可以是段落和 h1 元素。
解决办法
让我们检查下面的 HTML 文件，其中名为features的类被分配给一个段落和 h1 元素:
assignsameclass.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>JQuery Examples</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="sameclassjq.js" type="text/javascript"></script>
</head>
<body>
<p class="features">Styles make the formatting job much easier and more efficient.</p>
To give an attractive look to web sites, styles are heavily used.
<h1 class="features">Using jQuery</h1>
</body>
</html>
要将样式应用于前面 HTML 文件中的类features的元素，可以使用以下内容创建外部样式表(style.css):
.features{color:green;font-style:italic}
如果希望通过 jQuery 代码将样式规则应用于 HTML 元素(而不是自动应用)，需要在样式表中为样式规则指定其他名称。
.highlight{color:green;font-style:italic}
然后，您需要编写以下 jQuery 代码:
sameclassjq.js
$(document).ready(function() {
$('.features').addClass('highlight');
});
它是如何工作的
在 HTML 文件中，段落和 h1 元素都属于类features。在最终的样式表中，样式规则有一个选择器.highlight，这意味着在这个规则中定义的属性将应用于所有属于类highlight的 HTML 元素。样式规则中定义了两个属性，color和font-style，这些属性应用绿色和斜体样式。
前面的 jQuery 代码将在所有具有类名features的 HTML 元素上设置 CSS 类highlight。输出如图 1-20 所示。
图 1-20
同样的类也适用于
和
标签
1.21 1-18.总结
本章不仅重点解释了 jQuery 的基本特性，还解释了 DOM 的概念和不同的选择器类型。您了解了如何在网页中包含 jQuery 将样式应用于包装集；指定段落；统计特定类别的内容；和应用样式。您还了解了如何返回到上一个 DOM，如何移除特定的 DOM，以及如何预先计划和追加元素。您还学习了应用链接的过程，使用for循环显示无序列表元素，替换 DOM 元素，替换文本和 HTML，克隆 DOM，显示兄弟元素，以及设置和获取 HTML 元素的属性。
下一章将解释如何使用数组和不同的迭代技术。你将学习排序数组，分割数组，搜索和显示一个数值数组和一个字符串数组，以及连接两个数组的过程。您还将学习如何创建对象数组以及如何使用关联数组。
二、数组和迭代
在这一章中，你将学习如何使用数组和不同的迭代技术在数组中搜索想要的信息。我们将在本章中介绍以下食谱:
对数组排序
将数组一分为二
从数值数组中搜索并显示所需的值
连接两个数组
在字符串数组中搜索所需信息
操作数组元素
将数值数组转换为字符串并查找它的子字符串
创建对象数组并显示内容
使用关联数组
对对象数组进行排序
2.1 对数组排序
问题
你有一个元素数组，你想按照你想要的顺序对它们进行排序。
解决办法
下面是一个包含一个<div>元素和一个无序列表的 HTML 文件:
Sortarray.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="sortarrayjq.js" type="text/javascript"></script>
</head>
<body>
<div></div>
<ul class="sorted"></ul>
</body>
</html>
您可以在上面的代码中看到，定义了一个<div>元素，定义了一个无序列表，并为其分配了类sorted。文本将通过<div>元素显示，排序后的电子产品将通过一个无序列表显示。
将数组元素按升序排序并显示在屏幕上的 jQuery 代码如下:
Sortarrayjq.js
$(document).ready(function() {
var items=["Television", "Referigerator", "Cameras", "Cell Phones", "Laptops" ]
items.sort();
$('div').text("Following are the " + items.length + " electronic items for sale");
for (var i = 0; i < items.length; i++){
$('ul.sorted').append($("<li>" + items[i] + "</li>"));
}
});
在上面的 jQuery 代码中，使用了一些方法，如sort()、append()和length属性，所以我们先来看看它们。
排序( )
顾名思义，sort()方法就地对数组元素进行排序。默认情况下，元素将按升序排序。原始数组本身按以下方法排序:
语法:
array.sort(compare_function)
其中compare_function是可选的，定义了排序顺序。
示例:
array.sort(function(a,b){
return a-b;
});
比较函数可能返回值<0, =0, or > 0。
当< 0 时，表示第二个值大于第一个值，因此在数组中被下推。
当> 0 时，第一个值较大，因此在数组中被下推。
当=0 时，不会发生任何变化，因为两个值相等。
追加( )
append()方法在每个选中元素的末尾插入指定的信息。
语法:
info参数代表必须插入的数据。这些数据可以是简单的 HTML 元素或 jQuery 对象。function(index,html)其中function参数返回要插入的数据，index 参数指向元素的位置，html返回所选元素的 HTML 内容。
$(selector).append(info,function(index,html))
长度属性
length属性计算所提到的 jQuery 对象中元素的数量并返回它。
语法:
$(selector).length
其中selector是需要确定计数的 jQuery 对象。
它是如何工作的
字符串数组由名称items定义，并被赋予特定的电子项目。调用sort方法，数组items按字母顺序排列。使用text()方法，通过<div>元素显示文本消息，指示待售电子商品的数量。使用一个for循环来逐个访问数组的每个元素，并以无序列表的列表项形式显示，如图 2-1 所示。
图 2-1
项目计数及其排序顺序
为了反转排序(即，以相反的字母顺序排列项目)，在items.sort()方法之后，添加以下语句:
items.reverse();
下面简单介绍一下reverse()方法。
反向( )
方法颠倒了数组中元素的顺序。数组本身被修改。
语法:
array.reverse()
添加reverse()方法后，您将得到如图 2-2 所示的输出。
图 2-2
显示项目的数量，并以相反的顺序显示项目
Note
对于数字数组，items.sort()不会给出正确的结果，因为 125 会被认为小于 45，因为以 1 开头的数字会被认为小于以 4 开头的数字。要对数值数组进行排序，需要用下面的语句替换items.sort语句:
items.sort(function(a,b){
return a-b;
});
以下是完整的 jQuery 代码:
$(document).ready(function() {
var items=[67,51,125,39,84, 44]
items.sort(function(a,b){
return a-b;
});
$('div').text("Following are the " + items.length + " numericals in ascending order");
for (var i = 0; i < items.length; i++){
$('ul.sorted').append($("<li>" + items[i] + "</li>"));
}
});
在运行程序时，你会得到一个按升序排序的数字数组，如图 2-3 所示。
图 2-3
显示数组的长度，其元素按升序显示
2.2 将数组一分为二
问题
你有一个数组，你想把它分成两部分。
解决办法
下面是包含两对<div>和<p>元素的 HTML 文件:
Splitarray.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="splitarrayjq.js" type="text/javascript"></script>
</head>
<body>
<div id="electronics"></div>
<p class="electronics"></ul>
<div id="garments"></div>
<p class="garments"></ul>
</body>
</html>
您可以在上面的代码中看到有两对<div>和<p>元素，因为您想要分别显示电子产品和服装。每个<div>元素将显示各自的标题(即，其下方显示的项目是电子产品还是服装)。类似地，每个<p>元素将用于显示各自的项目。为了区分两个<div>元素，它们分别被赋予 idelectronics和garments。类似地，两个<p>元素分别被分配了类electronics和garments。
初始化数组、拆分数组以及分别显示其内容的 jQuery 代码如下:
Splitarrayjq.js
$(document).ready(function() {
var items=["Television", "Refrigerator", "Cameras", "Cell Phones", "Laptops", "Jeans", "Shirts", "Blazers" ]
electronics=items.splice(0,5);
$('div#electronics').text("Following are the " + electronics.length + " electronic items for sale");
$('p.electronics').html(electronics.join());
$('div#garments').text("Following are the " + items.length + " garments for sale");
$('p.garments').html(items.join());
});
在上面的 jQuery 代码中，使用了splice()和join()方法，所以我们先快速看一下这两个方法。
拼接( )
splice()方法执行向数组添加新元素和从数组中移除现有元素的任务。方法返回修改后的数组。
语法:
location参数表示添加或删除元素的下标或索引位置。如果该值为负，则意味着该位置位于数组的末尾。number参数指定要从上述位置移除的元素数量。items_to_insert参数是一个由逗号分隔的项目列表，您想要在指定位置插入这些项目。该参数是可选的。
array.splice(location, number, items_to_insert )
方法修改数组并返回移除的元素列表。如果没有移除任何元素，则返回一个空数组。
加入( )
join()方法连接数组的元素，并以字符串的形式返回它们。
语法:
array.join(separator)
其中separator参数是分隔数组中每个元素的分隔符。默认分隔符是逗号。
方法返回一个字符串，该字符串包含由提供的分隔符分隔的所有连接元素。
它是如何工作的
items数组被初始化，一些电子产品和服装被分配给它。
因为数组items中的前五个元素是电子产品，所以使用splice()方法从items数组中提取前五个元素，并将它们分配给另一个名为electronics的数组。在应用了splice()方法后，第六个元素及以后的元素(直到结束)将只保留在items数组中(即服装将保留在items数组中)。电子产品的数量通过 id 为electronics的<div>元件显示。接下来，电子阵列中的所有电子项目通过类别为electronics的<p>元素显示。类似地，服装商品的数量通过 id 为garments的<div>元素显示。items数组中的服装名称通过分配了garments类的<p>元素显示(见图 2-4 )。
图 2-4
划分阵列，一个显示电子产品，另一个显示服装
如果您希望元素一个接一个地出现，您可以将<br/>作为参数传递给join()方法。
Note
在这个菜谱中，您将学习根据数组的索引来拆分数组。根据内容分割数组将在本章后面介绍。
2.3 从数字数组中搜索并显示所需的值
问题
在一个数值数组中有一些值，你想显示数组中的前五个值以及小于 5 的值。
解决办法
为了显示 array 的所有元素、前五个元素以及值小于 5 的元素，在一个 HTML 文件中定义了三对<div>和<p>元素，如下所示:
Searchnumarr.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="searchnumarrjq.js" type="text/javascript"></script>
</head>
<body>
<div id="allnums"></div>
<p class="allnums"></ul>
<div id="first5"></div>
<p class="first5"></ul>
<div id="lessthan5"></div>
<p class="lessthan5"></ul>
</body>
</html>
因为您想要显示三类值(所有值、前五个值和小于 5 的值)，所以创建了三个<div>和<p>元素对。三个<div>元素被分配了 idallnums、first5,和lessthan5。类似地，为了区分三个<p>元素，它们分别被分配了类别allnums、first5和lessthan5。
为了显示数组中的所有项目，显示前五个元素以及少于五个的元素，jQuery 代码如下所示:
Searchnumarrjq.js
$(document).ready(function() {
var nums=[5,0,4,2,7,1,9,3,6,8]
$('div#allnums').text("Complete list");
$('p.allnums').html(nums.join(", "));
first5 =$.grep(nums, function( n, i ) {
return ( i<=4 );
});
$('div#first5').text("First 5 values");
$( "p.first5" ).text(first5.join( ", " ) );
lessthan5 =$.grep(nums, function( n, i ) {
return ( n<5 );
});
$('div#lessthan5').text("Values less than 5");
$( "p.lessthan5" ).text(lessthan5.join( ", " ) );
});
在上面的 jQuery 代码中，使用了grep()方法，所以我们来了解一下它是如何工作的。
grep()
grep()方法用于搜索满足过滤函数的数组元素。
语法:
array参数表示必须进行搜索的数组。function(value, location)参数表示采用两个参数的过滤函数:value指向数组的当前元素。location指向当前元素的下标。
如果忽略
invert参数，则返回一个数组，其中包含函数返回 true 的所有元素。但是如果这个参数作为 true 传递，那么就会发生相反的情况。你得到一个数组，它包含了函数返回 false 的所有元素。
jQuery.grep(array, function(value, location) [, invert])
grep()方法返回满足过滤函数的元素，不影响原始数组。
它是如何工作的
一个整数数组由名字nums定义，并用几个整数值初始化。ID 为allnums的div元素被赋予文本完整列表以显示**。**
数组nums中的所有整数值都通过被分配了类allnums的<p>元素显示。正在显示的元素由逗号分隔，并将显示在同一行上。要在单独的行上显示数组元素，请用<br/>元素替换join()方法中的逗号。
grep()方法与过滤器function()一起使用，其中filter()函数被设置为条件 i < =4，因此它将从nums数组中提取索引值小于或等于 4 的元素，并将其分配给数组first5。数组first5中的元素将通过分配了类别first5的段落显示(见图 2-5 )。
同样，grep()方法与过滤器function()一起使用，其中filter()函数被设置为条件 n < 5，因此filter函数将从nums数组中提取值小于 5 的元素，并将其分配给数组lessthan5。lessthan5数组中的元素将通过被分配了类别lessthan5的段落显示，如图 2-5 所示。
图 2-5
显示完整的数组、前五个值以及小于 5 的值
2.4 连接两个数组
问题
你有一个包含一些值的数字数组。您希望用它创建两个数组，一个数组包含所有能被 3 整除的数字，另一个数组包含能被 5 整除的数值。然后，您希望将这两个数组连接成一个包含可被 3 或 5 整除的数字的数组。
解决办法
为了显示原始数组、包含可被 3 整除的元素的数组、包含可被 5 整除的元素的数组以及两个数组的串联，在 HTML 文件中定义了四对<div>和<p>元素:
Arrconcatenate.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="arrconcatenatejq.js" type="text/javascript"></script>
</head>
<body>
<div id="allnums"></div>
<p class="allnums"></ul>
<div id="divisibleby5"></div>
<p class="divisibleby5"></ul>
<div id="divisibleby3"></div>
<p class="divisibleby3"></ul>
<div id="divisibleby3or5"></div>
<p class="divisibleby3or5"></ul>
</body>
</html>
您可以在上面的代码中看到，定义了四对<div>和<p>元素，其中<p>元素将用于显示内容，<div>元素将用于显示标题(即，通过<p>元素通知正在显示的内容)。为了在它们之间进行区分，这些元素被分配了 idallnums、divisibleby5、divisibleby3和divisibleby3or5。
jQuery 首先从主数组创建两个数组，一个包含可被 3 整除的元素，另一个包含可被 5 整除的元素，最后将这两个数组连接起来，形成一个包含可被 3 或 5 整除的元素的数组。完成上述任务的完整 jQuery 代码如下:
Arrconcatenatejq.js
$(document).ready(function() {
var nums=[5,0,4,2,7,1,9,3,6,8]
$('div#allnums').text("Complete list");
$('p.allnums').html(nums.join(", "));
divby5 =$.grep(nums, function( n, i ) {
return ( (n!=0) && (n%5==0 ));
});
$('div#divisibleby5').text("Values divisible by 5");
$( "p.divisibleby5" ).text(divby5.join( ", " ) );
divby3 =$.grep(nums, function( n, i ) {
return ( (n!=0) && (n%3==0) );
});
$('div#divisibleby3').text("Values divisible by 3");
$( "p.divisibleby3" ).text(divby3.join( ", " ) );
$.merge( divby3,divby5 )
//divby3or5=divby3.concat(divby5);
$('div#divisibleby3or5').text("Values divisible by 3 or 5");
$( "p.divisibleby3or5" ).text(divby3.join( ", " ) );
//$( "p.divisibleby3or5" ).text(divby3or5.join( ", " ) );
});
在上面的 jQuery 代码中，使用了两个方法，merge()和concat()，我们先来快速浏览一下。
合并( )
merge()方法将两个数组的内容合并成第一个数组。
语法:
$.merge( first_array, second_array )
其中first_array是将second_array的元素合并到的数组。second_array的内容不受影响。
concat()
方法可以用来连接两个字符串和数组。被连接的两个数组将保持不受影响，并返回连接的版本。
语法:
concatenated_array = array1.concat(array2, ...)
其中array1、array2等。是要连接的数组，并且连接的数组(即合并的元素)被返回并且可以被分配给新的数组。
它是如何工作的
定义了一个名为nums array 的整数数组，包含几个值。为了首先显示数字，标题完整列表通过 id allnums的<div>元素显示。在<div>元素下面，使用allnums类的<p>元素，显示nums数组中的所有数值。
为了从nums数组中得到能被 5 整除的数字，使用了grep()方法和filter函数，并且在filter函数中使用了%5表达式来寻找能被 5 整除的数字。因此，所有能被 5 整除的数字都从nums数组中提取出来，并分配给名为divby5的数组。通过类divisibleby5的<p>元素显示divby5数组中的元素。这些元素的标题是 ID 为divisibleby5的文本Values divisible by 5到<div>元素。使用相同的过程，可被 3 整除的元素从nums数组中提取出来，并分配给名为divby3的数组。
此后，调用merge()方法，将两个数组divby3和divby5传递给该方法，并将divby5数组的内容添加到divby3数组中。
合并的元素(即在divby3数组中可被 3 或 5 整除的元素)然后通过类divisibleby3or5的<p>元素显示。图 2-6 显示了程序的输出。
Note
还有一种方法可以显示能被 3 或 5 整除的数组元素。也可以用concat方法替换merge()方法。也就是说，divby3和divby5数组的内容被连接起来，组合的元素被分配给divby3or5数组。上面代码中的第一个注释掉的语句也是这样:
//divby3or5=divby3.concat(divby5);
此后，divby3or5数组中连接的元素可以使用divisibleby3or5类的<p>元素显示在屏幕上。第二个被注释掉的语句执行此任务:
//$( "p.divisibleby3or5" ).text(divby3or5.join( ", " ) );
图 2-6
显示所有数组元素和可被 5 整除的元素、可被 3 整除的元素以及可被 3 或 5 整除的元素
2.5 在字符串数组中搜索所需信息
问题
你有一个字符串数组，在这个数组之外，你想显示特定长度的字符串，以特定字符结尾的字符串，以及有特定子串的字符串。
解决办法
为了显示在字符串数组上执行的不同查询的结果，在下面的 HTML 程序中定义了四对<div>和<p>元素:
Desiredstr.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="desiredstrjq.js" type="text/javascript"></script>
</head>
<body>
<div id="allitems"></div>
<p class="allitems"></ul>
<div id="length8"></div>
<p class="length8"></ul>
<div id="endingwiths"></div>
<p class="endingwiths"></ul>
<div id="juices"></div>
<p class="juices"></ul>
</body>
</html>
您可以在上面的代码中看到，有四对<div>和<p>元素将用于显示所有项目，长度正好为 8 个字符的项目，以字符 s 结尾的项目，以及列表中的所有果汁。<div>元素将用于显示正在显示的项目类别的标题，这就是为什么它们分别被分配了 idallitems、length8、endingwiths和juices。<p>元素用于显示落入类别的项目，因此分别被分配了类别allitems、length8、endingwiths和juices。
显示字符串数组中所需字符串的 jQuery 代码如下所示(即，搜索满足特定条件的字符串):
Desiredstrjq.js
$(document).ready(function() {
var items=["Aloe vera juice", "Apple juice", "Biscuits", "Juice of oranges", "Cakes", "Brownies", "Doughnut", "Juice of pomegranate" ]
$('div#allitems').text("Complete list");
$('p.allitems').html(items.join(", "));
$('div#length8').text("Items of length 8 characters");
length8items =$.grep(items, function( n, i ) {
return ( n.length ==8 );
});
$( "p.length8" ).text(length8items.join( ", " ) );
$('div#endingwiths').text("Items ending with 's'");
endingwithsitems =$.grep(items, function( n, i ) {
return n.match(/[s]$/)
});
$( "p.endingwiths" ).text(endingwithsitems.join( ", " ) );
$('div#juices').text("List of juices");
juiceitems =$.grep(items, function( n, i ) {
return ( n.toLowerCase().indexOf("juice") >= 0 );
});
$( "p.juices" ).text(juiceitems.join( ", " ) );
});
上面的 jQuery 代码中使用了indexOf()方法，我们先来看看这个方法。
索引（）
indexOf()方法在主字符串中搜索指定的字符串，并返回指定字符串第一次出现的位置。返回的位置是从 0 开始的，如果在主字符串中找不到要搜索的字符串，则该方法返回-1。
语法:
string_to_search参数表示要搜索的字符串。它区分大小写。location_to_start参数指定开始搜索的位置。该参数是可选的，其默认值为 0。
string.indexOf(string_to_search, location_to_start)
为了在特定的选择器中搜索子串，使用了index()方法。我们也来看看这个方法。
索引( )
index()方法在选择器中搜索指定的元素，并返回一个表示元素索引位置的整数。
语法:
$(selector).index(element_to_search)
其中element_to_search参数表示要搜索的元素。如果没有使用参数，该方法将返回选择器的第一个元素相对于其同级元素的索引位置。
它是如何工作的
访问 ID 为allitems的<div>元素，将其文本设置为完整列表。通过将项目数组中的所有元素分配给类allitems.的<p>元素，它们被显示在屏幕上
类似地，ID 为length8的<div>元素被赋予长度为 8 个字符的文本项。一个grep方法与一个过滤函数一起使用，该函数从items数组中提取长度等于 8 个字符的所有项目，并将它们分配给数组length8items。此后，通过类length8的<p>元素显示数组length8items中的所有元素。
类似地，ID 为endingwiths的<div>元素被赋予以 s 结尾的文本条目。一个grep方法与一个过滤函数一起使用，该函数使用一个正则表达式从最后一个字符为 s 的items数组中提取元素，然后将这些元素分配给名为endingwithsitems的数组。最后，数组endingwithsitems中的元素通过类endingwiths的<p>元素显示。
ID 为juices的最后一个<div>元素被设置为显示文本果汁列表。grep()方法与过滤函数一起使用，过滤函数在items数组的元素中搜索单词果汁，这些元素被分配给数组juiceitems。此后，通过类juices的<p>元素显示数组juiceitems中的所有元素，如图 2-7 所示。
图 2-7
显示整个字符串数组和长度为 8 个字符的元素、以 s 结尾的元素以及带有 juice 子字符串的所有元素
2.6 操纵数组元素
问题
您希望操作数组元素来完成一些任务，比如对它们应用序列号、将它们转换成大写字母以及其他任务。
解决办法
让我们假设一个 HTML 文件，它有一个显示消息Members of my Group的 heading 元素和一个空的 paragraph 元素，如下所示:
manipulatearray.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="manipulatearrayjq.js" type="text/javascript"></script>
</head>
<body>
<h3> Members of my Group are </h3>
<p></p>
</body>
</html>
这个空白段落元素将显示取自数组的名称，并应用序列号。
显示数组元素和序列号的 jQuery 代码如下所示:
manipulatearrayjq.js
$(document).ready(function() {
var members = [ "John", "Steve", "Ben", "Damon", "Ian" ];
members = $.map(members, function(n,i){ return(i+1+"."+n); });
$('p').html(members.join("<br />"));
});
将名称转换为大写
让我们看看如何在回调方法中使用其他有用的方法来操作数组成员。第一个解决方案展示了如何用toUpperCase()方法将所有的名字转换成大写。
convnamestoupperjq.js
$(document).ready(function() {
var members = [ "John", "Steve", "Ben", "Damon", "Ian" ];
members=$.map(members, function(n,i){ return(i+1+"."+n.toUpperCase());});
$('p').html(members.join("<br/>"));
});
使用有序列表
用大写字母和序列号显示数组元素的另一种方法是利用有序列表元素。下面是一个 HTML 文件，显示了一个标题元素和一个空的有序列表元素。
orderedlist.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="orderedlistupperjq.js" type="text/javascript"></script>
</head>
<body>
<h3> Members of my Group are </h3>
<ol id="list">
</ol>
</body>
</html>
以大写形式显示数组元素的 jQuery 代码如下:
orderedlistupperjq.js
$(document).ready(function() {
var memlist = $( "#list" );
var members = [ "John", "Steve", "Ben", "Damon", "Ian" ];
members=$.map(members, function(n){ return(n.toUpperCase());});
$.each(members,function( index, value ){
memlist.append($( "<li>" + value + "</li>" ));
});
});
在上面的 jQuery 代码中，使用了each()方法，所以让我们快速看一下这个方法。
每个( )
each()方法用于定义一个函数，该函数在每个选定的元素上执行。也就是说，循环遍历所有选定的 DOM，并执行函数中定义的代码。
语法
function(index,element)参数包含需要在每个所选元素上执行的语句。index代表选择器的位置。element代表当前元素。
$(selector).each(function(index,element))
它是如何工作的
要理解这个食谱，你需要了解一下map()法。该方法遍历数组的每个元素，并在每个数组元素上调用回调函数。如果您愿意，可以将返回的元素分配给另一个数组或同一个数组。map()方法也可以遍历具有长度属性的类似数组的对象。下面是map()的语法:
map(array, callback);
这里的回调函数包含对数组元素执行处理任务的语句。在第一个解决方案中，您希望显示存储在数组中的名称以及序列号。您可以看到数组members已经定义，并且包含了您想要显示的名称。接下来将这个数组传递给map()方法。map()方法中的回调函数包含两个参数，n 和 I，其中 n 是指传递给map()方法的数组元素(名称)，I 是单个数组元素的索引(索引从 0 开始)。要使序列号从 1 而不是 0 开始，可以在每次迭代中给 I 加 1。回调函数返回的值如下所示:
return(i+1+"."+n)
该语句从 1 开始逐个返回数组的所有元素。输出如图 2-8 所示。
图 2-8
使用数组映射为数组元素分配序列号
接下来，使用回调函数中的toUpperCase()方法将数组中存储的所有名称转换成大写:
members=$.map(members, function(n,i){ return(i+1+"."+n.toUpperCase()); });
回想一下，回调函数中的参数 n 和 I 分别引用数组元素和索引号。可以看到toUpperCase()对 n 的应用(即以数组元素的形式存储在数组中的名字)将名字转换成大写，并返回显示在段落元素中。输出将是转换成大写的名字，以及序列号，如图 2-9 所示。
图 2-9
使用数组映射将数组元素转换为大写
有序列表解决方案将自动编号应用于其列表元素。向 members 数组分配map()方法的结果，这将把每个数组元素转换成大写。然后将members数组的每个成员一个接一个地追加到有序列表中(这个列表有一个 idlist，通过 jQuery 代码来标识它)。您将得到如图 2-10 所示的输出。
图 2-10
通过列表项以大写形式显示数组元素
2.7 将数值数组转换为字符串并查找其子字符串
问题
你有一个数字数组，你想把它转换成一个字符串，这样你就可以应用substr()方法取出字符串的一部分。
解决办法
下面是一个 HTML 文件，它包含三个标题元素，分别显示您正在处理的原始数字数组的标题、转换为字符串形式的数组以及字符串的子字符串。此外，在每个标题元素下面是一个段落元素。这三个段落元素被分配了类名origarr、arrstring和partstring。类origarr的段落将用于显示数值数组的元素。arrstring类的段落将用于显示字符串(转换成字符串形式后的数组)，而partstring类的段落将用于显示字符串中你想要取出的部分。HTML 文件如下所示:
convnumarrayintostring.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="convnumtostringjq.js" type="text/javascript"></script>
</head>
<body>
<h3>Original array is </h3>
<p class="origarr"></p>
<h3> Array in form of string </h3>
<p class="arrstring"></p>
<h3> Substring is </h3>
<p class="partstring"></p>
</body>
</html>
将数值数组转换成字符串，然后取出其中一部分的 jQuery 代码如下:
convnumtostringjq.js
$(document).ready(function() {
var members = [67,51,125,39,84];
$('p.origarr').html(members.join("<br/>"));
var str = members.join("");
$('p.arrstring').text(str);
var substr = str.substr(0,3);
$('p.partstring').text(substr);
});
它是如何工作的
您定义了一个包含五个元素的名为members的数字数组，并显示了类origarray的段落元素中的内容，用换行符(<br/>)分隔每个数组元素，以便数组元素一个接一个地显示。
接下来，通过将数字数组members的每个元素连接到字符串变量str中，中间没有任何空格，将数字数组members转换为字符串。也就是说，字符串str将包含一个接一个连接起来的数值数组的所有数值，中间没有任何空格。str变量显示在arrstring类的段落元素中。
最后，从索引位置 0 开始，从str变量中取出字符串的一部分。从那里，三个字符被提取并存储在字符串变量substr中。变量substr的内容将显示在类partstring的段落元素中。输出如图 2-11 所示。
图 2-11
转换为字符串的数值数组
2.8 创建对象数组并显示内容
问题
您希望创建一个对象数组，其中每个对象都包含一个由国家名称和首都组成的对。
解决办法
为了显示对象数组中的内容(即显示国家名称和相应的首都)，创建了一个<div>元素和一个<p>元素，如下所示:
Countrycap.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="countrycapjq.js" type="text/javascript"></script>
</head>
<body>
<div id="allcountries"></div>
<p class="allcountries">
</body>
</html>
你可以在上面的代码中看到，为了给出一个惟一的标识，<div> e元素被赋予了一个 IDallcountries，而<p>元素被赋予了类allcountries。
下面的 jQuery 代码创建了一个对象数组，并显示了存储在 I:
Countrycapjq.js
$(document).ready(function() {
var countries=[
{
"country": "India",
"capital": "New Delhi"
},
{
"country": "United States",
"capital": "Washington D.C."
},
{
"country": "England",
"capital": "London"
},
{
"country": "Australia",
"capital": "Canberra"
}
];
$('div#allcountries').text("List of countries and their capitals");
for(var i=0;i<countries.length;i++){
$('p.allcountries').append("<tr><td>"+countries[i].country+ " </td><td>"+countries[i].capital+"</td><tr/>");
}
});
它是如何工作的
创建一个名为countries的对象数组，其中每个对象包含两个属性，country和capital。创建了一些带有一些国家名称及其各自首都的对象。
ID 为allcountries的<div>元素被赋予文本List of countries and their capitals。使用一个for循环从数组中访问每个对象并显示国家和首都属性中的值，通过 ID 为allcountries的<p>元素显示，如图 2-12 所示。
图 2-12
显示对象数组的所有元素，其中每个对象由一个国家和首都对组成
为了根据国家名称的升序对对象数组进行排序，在通过a <div>元素显示数组之前，添加以下完整代码:
countries=countries.sort(function(a,b){
if(a.country < b.country){return -1};
if(a.country > b.country){return 1};
return 0;
});
将 jQuery 中的上述代码添加到以下语句的上方:
$('div#allcountries').text("List of countries and their capitals");
第一个配方中解释了sort()方法。该数组将以国家名称的升序排列对象，如图 2-13 所示。
图 2-13
按国家名称排序后显示对象数组
2.9 使用关联数组
关联数组是索引本质上不是数字而是字符串的数组。这些字符串索引也称为键(即，关联数组只不过是一系列键/值对)。
问题
您希望以关联数组的形式显示某些国家及其首都。
解决办法
要显示标题和国家及其各自的首都，创建以下包含<div>和<p>元素的 HTML 文件:
Associativearr.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="associativearrjq.js" type="text/javascript"></script>
</head>
<body>
<div id="allcountries"></div>
<p class="allcountries">
</body>
</html>
你可以在上面的代码中看到，ID 为allcountries的<div>元素和类为allcountries的<p>元素被定义，其中<div>元素将用于显示标题，<p>元素将用于显示内容
您需要编写 jQuery 代码来定义一个关联数组，以键和值的形式分配国家和首都，然后显示它们。
Associativearrjq.js
$(document).ready(function() {
var countries={
"India" : "New Delhi",
"United States" : "Washington D.C.",
"England" : "London",
"Australia" : "Canberra"
};
$('div#allcountries').text("List of countries and their capitals");
$.each(countries, function(key, value) {
$('p.allcountries').append("<tr><td>"+key+ " </td><td>"+value+"</td><tr/>");
});
});
它是如何工作的
一个关联数组由countries的名称创建，包括一个键/值对，其中键是国家名称，值是其首都。四个国家及其各自的首都用于初始化关联数组。
使用 ID 为allcountries的<div>元素显示文本List of countries and their capitals。使用一个each()循环，在关联数组的所有元素上执行指定的函数。该函数通过allcountries类的<p>元素访问键及其关联值并显示，如图 2-14 所示。
图 2-14
显示关联数组的内容
2.10 对对象数组进行排序
问题
学生信息以对象数组的形式存储。假设每个学生对象由三个属性组成:roll、name和emailId。您希望根据属性roll对数组进行排序。
解决办法
让我们创建一个 HTML 文件，它显示一个标题和一个类listofstud的空表格元素。table 元素将用于显示一个排序的对象数组。HTML 文件可能如下所示:
sortarrobject.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="sortarrobjectjq.js" type="text/javascript"></script>
</head>
<body>
<h3>List of students is </h3>
<table class="listofstud"></table>
</body>
</html>
现在编写 jQuery 代码来创建一个对象数组，存储三个学生的信息，属性分别为roll、name和emailId。此外，您需要包含对student对象的roll属性执行排序的代码。这里显示了 jQuery 代码，在下一节中，您将看到它是如何工作的。
sortarrobjectjq.js
$(document).ready(function() {
var students=[
{
"roll": 101,
"name": "Ben",
"emailId":"ben@gmail.com"
},
{
"roll": 102,
"name": "Ian",
"emailId":"ian@gmail.com"
},
{
"roll": 103,
"name": "Caroline",
"emailId":"carol@gmail.com"
}
];
students = students.sort(function(a,b){
return b.roll-a.roll;
});
$.each(students,function( index, value ){
$('table.listofstud').append("<tr><td>"+value.roll+"</td><td>"+value.name+"</td><td>"+
value.emailId+"</td></tr>");
});
});
如果您想按照数组的name属性的字母顺序对数组进行排序，您需要将前面的sort()函数替换为如下函数:
students = students.sort(function(a,b){
if(a.name<b.name){ return -1 };
if(a.name>b.name){ return 1 };
return 0;
});
它是如何工作的
在sort()方法中，您需要添加比较函数，该函数重复地从数组中获取一对值，并在比较的基础上返回值< 0、=0 和> 0。您可以看到，在比较函数中，您正在比较students对象的roll属性。该函数返回以下内容:
return b.roll-a.roll;
这意味着该函数将按照属性roll的降序对数组进行排序。此后，使用each()解析每个数组元素，并通过回调函数处理它们。在回调函数中，数组元素的每个属性，即roll、name和emailId，通过将它们放在<td>和</td>标签中来显示。这意味着每个数组元素都存储在单独一行的表数据元素中，数组元素的每个属性都以列的形式显示。结果是现在对象的数组以表格格式出现，如图 2-15 所示。
图 2-15
student 对象的数组，按 roll 属性的降序排序
当您对name属性进行排序时，您可以看到这次您正在比较students对象的name属性。如果第一个元素的name属性小于第二个元素的name属性(以 ASCII 值表示)，则该函数返回-1，反之则返回 1。结果将是基于name属性排序的student对象的数组。您将看到如图 2-16 所示的输出。
图 2-16
student 对象的数组，按 name 属性的字母顺序排序
2.11 摘要
在本章中，你学习了如何使用数字数组、字符串数组、关联数组和对象数组。您还学习了对数组进行排序、将数组分成几部分、在数组中搜索所需的元素，以及如何连接数组。此外，您还学习了如何定义对象数组以及关联数组的工作原理。
下一章着重于理解事件处理方法。你将学习当鼠标按钮被点击时，或者当输入框获得焦点时，或者当鼠标悬停在任何按钮上时，如何采取行动。您还将学习在鼠标上升和下降事件以及按下或释放某个键时执行任务。此外，您将学习放大和缩小图像，并在发生某些事件时对图像应用淡入淡出效果和动画。
三、理解事件模型
在本章中，你将学习不同的事件处理方法。我们将在本章中介绍以下食谱:
获得焦点和模糊时显示消息
找出哪个鼠标按钮被按下
更改鼠标进入和离开 HTML 元素时的样式
使用鼠标悬停事件更改按钮的样式
使用鼠标上下移动事件来显示和隐藏图像
制作两个按钮，一个用于隐藏，一个用于显示图像
使用
toggleClass放大和缩小图像避免事件冒泡
知道哪个键被按下、按下或释放
对图像应用淡入淡出效果
在图像上应用动画
自动触发事件
单击一次后禁用按钮
寻找鼠标按键的屏幕坐标
动态突出显示文本
通过鼠标移动使图像变亮或变模糊
创建基于图像的翻转
添加和移除文本以响应事件
显示单词气球
创建“返回页首”链接
用动画显示文本
用滑动效果替换文本
顾名思义，事件模型处理点击事件、按键、鼠标抬起、鼠标悬停等事件。你将学习当某个事件发生时，一个动作是如何执行的。
3.1 获得焦点和模糊时显示消息
问题
当一个输入框获得用户的焦点时，以及当用户离开该输入框时，您希望显示一条消息。
解决办法
下面是一个 HTML 文件，其中包含一个段落元素、一个表单以及表单中的一个输入框和一个按钮:
Inputfocus.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="inputfocusjq.js" type="text/javascript"></script>
</head>
<body>
<p>We deal with Electronics Products</p>
<form action="destinationfile" method="get">
<label>Product to search: </label>
<input type="text" name="product" >
<input type="submit" id="submit" value="Submit">
</form>
</body>
</html>
您可以在上面的代码中看到，段落元素用于显示文本我们处理电子产品。表单由一个标签、一个输入框和一个按钮组成。当在表单中按下按钮时，用户将被导航到名为 destinationfile 的网页。标签设置为显示文本产品以搜索，输入框的名称设置为产品。
要在输入框获得焦点以及用户单击输入框外的任意位置时显示消息，请使用以下 jQuery 代码:
输入焦点 jq.js
$(document).ready(function() {
$("input").on("focus", function() {
alert("Enter product to search");
}).on("blur", function() {
alert("We will mail you the related products");
//$("#submit").trigger( "click" );
});
});
在上面的 jQuery 代码中，您使用了方法on(), focus(), blur() ,和trigger()。我们先来看看这些方法。
在( )
on()方法用于将一个或多个事件处理程序关联或连接到所选元素及其子元素。
语法:
event参数代表一个或多个与所选元素相关联的事件。如果有更多的事件，它们需要用空格隔开。child_selector参数是可选的，但是如果使用的话，这意味着事件处理程序必须只附加到指定的子元素，而不是主选择器。passed_data参数表示要传递给函数的数据。它是可选的。function参数代表事件发生时必须执行的功能。map参数以格式(event:function, event:function, ...)指定事件函数对，其中相应的函数将在事件发生时执行。
$(selector).on(event, child_selector,passed_data,function,map)
为了从选中的元素中删除一个事件处理程序，使用了off()方法。
焦点( )
当输入元素获得焦点时，focus事件发生。输入元素上的焦点可以通过按 Tab 键或通过鼠标点击来实现。在获得焦点时(即，当焦点事件发生在输入事件上时)，执行附属函数中的代码。
语法:
$(selector).focus(function)
其中function参数包括在输入元素上获得焦点时必须执行的代码。它是可选的。
focus方法通常与blur方法一起使用
第一章中讨论了alert()方法。作为参考，回想一下它用于显示一个带有消息和 OK 按钮的对话框。除非用户单击“确定”按钮并关闭警告框，否则用户无法访问页面的任何其他部分。
模糊( )
当一个元素失去焦点时，blur事件发生。blur()方法可用于做以下两件事:
触发模糊事件
附加一个在模糊事件发生时运行代码的函数
语法:
以下语法在指定的选择器上激发模糊事件:
$(selector).blur()
以下语法将一个函数附加到 blur 事件。该函数包括发生模糊事件时要执行的代码。
$(选择器)。模糊(功能)
blur方法通常与focus()方法一起使用。
触发器( )
trigger()方法用于在所选元素上触发指定的事件处理程序。也就是说，可以使用trigger()方法为所选元素调用事件的默认行为。
语法:
$(selector).trigger(event,parameter1,parameter2,...)
其中,event参数表示您想要在所选元素上触发的事件。parameter1和parameter2是要传递给事件处理程序的参数。这些参数是可选的。
它是如何工作的
当焦点在任何输入元素上时，将显示一个警告对话框(即，当用户点击输入框时，焦点事件将被触发，警告对话框将显示消息输入产品以搜索)。在输入框中输入产品信息后，当用户按下 Tab 按钮或点击输入框外的任意位置时，将触发blur()事件，进而显示一个警告对话框，消息为我们将把相关产品邮寄给你。
如果您希望表单被自动提交并导航到目标文件，应该使用destinationfile。然后您可以从trigger()方法中移除注释。trigger()方法将调用提交按钮上的点击事件；因此，表单将被提交，您将导航到action属性中提到的目标文件destinationfile。由于目前没有destinationfile，导航上会出现页面未找到的错误。
运行 HTML 文件后，您会看到如图 3-1(a) 所示的屏幕。点击输入框时(即输入框获得焦点的瞬间)，会出现一个提示对话框，显示消息输入产品进行搜索(见图 3-1(b) )。单击“确定”关闭警告对话框后，当用户单击输入框外的任意位置或按 Tab 键时，输入框失去焦点，并显示一个警告对话框，消息为我们将向您邮寄相关产品(见图 3-1(c) )。
图 3-1
(a)要求搜索产品的屏幕;( b)当输入元素获得焦点时，警告对话框显示消息“输入要搜索的产品”;( c)当焦点从输入框移开时，警告对话框显示消息“我们将向您邮寄相关产品”
3.2 查找按下的鼠标按钮
问题
网页上有某些 HTML 元素，您想知道在这些 HTML 元素上按下了哪个鼠标按钮，是左键、右键还是中键。
解决办法
制作一个包含无序列表的 HTML 文件，如下所示:
Mousebutton.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="mousebuttonjq.js" type="text/javascript"></script>
</head>
<body>
<ul id="ElectronicsProducts">
<li class="product">Cameras</li>
<li class="product">Cell Phones</li>
<li class="product">Laptops</li>
</ul>
</body>
</html>
在这个 HTML 文件中，您可以看到创建了一个 ID 为ElectronicsProducts的无序列表，它由文本为Cameras、Cell Phones和Laptops的三个列表项组成。这三个列表项被分配了一个类名product。
为了显示在哪个元素上按下了哪个鼠标按钮，编写了以下 jQuery 代码:
鼠标按钮 jq.js
$(document).ready(function() {
$(".product").on("mousedown", function(event) {
if(event.which==1){
alert("Left mouse button is pressed on "+$(this).text());
}
else
{
alert("Right mouse button is pressed on "+$(this).text());
}
});
});
让我们看看在前面的 jQuery 代码中使用的方法和属性:mousedown()方法和event.which属性。
鼠标按下( )
顾名思义，当鼠标指针在某个元素上并且鼠标按钮在该元素上按下时，发生 mousedown 事件。mousedown()方法执行以下两项任务:
它触发 mousedown 事件。
它将一个函数与 mousedown 事件连接起来。该函数包含发生 mousedown 事件时需要运行的代码。
语法:
以下语法在选定的元素上触发 mousedown 事件:
$(selector).mousedown()
以下语法将函数与 mousedown 事件相关联:
$(selector).mousedown(function)
其中参数function包含当鼠标事件发生在所选元素上时要执行的代码。
哪个事件
event.which属性指示在事件期间按下了哪个键盘按键或鼠标按钮。属性表示左按钮的值为 1，中按钮的值为 2，右按钮的值为 3。
语法:
event.which
其中event是在事件绑定函数中使用的参数。
它是如何工作的
当鼠标点击任何一个类为product的元素时，就会触发mousedown()事件。所有三个列表项都被赋予了product类，所以如果鼠标左键点击列表项中的任何一个，就会检查event.which属性来知道哪个鼠标按钮被按下了。相应地，显示一个警告对话框，指示鼠标左键、中键或右键是否被按下，以及鼠标按钮被按下的列表项目。
在Cameras列表项上按下鼠标左键，会出现警告对话框，告知相机上的鼠标左键被按下，如图 3-1(a) 所示。在Laptops列表项上单击鼠标右键，警告对话框会显示如图 3-2(b) 所示的信息。
图 3-2
(a)警告对话框，通知在相机上按下了鼠标左键;( b)警告对话框，通知在笔记本电脑上单击了鼠标右键
3.3 改变鼠标进入和离开 HTML 元素的样式
问题
您有一个已经应用了 CSS 样式的按钮。您希望在鼠标指针进入按钮时更改样式，并在鼠标指针离开按钮时重新应用原始 CSS 样式。
解决办法
制作一个包含无序列表的 HTML 文件，如下所示:
Mousehover.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="mousehoverstyle.css" type="text/css" media="screen" />
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="mousehoverjq.js" type="text/javascript"></script>
</head>
<body>
<p>We deal with Electronics Products</p>
<img src="a1.jpg" width="200" height="100"><br/>
<button class="btn" id="hide">Hide Image</button>
<button class="btn" id="show">Show Image</button>
</body>
</html>
段落元素用于显示文本我们处理电子产品。显示一幅图像，宽 200 像素，高 100 像素。图像下方显示两个按钮，文本为隐藏图像和显示图像。类别btn被分配给两个按钮。为了访问 jQuery 代码，这两个按钮分别被分配了 idhide和show。
要将 CSS 类应用于按钮，并定义当鼠标指针悬停在按钮上时需要应用的 CSS 类，请在样式表中编写不同的 CSS 类，如下所示:
mouehnotstyle . CSS
.btn{
font-style: italic;
background-color: #0f0;
}
.highlight{
font-style: bold;
background-color: #f00;
}
为了在鼠标指针悬停在鼠标按钮上时应用 CSS 类，并在鼠标指针离开按钮时删除 CSS 类，请编写以下 jQuery 代码:
mouehverjq . js
$(document).ready(function() {
$("button#hide").on("mouseenter", function() {
// alert("hovered over");
$("button#hide").addClass("highlight");
}).on("mouseleave", function() {
$("button#hide").removeClass("highlight");
// alert("hovered out");
});
});
在这个 jQuery 代码中，使用了方法mouseenter(), mouseleave(), mouseover()和mouseout()。我们先来快速浏览一下这些方法。
滑鼠 enter()
当鼠标指针位于选定的元素上时，发生 mouseenter 事件。mouseenter()方法执行以下两项任务:
它触发了 mouseenter 事件。
它关联一个函数，该函数包含发生 mouseenter 事件时需要运行的代码。
语法:
以下语法在选定的元素上激发 mouseenter 事件:
$(selector).mouseenter()
以下语法将函数与 mouseenter 事件相关联:
$(selector).mouseenter(function)
其中，function参数包含触发 mouseenter 事件时必须运行的代码。
mouseover 和 mouseenter 事件之间的区别在于，mouseenter 事件仅在鼠标指针进入所选元素时触发，而 mouseover 事件即使在鼠标指针也进入其任何子元素时也会触发。
mouseenter方法通常与 mouseleave 事件一起使用。
mouseleave()
当鼠标指针离开选定的元素时，发生 mouseleave 事件。mouseleave()方法执行以下两项任务:
它触发 mouseleave 事件。
它附加了一个在 mouseleave 事件发生时运行的函数。
语法:
以下语法触发选定元素的 mouseleave 事件:
$(selector).mouseleave()
以下语法将函数与 mouseleave 事件相关联:
$(selector).mouseleave(function)
其中参数function包含当鼠标离开事件发生时要执行的代码。
mouseout 和 mouseleave 事件之间的区别在于，mouseleave 事件仅在鼠标指针离开所选元素时触发，而 mouseout 事件即使在鼠标指针也离开其任何子元素时也会触发。
mouseleave()方法通常与mouseenter()事件一起使用。
鼠标悬停( )
当鼠标指针位于所选元素上时，发生 mouseover 事件。mouseover()方法执行以下任务:
它触发鼠标悬停事件。
它将一个函数与 mouseover 事件相关联，该事件包含发生 mouseover 事件时要运行的代码。
语法:
以下语法在选定的元素上激发 mouseover 事件:
$(selector).mouseover()
以下语法将函数与 mouseover 事件相关联:
$(selector).mouseover(function)
其中function参数包含发生鼠标悬停事件时需要运行的代码。
mouseenter 和 mouseover 事件之间的区别在于，如果鼠标指针进入所选元素或其任何子元素，将触发 mouseover 事件，而 mouseenter 事件仅在鼠标指针进入所选元素时触发。
mouseover方法通常与 mouseout 事件一起使用。
mouseout()
当鼠标指针离开选定的元素时，发生 mouseout 事件。mouseout()方法执行以下两项任务:
它触发 mouseout 事件。
它将一个函数与 mouseout 事件相关联，该函数包含发生 mouseout 事件时要执行的代码。
语法
以下语法触发选定元素的 mouseout 事件:
$(selector).mouseout()
以下语法将函数与 mouseout 事件相关联:
$(selector).mouseout(function)
其中，参数function包含发生 mouseout 事件时要执行的代码。
mouseleave 和 mouseout 事件之间的区别在于，如果鼠标指针离开所选元素或其任何子元素，将触发 mouseout 事件，而 mouseleave 事件仅在鼠标指针离开所选元素时触发。
mouseout()方法通常与 mouseover 事件一起使用。
它是如何工作的
CSS 样式btn自动应用于两个按钮，隐藏图像和显示图像，因为这两个按钮都被分配了类btn。按钮标题以斜体和绿色显示。当鼠标悬停在隐藏图像按钮上时，CSS 样式highlight被应用到该按钮上。
当鼠标在标题为隐藏图像的按钮上时，样式类highlight被应用于按钮，使其标题加粗，颜色为红色。当鼠标离开隐藏图像按钮时，highlight样式类从按钮中移除，使其与之前相同。
Note
如果从两条语句中删除注释，当鼠标在隐藏图像按钮上时，将显示消息悬停在上的警告对话框，当鼠标离开隐藏图像按钮时，警告对话框将显示消息悬停在上。
最初，一个图像会出现两个按钮，隐藏图像和显示图像。两个按钮将以绿色显示，其标题以斜体显示(见图 3-3(a) )。
将鼠标悬停在隐藏图像按钮上，标题会变成粗体，按钮的颜色会变成红色(参见图 3-3(b) )。
图 3-3
(a)“隐藏图像”和“显示图像”这两个按钮以绿色显示。( b)“隐藏图像”按钮的颜色变为红色
3.4 使用鼠标悬停事件来改变按钮的样式
问题
网页上有一个按钮，您希望当用户悬停在该按钮上时，该按钮的 CSS 样式会发生变化。
解决办法
制作一个包含段落元素、图像和两个按钮的 HTML 文件，如下所示:
Mousehover2.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="mousehoverstyle.css" type="text/css" media="screen" />
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="mousehover2jq.js" type="text/javascript"></script>
</head>
<body>
<p>We deal with Electronics Products</p>
<img src="a1.jpg" width="200" height="100"><br/>
<button class="btn" id="hide">Hide Image</button>
<button class="btn" id="show">Show Image</button>
</body>
</html>
设置一个段落来显示文本我们处理电子产品。一个宽 200 像素、高 100 像素的图像显示在段落下方。图像下方显示两个带标题隐藏图像和显示图像的按钮。类别btn被分配，idhide和show被分别分配给两个按钮。
为了定义按钮的原始 CSS 类，也为了定义当鼠标指针停留在按钮上时需要应用的 CSS 类，您将使用您在前面的配方中创建的 CSS 样式文件mousehoverstyle.css。
当鼠标指针悬停在按钮上时，在按钮上应用 CSS 样式类的 jQuery 代码如下:
mouehver 2 jq . js
$(document).ready(function() {
$("button.btn").hover( function() {
$(this).addClass("highlight");
}, function() {
$(this).removeClass("highlight");
});
});
在这段 jQuery 代码中，使用了hover()方法，所以我们先来看看这个方法。
悬停( )
顾名思义，hover()方法表示包含当鼠标指针悬停在某个元素上时(即鼠标指针进入和离开指定的元素)要执行的代码的函数。这也意味着 hover 方法触发 mouseenter 和 mouseleave 事件。hover()方法指定了两个要运行的函数，如下所示:
语法:
enterFunction是一个函数，包含发生 mouseenter 事件时要执行的代码。leaveFunction是一个函数，包含发生 mouseleave 事件时要执行的代码。该功能是可选的。如果不使用该函数，则对 mouseenter 和 mouseleave 事件执行相同的函数。
$(selector).hover(enterFunction,leaveFunction)
它是如何工作的
因为这两个按钮被分配了类btn，CSS 类btn将自动应用于这两个按钮，使它们的标题以斜体显示，背景色为绿色。
当鼠标指针悬停在任何一个按钮上时，CSS 类highlight将应用于其上，使其标题加粗并将其背景色改为红色。
最初，在运行网页时，您得到如图 3-4(a) 所示的输出，这是两个带有标题隐藏图像和显示图像的按钮，其中两个标题都是斜体模式，两个按钮的背景颜色是绿色。当鼠标悬停在任一按钮上时，按钮的标题将变为粗体，按钮的背景颜色将变为红色(如图 3-4(b) )。
图 3-4
(a)标题为隐藏图像和显示图像的两个按钮有绿色背景。(b)当鼠标悬停在按钮上时，按钮标题变为粗体，背景色变为红色
3.5 使用鼠标向上和向下事件来显示和隐藏图像
问题
在这个菜谱中，您将制作一个按钮，当用户按下它时会显示一个图像。从图像上释放鼠标按钮后，图像将再次变得不可见。
解决办法
下面是一个显示文本、按钮和图像的 HTML 文件。该图像最初将通过应用 CSS 样式隐藏。
Mouseupdown.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="mouseupdownstyle.css" type="text/css" media="screen" />
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="mouseupdownjq.js" type="text/javascript"></script>
</head>
<body>
<p>We deal with Electronics Products</p>
<button id="show">Show Image</button>
<img src="a1.jpg" width="200" height="100"><br/>
</body>
</html>
在这段代码中，您可以看到段落元素被设置为显示文本我们处理电子产品。显示标题为显示图像的按钮，按钮的 id 设置为show。按钮下方是一个宽 200 像素、高 100 像素的图像。
为了在启动 HTML 文件时将样式应用于图像，可以如下创建外部样式表:
Mouseupdownstyle.css
img{
display: none;
}
img样式中的display: none样式规则将使图像在程序启动时不可见。
按下按钮时显示图像的 jQuery 代码如下:
Mouseupdownjq.js】的缩写
$(document).ready(function() {
$("button#show").on("mousedown", function() {
$("img").fadeIn();
});
$("button#show").on("mouseup", function() {
$("img").fadeOut();
});
});
这个 jQuery 代码使用了mouseup(), fadeOut()和fadeIn()方法，所以让我们先来看看这些方法。
鼠标松开( )
当在所选元素上释放鼠标左键时，将触发 mouseup 事件。mouseup()方法执行以下两项任务:
它触发 mouseup 事件。
它关联一个函数，该函数包含发生 mouseup 事件时需要运行的代码。
语法:
以下语法在选定的元素上激发 mouseup 事件:
$(selector).mouseup()
以下语法将包含在发生 mouseup 事件时必须执行的代码的函数关联起来:
$(selector).mouseup(function)
其中参数function是发生 mouseup 事件时调用的函数。
Note
mouseup()方法通常与mousedown()方法一起使用。
淡出( )
此方法淡化所选元素，使其透明(即逐渐改变所选元素的不透明度，使其完全不可见)。
语法:
$(selector).fadeOut(speed,easing,function)
参数
speed定义淡出的速度。有效选项包括slow:选中的元素慢慢淡出。fast:选中的元素很快淡出。milliseconds:所选元素在指定的毫秒内淡出。如果不使用speed参数，默认值为 400ms。
easing参数代表不同点淡出的速度。该参数的有效值为swing或linear。swing选项使淡出过程在开始或结束时较慢，在中间时较快。linear选项继续以恒定的速度淡出。默认缓动值为swing。function参数表示淡出完成后要执行的功能。
Note
fadeOut方法通常与fadeIn()方法一起使用。
fadein()
fadeIn()方法使隐藏的元素可见(即改变元素的不透明度使其可见)。
语法:
speed参数定义所选元素可见的速度。有效选项包括slow:隐藏的元素会慢慢变得可见。隐藏的元素将很快变得可见。
milliseconds:隐藏元素将在指定的毫秒内可见。speed参数是可选的。如果不使用，默认值为 400 毫秒。
easing参数定义隐藏元素可见时不同点的速度。有效值包括swing:在开始或结束时慢慢取消隐藏元素，在中间时快速取消隐藏元素。linear:以恒定速度取消隐藏元素。缓动参数的默认值为
swing。
function参数是可选的，用于编写在fadeIn()方法完成后要执行的代码。
$(selector).fadeIn(speed,easing,function)
fadeIn()方法通常与fadeOut()方法一起使用。
它是如何工作的
当在按钮上按下鼠标按钮时，图像将逐渐淡入(即，它将慢慢变得可见)，当释放鼠标按钮时，图像将淡出(即，图像将逐渐变得不可见)。
img样式类将自动应用于图像，使其不可见。
运行 HTML 文件后，您会看到如图 3-5(a) 所示的屏幕，上面有文本我们处理电子产品和下面一个名为的按钮显示图像。按下按钮，出现一个图像，如图 3-5(b) 所示。松开鼠标按钮的那一刻，图像又消失了。
图 3-5
(a)显示文本和名为“显示图像”的按钮。(b)按下显示图像按钮时，会出现一个图像
3.6 制作两个按钮，一个用于隐藏，一个用于显示图像
问题
您希望为单个任务创建两个按钮。单击一个按钮会使图像不可见，单击另一个按钮会使图像重新出现。
解决办法
以下是包含段落元素、图像和两个按钮的 HTML 文件，这两个按钮将被分配隐藏和显示图像的任务:
Showhideimagehtml㎡??㎡
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="showhidejq.js" type="text/javascript"></script>
</head>
<body>
<p>We deal with Electronics Products</p>
<img src="a1.jpg" width="200" height="100"><br/>
<button id="hide">Hide Image</button>
<button id="show">Show Image</button>
</body>
</html>
你可以在代码中看到一个段落元素用来显示文本我们处理电子产品。此后，图像以 200 像素宽和 100 像素高显示。图像下方是两个带标题的按钮隐藏图像和显示图像。
允许按钮隐藏图像并使其再次出现的 jQuery 代码如下:
**```js
$(document).ready(function() {
$("button#hide").on("click", function() {
$("img").fadeOut();
});
$("button#show").on("click", function() {
$("img").fadeIn();
});
});
在这个 jQuery 代码中，您使用了方法`fadeOut(), fadeIn(). slideDown(), off(),`和`hide()`。在这些方法中，`fadeOut()`和`fadeIn()`方法已在之前的配方中解释过。让我们快速浏览一下其余的方法。
#### 向下滑动( )
`slideDown()`方法使隐藏的元素向下滑动(即，使其逐渐可见)。
**语法:**
* `speed`参数决定元素可见的速度。以下是有效选项:
* `slow`:隐藏的元素会逐渐变得可见。
* 隐藏的元素将很快变得可见。
* `milliseconds`:隐藏元素将在指定的毫秒内变得可见。
* `speed`参数是可选的。如果未指定，默认值为 400 毫秒。
* `easing`参数定义了取消隐藏元素时不同点的速度。有效选项包括
* `swing`:使隐藏元素在开始或结束时缓慢可见，在中间时快速可见。
* `linear`:以恒定速度取消隐藏隐藏元素。
* `easing`参数的默认值为`swing`。
* `function`参数是可选的，用于编写隐藏元素完全可见后要执行的代码。
```js
$(selector).slideDown(speed,easing,function)
只有使用 jQuery 方法和 CSS 中的display:hone属性隐藏的元素才通过slideDown()方法变得可见。
关闭( )
off()方法与on()方法相反。因此，它使用on()方法移除附加到任何元素的事件处理程序。
语法:
event参数表示需要从所选元素中移除的事件。如果有多个事件，它们需要用空格隔开。selector参数表示必须从中移除事件的元素。这些是在on()方法中使用的元素。function(event_object)参数包含当 off 事件发生时运行的代码。该参数是可选的。map参数以(event:function, event:function, ...)的格式表示事件和相关函数对，表示事件发生时执行的相应函数。
$(selector).off(event,selector,function(event_object),map)
如果事件只需要执行一次，通常使用one()方法将事件与元素关联起来。事件在执行后会自动移除。
隐藏( )
顾名思义，hide()方法隐藏了选中的元素。
语法:
speed参数决定隐藏元素的速度。有效选项包括slow:逐渐隐藏选中的元素。fast:快速隐藏选中的元素。milliseconds:在指定的毫秒内隐藏选中的元素。默认值为 400 毫秒。
easing参数决定了在不同点隐藏元素的速度。有效选项包括swing:在开头或结尾缓慢隐藏元素，在中间快速隐藏元素。linear:匀速隐藏元素。easing参数是可选的。如果不使用，其默认值为 swing。
function参数是一个包含元素完全隐藏后要执行的代码的函数。它是可选的。
$(selector).hide(speed,easing, function)
为了显示隐藏的元素，通常使用show()方法。
它是如何工作的
当点击 id 为hide的按钮时(即点击标题为隐藏图像的按钮时)，将对图像元素调用fadeOut()方法，使图像逐渐不可见。类似地，当点击 id 为show的按钮时(即，当点击标题为显示图像的按钮时)，在图像元素上调用fadeIn()方法，使图像缓慢可见。如果用hide()方法替换fadeOut()方法，也会发生类似的动作。此外，fadeIn()方法可以由slideDown()方法代替，这使得图像慢慢可见。您还可以修改 jQuery 代码，如下所示:
**```js
$(document).ready(function() {
$("button#hide").on("click", function() {
$("img").hide();
$("button#hide").off("click");
});
$("button#show").on("click", function() {
$("img").slideDown();
$("button#show").off("click");
});
});
`hide()`方法隐藏选定的元素(即，单击隐藏图像按钮时图像将被隐藏)。使用`off()`方法的效果是在点击事件发生一次后，点击事件将从这些按钮中移除。因此**显示图像**和**隐藏图像**按钮将只工作一次。
运行 HTML 文件后，您会看到如图 3-6(a) 所示的屏幕。段落元素显示文本**我们处理电子产品**。文本下方是一个图像，后面是两个按钮，标题分别为**隐藏图像**和**显示图像**。点击**隐藏图像**按钮，图像会逐渐消失，如图 3-6(b) 所示。点击**显示图像**按钮，图像会重新出现，如图 3-6(a) 所示。
图 3-6
(A)显示段落元素 image 和两个按钮 Hide Image 和 Show Image。(b)单击隐藏图像按钮时，图像消失
## 3.7 使用 toggleClass 放大和缩小图像
### 问题
您在网页上有一个图像，您想在按下按钮时放大该图像，并在再次单击按钮时缩小该图像。
### 解决办法
以下是包含图像和按钮的 HTML 文件，该按钮将被分配放大和缩小图像的任务:
**zoom inotiming . html**
```js
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="zoominoutstyle.css" type="text/css" media="screen" />
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="zoominoutjq.js" type="text/javascript"></script>
</head>
<body>
<p>We deal with Electronics Products</p>
<button id="zoom">Zoom In / Out Image</button><br/>
<img src="a1.jpg" width="200" height="100">
</body>
</html>
在这个程序中，你可以看到文本我们处理电子产品是通过一个段落元素显示的。此后，显示标题为放大/缩小图像的按钮。一个 idzoom被分配给这个按钮，使它可以在 jQuery 代码中被访问。按钮后，图像以 200 像素宽和 100 像素高显示。
创建了一个名为enlarge的 CSS 样式，当应用于一个元素时，它的宽度和高度将分别为 300 像素和 300 像素。以下是 CSS 文件:
放大样式.css
.enlarge{
width: 300px;
height: 300px;
}
第一次单击按钮时应用 CSS 样式并在另一次单击时删除 CSS 样式的 jQuery 代码如下:
放大 tjq.js
$(document).ready(function() {
$("button#zoom").on("click", function() {
$("img").toggleClass('enlarge');
});
});
上面的 jQuery 代码中使用了方法toggleClass()，我们来理解一下。
toggleclass()
顾名思义，如果该类尚未应用，该方法会将该类应用于所选元素。此外，如果该类已经应用，则该方法会从选定的元素中移除该类。
语法:
class表示要添加或删除的类别。如果使用了多个类，它们需要用空格隔开。function(location,class)是一个函数，返回一个或多个要添加或删除的类名。它是可选的。location返回元素的下标或位置。class返回所选元素的类名。switch参数是一个布尔值，如果设置为真，表示需要添加该类，如果设置为假，表示需要删除该类。它是可选的。
$(selector).toggleClass(class,function(location,class),switch)
它是如何工作的
当使用toggleClass()方法点击 id 为zoom的按钮时(即，当点击放大/缩小图像按钮时)，CSS 样式enlarge被应用到图像，将其大小增强到 300 像素宽和 300 像素高。当用户再次点击放大/缩小图像按钮时，toggleClass()方法将从图像中移除 CSS 样式enlarge，将其缩小到 200 像素宽、100 像素高的原始大小。
运行 HTML 文件后，将显示文本消息我们处理电子产品。一个标题为放大/缩小图像的按钮将显示在文本下方，后面是一个 200 像素宽、100 像素高的图像(见图 3-7(a) )。点击放大/缩小图像按钮，图像将被放大到 300 像素宽和 300 像素高(见图 3-7(b) )。再次单击放大/缩小图像按钮时，图像将缩小到原始大小。
图 3-7
(A)显示文本消息、放大/缩小图像按钮和图像。(b)当点击放大/缩小图像按钮时，图像被放大
3.8 避免事件冒泡
问题
当嵌套在其他元素中的元素上触发事件时，所发生的是事件在该元素以及包含它的所有元素上被触发(即，事件将在 DOM 中的所有元素上被触发)。当事件发生在任何嵌套元素上时，您希望避免事件冒泡。
解决办法
下面是一个 HTML 文件，它包含一些元素，一个在另一个里面:
event bubling . html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="eventbubblingjq.js" type="text/javascript"></script>
</head>
<body>
<div>Welcome to our site
<ul>
<li>Cameras</li>
<li>Cell Phones</li>
<li>Laptops</li>
</ul>
<p> We deal with electronic products like <strong>mobile phones, laptops, washing machine </strong at very reasonable prices </p>
</div>
</body>
</html>
您可以在这段代码中看到，设置了一个<div>元素来显示文本欢迎来到我们的站点。在<div>元素中，一个无序列表元素由三个列表项定义:Cameras、Cell Phones和Laptops。在无序列表的下面，<div>元素中是一个<p>元素，而<p>元素中是一个<strong>元素。每个元素都被设置为显示特定的文本。
以下 jQuery 代码将导致事件冒泡:
Eventbubblingjq.js
$(document).ready(function() {
$('div').click(function(event){
alert('<div> element is clicked');
});
$('ul').click(function(event){
alert('<ul> element is clicked');
});
$('p').click(function(event){
alert('<p> element is clicked');
});
$('strong').click(function(event){
alert('<strong> element is clicked');
});
});
它是如何工作的
当用户点击<div>元素时，会出现一个警告对话框，显示消息 < div >元素被点击。因为<div>元素是所有元素的父元素，所以不会发生事件传播。
当用户点击<ul>元素时，会出现一个警告对话框，显示消息 < ul >元素被点击。现在，因为<ul>元素嵌套在<div>元素中，所以点击事件将传播到父元素(即<div>元素)；因此，将出现另一个警告框，显示消息 < div >元素被单击。
当用户点击<p>元素时，会出现一个警告对话框，显示消息**?? p>元素被点击**。同样，<p>元素嵌套在<div>元素中，所以点击事件也将传播到<div>元素；因此，将出现另一个警告框，显示消息 < div >元素被单击。
当用户点击<strong>元素时，会出现一个警告对话框，显示消息 < strong >元素被点击(见图 3-8(a) )。因为<strong>元素嵌套在<p>元素中，而后者又嵌套在<div>元素中，所以点击事件也将传播到<p>和<div>元素。因此，将出现另外两个警告框，分别显示消息 < p >元素被点击和 < div >元素被点击(参见图 3-8(b) )。
图 3-8
(a)通知点击了元素的警告对话框。(b)由于事件传播，两个警告对话框相继出现，显示消息“
元素被点击”和“
元素被点击”
要停止事件冒泡，您需要调用stopPropagation()方法。因此，修改 jQuery 代码，如下所示。您可以看到添加了event.stopPropagation()语句(用粗体标记)。
$(document).ready(function() {
$('div').click(function(event){
alert('<div> element is clicked');
});
$('ul').click(function(event){
event.stopPropagation();
alert('<ul> element is clicked');
});
$('p').click(function(event){
event.stopPropagation();
alert('<p> element is clicked');
});
$('strong').click(function(event){
event.stopPropagation();
alert('<strong> element is clicked');
});
});
在这段 jQuery 代码中，使用了stopPropagation()方法，所以我们先快速浏览一下。
停止传播( )
顾名思义，stopPropagation()方法阻止事件冒泡到父元素(也就是说，事件只发生在选中的元素上，而不会发生在嵌套选中元素的元素上)。
语法:
event.stopPropagation()
在这个 jQuery 代码中，当用户单击任何元素时，执行分配给该事件的任务，但是通过使用事件处理程序中的event.stopPropagation()方法，事件将只发生在所选元素上，并且事件不会被导航到父元素。
3.9 知道哪个键被按下、按下或释放
问题
你有一个输入框，你想知道哪个键被按下，哪个键被按下，哪个键被释放。
解决办法
显示输入框和定义段落元素以显示哪个键被按下、按下或释放的 HTML 文件如下:
Keypressdown.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="keypressdownjq.js" type="text/javascript"></script>
</head>
<body>
<p>We deal with Electronics Products</p>
<label>Product to search: </label>
<input type="text" name="product" >
<p id="kdown"></p>
<p id="kpress"></p>
<p id="kup"></p>
</body>
</html>
您可以在这段代码中看到，段落元素用于显示文本我们处理电子产品。要求用户通过输入框输入要搜索的产品。输入框下面定义了三个段落元素，id 分别为kdown、kpress和kup。通过这些段落元素，您将在输入框中显示哪个键被按下、按下或释放。
以下是 jQuery 代码，它处理 keydown、keypress 和 keyup 事件，并通过相应的段落元素显示相应事件的代码:
Keypressdownjq.js
$(document).ready(function() {
$("input").on("keydown", function(event) {
$('p#kdown').text('Key down is '+ event.keyCode);
//$('p#kdown').text('Key down is '+String.fromCharCode(event.keyCode));
});
$("input").on("keypress", function(event) {
$('p#kpress').text('Key pressed is '+event.keyCode);
});
$("input").on("keyup", function(event) {
$('p#kup').text('Key up is '+ event.keyCode);
});
});
Note
上述代码中被注释掉的语句是为了进行类型转换(即，将整数格式的关键代码转换为字符串格式)。
上面的 jQuery 代码使用了方法keydown(), keypress(),和keyup()，我们先来看看这些方法。
击键( )
按下一个键时，keydown()事件发生。
语法:
$(selector).keydown()
keydown 事件将在选定的元素上触发。
$(selector).keydown(function)
该函数在 keydown 事件发生时执行。
keypress()
方法指示键被按下。
语法:
$(selector).keypress()
以上语法触发所选元素的 keypress 事件。
$(selector).keypress(function)
其中当按键事件发生时执行该功能。
尽管 keypress 事件看起来与 keydown 事件相似，但 keypress 事件并不是对所有键都触发的。对于 Alt、Ctrl、Shift、Esc 等键，它不会被触发。
向上键( )
该方法指示该键已被释放。
语法:
$(selector).keyup()
keyup 事件将由上述语法在所选元素上触发。
$(selector).keyup(function)
当 keyup 事件发生时执行函数的位置。
它是如何工作的
当在输入框上发生 keydown 事件时，被按下的键的 Unicode 值被分配给keyCode或charCode属性。
charCode是一个代表被按下按键的 ASCII 字符的数字。A 和 A 的 ASCII 字符是不同的，而keyCode是大写和小写都相同的键盘代码。
被按下的键的 Unicode 值通过 ID 为kdown的<p>元素显示。被按下的键的 ASCII 字符通过 ID 为kpress的<p>元素显示。当按下的键被释放时，被释放的键的 Unicode 通过分配了 ID kup的<p>元素显示。
按下一个键，比如输入框中的 a ，通过keydown()事件显示 a 的键码，通过keypress()事件显示其 ASCII 值，释放 a 时，通过keyup()事件显示其键码，如图 3-9(a) 所示。
按下 Shift 键时，keypress()事件不会触发，Shift 键的keyCode将通过keydown()事件显示，并通过 Shift 键释放时的keyup()事件显示(见图 3-9(b) )。
图 3-9
(a)显示字符 a 的键码和 ASCII 值。(b)显示换档键的键码
3.10 对图像应用淡入淡出效果
问题
您有一个图像，并希望发生以下情况:当鼠标指针悬停在按钮上时，图像逐渐消失，并被其放大尺寸(在其原始位置)所取代；当鼠标指针离开按钮时，放大尺寸逐渐消失，并被其原始尺寸的图像所取代。
解决办法
考虑以下包含图像和按钮的 HTML 文件:
fadingeffect.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="fadingeffectstyle.css" type="text/css" media="screen" />
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="fadingeffectjq.js" type="text/javascript"></script>
</head>
<body>
<p>We deal with Electronics Products</p>
<button id="fade">Fade In / Out Image</button><br/>
<img id="pic1" src="a1.jpg" width="200" height="100">
</body>
</html>
您可以在该文件中看到，通过一个段落元素显示了一条关于我们处理电子产品的消息。显示标题为淡入/淡出图像的按钮。为了通过 jQuery 代码访问它，按钮被分配了 ID fade。按钮下方是一幅宽 200 像素、高 100 像素的图像。图像被指定为id图片 1。
名为enlarge的 CSS 样式将元素的宽度设置为 300px，高度设置为 300px。CSS 样式表文件如下所示:
faingeffect style . CSS
.enlarge{
width: 300px;
height: 300px;
}
将鼠标悬停在按钮上时应用淡入淡出图像，并用其放大尺寸替换图像，并在鼠标离开按钮时再次淡入淡出放大尺寸并恢复原始尺寸的 jQuery 代码如下:
Fadingeffectjq.js
$(document).ready(function() {
$("button#fade").hover( function() {
$("img#pic1").fadeTo('slow',0,"linear");
$("img#pic1").addClass("enlarge").fadeTo('fast',1, "swing");
}, function() {
$("img#pic1").removeClass("enlarge").fadeTo('slow',0, "linear");
$("img#pic1").fadeTo('slow',1);
});
});
在这个 jQuery 代码中，使用了fadeTo()方法，所以让我们先快速地看一下这个方法。
事实( )
fadeTo()方法将所选元素的不透明度逐渐更改为指定的淡入淡出效果。
语法:
speed参数决定淡入淡出效果的速度。它的值可以慢也可以快。opacity参数指定淡入淡出的不透明度。它是一个介于 0.00 和 1.00 之间的数字，其中 0.00 将使元素完全淡出，1.00 将使元素淡入(即完全可见)。easing参数指定元素在动画不同点的速度。其值可以是swing或linear。swing值在开始或结束时移动较慢，在中间时移动较快。linear值以恒定速度移动。默认值为swing。function参数包含在fadeTo()方法完成后执行的代码。它是可选的。
$(selector).fadeTo(speed,opacity,easing,function)
它是如何工作的
当用户悬停在按钮上时，原始图像将逐渐淡出(即，它将变得不可见)。在使图像不可见后，立即使其可见，并对其应用 CSS 样式enlarge，将图像的大小增加到 300 像素宽和 300 像素高。
当鼠标离开按钮时，CSS 样式类enlarge从图像中移除，恢复到原始大小，并逐渐使其不可见。在使其不可见后，图像立即又变得可见。
最初，图像将以其原始尺寸出现，如图 3-10(a) 所示。当用户将鼠标悬停在按钮上时，原始图像将逐渐淡出，然后其尺寸将被放大并慢慢变得可见(参见图 3-10(b) )。
图 3-10
(a)图像以其原始尺寸出现。(b)将鼠标悬停在按钮上时，放大的图像会缓慢出现
3.11 在图像上应用动画
问题
您有一个想要在单击按钮时动画化的图像。也就是说，您希望图像在单击按钮时向右移动。此外，在移动时，图像应该逐渐变大。
解决办法
考虑以下包含按钮和图像的 HTML 文件:
Animation1.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="animation1jq.js" type="text/javascript"></script>
</head>
<body>
<p>We deal with Electronics Products</p>
<button id="anim">Animate Image</button><br/>
<img id="pic1" src="a1.jpg" width="200" height="100">
</body>
</html>
您可以在这段代码中看到，使用 paragraph 元素显示了一条消息,我们经营电子产品。在文本下方，显示一个标题为动画图像的按钮。为了访问 jQuery 代码中的按钮，将 idanim分配给按钮。在按钮下方，显示一个宽 200 像素、高 100 像素的图像。
用动画效果放大图像的 jQuery 代码如下所示:
动画 1jq.js
$(document).ready(function() {
$("button#anim").click( function() {
$("img#pic1").animate({width: '400px',height: '500px'}, 'slow');
});
});
在这段 jQuery 代码中，使用了animate()方法，我们先来了解一下这个方法。
动画( )
animate()方法用于创建自定义动画。
语法:
style参数定义了要被动画化的 CSS 属性。speed参数指定动画的持续时间，其有效值为slow、fast或以毫秒为单位的值。它是可选的。easing参数指定动画期间元素的速度。有效值为swing和linear。swing值使元素在开始和结束时移动较慢，在中间时移动较快。linear值使元素以恒定的速度移动。function参数代表动画完成后要执行的功能。它是可选的。
$(selector).animate({style},speed, easing, function);
它是如何工作的
单击该按钮时，图像将慢慢显示为 400 像素宽、500 像素高。运行 HTML 文件后，您会得到如图 3-11(a) 所示的输出。显示文本消息、按钮和图像。点击按钮后，图像会慢慢增大(见图 3-11(b) )。
图 3-11
(A)显示文本消息、按钮和图像。(b)单击该按钮时，图像大小将缓慢增加
要在 HTML 文件加载时自动对图像应用 CSS 样式，请使用以下代码创建一个名为Animation1style.css的文件:
Animation1style.css
.pic{
position: absolute;
width: 150px;
height: 100px;
}
图像的position属性被设置为absolute,这样图像将相对于其最近的定位祖先进行定位。因为图像没有祖先，所以图像将相对于网页边界定位。此外，图像的宽度和高度最初分别设置为 150 像素和 100 像素。
要在 HTML 文件中包含上述 CSS 样式表文件，请在<head>部分添加以下语句:
<link rel="stylesheet" href="animation1style.css" type="text/css" media="screen" />
要使图像从当前位置向右移动，请更改 jQuery 代码，如下所示:
动画 1jq.js
$(document).ready(function() {
$("button#anim").click( function() {
$("img#pic1").animate({ left: '350px'}, 'slow');
});
});
在这个 jQuery 代码中，当点击动画图像按钮时，图像会慢慢向右移动。图像将从其当前位置向右移动，当图像到达距左边缘 350 像素的距离时将停止移动。
最初，HTML 页面会出现如图 3-12(a) 所示。点击该按钮后，图像将缓慢向右移动，当距离网页左边缘 350 像素时停止移动(见图 3-12(b) )。
图 3-12
(A)显示文本消息、动画图像按钮和图像。(b)当点击动画图像按钮时，图像向右动画显示
3.12 自动触发事件
问题
你有一个网页，上面有两个按钮，分别是粗体和斜体，你希望点击事件在任一按钮上自动触发。
解决办法
在这个菜谱中，有两个按钮，您希望自动触发一个事件。让我们为您想要创建的按钮定义一个包含文本粗体和斜体的 HTML 文件:
triggerautomatically.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="stylebuttons.css" type="text/css" media="screen" />
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="triggerautojq.js" type="text/javascript"></script>
</head>
<body>
<span class="bold buttons">Bold</span>
<span class="italic buttons">Italic</span>
</body>
</html>
在外部样式表stylebuttons.css中，编写 CSS 类buttons将按钮的形状赋予文本:
stylebuttons.css
.buttons{
width: 100px;
float: left;
text-align: center;
margin: 5px;
border: 2px solid;
font-weight: bold;
}
让我们编写 jQuery 代码使事件自动发生(即由脚本而不是用户触发)。您可能需要某些事件自动发生，如按钮的自动单击或表单的自动提交。jQuery 提供的触发事件的方法是trigger()。
使点击事件在斜体按钮上自动触发。执行此操作的 jQuery 代码如下:
触发器 autojq.js
$(document).ready(function() {
$('.buttons').bind('click', function(){
alert('You have clicked the ' +$(this).text()+' button');
});
$('.italic').trigger('click');
});
它是如何工作的
在 HTML 文件中，语句
<span class="bold buttons">Bold</span>
在类bold和buttons的 span 元素中定义文本粗体。类bold用于将 jQuery 代码应用到span元素，而class按钮用于应用样式表中指定的 CSS 类buttons中定义的样式。
类似地，第二条语句定义了类italic和buttons的 span 元素的文本斜体。italic类用于应用 jQuery 代码，而buttons类用于应用 CSS 类。在 jQuery 代码中，使用方法trigger()来触发事件。下面简单介绍一下方法。
触发器( )
此方法调用指定事件类型的事件处理程序(传递给此方法)。
语法:
trigger(eventType)
其中eventType是指定事件类型的字符串(即，是点击、双击、聚焦等。).
该方法返回一个 jQuery 对象。当您触发事件时，将执行相应事件处理程序中的代码。所以在对任何元素使用trigger()方法之前，您需要确认它已经定义了一个事件处理程序。
在 jQuery 代码中，您可以看到 click 事件被附加到按钮class的元素上(也就是说，被附加到粗体和斜体的按钮上)。此外，还为它们定义了事件处理程序形式的内联函数。之后，声明
$('.italic').trigger('click');
激发斜体按钮上的 click 事件，导致其事件处理程序被调用。事件处理程序显示一条警告消息，指示该按钮已被单击。不点击斜体按钮时会出现这种情况，点击时也会出现，如图 3-13 所示。
图 3-13
关于自动触发斜体按钮上的点击事件的警告消息
3.13 单击一次后禁用按钮
问题
有时，您希望一个事件只触发一次，或者希望在满足某些条件时禁用它。例如，您可能希望在单击一次提交按钮后禁用它。
解决办法
在这个配方中，有两个按钮，您希望在单击一次后禁用一个按钮。以下是一个 HTML 文件，其中包含您要创建的按钮的文本粗体和斜体:
disablingbutton.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="stylebuttons.css" type="text/css" media="screen" />
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="disablingbuttonjq.js" type="text/javascript"></script>
</head>
<body>
<span class="bold buttons">Bold</span>
<span class="italic buttons">Italic</span>
</body>
</html>
在本配方中，您将使用在配方 3-12 中创建的相同外部样式表stylebuttons.css。样式表包含 CSS 类buttons来为文本提供按钮的形状。
让我们编写 jQuery 代码，在单击一次后禁用事件处理程序:
解耦 buttonjq.js
$(document).ready(function() {
$('.buttons').bind('click', function(){
alert('You have clicked the ' +$(this).text()+' button');
$('.buttons').unbind('click');
});
});
它是如何工作的
jQuery 提供了unbind()方法来从指定的元素中删除事件类型。jQuery 还支持命名空间事件，这允许您触发或取消绑定特定的绑定处理程序组，而不必直接引用它们。
unbind()方法从指定元素中移除先前附加的事件处理程序:
语法:
eventType指不同的事件，如点击、双击等。所有附加到指定eventType的事件处理程序都将停止执行。handler是要删除的事件处理程序；应该和传递给bind()的一样。如果不传递任何参数，所有事件都将被移除。
unbind(eventType, handler)
unbind(eventType)
unbind()
在 jQuery 代码中，您可以看到 click 事件被绑定到按钮。单击任一按钮都会显示一条警告消息，显示所选按钮的文本。因此，如果您选择粗体按钮，您将得到如图 3-14 所示的输出。
图 3-14
单击粗体按钮时的警告消息
但是之后，声明
$('.buttons').unbind('click');
解除 click 事件的事件处理程序(内联函数)的绑定，因此单击任何按钮都不会显示任何消息。
3.14 寻找鼠标按键的屏幕坐标
问题
网页上有一个图像，您想显示图像上鼠标按钮按下位置的屏幕坐标。
解决办法
让我们制作一个显示图像和空段落元素的 HTML 文件，如下所示:
mousecoordinate.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="mousecoordinatejq.js" type="text/javascript"></script>
</head>
<body>
<img src="a1.jpg"/>
<p></p>
</body>
</html>
空白段落将用于显示屏幕坐标。现在编写 jQuery 代码，将 mousedown 事件附加到图像上，以检测鼠标按钮是否在图像的任何部分被按下。代码如下所示:
慕斯梅氏症 jq.js
$(document).ready(function() {
$('img').mousedown(function(event){
$('p').text('Mouse is clicked at horizontal coordinate: '+event.screenX+
' and at vertical coordinate: '+event.screenY);
});
});
它是如何工作的
在这个菜谱中，您将使用事件对象的属性。事件对象是在事件发生时由 JavaScript 自动发送给事件处理函数的对象。事件对象有几个属性或特性。您将在此解决方案中使用的两个属性如下:
screenX指定事件发生时相对于屏幕原点的水平坐标。screenY指定事件发生相对于屏幕原点的垂直坐标。
在 mousedown 事件的事件处理函数中，编写代码以段落元素的文本形式显示事件对象的screenX和screenY属性的值。执行 jQuery 代码后，您会得到如图 3-15 所示的输出。
图 3-15
显示鼠标按钮在图像上单击位置的屏幕坐标位置
3.15 动态突出显示文本
问题
网页上有一些文本和一个按钮，当鼠标移动到按钮上时，您希望突出显示这些文本(通过更改其背景和前景色)。
解决办法
以下是 HTML 文件，其中文本高亮显示包含在类buttons的 span 元素和段落文本中:
亮显文字 dyn.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="stylebuttons.css" type="text/css" media="screen" />
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="highlighttextdynjq.js" type="text/javascript"></script>
</head>
<body>
<span class="buttons">Highlight</span><br/><br/>
<p>Styles make the formatting job much easier and more efficient. To give an attractive look to web sites, styles are heavily used. A person must have a good knowledge of HTML and CSS
and a bit of JavaScript. </p>
</body>
</html>
对于文本高亮显示，将应用样式表stylebuttons.css中定义的样式规则按钮，使其具有按钮的形状。使用在配方 3-12 中使用的相同样式表stylebuttons.css。
要将样式动态应用于文本(当鼠标移动到文本上时)，请编写以下 jQuery 代码:
亮显文字 dynjq.js
$(document).ready(function() {
$('.buttons').mouseover(function(){
$('p').css({
'background-color':'cyan',
'font-weight':'bold',
'color':'blue'
});
});
});
它是如何工作的
在这个方法中，您将使用一种技术来覆盖样式表中定义的样式属性，并将 CSS 属性直接应用于指定的元素。jQuery 提供了一个名为css()的方法，用于将 CSS 属性直接应用于 HTML。此方法直接将 CSS 属性设置为指定的元素，覆盖样式表中定义的样式(如果有)。它允许您更好地控制单个元素以及元素集合上的样式应用。
.css(property, value)
这里的property是你要设置的 CSS 属性名，而value可以是你要分配给属性的属性值，也可以是一个返回要设置的属性值的函数。这里有一个例子:
$('p').css('color':'blue');
它将段落文本的颜色设置为蓝色。下面的代码使用了一个函数，该函数在将img元素增加 30 后返回其高度；也就是说，它会将img元素的高度增加 30px:
$('img').css('height',function(){ return $(this).height()+30;});
该解决方案的输出将显示按钮和段落文本，如图 3-16 所示。
图 3-16
按钮和段落文本
您可以在 jQuery 代码中看到,css()定义了几个属性，例如,background-color属性将青色作为段落文本的背景,font-weight属性使文本以粗体显示，而color属性将段落文本的前景色改为蓝色。当鼠标移动到按钮上时，css()方法中的属性将被应用到段落文本中，可能如图 3-17 所示(尽管这是黑白的，但你已经大致了解了)。
图 3-17
当鼠标移动到按钮上时，段落文本会高亮显示
3.16 通过鼠标移动使图像变亮或变模糊
问题
假设您的网页上显示了一个图像和一个按钮。图像最初是模糊的。你希望当鼠标移动到按钮上时，图像变亮，而当鼠标离开按钮时，图像又变模糊。此外，您希望在单击按钮时增加图像的高度和宽度。
解决办法
下面是一个显示按钮和图像的 HTML 文件:
brighblurr . html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="stylebuttons.css" type="text/css" media="screen" />
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="brightblurrjq.js" type="text/javascript"></script>
</head>
<body>
<span class="buttons" id="bright">Bright Image</span>
<img src="a1.jpg"/>
</body>
</html>
文本明亮的图像被包含在类buttons的 span 元素中，这样在外部样式表stylebuttons.css中定义的样式规则buttons被应用到文本中，使其具有按钮的形状。在本配方中，使用配方 3-12 中的样式表文件。
将效果应用到图像的 jQuery 代码如下:
brighblurjq . js
$(document).ready(function() {
$('img').css('opacity',0.4);
$("span#bright").on("mouseenter", function() {
$('img').css('opacity',1.0);
}).on("mouseleave", function() {
$('img').css('opacity',0.4);
});
$("span#bright").on("mousedown", function(event) {
$('img').css('width',function(){ return $(this).width()+50;});
$('img').css('height',function(){ return $(this).height()+30;});
});
});
它是如何工作的
在这个解决方案中，您将使用opacity CSS 属性。opacity属性的值范围从 0(透明)到 1(不透明)或从 0%到 100%。
让我们一行一行地检查代码:
$('img').css('opacity',0.4);
这条线使图像在开始时和鼠标离开按钮时变得模糊。
$('img').css('opacity',1.0);
当鼠标在亮图像按钮上时，这条线使图像变亮(不透明)。
$('img').css('width',function(){ return $(this).width()+50;});
当鼠标按下亮图像按钮时，这条线将图像的宽度增加 50px。
$('img').css('height',function(){ return $(this).height()+30;});
当鼠标按下亮图像按钮时，这条线将图像的高度增加 30px。
当鼠标离开亮图像按钮时，图像开始出现模糊，如图 3-18 所示。
图 3-18
当鼠标离开按钮时，按钮和模糊的图像出现
当鼠标指针移动到亮图像按钮上时，图像变亮(即不透明)，如图 3-19 所示。
图 3-19
当鼠标移动到明亮图像按钮上时，图像变亮(不透明)
在亮图像按钮上按下鼠标键，图像的宽度和高度分别增加 50 和 30 个像素，如图 3-20 所示。
图 3-20
单击明亮图像按钮时，图像的高度和宽度会增加
3.17 创建基于映像的翻转
问题
您想要创建基于图像的翻转。图像翻转是指当鼠标在图像上移动时改变形状，并指定某个网站的超链接。如果单击一次，图像也会发生变化，表明它已经被访问过。
解决办法
制作包含超链接元素的 HTML 文件:
rollover.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="stylesrollover.css" type="text/css" media="screen" />
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="rolloverjq.js" type="text/javascript"></script>
</head>
<body>
<a href="abc.com"><span class="roll"></span></a>
</body>
</html>
在样式表中，编写名为link、hover和active的样式规则。样式表还需要一个名为img的类型选择器，它的属性将自动应用于img元素，而无需使用 jQuery 代码。样式表文件可能如下所示:
style roll . CSS
.link{
display:block;
width:170px;
height:55px;
background-image:url(btn1.png);
background-repeat:no-repeat;
background-position: top left;
}
.hover{
display:block;
width:220px;
height:100px;
background-image:url(btn2.png);
background-repeat:no-repeat;
background-position: top left;
}
.active{
display:block;
width:170px;
height:55px;
background-image:url(btn3.png);
background-repeat:no-repeat;
background-position: top left;
}
img{
border:0;
}
将样式表中定义的样式规则应用于类roll的空 span 元素的 jQuery 代码如下所示:
rolloverjq.js
$(document).ready(function() {
$('.roll').addClass('link');
$('.roll').hover(
function(){
$(this).addClass('hover');
},
function(){
$(this).removeClass('hover');
}
);
$('.roll').click(function(event){
$(this).addClass('active');
event.preventDefault();
});
});
它是如何工作的
前面的 HTML 文件包含一个类roll的 span 元素，它将通过样式规则和 jQuery 代码填充图像。在这个解决方案中，您将使用三个图像:btn1.png, btn2.png和btn3.png，如图 3-21 到 3-23 所示。
在样式表中，样式规则link包含加载网页时将应用于图像的属性。它将图像的宽度和高度分别指定为 170 像素和 55 像素。
图像btn1.png也被加载到背景中，并且background-repeat属性的值被设置为no-repeat,以避免图像的重复，并使其仅出现一次。
由于您希望当鼠标指针在按钮上移动时按钮变大，hover样式规则包含第二个图像:btn2.png(如图 3-21 所示)。该样式规则中的其余属性与link样式规则中的属性相同。
第三个样式规则指定链接被访问一次时的图像，因此使用名为btn3.png的图像。两个图像btn1.png和btn3.png之间唯一的变化是按钮文本的颜色。btn3.png中按钮上的文字颜色设置为栗色，表示其链接已被访问。样式表还包含一个类型选择器img，它有一个属性 border，其值被设置为零，以从将要显示的三个图像中移除边框。
在 jQuery 代码中，语句
$('.roll').addClass('link');
将对 span 元素应用link样式规则，使btn1.bmp中的图像出现在屏幕上。
这些声明
$('.roll').hover(
function(){
$(this).addClass('hover');
},
function(){
$(this).removeClass('hover');
}
);
将hover事件添加到 span 元素，并附带两个内联函数。第一个函数将样式规则hover应用于 span 元素(当鼠标指针移动到图像上时)，使btn2.png(放大的图像)代替btn1.png出现。btn1.png图像将被btn2.png中的图像隐藏，因为图像的位置通过background-position属性设置为左上角。第二个内联函数(当鼠标指针离开图像时应用)从图像中删除样式规则hover，使它看起来像以前一样(也就是说，就像btn1.png)。
该声明
$(this).addClass('active');
将在active样式规则中定义的属性应用于图像，将背景图像btn3.png设置为显示。此图像的按钮文本设置为栗色，使其看起来与初始图像不同，以表明它已经被访问过。
该声明
event.preventDefault();
阻止浏览器导航到超链接网站。也就是说，它使超链接忽略其默认操作(即导航到链接的网站)。因此，即使在单击图像后，您仍会停留在同一网页上。最初，图像可能如图 3-21 所示。
图 3-21
默认状态下出现的按钮
当鼠标指针在图像上移动时，图像变大，如图 3-22 所示。
图 3-22
当鼠标移动到按钮上时，按钮处于放大状态
点击图像链接，图像会发生变化，如图 3-23 所示。
图 3-23
按钮文本的颜色在活动状态下会发生变化(当它被单击时)
3.18 添加和删除文本以响应事件
问题
网页上有两个按钮，分别带有文本添加和删除。您希望在用户选择添加按钮时将某些文本添加到网页中，并在用户选择移除按钮时移除添加的文本。
解决办法
首先创建一个包含文本 Add 和 Remove 的 HTML 文件，这些文本包含在类buttons的 span 元素中，这样样式表中定义的类选择器按钮就可以应用于它们:
相加二十行文字. html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="stylebuttons.css" type="text/css" media="screen" />
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="addingremovingjq.js" type="text/javascript"></script>
</head>
<body>
<span class="add buttons">Add</span>
<span class="remove buttons">Remove</span><br><br>
<div></div>
</body>
</html>
使用配方 3-12 中的样式表stylebuttons.css。下面是将 click 事件添加到两个按钮的 jQuery 代码，以及添加和删除文本的内嵌函数:
相加血液检验. js
$(document).ready(function() {
$('.add').on("mousedown", function() {
$('div').prepend('<p>Styles make the formatting job much easier and more efficient. To give an attractive look to web sites, styles are heavily used. A person must have a good knowledge of HTML and CSS and a bit of JavaScript. </p>');
});
$('.remove').on("mousedown", function() {
$('p').remove();
});
});
它是如何工作的
您会看到 HTML 文件有一个空的div元素。当点击添加按钮时，向这个div元素添加一个段落元素(其中有一些文本)。当点击移除按钮时，新添加的段落元素也将从div元素中移除。为了添加段落，您使用了prepend()方法。要删除段落元素，可以使用remove()方法。
remove()方法从 DOM 中删除一组选定的元素，并返回一个 jQuery 对象。它还移除所有事件处理程序和内部缓存的数据。这个方法不需要传递任何参数。
在 jQuery 代码中，语句
$('div').prepend('<p>Styles...</p>');
当点击添加按钮时，在div元素的开头添加段落元素，而语句
$('p').remove();
访问 HTML 文件中的段落元素并删除它们。由于 HTML 文件中只有一个段落元素(通过添加按钮添加)，当点击移除按钮时，它将被移除。
在执行 jQuery 代码时，最初会显示两个按钮，上面有文本 Add 和 Remove ，如图 3-24 所示。
图 3-24
用于添加和删除文本的两个按钮
选择添加按钮，出现带有文字的段落元素，如图 3-25 所示。
图 3-25
选择“添加”按钮时会出现该文本
选择移除按钮后，文本消失。
3.19 显示单词气球
问题
网页上有两个按钮，一个名为粗体，另一个名为斜体。您希望在任一按钮被单击时创建一个单词气球效果。如果点击粗体按钮，您希望文本这是粗体菜单出现在单词气球中(稍后如图 3-28 所示)，如果点击斜体按钮，您希望文本这是斜体菜单出现在单词气球中(稍后如图 3-29 所示)。
解决办法
使用下面的 HTML 文件显示两个按钮，粗体和斜体:
wordballoons.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="styleswordballoons.css" type="text/css" media="screen" />
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="wordballoonsjq.js" type="text/javascript"></script>
</head>
<body>
<span class="bold buttons">Bold</span>
<span class="italic buttons">Italic</span>
</body>
</html>
创建一个包含类selector buttons的样式表，将属性应用于 span 元素，从而为它们提供按钮的形状。样式表还包含两个样式规则，hover和showtip，为按钮提供悬停效果，并在文字气球中显示文本。样式表文件如下所示:
styleswordballoons.css
.buttons{
width: 150px;
float: left;
text-align: center;
color:#000;
background-color:red;
margin: 5px;
font-weight: bold;
}
.hover{
color:red;
background:url(balloon.png);
background-repeat:no-repeat;
background-position:bottom;
}
.showtip{
display:block;
margin:25px;
}
将样式规则应用于按钮的 jQuery 代码如下所示:
**```js
$(document).ready(function() {
$('.buttons').hover(
function(event){
$(this).addClass('hover');
var \(txt=\)(this).text();
$(' This is '+\(txt+' menu </span>').appendTo(\)(this));
},
function(){
$(this).removeClass('hover');
$('.showtip').remove();
}
);
});
### 它是如何工作的
前述样式表中使用的图像文件`balloon.jpg`包含如图 3-26 所示的图像。
图 3-26
balloon.png 文件中的气球图像
在样式表中，`hover`样式规则包含以下属性:
* `color`将按钮文本的前景色设置为红色。
* `background`显示文字气球图像作为背景。
* `background-repeat`设置为`no-repeat`使单词气球图像只出现一次。
* `background-position`使单词气球图像出现在底部。
在样式表文件中，`showtip`样式规则包含 display 属性，其值被设置为`block`,以将文本(将显示在单词气球中)视为开头和结尾都有空白的块元素。它还包含设置为 25px 的`margin`属性，以设置文本和气球边界之间的间距。
在 jQuery 代码中，`hover`事件被分配给类`buttons`(也就是说，分配给两个按钮)。因此，当鼠标指针进入任一按钮时，首先将应用样式规则`hover`中定义的属性，在屏幕上创建一个空白单词气球。第二，有问题的按钮的文本将被存储在变量`$txt`中。此外，span 元素将附加在按钮之前。
span 元素被分配了类`showtip`(这样在类选择器 showtip 中定义的属性可以自动应用到它的文本中)。span 元素的文本内容被设置为 **This is $txt menu** ，其中`$txt`包含鼠标指针悬停的按钮的文本，从而使所需的文本出现在单词气球内。`hover`事件的第二个内联函数删除了样式规则`hover`和`showtip`中定义的属性。
最初，按钮如图 3-27 所示。
图 3-27
未选中时的粗体和斜体按钮
当鼠标指针移动到**粗体**按钮上时，将应用样式来改变按钮的前景色和背景色，并显示文字气球和文字**这是粗体菜单**，如图 3-28 所示。
图 3-28
当鼠标悬停在粗体按钮上时，文本“这是粗体菜单”出现在单词气球中
同样，当鼠标指针移动到**斜体**按钮上时，其前景色和背景色都会改变，出现文字为**这是斜体菜单**的文字气球，如图 3-29 所示。
图 3-29
当鼠标悬停在斜体按钮上时，文本“这是斜体”菜单出现在单词气球中
## 3.20 创建“返回顶部”链接
### 问题
你有一个包含大量文本的网页。在每个文本块之后，您希望显示一个链接，上面写着 **Return to Top** ，这应该会将用户导航到网页的开头。
### 解决办法
让我们制作一个 HTML 文件，其中包含一些段落元素形式的文本块，如下所示:
**return toto . html**
```js
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="returntotopjq.js" type="text/javascript"></script>
</head>
<body>
<p>Styles make the formatting job much easier and more efficient.
To give an attractive look to web sites, styles are heavily used.
jQuery is a powerful JavaScript library that allows us to add dynamic elements to our web sites. Not only it is easy to learn, but it's easy to implement too.</p>
<p> A person must have a good knowledge of HTML and CSS and a bit of JavaScript. jQuery is an open source project that provides a wide range of features with cross-platform
compatibility</p>
</body>
</html>
jQuery 代码创建了一个超链接，在每个段落元素后文本返回到顶部，并使该文本导航到网页的开头，如下所示:
返回的是 jq.js
$(document).ready(function() {
$('<a href="#topofpage">Return to top</a>').insertAfter('p');
$('<a id="topofpage" name="topofpage"></a>').prependTo('body');
});
它是如何工作的
该声明
$('<a href="#topofpage">Return to top</a>').insertAfter('p');
在 HTML 文件的每个段落元素后添加一个带有文本返回顶部的超链接，当用户选择该链接时，他们将被导航到 id 为topofpage的元素。
该声明
$('<a id="topofpage" name="topofpage"></a>').prependTo('body');
在 HTML 文件的主体前添加一个锚元素，其名称和 id 被指定为topofpage。换句话说，id 为topofpage的锚元素是在网页的开头创建的。前面的 jQuery 代码的输出如图 3-30 所示。
图 3-30
文本“返回页首”出现在每个段落之后
如果您点击任何一个返回顶部链接，您将被导航到网页的开头。
3.21 以动画效果显示文本
问题
你在网页上有三个按钮，分别是书籍、电影和音乐。您希望在单击这些按钮之一时显示适当的文本。您希望单击按钮时显示的文本具有动画效果。
解决办法
让我们制作一个 HTML 文件，它有三个按钮，书籍、电影和音乐，三个段落的类名分别为books、movies和music。这些段落包含单击每个按钮时显示的文本。最初，这些段落的文本将不可见。只有当它的按钮被点击时，它才会以动画效果显示。HTML 文件如下所示:
文字动画. html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="stylebuttons.css" type="text/css" media="screen" />
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="textanimationjq.js" type="text/javascript"></script>
</head>
<body>
<span class="buttons" id="booksbutton"> Books </span>
<span class="buttons" id="moviesbutton"> Movies </span>
<span class="buttons" id="musicbutton"> Music </span><br><br>
<p class="books">Books on a range of different subjects available at reasonable prices.
Ranging from web development, programming languages, and text books, all are available at heavy discount. Shipping is free. Also available in stock are popular magazines, e-books, and tutorial DVDs at affordable prices.</p>
<p class="movies">Find new movie reviews & the latest Hollywood movie news. Includes new movie trailers, latest Hollywood releases, movie showtimes, entertainment news, celebrity interviews etc. Also find Hollywood actresses, actors, videos, biographies, filmography,
photos, wallpaper, music, jokes, and live TV channels at your doorstep.</p>
<p class="music">Find music videos, internet radio, music downloads and all the latest music news and information. We have a large collection of music and songs classified by type, language, and region. All downloads are streamed through RealAudio. You can also watch free music videos, tune in to AOL Radio, and search for your favorite music artists.</p>
</body>
</html>
在本食谱中，您将使用与食谱 3-12 中相同的外部样式表文件 stylebuttons.css、。这里重复样式表的内容供您参考:
stylebuttons.css
.buttons{
width: 100px;
float: left;
text-align: center;
margin: 5px;
border: 2px solid;
font-weight: bold;
}
以下是最初隐藏段落文本并在单击按钮时以动画效果显示段落内容的 jQuery 代码:
文字动画 jq.js
$(document).ready(function() {
$('.books').hide();
$('.movies').hide();
$('.music').hide();
$('#booksbutton').on("mousedown", function() {
$('.books').show('slow');
$('.movies').hide();
$('.music').hide();
});
$('#moviesbutton').on("mousedown", function() {
$('.movies').show('slow');
$('.books').hide();
$('.music').hide();
});
$('#musicbutton').on("mousedown", function() {
$('.music').show('slow');
$('.books').hide();
$('.movies').hide();
});
});
它是如何工作的
在 HTML 文件中，您可以看到文本 Books 、 Movies 和 Music 包含在类buttons的 span 元素中，这样在样式表中定义的类选择器buttons中定义的属性可以自动应用于它。类选择器buttons包含了赋予这个文本按钮形状的属性。此外，按钮被分配了唯一的 idbooksbutton、moviesbutton和musicbutton，以便您可以将点击事件(即鼠标按下事件)分别附加到它们，并编写代码来隐藏旧文本(来自较早的按钮点击的信息)和显示与被点击的按钮相关的信息。
在 jQuery 代码中，首先隐藏类books、movies和music的段落文本(也就是说，当网页被加载时，最初只有按钮是可见的)。然后将 mousedown 事件链接到 id 为booksbutton的 HTML 元素(即链接到 Books 按钮)。当点击书籍按钮时，books类的段落内容慢慢变得可见，给它一个动画效果(它包含与书籍相关的信息)，而movies和music类的段落内容变得不可见，因此只显示屏幕上被点击按钮的信息。
最初只显示三个按钮书籍、电影和音乐，如图 3-31 所示。
图 3-31
三个按钮:书籍、电影和音乐
点击书籍按钮，会显示与之相关的信息；即显示books类的段落，如图 3-32 所示。
图 3-32
单击“书籍”按钮时，将显示与书籍相关的信息
同样，如果点击电影按钮，将隐藏与书籍或音乐相关的信息，并将使与电影相关的信息(即movies类的段落)以动画效果缓慢出现在屏幕上，如图 3-33 所示。
图 3-33
单击电影按钮时，会显示与电影相关的信息
添加鼠标悬停事件
除了将 click 事件应用于按钮，还可以将 mouseover 事件附加到按钮上。当鼠标指针进入按钮时，mouseover 事件将显示相应的信息(无需单击按钮)。用于附加 mouseover 事件的 jQuery 代码如下:
文字动画 hover rjq . js
$(document).ready(function() {
$('.books').hide();
$('.movies').hide();
$('.music').hide();
$('#booksbutton').mouseover(function(){
$('.books').show('slow');
$('.movies').hide();
$('.music').hide();
});
$('#moviesbutton').mouseover(function(){
$('.movies').show('slow');
$('.books').hide();
$('.music').hide();
});
$('#musicbutton').mouseover(function(){
$('.music').show('slow');
$('.books').hide();
$('.movies').hide();
});
});
3.22 用滑动效果替换文本
问题
您希望一段文本被另一段替换；第一块慢慢变得不可见，而另一块逐渐出现。
解决办法
在这个解决方案中，您将使用css()将 CSS 样式直接应用到元素上，而不是从样式表中提取它们。让我们假设你有一个 HTML 文件，它有两个段落元素，通过给它们分配 idmessage1和message2来区分它们。
replacingtext.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="replacingtextjq.js" type="text/javascript"></script>
</head>
<body>
<p id="message1">jQuery is an open source project</p>
<p id="message2">Manipulating DOM using jQuery</p>
</body>
</html>
下面是应用滑动效果的 jQuery 代码:
replacingtextjq.js
$(document).ready(function() {
$('p#message1').css({'border': '2px solid', 'text-align': 'center','fontweight':'bold'}).hide();
$('p#message2').css({'backgroundColor': '#f00','color':'#fff','text-align': 'center','font-weight':'bold'}).on("mousedown", function() {
$(this).slideUp('slow');
$('p#message1').slideDown('slow');
}
);
});
它是如何工作的
对于 id 为message1的段落，您指定一个 2px 粗细的实心边框，将其文本在浏览器窗口的中心对齐，并将其设置为粗体。id 为message2的段落的背景色设置为红色，文本的前景色设置为白色，并与浏览器窗口的中心对齐。
在 jQuery 代码中，一些文本将使用slideDown()方法逐渐消失，并被使用slideUp()方法慢慢出现的其他文本所取代，所以让我们来看看这两种方法的工作原理。
slideDown()滑动显示所选元素。
.slideDown(speed, callback)
speed决定动画的持续时间。它可以用字符串来指定，如fast、normal或slow，也可以用毫秒来指定。毫秒数越高，动画播放的时间就越长。
callback是动画完成时触发的函数。
相反，slideUp()通过滑动运动使所选元素不可见。
.slideUp(speed, callback)
speed和 cal l back 的含义与它们对slideUp()的含义相同。
在 jQuery 代码中，可以看到 id 为message1的段落被隐藏，只有 id 为message2的段落被设置为可见。因此，你最初得到的输出如图 3-34 所示。此外，mousedown 事件被附加到可见段落。在 mousedown 事件的内联函数中，您编写了代码，通过向上滑动使可见段落(id 为message2的段落)慢慢变得不可见，通过向下滑动使 id 为message1的段落(最初不可见)慢慢变得可见。
图 3-34
应用向上滑动()和向下滑动()
点击可见段落时，它将慢慢变得不可见，最初不可见的段落将开始慢慢变得可见，如图 3-35 所示。
图 3-35
一个段落在向下滑动的过程中，另一个段落在向上滑动的过程中
该段被另一段完全替换，如图 3-36 所示。
图 3-36
一段完全删除，另一段现在可见
3.23 摘要
在这一章中，你学习了当一个元素获得焦点和模糊时显示一条消息；找到哪个鼠标按钮被按下；当鼠标进入或离开元素时改变元素的样式；并使用 mouseup 和 mousedown 事件来显示和隐藏图像。您还学习了在单击按钮时隐藏和显示图像；如何放大和缩小图像；如何避免事件冒泡；如何知道哪个键被按下、按下或释放；如何应用褪色；以及如何在图像上应用动画效果。
在下一章，你将学习不同的表单验证方式。您将学会确认基本字段没有留空；如何允许特定值；如何验证电话号码、用户 id、日期和电子邮件地址；查找复选框和单选按钮是否被选中；匹配密码并确认密码字段；和验证完整的表单。******
四、表单验证
在本章中，您将探索不同的表单验证方式。在本章中，你将学习以下食谱:
确认基本字段未留空
确认只允许数字
验证电话号码
验证用户 id
验证日期
验证电子邮件地址
检查复选框是否被选中
查找单选按钮是否被选中
查找选择元素中的任何选项是否被选中
将样式应用于选项和表单按钮
同时选中和取消选中所有复选框
验证两个字段
匹配密码并确认密码
禁用某些字段
验证完整的表单
4.1 确认必填字段未留空
问题
表单中有一个输入文本字段，您希望它不要留空。用户必须在其中输入所需的数据，如果留空，则会收到一条错误消息。
解决办法
制作一个 HTML 文件，显示包含标签、文本字段、错误消息和提交按钮的表单，如下所示:
签名格式. html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="signupformjq.js" type="text/javascript"></script>
</head>
<body>
<form id="signup" method="post" action="">
<div><span class="label">User Id *</span><input type="text" class="infobox" name="userid" /><span class="error"> This field cannot be blank</span></div>
<input class="submit" type="submit" value="Submit">
</form>
</body>
</html>
因为 HTML 表单的目的是验证输入文本字段，而不是将输入的数据发送到其他页面进行处理，所以表单的 action 属性为空。表单被赋予一个 idsignup，方法被设置为post，尽管它对验证过程没有影响。
标签消息用户 Id 包含在类label的 span 元素中。输入文本字段被赋予类名infobox，错误消息(该字段不能为空)被存储为类error的 span 元素，提交按钮被赋予类submit。
将类分配给表单的所有四个项目的原因是应用类选择器.label, .infobox, .error和中定义的属性。submit(在style.css样式表中定义)自动将这四项添加到表单中。带有各自的类选择器的样式表如下:
style.css
.label {float: left; width: 120px; }
.infobox {width: 200px; }
.error { color: red; padding-left: 10px; }
.submit { margin-left: 125px; margin-top: 10px;}
用于确认输入文本字段没有留空并在留空时显示错误消息的 jQuery 代码如下:
签名格式 q.js
$(document).ready(function() {
$('.error').hide();
$('.submit').click(function(event){
var data=$('.infobox').val();
var len=data.length;
if(len<1)
{
$('.error').show();
event.preventDefault();
}
else
{
$('.error').hide();
}
});
});
它是如何工作的
类选择器.label的float属性被设置为left，这样下一项(输入文本字段)就可以出现在它的右边，它的width属性被设置为120px，为标签提供足够的显示空间。类选择器.infobox将其width属性设置为输入文本字段的大小200px,。类选择器.error将color属性设置为red以高亮显示它，左边的padding设置为10px以保持与输入文本字段的距离。类选择器.submit将其margin-left和margin-top属性分别设置为125px和10px，以设置从浏览器窗口左边界到输入文本字段的距离，因为您希望提交按钮出现在输入文本字段的下方。
在上面的 jQuery 代码中，您可以看到最初错误消息是隐藏的，并且一个 click 事件被附加到 Submit 按钮。在 click 事件的事件处理函数中，您提取用户在输入文本字段中输入的数据(分配了类名infobox)并将其存储在一个名为data的变量中。找出数据的长度，如果它小于 1(这意味着用户没有在文本字段中输入任何内容)，就在屏幕上显示错误消息。事件对象的方法preventDefault()用于防止提交按钮将用户输入的数据发送到服务器。
在执行 jQuery 代码时，您会看到一个带有标签、输入文本字段和提交按钮的表单。如果您选择了提交按钮，而没有在文本字段中输入任何内容，您会得到一条错误消息该字段不能为空在文本字段旁边显示为红色，如图 4-1 所示。
图 4-1
当输入文本字段留空时，会显示一条错误消息
如果您在文本字段中输入某个名称并选择提交按钮，您将不会得到任何错误消息，如图 4-2 所示。
图 4-2
如果在输入文本字段中输入数据，没有错误消息
4.2 验证数值字段
问题
您有一个用于输入人的年龄的文本字段，并且您想要确认在其中输入了一个数字值，并且没有输入字符或符号。
解决办法
显示包含标签、输入文本字段、错误消息和提交按钮的表单的 HTML 代码如下:
validateenum . html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="validatenumjq.js" type="text/javascript"></script>
</head>
<body>
<form id="signup" method="post" action="">
<div><span class="label">Enter Age </span><input type="text" class="infobox" name="age" /><span class="error"> Only numericals allowed</span></div>
<input class="submit" type="submit" value="Submit">
</form>
</body>
</html>
因为这个 HTML 表单的目的是验证输入的文本字段，而不是将输入的数据发送到其他页面进行处理，所以表单的 action 属性为空。表单被赋予一个 idsignup，方法被设置为post，尽管它对验证过程没有影响。
标签消息User Id包含在类label的 span 元素中。输入文本字段被赋予一个类名infobox，错误消息(该字段不能为空)被存储为类error的 span 元素，提交按钮被赋予类submit。
将类分配给表单的所有四个项目的原因是将类选择器.label, .infobox, .error和.submit(在样式表style.css中定义)中定义的属性自动应用到表单的四个项目。带有类选择器的样式表如下:
style.css
.label {float: left; width: 120px; }
.infobox {width: 200px; }
.error { color: red; padding-left: 10px; }
.submit { margin-left: 125px; margin-top: 10px;}
只允许数值
用于检查在文本字段中输入的年龄是否只包含数字值而不包含文本或符号的 jQuery 代码如下:
validateenumjq . js
$(document).ready(function() {
$('.error').hide();
$('.submit').click(function(event){
var data=$('.infobox').val();
var len=data.length;
var c;
for(var i=0;i<len;i++)
{
c=data.charAt(i).charCodeAt(0);
if(c <48 || c >57)
{
$('.error').show();
event.preventDefault();
break;
}
else
{
$('.error').hide();
}
}
});
});
您可以在这段代码中看到，ASCII 值 0 和 9 用于确保用户输入的值在 0 和 9 之间。ASCII 值 0 是 48，9 是 57。如果输入的 ASCII 值小于 48 或大于 57，将显示错误。
也允许负值
有时，在输入数值时，你也会遇到负值。在上面的 jQuery 代码中，不允许使用任何符号(即，不能使用–(连字符或减号))，因此不能在上面代码的文本字段中输入负值。让我们修改 jQuery 代码，使其也接受负值:
allow negative ejq . js
$(document).ready(function() {
$('.error').hide();
$('.submit').click(function(event){
var data=$('.infobox').val();
var len=data.length;
var c;
for(var i=0;i<len;i++)
{
c=data.charAt(i).charCodeAt(0);
if(c==45 && i==0)
{
continue;
}
if(c <48 || c >57)
{
$('.error').show();
event.preventDefault();
break;
}
else
{
$('.error').hide();
}
}
});
});
允许值的范围
您希望输入人员的年龄，并希望其在 5 到 99 的范围内(即，如果输入的年龄低于或高于给定范围，您希望在屏幕上显示一条错误消息)。
用于输入范围在 5 到 99 之间的数值的 jQuery 代码如下:
Allowrangejq.js
$(document).ready(function() {
$('.error').hide();
$('.submit').click(function(event){
var data=$('.infobox').val();
var len=data.length;
var c=0;
var age=0;
var flag=0;
for(var i=0;i<len;i++)
{
c=data.charAt(i).charCodeAt(0);
if(c <48 || c >57)
{
$('.error').show();
flag=1;
event.preventDefault();
break;
}
else
{
$('.error').hide();
}
}
if(flag==0)
{
age=parseInt(data);
if(age<5 || age>99)
{
$('.error').show();
$('.error').text('Invalid Age. Please enter the age within the range 5 to 99');
event.preventDefault();
}
}
});
});
它是如何工作的
您可以在上面的 HTML 文件中看到，标签被设置为显示文本输入年龄，错误消息被赋予文本仅允许数字。此外，四个项目(标签、输入文本字段、错误消息和提交按钮)被赋予不同的类名(label, infobox, error和submit)，以便将类选择器中定义的属性(在样式表style.css中定义)应用于它们。在这个配方中，您使用了来自配方 4-1 的相同的外部样式表style.css。
你可以在 jQuery 代码的只允许数值部分看到，错误消息最初被设置为invisible。click 事件附加到 Submit 按钮，以便在单击 Submit 按钮时执行其事件处理函数。在事件处理函数中，您会看到输入文本字段中的数据(该文本字段包含在类infobox的 span 元素中)被检索并存储在一个名为data的变量中。计算其长度，并对输入数据的长度执行一个for循环，以解析每个字符。
在for循环中，一次取一个字符(输入数据的)，在charCodeAt()的帮助下找到它的 ASCII 值。如果字符的 ASCII 值小于 48(表示 0)或大于 57(表示 9)，表示它不是一个数字值，则在屏幕上显示错误消息并退出循环。事件对象的preventDefault()方法用于防止用户输入的数据被发送到服务器或用户导航到目标表单。
程序执行时，如果在年龄后面输入一些字符，会得到错误信息只允许输入数字，如图 4-3 所示。
图 4-3
如果字符出现在年龄之后，将显示一条错误消息
即使数字之间出现字符，也会显示错误，如图 4-4 所示。
图 4-4
如果字符出现在数字之间，将显示一条错误消息
同样，如果你添加任何符号，比如减号或下划线，你会得到一个错误信息，如图 4-5 所示。
图 4-5
输入符号时会显示一条错误消息
您可以在 jQuery 代码的也允许负值部分看到，错误消息在开始时是隐藏的。附加到提交按钮的 click 事件的事件处理函数从输入文本字段中提取数据，并将其存储在变量data中。存储在data中的每个字符都在for循环的帮助下被解析。在循环中，您将data变量中的每个字符转换为其 ASCII 值，并检查第一个字符的 ASCII 值是否为 45(这是减号的 ASCII 值)，然后您继续检查其余的字符，而不显示任何错误消息。for循环中的第二个条件是您之前看到的(即，检查数据变量中的字符是否是数值，如果不是，则显示错误消息)。
在 jQuery 代码的允许值的范围部分中，您首先使错误消息不可见。然后将 click 事件附加到 Submit 按钮上。click 事件的事件处理函数完成了几项工作，比如提取输入文本字段中输入的数值(分配了类名infobox)并将其存储在变量data中。然后找出数据的长度，并执行循环来解析每个字符。如果data中的任何单个内容的 ASCII 值小于 48 (ASCII 值为 0)或大于 57 (ASCII 值为 9)，这意味着data变量包含除数值之外的某个值，因此您使错误消息可见。此外，将变量标志的值设置为 1，表示只允许数字，并从for循环中退出。如果 flag 的值设置为 1，这意味着检查数值范围没有意义，因为它是无效数据。
如果数据是数字，需要检查数值的范围(即是否在 5 到 99 之间)。所以，如果标志变量的值为 0(在执行了for循环之后，所以在检查了data变量的所有字符之后)，这意味着输入的数据是有效的，并且只由数字组成；然后应用条件语句，如果小于 5 或大于 99，显示错误消息，并将错误消息的文本设置为无效年龄。事件对象的preventDefault()方法用于防止输入的数据无效时提交。如果该值不在 5 到 99 的范围内，您会得到如图 4-6 所示的错误信息。
图 4-6
如果该值不在 5 到 99 的范围内，将显示错误消息
4.3 验证电话号码
问题
您希望使用电话号码字段，并且希望用户只能输入数字和+或-(加号或减号)符号，而不能输入其他任何内容。
解决办法
创建一个 HTML 文件，显示一个由标签、输入文本字段、错误消息和提交按钮组成的表单:
Validatephone.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="validatephonejq.js" type="text/javascript"></script>
</head>
<body>
<form id="signup" method="post" action="">
<div><span class="label">Enter Phone number </span><input type="text" class="infobox" name="phone" /><span class="error"> Phone number can contain only numbers, + and -</span></div>
<input class="submit" type="submit" value="Submit">
</form>
</body>
</html>
这个 HTML 文件中的所有四个项目都被分配了各自的类名label, infobox, error和submit，这样在外部样式表style.css中指定的类选择器中定义的样式属性可以自动应用到这些项目。样式表文件中定义的类选择器如下:
style.css
.label {float: left; width: 150px; }
.infobox {width: 200px; }
.error { color: red; padding-left: 10px; }
.submit { margin-left: 150px; margin-top: 10px;}
jQuery 代码确认输入文本字段只接受数字和–或+符号，不接受任何其他内容，如下所示:
validateephonejq . js
$(document).ready(function() {
$('.error').hide();
$('.submit').click(function(event){
var data=$('.infobox').val();
if(validate_phoneno(data))
{
$('.error').hide();
}
else
{
$('.error').show();
event.preventDefault();
}
});
});
function validate_phoneno(ph)
{
var pattern=new RegExp(/^[0-9-+]+$/);
return pattern.test(ph);
}
它是如何工作的
类选择器.label将float属性设置为left，以便下一项(输入文本字段)可以出现在它的右侧，并且其width属性设置为150px，以便为标签消息输入电话号码提供足够的显示空间。类选择器.infobox将其width属性设置为200px，这最终成为输入文本字段的宽度。类选择器.error将其color属性设置为red以高亮显示它，左边的padding设置为10px以保持与输入文本字段的距离。类选择器.submit将其margin-left和margin-top属性分别设置为150px和10px，以设置从浏览器窗口左边界到输入文本字段的距离，因为您希望提交按钮出现在输入文本字段的正下方。
您可以在 jQuery 代码中看到，错误消息在开始时是不可见的。click 事件附加到提交按钮。在 click 事件的事件处理函数中，用户在文本字段中输入的电话号码(包含在类名infobox的 span 元素中)被检索并存储在data变量中。data变量被传递给validate_phoneno()方法进行验证。
这里，data变量的内容被赋给了validate_phoneno()方法的ph参数。在validate_phoneno()中，创建了一个RegExp类的实例。传递给RegExp构造函数的正则表达式是/^[0-9-+]+$/，这意味着输入文本字段中的数据可以用 0 到 9 之间的任何数值或–或+符号开始或结束(^表示开始，而$表示结束)。右括号(])后的+号表示该模式可以重复一次或多次(即，您可以在输入文本字段中输入的电话号码中输入数字或–或+任意次)。
validate_phoneno()用正则表达式测试ph参数的内容，如果ph变量的内容与提供的正则表达式匹配，则返回true；否则它返回false。根据validate_phoneno()返回的布尔值，显示或不显示错误信息。如果在输入电话号码时使用了+或–符号以外的符号，则会出现错误消息电话号码只能包含数字、+和–，如图 4-7 所示。
图 4-7
输入数字、+或–以外的数据时显示的错误消息
如果电话号码由数字和一个+或-符号组成，它将被认为是一个有效的电话号码并被接受而不显示任何错误信息，如图 4-8 所示。
图 4-8
如果电话号码由数字和+或-符号组成，则被视为有效
4.4 验证用户 Id
问题
您希望验证一个可能由字符、数字和下划线组成而没有其他符号的用户 id。
解决办法
创建一个 HTML 文件，显示一个包含标签、输入文本字段、错误消息和提交按钮的表单。标签的文本设置为输入用户 id ，消息设置为用户 id 只能包含字母、数字或下划线。这四个项目也被分别指定为类名label, infobox, error和submit。对于这些类名，各自的类选择器都写在外部样式表中。HTML 文件如下所示:
验证器. html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="validateuserjq.js" type="text/javascript"></script>
</head>
<body>
<form id="signup" method="post" action="">
<div><span class="label">Enter User id </span><input type="text" class="infobox" name="userid" /><span class="error"> User id can contain only letters, numbers or underscore</span></div>
<input class="submit" type="submit" value="Submit">
</form>
</body>
</html>
类选择器由自动应用于 HTML 元素的样式属性组成，并在样式表 style.css 中定义。您使用与配方 4-3 中相同的样式表文件(style.css)。
接受仅由数字、字符和下划线组成的用户 id 的 jQuery 代码如下:
validator rjq . js
$(document).ready(function() {
$('.error').hide();
$('.submit').click(function(event){
var data=$('.infobox').val();
if(validate_userid(data))
{
$('.error').hide();
}
else
{
$('.error').show();
event.preventDefault();
}
});
});
function validate_userid(uid)
{
var pattern= new RegExp(/^[a-zA-Z0-9_]+$/);
return pattern.test(uid);
}
它是如何工作的
您可以在这段 jQuery 代码中看到，错误消息在开始时是不可见的。click 事件附加到提交按钮。在 click 事件的事件处理函数中，用户在文本字段中输入的用户 id(包含在类名infobox的 span 元素中)被检索并存储在data变量中。data变量被传递给validate_userid()函数进行验证。data变量的内容被分配给validate_userid()方法的uid参数。
在validate_userid()中，创建了一个RegExp类的实例。传递给RegExp构造函数的正则表达式是/^[a-zA-Z0-9_]+$/，这意味着在输入文本字段中输入的用户 id 可以以从 a 到 z(大写或小写)的任何字符、从 0 到 9 的数值或 _ 符号开始或结束(^表示开始，而$表示结束)。右括号(])后的+号表示该模式可以重复一次或多次(即，您可以在输入文本字段中输入任意次数的字符、数字或 a _ 号)。
validate_userid()用正则表达式测试uid参数的内容，如果uid变量的内容与提供的正则表达式匹配，则返回true，否则返回false。基于validate_userid()功能返回的布尔值，错误信息变得可见或不可见。如果在输入用户 id 时使用了除符号以外的符号，则会出现错误消息用户 id 只能包含字母、数字或下划线，如图 4-9 所示。
图 4-9
如果在用户 id 字段中使用了除 _ 以外的任何符号，将显示错误消息
如果用户 id 由字符、数字或 _ 组成，则被认为是有效的用户 id 并被接受，不显示任何错误信息，如图 4-10 所示。
图 4-10
如果用户 id 由字符、数字和 _ 符号组成，则被视为有效
4.5 验证日期
问题
您希望验证格式为 mm/dd/yyyy 或 mm-dd-yyyy 的日期。如果输入的日期与任一格式都不匹配，您希望显示一条错误消息。
解决办法
创建一个 HTML 文件，显示一个包含标签、输入文本字段、错误消息和提交按钮的表单。标签文本设置为输入出生日期，错误信息设置为无效日期。这四个项目分别被赋予类名label, infobox, error和submit。对于类名，相应的类选择器写在外部样式表中。HTML 文件如下所示:
validatedata . html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="validatedatejq.js" type="text/javascript"></script>
</head>
<body>
<form id="signup" method="post" action="">
<div><span class="label">Enter Date of Birth </span><input type="text" class="infobox" name="dob" /><span class="error"> Invalid Date. Correct format is mm/dd/yyyy or mm-dd -yyyy </span></div>
<input class="submit" type="submit" value="Submit">
</form>
</body>
</html>
类选择器由自动应用于 HTML 元素的样式属性组成，并在样式表 style.css 中定义。使用制作方法 4-3 中的相同样式表文件(style.css)。
接受 mm/dd/yyyy 或 mm-dd -yyyy 格式的日期的 jQuery 代码如下:
validatedata . js
$(document).ready(function() {
$('.error').hide();
$('.submit').click(function(event){
var data=$('.infobox').val();
if(validate_date(data))
{
$('.error').hide();
}
else
{
$('.error').show();
event.preventDefault();
}
});
});
function validate_date(date)
{
var pattern= new RegExp(/\b\d{1,2}[\/-]\d{1,2}[\/-]\d{4}\b/);
return pattern.test(date);
}
它是如何工作的
错误消息在 jQuery 代码的开始是不可见的。然后，点击事件被附加到提交按钮。在 click 事件的事件处理函数中，用户在输入文本字段中输入的日期(包含在类名infobox的 span 元素中)被检索并存储在data变量中。data变量被传递给validate_date()函数进行验证。data变量的内容被分配给validate_date()函数的date参数。在validate_date()函数中，创建了一个RegExp类的实例。传递给RegExp构造函数的正则表达式是/\b\d{1，2}[/-]\d{1，2}[/-]\d{4}\b/。
正则表达式解释如下:
正则表达式开头和结尾的\b 表示单词边界(即模式必须完全匹配相同的模式)。
\d{1，2}表示可以有 1 到 2 个数字。
[/-]表示可以有符号/或-。
\d{1，2}表示可以有 1 到 2 个数字。
[/-]表示可以有符号/或-。
\d{4}表示必须正好有 4 位数字。
因此，在输入文本字段中输入的日期必须以 1 或 2 位数(月)开头，后跟/或–符号。同样，可以有 1 或 2 位数字(日)，后跟/或–符号，最后必须正好有 4 位数字(年)。validate_date()函数使用正则表达式测试date参数的内容，如果日期变量的内容与提供的正则表达式匹配，则返回true，否则返回false。基于由validate_date()函数返回的布尔值，错误信息变得可见或不可见。
假设你输入的日期不正确。您输入的年份不是 4 位数，而是 2 位数。您将得到如图 4-11 所示的Invalid Date错误信息。
图 4-11
如果日期输入不正确，将显示错误消息“无效日期”
如果正确输入了日期，并且在日、月和年之间使用了/或–分隔符，则该日期将被接受，不会出现任何错误消息，如图 4-12 所示。
图 4-12
如果该日期遵循指定的模式，它将被接受，不会出现任何错误消息
4.6 验证电子邮件地址
问题
您想要验证电子邮件地址(即，您想要确认电子邮件地址由字符和数字以及@和组成。符号)。
解决办法
创建一个 HTML 文件，显示一个包含标签、输入文本字段、错误消息和提交按钮的表单。标签的文本被设置为Enter Email Id，错误信息被设置为Invalid Email Address。这四个项目分别被赋予类名label, infobox, error和submit。对于这些类名，各自的类选择器都写在外部样式表中。HTML 文件如下所示:
validatemail . html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="validateemailjq.js" type="text/javascript"></script>
</head>
<body>
<form id="signup" method="post" action="">
<div><span class="label">Enter Email Id </span><input type="text" class="infobox" name="email" /><span class="error"> Invalid Email Address. Correct email address is the one that essentially has @ sign and a . (period) after @ sign. It should not have any other special symbol except hyphen or underscore and must be termnated by any letter only </span></div>
<input class="submit" type="submit" value="Submit">
</form>
</body>
</html>
类别选择器由自动应用于 HTML 元素的样式属性组成，并在样式表style.css,中定义，与配方 4-3 中使用的样式表文件相同。
接受电子邮件地址并对其进行验证的 jQuery 代码如下:
validatemailjq . js
$(document).ready(function() {
$('.error').hide();
$('.submit').click(function(event){
var data=$('.infobox').val();
if(valid_email(data))
{
$('.error').hide();
}
else
{
$('.error').show();
event.preventDefault();
}
});
});
function valid_email(email)
{
var pattern= new RegExp(/^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]+$/);
return pattern.test(email);
}
它是如何工作的
错误消息在 jQuery 代码的开始是不可见的。然后，点击事件被附加到提交按钮。在 click 事件的事件处理函数中，用户在输入文本字段中输入的电子邮件地址(包含在类名infobox的 span 元素中)被检索并存储在data变量中。data变量被传递给validate_email()函数进行验证。data变量的内容被分配给validate_email()函数的email参数。在validate_email()函数中，创建了一个RegExp类的实例。传递给RegExp构造函数的正则表达式是/^[\w-]+(.[\w-]+)*@([\w-]+\。)+[a-zA-Z]+$/。
正则表达式解释如下:
-
- /^[\w-]+表示电子邮件地址的开头可以有字母、数字、下划线或连字符。^的意思是开始。\w 表示字母、数字和下划线。右括号(])后的+号表示一次或多次。
(.[\w-]+)表示由一个.(句点)后跟一个字母、数字、下划线和连字符组成的模式可以出现 0 次或更多次。图案末尾的符号表示 0 次或更多次。
@表示符号@必须出现在上述模式之后。
([\w-]+\。)+表示字母、数字、下划线和连字符可以出现一次或多次，后跟一个.(句点)。还有这个组合的东西(字符，数字，下划线，连字符，还有。)可以出现一次或多次。
[a-zA-Z]+$/表示在电子邮件地址的末尾，换句话说，电子邮件地址必须以可能出现一次或多次的任何大写或小写字母结尾。$表示结束。
因此，在输入文本字段中输入的电子邮件地址必须以字母、数字、下划线或连字符开头，后跟一个.(句点)，再后跟字母、数字、下划线或连字符一次或多次。之后，必须有符号@ (at ),后面是字母、数字、下划线或连字符，后面是一个.(句点)。电子邮件地址必须以任何大写或小写字母结尾。
validate_email()函数使用正则表达式测试email参数的内容，如果 email 参数的内容与提供的正则表达式匹配，则返回true，否则返回false。基于由validate_email()函数返回的布尔值，错误信息变得可见或不可见。
假设在电子邮件地址中你没有输入一个.(句号)。您将得到如图 4-13 所示的错误消息无效的电子邮件地址。
图 4-13
电子邮件地址无效时显示的错误消息
如果电子邮件地址输入正确，因为它包含@和。(句号)，它将被接受，没有任何错误信息，如图 4-14 所示。
图 4-14
如果电子邮件地址包含。和@符号
4.7 检查复选框是否被选中
问题
您有几个复选框，每个复选框指定一个快餐柜台出售的商品。您希望在选择提交按钮时确认至少选中了一个复选框。如果没有选中任何复选框，您希望显示一条错误消息。
解决办法
创建一个 HTML 文件，该文件显示四个复选框、一条错误消息和一个用于显示结果的空段落元素(所选食品的总账单)。HTML 文件如下所示:
Checkcheckbox.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="style1.css" type="text/css" media="screen" />
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="checkcheckboxjq.js" type="text/javascript"></script>
</head>
<body>
<form>
<input type="checkbox" id="pizza" name="pizza" value=5 class="infobox">Pizza $5 <br>
<input type="checkbox" id="hotdog" name="hotdog" value=2 class="infobox">HotDog $2<br>
<input type="checkbox" id="coke" name="coke" value=1 class="infobox">Coke $1<br>
<input type="checkbox" id="fries" name="fries" value=3 class="infobox">French Fries $3<br>
<p class="error">Select at least one checkbox </p>
<p class="result"></p>
<input class="submit" type="submit" value="Submit">
</form>
</body>
</html>
将样式属性自动应用到 HTML 元素的类选择器在外部样式表 style1.css 中定义，如下所示:
Style1.css
.infobox { margin-top: 15px; }
.error { color: red; }
查看复选框是否被选中的 jQuery 代码如下:
check box jq . js
$(document).ready(function() {
$('.error').hide();
$('.submit').click(function(event){
var count=0;
var amt=0;
$('form').find(':checkbox').each(function(){
if($(this).is(':checked'))
{
count++;
amt=amt+parseInt($(this).val());
}
});
if(count==0)
{
$('p.result').hide();
$('.error').show();
}
else
{
$('.error').hide();
$('p.result').show();
$('p.result').text('Your bill is $ '+amt);
}
event.preventDefault();
});
});
用长度法检查
在下面的 jQuery 代码中，在使用循环分别检查每个复选框之前，确认是否选中了任何复选框:
检查长度 jq.js
$(document).ready(function() {
$('.error').hide();
$('.submit').click(function(event){
var amt=0;
var count=$('input:checked').length;
if(count==0)
{
$('p.result').hide();
$('.error').show();
}
else
{
$('form').find(':checkbox').each(function(){
if($(this).is(':checked'))
{
amt=amt+parseInt($(this).val());
}
});
$('.error').hide();
$('p.result').show();
$('p.result').text('Your bill is $ '+amt);
}
event.preventDefault();
});
});
它是如何工作的
在 HTML 文件中，您可以看到四个复选框被赋予了类名infobox,它们代表快餐店出售的四种商品:披萨、热狗、可乐和薯条，以及它们的价格。显示错误消息的段落元素被赋予类名error，其文本显示错误消息Select at least one checkbox。还有一个段落元素来显示通过复选框选择的食品清单，它被分配了类名result，当前为空。将通过 jQuery 代码为其分配显示账单的文本。
样式表定义了两个类选择器:.infobox应用于复选框，而.error应用于显示错误消息的段落元素。.infobox类选择器包含一个名为margin-top的属性，该属性被设置为15px，以便在显示的复选框之间创建足够的垂直间距。类选择器.error包含设置为red的样式属性color，因此错误消息以红色显示(从而突出显示)。
在第一个 jQuery 代码中，错误消息被设置为不可见。然后，将 click 事件附加到 Submit 按钮。在选择提交按钮时，它的事件处理函数被执行并完成几项任务。在事件处理函数中，首先初始化一个设置为 0 的计数器count(它将用于计算选中复选框的数量)和另一个设置为 0 的变量amt,该变量将用于计算所选食物的账单总数。使用.each()功能，你一个接一个地检查表单的所有复选框，如果发现任何复选框被选中，你将计数器变量count的值增加 1，并且该食品的数量也被添加到amt变量中。也就是说，在count变量中设置选中复选框的数量，在amt变量中设置选中复选框的总数。检查完所有复选框后，如果您发现the count变量的值为 0，这意味着没有选择任何复选框，您可以使显示错误消息的段落元素可见。要显示错误消息**，请在屏幕上至少选择一个复选框**。如果count变量的值不为 0(意味着至少有一个复选框被选中)，则使类result的段落元素可见(并隐藏类error的段落)，并为其分配文本 Your bill is $+amt ，其中amt是存储所选食品项目总金额的变量。
如果您没有选择任何复选框并按下提交按钮，屏幕上会出现一条错误信息选择至少一个复选框，如图 4-15 所示。
图 4-15
如果未选中复选框，将显示错误消息
如果您选择了一个复选框，错误信息将变得不可见，所选食品的账单将出现，如图 4-16 所示。
图 4-16
显示一个所选食品的账单
如果您选择了多个复选框，所选食品的总金额将以账单的形式显示，如图 4-17 所示。
图 4-17
显示三种食品的总账单金额
在 jQuery 代码中的使用长度方法部分，您使用了语句
var count=$('input:checked').length;
查找选中复选框的总数。如果计数为零，则没有必要逐个检查所有复选框来计算所选项目的总数。当 count 变量的值不为零时，您可以使用.each()函数逐个检查每个复选框，以计算所选食品的总量。这个 jQuery 代码的输出将如图 4-15 到 4-17 所示。
4.8 检查是否选择了单选按钮
问题
您有几个单选按钮，每个按钮都指定访问者可以用来付款的信用卡。您希望确认用户在选择提交按钮时选择了其中一个单选按钮。如果没有选择单选按钮，您希望显示一条错误消息。
解决办法
下面的 HTML 文件显示了三个单选按钮。每个单选按钮都被分配了类名infobox，用于验证检查和应用样式。错误消息通过一个类名称为error的段落元素显示，提交按钮的类名称为submit。
Checkradio.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="style1.css" type="text/css" media="screen" />
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="checkradiojq.js" type="text/javascript"></script>
</head>
<body>
<form>
<input type="radio" name="paymode" class="infobox" value="Master Card">Master Card <br>
<input type="radio" name="paymode" class="infobox" value="ANZ Grindlay Card">ANZ Grindlay Card<br>
<input type="radio" name="paymode" class="infobox" value="Visa Card">Visa Card<br>
<p class="error">Select at least one Option </p>
<p class="result"></p>
<input class="submit" type="submit" value="Submit">
</form>
</body>
</html>
外部样式表包含以下类选择器:
Style1.css
.infobox { margin-top: 15px; }
.error { color: red; }
确认至少选择了一个单选按钮的 jQuery 代码如下:
Checkradiojq.js
1\. $(document).ready(function() {
2\. $('.error').hide();
3\. $('.submit').click(function(event){
4\. var amt=0;
5\. var count=$('input:checked').length;
6\. if(count==0)
7\. {
8\. $('p.result').hide();
9\. $('.error').show();
10\. }
11\. else
12\. {
13\. $('.error').hide();
14\. $('p.result').show();
15\. $('p.result').text('You have selected '+$('input:checked').attr("value"));
16\. }
17\. event.preventDefault();
18\. });
19\. });
它是如何工作的
在样式表文件中，类选择器.infobox包含设置为15px的margin-top属性，以保持单选按钮之间的间距，类选择器.error将红色分配给错误消息。
jQuery 代码语句的解释如下:
2.类error的段落元素中的错误消息被隐藏。
3.click 事件附加到提交按钮。
5.找出被选中的单选按钮的数量(如果有的话),并将其存储在count变量中。
8.如果没有选择单选按钮，隐藏类result的段落元素(意在显示所选信用卡的名称)。
9.如果没有选择单选按钮，则显示类别error的段落元素中的错误消息。
15.分配您选择的文本n，其中 n 是所选单选按钮的值。
在执行时，如果您选择了提交按钮而没有选择任何单选按钮，您会得到错误消息选择至少一个选项，如图 4-18 所示。
图 4-18
未选择单选按钮时显示的错误消息
如果您选择一个单选按钮并选择提交按钮，如图 4-19 所示，将显示确认所选信用卡名称的消息。
图 4-19
将显示所选单选按钮的文本
4.9 检查选择元素中的选项是否被选中
问题
您有一个下拉列表(select 元素)显示一些食品。您希望在按提交按钮之前确认用户从下拉列表中选择了一个选项，否则会显示一条错误消息。
解决办法
下面的 HTML 文件显示了一个包含一些食物的下拉列表框。帮助下拉列表显示的选择元素被赋予类名infobox，以便直接应用在类选择器.infobox(写在样式表文件style.css中)中定义的样式属性。标签消息选择食物项目通过带有类名label的 span 元素显示。错误消息通过具有类名error的段落元素显示，提交按钮被赋予类名submit。
Checkselect.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="checkselectjq.js" type="text/javascript"></script>
</head>
<body>
<form>
<span class="label">Select the Food Item </span>
<select id="food" class="infobox">
<option value="0">Select a Food</option>
<option value="Pizza $5">Pizza $5</option>
<option value="HotDog $2">HotDog $2</option>
<option value="Coke $1">Coke $1</option>
<option value="French Fries $3">French Fries $3</option>
</select>
<p class="error">You have not selected any Option</p>
<p class="result"></p>
<input class="submit" type="submit" value="Submit">
</form>
</body>
</html>
外部样式表包含以下类选择器，它们将自动应用于指定类的相应 HTML 元素:
style.css
.label {float: left; width: 150px; }
.infobox {width: 150px; }
.error { color: red; padding-left: 10px; }
.submit { margin-left: 150px; margin-top: 10px;}
确认下拉列表中的选项被选中的 jQuery 代码如下:
支票选择 q.js
$(document).ready(function() {
$('.error').hide();
$('.submit').click(function(event){
var count=$('select option:selected').val();
if(count==0)
{
$('p.result').hide();
$('.error').show();
}
else
{
$('.error').hide();
$('p.result').show();
$('p.result').text('You have selected '+$('select option:selected').text());
}
event.preventDefault();
});
});
它是如何工作的
在样式表文件中，类选择器.label包含设置为值left的float属性，以使标签出现在它的左侧(为下拉列表出现在它的右侧创造空间),并且width属性设置为150px,以定义标签可以消耗的宽度。类选择器.infobox包含设置为150px的width属性，以指定下拉列表的宽度，类选择器.error将红色分配给错误消息，并使错误消息出现在距离浏览器窗口左侧 10px 的位置。类选择器submit包含设置为值150px的margin-left属性，以使提交按钮出现在离浏览器窗口左侧 150px 的距离处(因此它出现在下拉列表的下方),并且margin-top属性被设置为10px,以与上面可能出现的元素(错误或结果消息)保持一定的间距。
在 jQuery 代码中，最初隐藏了用来显示错误消息的类error的段落元素。然后将一个点击事件附加到提交按钮上。该声明
var count=$('select option:selected').val();
检索从 select 元素中选择的选项的值，并将其存储在变量count中。如果 count 的值为 0，意味着用户没有选择任何选项，您可以通过使类.error的段落元素可见来使错误消息出现在屏幕上，如果 count 变量的值不为零，您可以使用下面的语句使类result的段落元素显示结果:
您选择了'+$('选择选项:已选择')。text())；
它显示从 select 元素中选择的选项的文本。
在执行时，如果您没有从选择元素中选择任何选项就按提交按钮，您会得到错误消息您没有选择任何选项，如图 4-20 所示。
图 4-20
如果没有从选择元素中选择选项，将显示错误消息
如果您从列表中选择任何选项并按下提交按钮，您将得到显示所选选项的消息，如图 4-21 所示。
图 4-21
将显示选择元素的选定选项的文本
多重选择
让我们修改上面的解决方案，允许访问者从 select 元素中选择多个选项。要从选择元素中选择一个以上的选项，请使用MULTIPLE属性和选择元素，如下所示:
Multiselect.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="multiselectjq.js" type="text/javascript"></script>
</head>
<body>
<form>
<span class="label">Select the Food Item </span>
<select id="food" class="infobox" MULTIPLE>
<option value="0" selected="0">Select a Food</option>
<option value="Pizza $5">Pizza $5</option>
<option value="HotDog $2">HotDog $2</option>
<option value="Coke $1">Coke $1</option>
<option value="French Fries $3">French Fries $3</option>
</select>
<p class="error">You have not selected any Option </p>
<p class="result"></p>
<input class="submit" type="submit" value="Submit">
</form>
</body>
</html>
当附加到 select 元素时,MULTIPLE属性将允许您选择多个选项(利用 Ctrl 或 Shift 键)。使用相同的 jQuery 代码和样式表(style.css ) ，您将得到显示用户从 select 元素中选择的所有选项的消息，如图 4-22 所示。
图 4-22
显示 select 元素的所有选定选项，中间没有空格
您可以看到所选的选项显示出来，中间没有任何空格。要用逗号(，)分隔选项，请修改 jQuery 代码，如下所示:
multilectjq . js
$(document).ready(function() {
$('.error').hide();
$('.submit').click(function(event){
var selectedopts="";
var count=$('select option:selected').val();
if(count==0)
{
$('p.result').hide();
$('.error').show();
}
else
{
$('select option:selected').each(function(){
selectedopts+=$(this).text()+",";
});
$('.error').hide();
$('p.result').show();
$('p.result').text('You have selected '+ selectedopts);
}
event.preventDefault();
});
});
您已经在上面的 jQuery 代码中定义了一个名为selectedopts的字符串变量，从 select 元素中选择的所有选项都是通过使用.each()方法获得的，您用逗号(，)将它们连接到selectedopts变量。当所有选中选项的文本被添加到selectedopts变量中时，通过result类的段落元素显示其内容。见图 4-23 。
图 4-23
select 元素的所有选定选项都以逗号分隔显示
如果您没有从 select 元素中选择任何选项，但是按了 Submit 按钮，您会得到如图 4-24 所示的错误消息。
图 4-24
如果未选择任何选项，将显示错误消息
4.10 对选项和表单按钮应用样式
问题
您有一个显示食物项目的下拉列表(select 元素),您希望将样式应用到 select 元素的选项中。
解决办法
对于这个配方，使用与配方 4-9 相同的 HTML 文件。将 HTML 文件重命名为multiselectstyle.html。您还需要添加样式表的引用。在样式表中，您需要添加一个名为option的类型选择器，以将其样式属性自动应用于 select 元素的所有选项，还需要添加一个名为.meal的 CSS 类，以将样式应用于 select 元素的奇数编号选项。样式表如下所示:
样式选项.css
.label {float: left; width: 150px; }
.infobox {width: 150px; }
.error { color: red; padding-left: 10px; }
.submit { margin-left: 150px; margin-top: 10px;}
option{
background-color:red;
color:white;
}
.meal{
background-color:cyan;
color:blue;
}
为了使选项看起来丰富多彩，您将对 select 元素的偶数编号和奇数编号的选项应用不同的样式。类型选择器option会将样式属性应用于 select 元素的所有偶数选项，将它们的背景色设置为红色，前景色设置为白色，而样式规则.meal将通过 jQuery 代码仅应用于 select 元素的奇数选项，将它们的背景色设置为青色，前景色设置为蓝色。
要将样式规则meal应用于 select 元素的奇数编号选项，请将以下语句添加到 jQuery 代码中:
$('option:odd').addClass('meal');
整个 jQuery 代码如下(关于验证逻辑的详细信息，请参见菜谱 4-9)。在 HTML 文件中，修改对 jQuery 文件的引用。
期权 jq.js
$(document).ready(function() {
$('.error').hide();
$('option:odd').addClass('meal');
$('.submit').click(function(event){
var selectedopts="";
var count=$('select option:selected').val();
if(count==0)
{
$('p.result').hide();
$('.error').show();
}
else
{
$('select option:selected').each(function(){
selectedopts+=$(this).text()+",";
});
$('.error').hide();
$('p.result').show();
$('p.result').text('You have selected '+ selectedopts);
}
event.preventDefault();
});
});
它是如何工作的
在执行上述 jQuery 代码时，您会发现 select 元素的偶数编号和奇数编号选项以不同的前景色和背景色出现，如图 4-25 所示。
图 4-25
应用于选择元素选项的样式
设计表单按钮的样式
让我们对图 4-24 所示的提交按钮应用样式，使其看起来更有吸引力。为此，您需要修改样式表style.css中定义的类选择器.submit的样式属性，如下所示:
样式选项 2.css
.label {float: left; width: 150px; }
.infobox {width: 150px; }
.error { color: red; padding-left: 10px; }
.submit { margin-left: 150px; margin-top: 10px;font-size:1.5em;background-color:green;color:blue;}
option{
background-color:red;
color:white;
}
.meal{
background-color:cyan;
color:blue;
}
您可以看到类选择器.submit包含几个属性:
将
margin-left属性设置为150px，使其出现在距离浏览器窗口左边界 150px 的位置(使其出现在 select 元素的下方)。将
margin-top属性设置为10px,以便在选择元素的顶部创建一些间距。将
font-size属性设置为1.5em，将字体大小增加到默认字体大小的 150%。将
background-color和color属性分别设置为值green和blue，以在绿色背景上设置蓝色。
提交按钮出现，如图 4-26 所示。
图 4-26
应用于提交按钮的样式
创建图像提交按钮
现在让我们用一个图像替换提交按钮，它将作为一个提交按钮。首先你需要有一个图像文件:submit.jpg，如图 4-27 所示。您还需要在样式表文件中修改类选择器.submit，如下所示:
图 4-27
应用于提交按钮的图像
样式选项 3.css
.label {float: left; width: 150px; }
.infobox {width: 150px; }
.error { color: red; padding-left: 10px; }
.submit { margin-left: 150px; margin-top: 10px;width:150px;height:40px;}
option{
background-color:red;
color:white;
}
.meal{
background-color:cyan;
color:blue;
}
类选择器.submit将(提交按钮的)图像距浏览器窗口左边界的距离定义为 150px，距顶部元素的距离定义为 10px，图像本身的宽度和高度分别为 150px 和 40px。
要应用submit.jpg中的图像代替提交按钮，修改 HTML 代码如下:
多选样式 2.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="styleoption3.css" type="text/css" media="screen" />
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="optionsjq.js" type="text/javascript"></script>
</head>
<body>
<form>
<span class="label">Select the Food Item </span>
<select id="food" class="infobox" MULTIPLE>
<option value="0">Select a Food</option>
<option value="Pizza $5">Pizza $5</option>
<option value="HotDog $2">HotDog $2</option>
<option value="Coke $1">Coke $1</option>
<option value="French Fries $3">French Fries $3</option>
</select>
<p class="error">You have not selected any Option </p>
<p class="result"></p>
<input class="submit" type="image" value="Submit" src="submit.jpg">
</form>
</body>
</html>
在上面的代码中可以看到(用粗体标记的)，将type属性指定给image，并在src属性中指定图像文件名，使得提交按钮以图像的形式出现，如图 4-27 所示。
4.11 同时选中和取消选中所有复选框
问题
您有几个复选框，每个复选框指定一个快餐柜台出售的商品。你想要一个选择所有的复选框，如果选中的话，应该会选择所有其他的复选框。如果未选中此复选框，则必须取消选中所有其他复选框。
解决办法
制作一个显示五个复选框的 HTML 文件(四个用于食品项目，一个用于集体选中和取消选中它们)。HTML 文件如下所示:
all checkbox . html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="style2.css" type="text/css" media="screen" />
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="allcheckboxjq.js" type="text/javascript"></script>
</head>
<body>
<form>
<div class="infobox"><input type="checkbox" id="checkall">Check/Uncheck all Checkboxes</div>
<div class="infobox"><input type="checkbox" id="pizza" name="pizza" value=5>Pizza $5</div>
<div class="infobox"> <input type="checkbox" id="hotdog" name="hotdog" value=2>HotDog $2</div>
<div class="infobox"><input type="checkbox" id="coke" name="coke" value=1>Coke $1</div>
<div class="infobox"><input type="checkbox" id="fries" name="fries" value=3>French Fries $3</div>
</form>
</body>
</html>
在样式表中，如下定义类选择器.infobox:
Style2.css
.infobox{ padding: 5px; }
将padding属性设置为5px以在复选框之间创建间距。
在选择 Check All 复选框并显示所选食品的账单时，检查和取消检查所有复选框的 jQuery 代码如下:
all checkbojq . js
$(document).ready(function() {
$('#checkall').click(function(){
$("input[type='checkbox']").attr('checked', $('#checkall').is(':checked'));
});
$('form').find(':checkbox').click(function(){
var amt=0;
$('div').filter(':gt(0)').find(':checkbox').each(function(){
if($('div:gt(0)'))
{
if($(this).is(':checked'))
{
amt=amt+parseInt($(this).val());
}
}
});
$('p').remove();
$('<p>').insertAfter('div:eq(4)');
$('p').text('Your bill is $ '+amt);
});
});
它是如何工作的
在 HTML 文件中，您可以看到五个复选框被分配了类名infobox，其中四个复选框代表快餐店出售的四种商品:披萨、热狗、可乐和薯条，以及它们的价格。
在 jQuery 代码中，您将一个 click 事件附加到 Check All 复选框(id 为checkall的元素)。声明是
$("input[type='checkbox']").attr('checked', $('#checkall').is(':checked'));
为了理解这个语句，让我们简单介绍一下这个语句中使用的.attr()和.is()方法。
。属性( )
.attr()方法用于设置所选元素的属性。
语法:
.attr(attribute, value)
。是( )
.is()方法用选择器检查选中的元素，如果任何选中的元素与选择器匹配，则返回true，否则返回false。
语法:
.is(selector)
上面语句的一部分，$('#checkall').is(':checked')，检查checkall的复选框是否被选中。如果(id 为checkall的)复选框被选中，.is()方法将返回true。如果.is()方法返回true，那么checkbox的所有输入元素(即所有复选框)都将被设置为选中模式，显然，如果.is()方法返回false，那么它们都将被设置为未选中模式。由于用户也可以选中任何单独的复选框，所以您可以检查索引值大于 0 的每个复选框的状态(因为索引值为 0 的复选框是 Check All 复选框)。所有复选框的值被添加到amt变量中。要显示账单，您需要创建一个段落元素，并添加文本 Your bill is amt (其中 amt 是包含在amt变量中的数值)，并将该段落元素插入到索引值为 4 的div元素之后(即最后一个复选框之后)。
如果选择勾选所有复选框，则所有复选框都会被勾选，其值之和以账单的形式显示，如图 4-28 所示。
图 4-28
通过选择选中/取消选中所有复选框，可以选中所有复选框
如果勾选所有复选框未勾选，则所有复选框将被取消勾选，因此将显示 0 美元的账单，如图 4-29 所示。
图 4-29
通过取消选中选中/取消选中所有复选框复选框，可以取消选中所有复选框
用户也可以选择任何单独的复选框。所选复选框的总额将出现，如图 4-30 所示。
图 4-30
显示单个选择的食物项目的清单
4.12 验证两个字段
问题
您有两个字段，用户 Id 和密码，并且您想要确认没有一个字段为空。如果任何一项留空，您希望相应的错误消息出现在屏幕上。
解决办法
创建一个显示两个标签和两个文本字段的 HTML 文件:
validate eto . html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="stylevalidate.css" type="text/css" media="screen" />
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="validatetwojq.js" type="text/javascript"></script>
</head>
<body>
<div><span class="label">User Id *</span><input type="text" class="infobox" name="userid" /><span class="error"> This field cannot be blank</span></div>
<div><span class="label">Password *</span><input type="password" class="infobox" name="password" /><span class="error"> This field cannot be blank</span></div>
</body>
</html>
带有各自的类选择器的样式表如下:
stylevalidate.css
.label {float: left; width: 120px; }
.infobox {width: 200px; }
.error { color: red; padding-left: 10px; }
div{padding: 5px; }
测试没有字段留空的 jQuery 代码如下:
validateetojq . js
$(document).ready(function() {
$('.error').hide();
$('.infobox').each(function(){
$(this).blur(function(){
var data=$(this).val();
var len=data.length;
if(len<1)
{
$(this).parent().find('.error').show();
}
else
{
$(this).parent().find('.error').hide();
}
});
});
});
它是如何工作的
在 HTML 文件中，标签消息 **User Id *** 和 **Password *** 包含在被赋予类名label的 span 元素中。输入文本字段被赋予类名infobox，错误消息(该字段不能为空)被存储为类error的 span 元素。将类分配给所有三个项目(标签、输入文本字段和错误消息)的原因是为了自动应用在类选择器.label, .infobox和.error(在样式表style.css中定义)中定义的属性。
在样式表文件中，类选择器.label包含设置为left的float属性，以使标签显示在其左侧(为显示在其右侧的输入文本字段创建空间),以及设置为值120px的width属性，以定义标签可以消耗的宽度。类选择器.infobox包含设置为值200px的width属性，以指定下拉列表的宽度，类选择器.error用于为错误消息指定红色，并使错误消息出现在距离其左侧元素 10px 的位置。类型选择器div将padding属性设置为5px，用于在两个div元素之间创建一些空间，其中每个div元素包含标签、输入文本字段和错误消息的组合。
在 jQuery 代码中，首先隐藏所有错误消息(类error的 span 元素)，然后使用.each()方法，测试如果任何文本字段发生模糊事件(即用户失去对该字段的焦点)，输入文本字段中的值将被检索并存储到变量data中。如果data变量为空(即其长度小于 1)，您将显示与该字段相关的错误消息。
如果您将焦点从第一个文本字段(用户 Id)移开，并移动到下一个字段，您会在第一个字段得到如图 4-31 所示的错误消息。
图 4-31
如果第一个字段留空，将显示一条错误消息
如果第二个文本字段为空并且焦点不在其上，其错误信息如图 4-32 所示。
图 4-32
如果第二个字段留空，将显示一条错误消息
如图 4-33 所示，如果在两个输入文本字段中都提供了数据，则不会出现错误。
图 4-33
如果在两个输入文本字段中都提供了数据，则不会出现错误消息
添加提交按钮
在上面的解决方案中，您没有添加提交按钮。让我们添加一个提交按钮，并在用户选择提交按钮时逐个验证输入的文本字段。向 HTML 文件添加一个提交按钮，如下所示:
添加.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="stylevalidate.css" type="text/css" media="screen" />
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="addsubmitjq.js" type="text/javascript"></script>
</head>
<body>
<form>
<div><span class="label">User Id *</span><input type="text" class="infobox" name="userid" /><span class="error"> This field cannot be blank</span></div>
<div><span class="label">Password *</span><input type="password" class="infobox" name="password" /><span class="error"> This field cannot be blank</span></div>
<input class="submit" type="submit" value="Submit">
</form>
</body>
</html>
您需要在样式表文件(style.css)中添加一个类选择器.submit，将样式属性自动应用到 Submit 按钮，使它出现在输入文本字段的下方，与它上方的元素有一小段距离。
stylevalidate.css
.label {float: left; width: 120px; }
.infobox {width: 200px; }
.error { color: red; padding-left: 10px; }
.submit { margin-left: 125px; margin-top: 10px;}
div{padding: 5px; }
jQuery 代码被修改为在提交按钮上发生单击事件时执行验证，如下所示:
addsubsubmitq . js的缩写
$(document).ready(function() {
$('.error').hide();
$('.submit').click(function(event){
$('.infobox').each(function(){
var data=$(this).val();
var len=data.length;
if(len<1)
{
$(this).parent().find('.error').show();
}
else
{
$(this).parent().find('.error').hide();
}
});
event.preventDefault();
});
});
因为您感兴趣的是执行验证，而不是在选择提交按钮时将输入文本字段中输入的数据发送到服务器，所以您调用事件对象的.preventDefault()方法来停止将数据发送到服务器。JavaScript 会自动将事件对象发送给 click 事件的事件处理函数。
如果您将两个字段都留空并选择提交按钮，您将得到如图 4-34 所示的两条错误消息。
图 4-34
如果这两个字段留空，则会出现错误消息
如果其中一个字段留空，则在选择提交按钮时会显示相应的错误消息，如图 4-35 所示。
图 4-35
如果第一个输入文本字段留空，则会出现错误消息
4.13 匹配密码和确认密码字段
问题
您希望确保在“密码”和“确认密码”字段中输入的密码完全匹配。
解决办法
制作一个 HTML 文件，显示三个标签和三个文本字段，分别用于用户 Id、和确认密码:
Matchingpasswords.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="stylevalidate.css" type="text/css" media="screen" />
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="matchingpasswordsjq.js" type="text/javascript"></script>
</head>
<body>
<form>
<div ><span class="label">User Id </span><input type="text" class="userid" name="userid" /></div>
<div ><span class="label">Password </span><input type="password" class="password" name="password" /><span class="error"> Password cannot be blank</span></div>
<div ><span class="label">Confirm Password </span><input type="password" class="confpass" name="confpass" /><span class="error"> Password and Confirm Password don't match</span></div>
<input class="submit" type="submit" value="Submit">
</form>
</body>
</html>
带有各自的类选择器的样式表如下:
stylevalidate.css
.label {float: left; width: 120px; }
.error { color: red; padding-left: 10px; }
.submit { margin-left: 125px; margin-top: 10px;}
div{padding: 5px; }
测试在密码和确认密码字段中输入的数据完全相同的 jQuery 代码如下:
密码匹配 sq . js】??
$(document).ready(function() {
$('.error').hide();
$('.submit').click(function(event){
data=$('.password').val();
var len=data.length;
if(len<1)
{
$('.password').next().show();
}
else
{
$('.password').next().hide();
}
if($('.password').val() !=$('.confpass').val())
{
$('.confpass').next().show();
}
else
{
$('.confpass').next().hide();
}
event.preventDefault();
});
});
它是如何工作的
在 HTML 文件中，标签消息用户 Id、密码和确认密码包含在被分配了类label的 span 元素中。输入文本字段被分配了各自的类userid, password和confpass，用于通过 jQuery 检索输入其中的数据。最后，所有输入文本字段后面都是嵌套在类error的 span 元素中的错误消息。
为所有项目(标签、错误消息和提交按钮)分配类别的原因是为了自动应用类别选择器.label, .error中定义的属性，以及。submit(在style.css中定义)。此外，标签、输入文本字段和错误的组合嵌套在div元素中，这样您就可以对div元素应用样式属性，从而在标签、输入文本字段和错误消息的每个组合之间创建间距。
在样式表文件中，类选择器.label包含设置为left的 float 属性，以使标签出现在浏览器窗口的左侧(为显示在其右侧的输入文本字段创建空间)，并且width属性设置为120px以定义标签可以消耗的宽度。类选择器.error为错误消息分配红色，并使错误消息出现在距离其左侧元素 10px 的地方。类选择器.submit包含设置为125px的margin-left属性和设置为10px的margin-top属性，使其出现在距离浏览器窗口左边界 125px 的位置(出现在输入文本字段的下方),并与其上方的元素相距 10px。类型选择器div将padding属性设置为5px以在div元素之间创建一些空间，其中每个div元素包含一个标签、一个输入文本字段和一个错误消息的组合。
在理解 jQuery 代码之前，让我们先了解一下其中使用的.next()方法的用法。
。下一个( )
此方法检索指定元素中的下一个同级元素。记住，这个方法返回每个元素的下一个兄弟——而不是像nextAll()方法那样返回所有的兄弟。
语法:
.next(selector)
其中selector是可选参数，用于指定与指定元素匹配的选择器表达式。
在 jQuery 代码中，最初隐藏错误消息(嵌套在类error的 span 元素中的元素)。此后，您将一个 click 事件附加到 Submit 按钮。在 click 事件的事件处理函数中，检索密码字段(类password的输入文本字段)中的数据，并将其存储在变量data中。如果变量data中内容的长度小于 1(即，如果用户没有在密码字段中输入任何内容，您使密码字段旁边的元素(它是类error的 span 元素)出现在屏幕上)，您将在屏幕上显示错误消息密码不能为空。
如果用户没有将密码留空，则检查在密码字段和确认密码字段中输入的数据(类.password和.confpass元素中的数据)是否完全相同。如果两者不匹配，您将在屏幕上显示错误消息(这是确认密码字段旁边的元素)密码和确认密码不匹配。您还调用事件对象的preventDefault()方法来防止用户输入的数据发送到服务器，因为您主要感兴趣的只是确认在密码和确认密码字段中输入的数据是否匹配。
在执行 jQuery 代码时，如果您将密码字段留空并选择提交按钮，您会在屏幕上得到错误消息密码不能为空，如图 4-36 所示。
图 4-36
如果未输入密码，将出现错误消息
如果密码和确认密码字段的内容不匹配，会得到如图 4-37 所示的错误信息密码和确认密码不匹配。
图 4-37
如果密码和确认密码字段不匹配，则会出现错误消息
4.14 禁用某些字段
问题
您希望用户填写用户 Id、密码和确认密码字段，如果用户输入无效数据或者将任何字段留空，您不仅希望显示错误消息，还希望禁用其余字段，直到错误被纠正。
解决办法
使用与配方 4-13 中相同的 HTML 和样式表文件(style.css)。您将在 HTML 文件中进行的唯一更改是您将删除提交按钮，因为您将通过使用blur()事件而不是click()事件来验证本例中的字段。下面提供了 HTML 代码以供参考:
Disablefields.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="stylevalidate.css" type="text/css" media="screen" />
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="disablefieldsjq.js" type="text/javascript"></script>
</head>
<body>
<form>
<div ><span class="label">User Id </span><input type="text" class="userid" name="userid" /><span class="error"> User id cannot be blank</span></div>
<div ><span class="label">Password </span><input type="password" class="password" name="password" /><span class="error"> Password cannot be blank</span></div>
<div ><span class="label">Confirm Password </span><input type="password" class="confpass" name="confpass" /><span class="error"> Password and Confirm Password don't match</span></div>
</form>
</body>
</html>
样式表文件 stylevalidate.css 将与配方 4-13 中使用的完全相同。
以下 jQuery 代码
验证用户输入的数据
显示错误消息
如果跳过数据或在任一字段中输入了无效数据，则禁用其余字段
Disablefieldsjq.js
$(document).ready(function() {
$('.error').hide();
$('.userid').blur(function(){
data=$('.userid').val();
var len=data.length;
if(len<1)
{
$('.userid').next().show();
$('.password').attr('disabled',true);
$('.confpass').attr('disabled',true);
}
else
{
$('.userid').next().hide();
$('.password').removeAttr('disabled');
$('.confpass').removeAttr('disabled');
}
});
$('.password').blur(function(){
data=$('.password').val();
var len=data.length;
if(len<1)
{
$('.password').next().show();
$('.confpass').attr('disabled',true);
}
else
{
$('.password').next().hide();
$('.confpass').removeAttr('disabled');
}
});
$('.confpass').blur(function(){
if($('.password').val() !=$('.confpass').val())
{
$('.confpass').next().show();
}
else
{
$('.confpass').next().hide();
}
});
});
它是如何工作的
最初，您隐藏了错误消息(嵌套在类error的 span 元素中的元素)。此后，您检查在类userid的输入文本字段上是否发生了blur()事件(即，焦点是否在用户 Id 字段上丢失)。如果是，则检索用户在该字段中输入的数据，并将其存储在变量data中。如果变量data中的内容长度小于 1(即，如果用户 Id 字段为空)，则让用户 Id 字段旁边的元素(是类error的 span 元素)出现在屏幕上(即，在屏幕上显示错误消息用户 Id 不能为空)。除此之外，你还可以使用这两种说法
$('.password').attr('disabled',true);
$('.confpass').attr('disabled',true);
禁用密码和确认密码字段(类别为password和confpass的两个输入字段)，因此除非用户输入用户 id，否则这两个字段都将被禁用。如果用户在用户 Id 字段中输入一些数据，两个禁用字段将通过使用以下两个语句被启用:
$('.password').removeAttr('disabled');
$('.confpass').removeAttr('disabled');
类似地，检查密码字段是否为空。如果是，将再次显示错误消息密码不能为空，并且确认密码字段将被禁用，直到用户在密码字段中输入一些数据。
最后，检查两个字段密码和确认密码(类.password和.confpass元素中的数据)中输入的数据是否完全相同。如果两者不匹配，您将在屏幕上显示错误消息(这是确认密码字段旁边的元素)密码和确认密码不匹配。
在执行 jQuery 代码时，如果您将用户 Id 字段留空并失去焦点，您会得到错误消息用户 Id 不能为空，如图 4-38 所示。此外，密码和确认密码两个字段都将被禁用(即，用户将无法在其中输入任何内容，直到用户在用户 Id 字段中输入内容)。
图 4-38
如果未提供用户 id 并且禁用了其他字段，则会出现错误消息
如果密码字段为空，并且您失去焦点，您会在屏幕上得到错误消息密码不能为空，并且确认密码字段被禁用，直到在密码字段中输入内容，如图 4-39 所示。
图 4-39
如果未输入密码且确认密码字段被禁用，则会出现错误消息
4.15 验证完整的表格
问题
您有一个表单，用户应该在其中提供大量信息，包括用户 id、密码和电子邮件地址。此外，用户应该选择他们想要购买的食品，并选择支付方式(指定信用卡)和他们属于哪个国家。每个字段都必须通过以下方式进行验证:
用户 id 应该只包含字符、数字和下划线(_)。
密码不能为空
电子邮件地址必须包含符号。还有@。
必须至少选择一个复选框(食品)。
用户必须选择一种支付方式。
必须选择用户所属的国家。
解决办法
让我们制作一个显示标签和字段的 HTML 文件，如图 4-40 所示。您可以看到有六个标签、三个输入文本字段、四个复选框、三个单选按钮和一个选择元素。HTML 代码如下所示:
图 4-40
如果没有填写任何字段，则会出现错误消息
Validateform.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="styleform.css" type="text/css" media="screen" />
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="validateformjq.js" type="text/javascript"></script>
</head>
<body>
<form>
<div> <span class="label">User Id </span><input type="text" class="userid" name="userid" /><span class="error">User id can contain only numerical, character or _(underscore)</span></div>
<div><span class="label">Password </span><input type="password" class="password" name="password" /><span class="error"> Password cannot be blank</span></div>
<div><span class="label">Email Address </span><input type="text" class="emailadd" name="emailid" /><span class="error"> Invalid email address</span></div>
<div><span class="label">Select Food items</span><br><input type="checkbox" id="pizza" name="pizza" value=5 class="chkb">Pizza $5 <br>
<input type="checkbox" id="hotdog" name="hotdog" value=2 class="chkb">HotDog $2<br>
<input type="checkbox" id="coke" name="coke" value=1 class="chkb">Coke $1<br>
<input type="checkbox" id="fries" name="fries" value=3 class="chkb">French Fries $3<br>
<span class="fooderror">You have not selected any food item</span></div>
<div><span class="label">Mode of Payment</span><br><input type="radio" name="paymode" class="radiobtn" value="Master Card">Master Card <br>
<input type="radio" name="paymode" class="radiobtn" value="ANZ Grindlay Card">ANZ Grindlay Card<br>
<input type="radio" name="paymode" class="radiobtn" value="Visa Card">Visa Card<br>
<span class="payerror">You have not selected any payment method</span></div>
<div><span class="label">Country</span>
<select id="country" class="infobox">
<option value="0">Select a Country</option>
<option value="USA">USA</option>
<option value="United Kingdom">United Kingdom</option>
<option value="India">India</option>
<option value="China">China</option>
</select>
<span class="error"> Please select the country</span></div>
<input class="submit" type="submit" value="Submit">
</form>
</body>
</html>
将样式属性应用于 HTML 元素的样式表文件如下:
styleform.css
.label {float: left; width: 120px; }
.infobox {width: 120px; }
.error { color: red; padding-left: 10px; }
.submit { margin-left: 125px; margin-top: 10px;}
div{padding: 5px; }
.chkb { margin-left: 125px; margin-top: 10px;}
.radiobtn { margin-left: 125px; margin-top: 10px;}
验证所有字段的 jQuery 代码如下:
Validateformjq.js
1\. $(document).ready(function() {
2\. $('.error').hide();
3\. $('.fooderror').addClass('error');
4\. $('.fooderror').hide();
5\. $('.payerror').addClass('error');
6\. $('.payerror').hide();
7\. $('.submit').click(function(event){
8\. var data=$('.userid').val();
9\. if(validate_userid(data))
10\. {
11\. $('.userid').next().hide();
12\. }
13\. else
14\. {
15\. $('.userid').next().show();
16\. }
17\. data=$('.password').val();
18\. var len=data.length;
19\. if(len<1)
20\. {
21\. $('.password').next().show();
22\. }
23\. else
24\. {
25\. $('.password').next().hide();
26\. }
27\. data=$('.emailadd').val();
28\. if(valid_email(data))
29\. {
30\. $('.emailadd').next().hide();
31\. }
32\. else
33\. {
34\. $('.emailadd').next().show();
35\. }
36\. var count=0;
37\. $('div').find(':checkbox').each(function(){
38\. if($(this).is(':checked'))
39\. {
40\. count++;
41\. }
42\. });
43\. if(count==0)
44\. {
45\. $('.fooderror').css({'margin-left':250}).show();
46\. }
47\. else
48\. {
49\. $('.fooderror').hide();
50\. }
51\. count=0;
52\. $('div').find(':radio').each(function(){
53\. if($(this).is(':checked'))
54\. {
55\. count++;
56\. }
57\. });
58\. if(count==0)
59\. {
60\. $('.payerror').css({'margin-left':250}).show();
61\. }
62\. else
63\. {
64\. $('.payerror').hide();
65\. }
66\. count=$('select option:selected').val();
67\. if(count==0)
68\. {
69\. $('.infobox').next().show();
70\. }
71\. else
72\. {
73\. $('.infobox').next().hide();
74\. }
75\. event.preventDefault();
76\. });
77\. });
78\. function valid_email(email)
79\. {
80\. var pattern= new RegExp(/^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]+$/);
81\. return pattern.test(email);
82\. }
83\. function validate_userid(uid)
84\. {
85\. var pattern= new RegExp(/^[a-z0-9_]+$/);
86\. return pattern.test(uid);
87\. }
它是如何工作的
jQuery 代码的含义如下:
2.隐藏所有与用户 id、密码、电子邮件地址和国家相关的错误。所有错误消息都嵌套在类error.的 span 元素中
3-4.将类选择器.error中包含的样式属性应用到与显示不同食品的复选框相关的错误消息中。类选择器.error中的样式属性将红色应用于错误消息。暂时隐藏错误消息。
5-6.将类选择器.error的样式属性应用于与显示不同支付模式的单选按钮相关的错误(将以红色显示)。错误消息在开始时是不可见的。
7.将点击事件附加到提交按钮。
8.检索在用户 Id 字段(类userid的输入文本字段)中输入的数据，并将其存储在变量data.中
9-16.通过将用户 id 传递给validate_userid()函数来验证data变量中的用户 id，并将其与正则表达式进行比较，以检查用户 id 是否仅由字符、数字或下划线组成。如果用户 id 与提供的正则表达式匹配，将不会显示错误消息；否则屏幕上将显示错误消息(输入文本字段旁边的元素)用户 id 只能包含数字、字符或 _(下划线)。
17-26.检索密码字段(类别password的输入文本字段)中输入的数据，并将其存储在变量data中。你在data变量中找出内容的长度。如果长度小于 1(即如果密码字段为空)，屏幕上将显示错误消息(是输入文本字段旁边的元素)密码不能为空；否则，错误消息将保持隐藏模式。
27-35.检索在电子邮件地址字段(类emailadd的输入文本字段)中输入的数据，并将其存储在变量data中。然后，通过将电子邮件地址传递给validate_email()函数来验证data变量中的电子邮件地址，并将其与正则表达式进行比较，该表达式测试电子邮件地址是否以字母数字开头，并且基本上包含。和@符号。如果电子邮件地址与提供的正则表达式匹配，将不会显示错误消息；否则屏幕上将显示错误信息(输入文本字段旁边的元素)Invalid email address。
36-42.将变量count初始化为 0。利用.each()函数检查div元素中的所有复选框是否都被选中。变量count的值在找到任何选中的复选框时增加 1。换句话说，您正在计算选中复选框的数量。
43-50.如果count变量中的值为 0，表示没有选择任何复选框，则显示由类fooderror的 span 元素定义的错误消息，并使用.css()方法将margin-left属性应用于该错误消息，值为250px，使其出现在距离浏览器窗口左边界 250px 的位置(在其他错误消息下方，如果有的话)。如果count变量中的值不为 0，错误信息保持隐藏模式。
51-57.将变量count初始化为 0。利用.each()函数找出div元素中所有被选中的单选按钮。在找到任何选中的单选按钮时，变量count的值增加 1。
58-65.如果count变量中的值为 0，表示没有选择单选按钮，则显示由类payerror的 span 元素定义的错误消息，并使用.css()方法对其应用margin-left属性，使其出现在距离浏览器窗口左边界 250px 的位置(在其他错误消息的下方，如果有的话)。如果count变量中的值不为 0，错误信息保持隐藏模式。
66-74.找出在 select 元素中选择的选项的数量。所选选项的计数存储在变量count中。如果count变量中的值为 0(即，如果没有从选择元素中选择选项)，则屏幕上将显示错误消息(该元素位于infobox ) 类的选择元素旁边，请选择国家；否则，错误消息将保持隐藏模式。
75.调用事件对象的preventDefault()方法是为了防止用户输入或选择的数据被发送到服务器，因为您只对数据的验证感兴趣。
78-82.验证电子邮件地址的功能
83-87.用于验证用户 id 的函数
在执行 jQuery 代码时，如果您将所有字段留空并选择提交按钮，您会得到如图 4-40 所示的错误消息。
如果您输入一个无效的用户 id 或电子邮件地址，并且没有从 select 元素中选择任何复选框或选项，您会得到如图 4-41 所示的错误消息。
图 4-41
如果没有提供数据或数据无效，将显示错误消息
输入所有有效数据并选择所有必要选项后，数据将被接受，不显示任何错误信息，如图 4-42 所示。
图 4-42
接受有效数据
突出显示输入字段并对常见的表单元素进行分组
现在让我们将表单的一些相关元素分组，并在输入字段获得焦点时突出显示它们。要将表单元素分组并应用标题，需要使用两个 HTML 元素，fieldset和legend:
标签用来将一些表单元素组合在一起。它在分组的元素周围绘制一个框。
<legend>标签用于定义由fieldset元素分组的表单元素的标题。
让我们应用 fieldset 元素将上面的表单分成三组，并应用legend元素将标题输入您的信息添加到表单中。修改后的 HTML 表单如下:
Highlightgroup.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="stylehighlight.css" type="text/css" media="screen" />
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="highlightgroupjq.js" type="text/javascript"></script>
</head>
<body>
<form>
<fieldset>
<legend>Enter Your Information</legend>
<div id="u"> <span class="label">User Id </span><input type="text" class="userid" name="userid" /><span class="error">User id can contain only numerical, character or _(underscore)</span></div>
<div id="p"><span class="label">Password </span><input type="password" class="password" name="password" /><span class="error"> Password cannot be blank</span></div>
<div><span class="label">Email Address </span><input type="text" class="emailadd" name="emailid" /><span class="error"> Invalid email address</span></div>
</fieldset>
<fieldset>
<div><span class="label">Select Food items</span><br><input type="checkbox" id="pizza" name="pizza" value=5 class="chkb">Pizza $5 <br>
<input type="checkbox" id="hotdog" name="hotdog" value=2 class="chkb">HotDog $2<br>
<input type="checkbox" id="coke" name="coke" value=1 class="chkb">Coke $1<br>
<input type="checkbox" id="fries" name="fries" value=3 class="chkb">French Fries $3<br>
<span class="fooderror">You have not selected any food item</span></div>
<div><span class="label">Mode of Payment</span><br><input type="radio" name="paymode" class="radiobtn" value="Master Card">Master Card <br>
<input type="radio" name="paymode" class="radiobtn" value="ANZ Grindlay Card">ANZ Grindlay Card<br>
<input type="radio" name="paymode" class="radiobtn" value="Visa Card">Visa Card<br>
<span class="payerror">You have not selected any payment method</span></div>
</fieldset>
<fieldset>
<div><span class="label">Country</span>
<select id="country" class="infobox">
<option value="0">Select a Country</option>
<option value="USA">USA</option>
<option value="United Kingdom">United Kingdom</option>
<option value="India">India</option>
<option value="China">China</option>
</select>
</fieldset>
<span class="error"> Please select the country</span></div>
<input class="submit" type="submit" value="Submit">
</form>
</body>
</html>
<fieldset>表示该组开始，</fieldset>表示该组结束。
要定义分组元素的边框，需要为类型选择器fieldset定义 style 属性，为标题应用边框、前景色和背景色，并使其显示为粗体，需要为类型选择器legend定义 style 属性。为了突出显示获得焦点的输入文本字段，您在样式表中定义了一个名为.inputs的样式规则。样式表如下所示:
stylehighlight.css
.submit { margin-left: 125px; margin-top: 10px;}
.label {float: left; width: 120px; }
.infobox {width: 120px; }
.error { color: red; padding-left: 10px; }
div{padding: 5px; }
.chkb { margin-left: 125px; margin-top: 10px;}
.radiobtn { margin-left: 125px; margin-top: 10px;}
.inputs{background-color:cyan}
fieldset{
border:1px solid #888;
}
legend{
border:1px solid #888;
background-color:cyan;
color:blue;
font-weight:bold;
padding:.5em
}
要将样式规则输入中定义的样式属性应用于输入文本字段用户 Id、密码和电子邮件地址，您需要向上面的 jQuery 代码添加几条语句。这些语句在下面的 jQuery 代码中以粗体显示。其余的代码完全相同。
亮部组 jq.js
$(document).ready(function() {
$('.error').hide();
$('.userid').focus(function(){
$(this).addClass('inputs');
});
$('.password').focus(function(){
$(this).addClass('inputs');
});
$('.emailadd').focus(function(){
$(this).addClass('inputs');
});
$('.fooderror').addClass('error');
$('.fooderror').hide();
$('.payerror').addClass('error');
$('.payerror').hide();
$('.submit').click(function(event){
var data=$('.userid').val();
if(validate_userid(data))
{
$('.userid').next().hide();
}
else
{
$('.userid').next().show();
}
data=$('.password').val();
var len=data.length;
if(len<1)
{
$('.password').next().show();
}
else
{
$('.password').next().hide();
}
data=$('.emailadd').val();
if(valid_email(data))
{
$('.emailadd').next().hide();
}
else
{
$('.emailadd').next().show();
}
var count=0;
$('div').find(':checkbox').each(function(){
if($(this).is(':checked'))
{
count++;
}
});
if(count==0)
{
$('.fooderror').css({'margin-left':250}).show();
}
else
{
$('.fooderror').hide();
}
count=0;
$('div').find(':radio').each(function(){
if($(this).is(':checked'))
{
count++;
}
});
if(count==0)
{
$('.payerror').css({'margin-left':250}).show();
}
else
{
$('.payerror').hide();
}
count=$('select option:selected').val();
if(count==0)
{
$('.infobox').next().show();
}
else
{
$('.infobox').next().hide();
}
event.preventDefault();
});
});
function valid_email(email)
{
var pattern= new RegExp(/^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]+$/);
return pattern.test(email);
}
function validate_userid(uid)
{
var pattern= new RegExp(/^[a-z0-9_]+$/);
return pattern.test(uid);
}
在执行这个 jQuery 代码时，您会得到如图 4-43 所示的输出。
图 4-43
对表单的公共元素进行分组
4.16 摘要
在这一章中，你学习了简单的验证检查，比如一个字段不能为空，在给定的范围内输入一个数字，等等。您还学习了如何确认电话号码、日期、电子邮件地址等的有效性。您学习了了解复选框或单选框是否被选中的技术。最后，您学习了如何验证一个完整的表单。
在下一章，你将学习如何制作不同类型的导航菜单。您将学习以面包屑的形式表示链接，并制作一个带有悬停菜单项的菜单。您将创建一个上下文菜单、一个带有访问键的导航菜单、带有相应菜单项和子菜单项的菜单、一个折叠菜单和一个动态可视菜单。
五、页面导航
在这一章中，你将学习如何制作不同类型的导航到目标网站的菜单。你将在本章中学习的食谱是
以面包屑的形式表示链接
带有悬停菜单项的菜单
创建上下文菜单
使用访问键创建导航菜单
右键单击时创建上下文菜单
带有各自菜单项的两个菜单
带有各自菜单项和子菜单项的两个菜单
制作手风琴菜单
制作动态可视菜单
5.1 编写面包屑菜单
问题
您希望以面包屑的形式表示一个链接菜单。
解决办法
让我们用一个无序列表元素的形式来表示菜单书籍的几个菜单项**、Web 开发**、编程、 RDBMS 。HTML 文件如下所示:
Breadcrumb.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="breadcrumbjq.js" type="text/javascript"></script>
</head>
<body>
<ul id="menu">
<li><a href="http://example.com">Books</a>
<ul>
<li><a href="http://example.com">Web Development</a></li>
<li><a href="http://example.com">Programming</a></li>
<li><a href="http://example.com">RDBMS</a></li>
</ul>
</li>
</ul>
</body>
</html>
为了给列表项提供面包屑的形状，您定义了两个样式规则，.liststyle和.ulistyle，以及一些样式属性，如下面的样式表文件style.css所示:
style.css
.liststyle {
background-image:url(arrow.jpg);
background-repeat:no-repeat;
background-position:left;
padding-left:30px;
display: inline;
}
.uliststyle {
list-style:none;
margin:0;
padding:0;
display: inline;
}
将两个样式规则.uliststyle和.liststyle分别应用于无序列表及其元素的 jQuery 代码如下:
面包卷 jq.js
$(document).ready(function() {
$('ul').addClass('uliststyle');
$('ul li ul li').addClass('liststyle');
});
它是如何工作的
在 HTML 文件中，您可以看到这个无序列表被分配了 id menu，它由一个列表项书籍组成，而这个列表本身又是一个包含三个元素的无序列表: Web 开发、编程和 RDBMS 。此外，所有菜单项都指向一个假想的网站example.com，这是用户单击面包屑中的任何链接时将被发送到的目标网站。
在样式表文件中，.liststyle规则包含设置为值url(arrow.jpg)的background-image属性，以显示箭头图像(参见图 5-1 )。将background-repeat属性设置为no-repeat,使图像只出现一次。background-position属性被设置为left以使图像出现在它所应用的元素的左侧。将padding-left属性设置为30px以在左侧创建 30px 的距离，并将display属性设置为值inline以移除块元素中的任何空格，使它们出现在一行中(没有空格)。
样式规则uliststyle包含设置为值none的list-style属性，以从无序列表中移除传统的项目符号。margin 和 padding 属性被设置为0以删除列表项中默认创建的传统空白，display 属性被设置为inline以使 block 元素出现在同一行上。
在 jQuery 代码中，样式规则.ulistyle应用于无序列表元素和。liststyle应用于无序列表的列表项，该列表项嵌套在无序列表的第一个列表项中。
在执行 jQuery 代码时，您会得到如图 5-1 所示的输出。
图 5-1
面包屑形式的锚元素
5.2 向菜单项添加悬停效果
问题
您希望显示一个包含几个菜单项的菜单。您还希望在菜单及其项目上有悬停效果。
解决办法
制作一个 HTML 文件来表示菜单标题及其菜单项。您可以借助两个无序列表来实现，一个嵌套在另一个中。
Addinghover.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="stylehover.css" type="text/css" media="screen" />
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="addinghoverjq.js" type="text/javascript"></script>
</head>
<body>
<ul>
<li><a href="http://example.com">Books</a>
<ul>
<li><a href="http://example.com">Web Development</a></li>
<li><a href="http://example.com">Programming</a></li>
<li><a href="http://example.com">RDBMS</a></li>
</ul>
</li>
</ul>
</body>
</html>
在 HTML 文件中可以看到一个无序列表元素，列表项为 Books ，它本身是一个无序列表元素，由三个列表项来表示 Web 开发、编程和 RDBMS 的超链接。这些超链接指向一个名为 http://example.com 的假想网站，如果点击任何菜单项，用户都会被发送到该网站。
为了给无序列表元素一个菜单的外观，您需要对所有三个元素应用特定的样式:<u>, <li>,和<a>。您在样式表文件中编写它们的类型选择器，以便其中的属性可以自动应用于这三个元素。样式表文件可能如下所示:
style hover . CSS
ul {
width: 200px;
}
ul li ul {
list-style-type:none;
margin: 5;
width: 200px;
}
a {
display:block;
border-bottom: 1px solid #fff;
text-decoration: none;
background: #00f;
color: #fff;
padding: 0.5em;
}
li {
display:inline;
}
.hover {
background: #000;
}
将悬停事件应用于锚元素的 jQuery 代码如下:
Addinghoverjq.js
$(document).ready(function() {
$('a').hover(
function(event){
$(this).addClass('hover');
},
function(){
$(this).removeClass('hover');
}
);
});
它是如何工作的
类型选择器ul包含设置为200px的宽度属性，用于定义菜单标题书籍的宽度。类型选择器ul li ul将应用于菜单项。它包含设置为none值的list-style-type属性，以从无序列表元素中移除传统的项目符号。margin属性被设置为值5以使菜单项与菜单标题相比显得有点缩进。将width属性设置为200px来定义菜单项的宽度，以容纳所有内容。
类型选择器a包含设置为值block的display属性，以使锚元素显示为一个块，而不是单个元素。将border-bottom属性设置为1px solid #fff,使每一个锚元素下面出现一个 1px 厚的纯白边框(作为分隔符)。将text-decoration属性设置为none以移除通常出现在超链接下方的传统下划线。对于所有锚定元素，背景色设置为蓝色，前景色设置为白色。将padding属性设置为.5em(即默认字体大小的 50%)来定义锚文本与其边框之间的间距
类型选择器li被设置为值inline以移除列表项之间的任何空白。CSS 类.hover包含背景属性，当用户悬停在任何锚元素上时，将菜单项(锚元素)的背景颜色设置为黑色。
在 jQuery 代码中，您可以看到悬停事件被应用于锚元素。回想一下，悬停事件包含两个事件处理函数，一个在鼠标指针移动到任何锚元素上时调用，另一个在鼠标指针从锚元素移开时调用。在鼠标移动到锚元素上时调用的事件处理函数中，应用 CSS 类hover(在样式表文件中定义)，使锚元素的背景颜色变成黑色。在鼠标指针离开锚定元素时调用的事件处理函数中，从锚定元素中移除 CSS 类hover,使其看起来像最初一样。
在执行 jQuery 代码时，将出现如图 5-2 所示的菜单。
图 5-2
包含三个菜单项的“书籍”菜单
当你将鼠标悬停在任一菜单项上时，其背景颜色变为黑色，如图 5-3 所示。
图 5-3
当鼠标悬停在菜单项上时，该菜单项会高亮显示
5.3 创建上下文菜单
问题
您希望显示一个包含几个菜单项的菜单。当鼠标悬停在某个菜单项上时(鼠标指针在其上移动)，您希望显示与其相关的信息，并且还希望突出显示该菜单项。当单击菜单项时，用户被发送到相关的网站。
解决办法
创建一个 HTML 文件来表示菜单标题 Books 以及三个菜单项。您在两个无序列表的帮助下创建菜单及其三个菜单项，一个列表嵌套在另一个列表中。列表项包含代表菜单项的锚元素，并引用目标网站 http://example.com ，用户在选择任何菜单项时被发送到该目标网站(这是一个假想的网站)。此外，你要把三个菜单项的信息写在三个段落中。HTML 文件如下所示:
上下文相关. html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="stylehover.css" type="text/css" media="screen" />
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="contextualjq.js" type="text/javascript"></script>
</head>
<body>
<table>
<td>
<ul>
<li><a href="http://example.com">Books</a>
<ul>
<li><a href="http://example.com" id="webd">Web Development</a></li>
<li><a href="http://example.com" id="pgmng">Programming</a></li>
<li><a href="http://example.com" id="datab">RDBMS</a></li>
</ul>
</li>
</ul>
</td>
<td valign="top">
<p class="web" >The wide range of books that includes how Web development can be done with ASP.NET, PHP, JSP etc.</p>
<p class="prog" >The wide range of books that includes developing Programming skills in C, C++, Java etc.</p>
<p class="rdbms" >The wide range of books that includes how Data Base Management is done via Oracle, MySQL, SQL Server etc.</p>
</td>
</table>
</body>
要使菜单显示在左侧，内容显示在右侧，您需要制作一个表格，将菜单放在表格的第一列，将包含相关菜单项信息的段落放在表格的第二列。
为了给无序列表元素一个菜单的外观，您需要对所有三个元素应用特定的样式:<u>, <li>和<a>。您在样式表文件中编写它们的类型选择器，以便其中的属性可以自动应用于这三个元素。样式表文件如下所示:
style hover . CSS
ul {
width: 200px;
}
ul li ul {
list-style-type:none;
margin: 5;
width: 200px;
}
a {
display:block;
border-bottom: 1px solid #fff;
text-decoration: none;
background: #00f;
color: #fff;
padding: 0.5em;
}
li {
display:inline;
}
.hover {
background: #000;
}
显示悬停菜单项信息的 jQuery 代码如下:
语境 jq.js
$(document).ready(function() {
$('.web').hide();
$('.prog').hide();
$('.rdbms').hide();
$('#webd').hover(function(event){
$('.web').show();
$('.prog').hide();
$('.rdbms').hide();
$('#webd').addClass('hover');
}, function(){
$('#webd').removeClass('hover');
});
$('#pgmng').hover(function(event){
$('.web').hide();
$('.prog').show();
$('.rdbms').hide();
$('#pgmng').addClass('hover');
}, function(){
$('#pgmng').removeClass('hover');
});
$('#datab').hover(function(event){
$('.web').hide();
$('.prog').hide();
$('.rdbms').show();
$('#datab').addClass('hover');
}, function(){
$('#datab').removeClass('hover');
});
});
它是如何工作的
在样式表文件中，类型选择器ul包含设置为200px的width属性，以定义菜单标题书籍的宽度。类型选择器ul li ul应用于菜单项。它包含设置为none的list-style-type属性，以从无序列表元素中移除传统的项目符号。margin属性被设置为5以使菜单项与菜单标题相比显得有点缩进。将width属性设置为200px来定义菜单项的宽度，以容纳所有内容。类型选择器a包含设置为block的显示属性，以使锚元素显示为一个块，而不是单个元素。将border-bottom属性设置为1px solid #fff以使 1px 的纯白边框出现在每个锚点元素的下方(作为分隔符)。将text-decoration属性设置为none以移除通常出现在超链接下方的传统下划线。所有锚定元素的背景色设置为蓝色，前景色设置为白色。将padding属性设置为.5em(即默认字体大小的 50%)来定义锚文本与其边框之间的间距。
类型选择器li被设置为inline以移除列表项之间的任何空白。
CSS 类.hover包含 background 属性，当用户点击菜单项(锚元素)时，将它的背景颜色设置为黑色。
jQuery 代码的含义
最初，您隐藏存储在(相应菜单项的)所有三个段落中的信息。也就是说，您隐藏了存储在类别web、prog和rdbms的三个段落中的信息，因为只有当相关菜单项被悬停时才会显示它们。
然后将一个悬停事件附加到第一个菜单项 Web Development (即 id 为webd的锚元素)。在悬停事件的第一个事件处理函数(当该菜单项被悬停时执行)中，您将类web的段落(包含关于 Web 开发的信息)设置为可视模式，向用户显示与 Web 开发书籍相关的信息。您隐藏了其余的段落元素。也就是说，类prog和rdbms的段落元素是隐藏的。此外，将样式规则.hover(在样式表中定义)中定义的属性应用于悬停的菜单项以高亮显示它，并删除悬停事件的第二个事件处理函数中的hover样式规则，当鼠标指针离开菜单项时执行该函数。
将一个悬停事件附加到第二个菜单项 Programming (即 id 为pgmng的锚元素)。在悬停事件的第一个事件处理函数(当该菜单项被悬停时执行)中，您将类prog的段落(包含关于编程主题的信息)设置为可视模式，向用户显示与编程书籍相关的信息。您隐藏了其余的段落元素。也就是说，类web和rdbms的段落元素是隐藏的。此外，将样式规则.hover(在样式表中定义)中定义的属性应用于悬停的菜单项以高亮显示它，并删除悬停事件的第二个事件处理函数中的hover样式规则，当鼠标指针离开菜单项时执行该函数。
最后，将一个悬停事件附加到第三个菜单项 RDBMS (即 id datab的锚元素)。在 hover 事件的第一个事件处理函数(当这个菜单项被悬停时执行)中，您将类rdbms的段落(包含关于 RDBMS 主题的信息)设置为可视模式，向用户显示与 RDBMS 上的书籍相关的信息。您隐藏了其余的段落元素。也就是说，类web和prog的段落元素是隐藏的。您还可以将样式规则.hover(在样式表中定义)中定义的属性应用于悬停的菜单项，以高亮显示它并移除。hover鼠标指针离开菜单项时执行的悬停事件的第二个事件处理函数中的样式规则。
在执行上面的 jQuery 代码时，您将得到一个菜单以及其中的三个菜单项。当您将鼠标悬停在任何菜单项上时，该菜单项将被高亮显示，并显示与之相关的信息，如图 5-4 所示。
图 5-4
该菜单项在悬停时保持高亮显示，并显示相关信息
5.4 使用访问键创建导航菜单
问题
您希望显示一个包含几个菜单项的菜单。您希望显示菜单项的访问键。访问键代表菜单项的快捷键。此外，您希望当任何菜单项被悬停时，显示与之相关的信息。在两种情况下都必须显示信息，当菜单项被悬停时以及当任何菜单项的访问键被按下时。当用户点击一个菜单项时，它们应该被发送到相关的网站。
解决办法
创建一个 HTML 文件来表示菜单标题 Books 以及三个菜单项。您可以在一个无序列表的帮助下创建菜单及其三个菜单项。列表项包含表示菜单项的锚元素。另外，你要把三个菜单项的信息写在三段中。为了使菜单项的字符(您希望表示为访问键)显示为下划线，您将它嵌套在类hot的 span 元素中。HTML 文件可能如下所示:
Navigationmenu.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="stylehover.css" type="text/css" media="screen" />
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="navigationjq.js" type="text/javascript"></script>
</head>
<body>
<table>
<td>
<ul>
<li><a href="http://example.com">Books</a>
<ul>
<li><a href="http://example.com" id="webd"><span class="hot">W</span>eb
Development</a></li>
<li><a href="http://example.com" id="pgmng"><span class="hot">P</span>
rogramming</a></li>
<li><a href="http://example.com" id="datab" ><span class="hot">R</span>DBMS</a></li>
</ul>
</li>
</ul>
</td>
<td valign=top>
<p class='web' >The wide range of books that includes how Web development can be done with ASP.NET, PHP, JSP etc.</p>
<p class='prog' >The wide range of books that includes developing Programming skills in C, C++, Java etc.</p>
<p class='rdbms' >The wide range of books that includes how Data Base Managemenet is done via Oracle, MySQL, Sql Server etc.</p>
</td>
</table>
</body>
</html>
为了给无序列表元素一个菜单的外观，您需要对所有三个元素应用特定的样式:<u>, <li>和<a>.您在样式表文件中编写它们的类型选择器，以便其中的属性可以自动应用到这三个元素。样式表文件可能如下所示:
style hover . CSS
ul {
width: 200px;
}
ul li ul {
list-style-type:none;
margin: 5;
width: 200px;
}
a {
display:block;
border-bottom: 1px solid #fff;
text-decoration: none;
background: #00f;
color: #fff;
padding: 0.5em;
}
li {
display:inline;
}
.hover {
background: #000;
}
.hot{
text-decoration:underline;
}
下面的 jQuery 代码显示了按下访问键或悬停时菜单项的信息。此外，悬停的菜单项通过应用某些样式规则来突出显示。
导航 jq.js
$(document).ready(function() {
$('.web').hide();
$('.prog').hide();
$('.rdbms').hide();
$('body').keypress(function(event){
if(String.fromCharCode(event.keyCode)=="w" || String.fromCharCode(event.keyCode)=="W")
{
$('#webd').hover();
}
if(String.fromCharCode(event.keyCode)=="p" || String.fromCharCode(event.keyCode)=="P")
{
$('#pgmng').hover();
}
if(String.fromCharCode(event.keyCode)=="r" || String.fromCharCode(event.keyCode)=="R")
{
$('#datab').hover();
}
});
$('#webd').hover(function(event){
$('.web').show();
$('.prog').hide();
$('.rdbms').hide();
$('#webd').addClass('hover');
}, function(){
$('#webd').removeClass('hover');
});
$('#pgmng').hover(function(event){
$('.web').hide();
$('.prog').show();
$('.rdbms').hide();
$('#pgmng').addClass('hover');
}, function(){
$('#pgmng').removeClass('hover');
});
$('#datab').hover(function(event){
$('.web').hide();
$('.prog').hide();
$('.rdbms').show();
$('#datab').addClass('hover');
}, function(){
$('#datab').removeClass('hover');
});
});
它是如何工作的
在 HTML 文件中，注意锚元素的第一个字符被突出显示，并作为访问键。因此，锚元素 Web Development 的访问键被设置为字符 W，这样只需按下字符 W(或 W)就可以直接访问该菜单项。为了让用户知道 w 是访问键，需要给它加下划线。为了给菜单项 Web Development 的 W 加下划线，您将它嵌套在 span 元素中，并将类名hot分配给 span 元素，以便在样式表文件中识别它。类似地，您希望表示为访问键的所有字符都嵌套在类hot的 span 元素中。
此外，要使菜单显示在左侧，内容显示在右侧，可以制作一个表格，将菜单放在表格的第一列，将包含相关菜单项信息的段落放在表格的第二列。
在样式表文件中，类型选择器ul包含设置为200px的width属性，以定义菜单标题书籍的宽度。类型选择器ul li ul应用于菜单项。它包含设置为值none的list-style-type属性，以从无序列表元素中移除传统的项目符号。margin属性被设置为5以使菜单项与菜单标题相比显得有点缩进。将width属性设置为200px来定义菜单项的宽度，以容纳所有内容。
类型选择器a包含设置为值block的显示属性，以使锚元素显示为一个块，而不是单个元素。将border-bottom属性设置为值1px solid #fff，使一个纯白的 1px 边框出现在每个锚元素的下面(作为分隔符)。将text-decoration属性设置为none，以移除通常出现在超链接下方的传统下划线。所有锚定元素的背景色设置为蓝色，前景色设置为白色。将padding属性设置为.5em(即默认字体大小的 50%)来定义锚文本与其边框之间的间距。
类型选择器li被设置为inline以移除列表项之间的任何空白。
CSS 类.hover包含背景属性，当用户点击菜单项(锚元素)时，将它的背景颜色设置为黑色。
CSS 类.hot包含设置为underline的text-decorate属性，以使每个菜单项的所有访问字符(嵌套在类hot的 span 元素中)显示为下划线。
在 jQuery 代码中，最初所有三个段落元素都是隐藏的，因为您希望仅在按下任何访问键或悬停在任何菜单项上时才显示相关信息。您还可以在 HTML 文件的主体上附加一个 keypress 事件，以检测是否按下了任何键。如果发生任何按键事件，您可以使用条件语句来检查按下的键是否是下列字符中的任何一个:W、W、P、P、r 或 r。如果按下了上述任何一个字符，您将调用相应锚元素上的悬停事件。因此，如果按下字符 W 或 W，就会调用锚元素Web Development(id 为webd的锚元素)上的悬停事件来显示相关信息。您还可以将悬停事件附加到所有三个菜单项。您知道悬停事件包括两个事件处理函数。在悬停事件的第一个事件处理函数(当该菜单项被悬停时执行)中，您将包含相关信息的段落设置为visible模式，显示所需的信息。您隐藏了其余的段落元素。此外，将样式规则.hover(在样式表中定义)中定义的属性应用于悬停的菜单项以高亮显示它，并删除悬停事件的第二个事件处理函数中的hover样式规则，当鼠标指针离开菜单项时执行该函数。
在执行时，三个菜单项中的每一个都会显示出它们各自的访问键(以下划线突出显示)，如图 5-5 所示。当按下访问键或悬停在菜单项上时，将显示与之相关的信息，如图 5-4 所示。
图 5-5
访问键显示为下划线的菜单项
5.5 右键单击时创建上下文菜单
问题
你想显示一段文字，当你右击它时，你想在屏幕上出现一个上下文菜单。此外，您希望上下文菜单的菜单项具有悬停效果(即，当鼠标指针移动到菜单项上时，菜单项会高亮显示)。按下 Esc 键时，您希望上下文菜单消失。
解决办法
制作一个 HTML 文件，包含一个段落元素和一个无序的菜单列表。无序列表的列表项表示菜单标题和菜单项。菜单项以嵌套在列表项中的锚元素的形式编写。锚元素指向一个名为 http://example.com 的假想网站，如果点击任何菜单项，用户都会被导航到这个网站。HTML 文件可能如下所示:
Contextrightclick.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="stylehover.css" type="text/css" media="screen" />
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="contextrightjq.js" type="text/javascript"></script>
</head>
<body oncontextmenu="return false">
<p class="info">
Books are the world of information. As said the books are the best friends. A wise man always has a library of several books</p>
<ul id="contextmenu">
<li><a href="http://example.com">Books</a>
<ul>
<li><a href="http://example.com">Web Development</a></li>
<li><a href="http://example.com">Programming</a></li>
<li><a href="http://example.com">RDBMS</a></li>
</ul>
</li>
</ul>
</body>
</html>
您需要在样式表中定义一些样式规则，使无序列表具有菜单的形状，并且在鼠标指针悬停在菜单项上时突出显示菜单项。样式表中的样式规则可能如下所示:
style hover . CSS
ul {
width: 200px;
}
ul li ul {
list-style-type:none;
margin: 5;
width: 200px;
}
a {
display:block;
border-bottom: 1px solid #fff;
text-decoration: none;
background: #00f;
color: #fff;
padding: 0.5em;
}
li {
display:inline;
}
.hover {
background: #000;
}
最初隐藏菜单并在用户在段落元素上单击鼠标右键时显示菜单的 jQuery 代码如下所示。当按下 Esc 键时，jQuery 代码还会使上下文菜单消失。
context tjq . js的缩写形式
$(document).ready(function() {
$('#contextmenu').hide();
$('.info').mousedown(function(event){
if(event.button==2){
$('#contextmenu').show();
$('#contextmenu').css({'position': 'absolute', 'left':event.screenX,
'top':event.screenY-70});
}
});
$('a').hover(function(event){
$(this).addClass('hover');
},function(){
$(this).removeClass('hover');
});
$('body').keypress(function(event){
if(event.keyCode==27)
{
$('#contextmenu').hide();
}
});
});
它是如何工作的
显示上下文菜单时的常见问题是，当您右键单击段落元素以显示上下文菜单时，浏览器的上下文菜单也会与您的上下文菜单一起作为默认菜单出现。为了禁用默认的浏览器上下文菜单，在 body 元素中使用属性oncontextmenu="return false"。paragraph 元素被赋予一个类名info，以便在选择器的帮助下在 jQuery 中访问它。用于显示上下文菜单的无序列表被分配了 id contextmenu。您可以看到无序列表的第一个列表项表示文本 Books (它将作为菜单标题)。这个列表项本身将包含一个无序列表，它将代表菜单项。
在样式表文件中，类型选择器ul包含设置为200px的width属性，以定义菜单标题书籍的宽度。类型选择器ul li ul应用于菜单项。它包含设置为none的list-style-type属性，以从无序列表元素中移除传统的项目符号。margin属性被设置为5以使菜单项与菜单标题相比显得有点缩进。将width属性设置为200px来定义菜单项的宽度，以容纳所有内容。
类型选择器a包含设置为block的显示属性，以使锚元素显示为一个块，而不是一个单独的元素。将border-bottom属性设置为1px solid #fff以使 1px 的纯白边框出现在每个锚点元素的下方(作为分隔符)。将text-decoration属性设置为none，以移除通常出现在超链接下方的传统下划线。所有锚定元素的背景色设置为蓝色，前景色设置为白色。将padding属性设置为.5em(即默认字体大小的 50%)来定义锚文本与其边框之间的间距。
类型选择器li被设置为inline以移除列表项之间的任何空白。
CSS 类.hover包含背景属性，当用户点击菜单项(锚元素)时，将它的背景颜色设置为黑色。
在 jQuery 代码中，首先隐藏由 id contextmenu的无序列表表示的菜单。
然后检查鼠标按钮是否按在了类info的段落元素上。回想一下，您已经将类名info分配给了 HTML 文件中的段落元素。
如果已经按下，检查按下的鼠标按钮是否是鼠标右键。event对象的button属性包含按下鼠标左键时的值1和按下鼠标右键时的值2。
如果是鼠标右键，就可以在屏幕上看到由 id contextmenu的无序列表元素表示的菜单。
使用css()方法，让上下文菜单出现在由代表鼠标按钮被按下的位置的event对象的screenX和screenY属性指定的位置。您从存储在screenY属性中的坐标值中减去 70，使上下文菜单看起来更靠近段落(也就是说，您减少了菜单位置和段落之间的距离)。
此外，将hover()事件附加到锚元素(菜单和菜单项)。当鼠标指针移动到任何菜单项上时，将在样式表文件中定义的样式规则.hover中定义的样式属性应用于锚元素(使菜单项的背景颜色变成黑色)。样式规则.hover中的样式属性将从锚元素中移除，使其保持鼠标指针离开菜单项时的初始状态。
最后，将一个 keypress 事件附加到 body 元素，以检测是否按下了任何键。如果按下任何一个键，就检查是不是 Esc 键(Esc 键的键码是 27)。如果按下 Esc 键，将隐藏上下文菜单。
在段落文本上单击鼠标右键，屏幕上将出现上下文菜单。菜单中的菜单项会有悬停效果，如图 5-6 所示。
图 5-6
右键单击段落文本时会出现上下文菜单
5.6 创建两个带有独立菜单项的菜单
问题
您希望显示两个菜单，每个菜单都有各自的菜单项。您还希望在菜单及其项目上有悬停效果。
解决办法
创建一个 HTML 文件来表示两个菜单标题及其菜单项。您可以借助无序列表来做到这一点，一个列表嵌套在另一个列表中。
创建.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="styletwomenu.css" type="text/css" media="screen" />
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="twomenujq.js" type="text/javascript"></script>
</head>
<body>
<ul id="dropdownmenu">
<li class="mainmenu">
<a href="example.com">Books</a>
<ul>
<li><a href="example.com">Web Development</a></li>
<li><a href="example.com">Programming</a></li>
<li><a href="example.com">RDBMS</a></li>
</ul>
</li>
<li class="mainmenu">
<a href="example.com">Movies</a>
<ul>
<li><a href="example.com">Latest Movie Trailers</a></li>
<li><a href="example.com">Movie Reviews</a></li>
<li><a href="example.com">Celebrity Interviews</a></li>
</ul>
</li>
</ul>
</body>
</html>
您可以在这段代码中看到一个 id 为dropdownmenu的无序列表，其中有两个列表项被分配了类名mainmenu。这两个列表项代表菜单书籍和电影。这两个列表项依次由无序列表组成，每个列表包含三个元素。 Books 菜单有三个列表项: Web 开发、编程和 RDBMS 。类似地，列表项电影由三个元素的无序列表组成:最新电影预告片、电影评论和名人访谈。
要将样式应用于无序列表，使它们具有两个菜单和菜单项的外观，请参见下面的样式表文件:
style menu . CSS
.mainmenu {float:left; width:220px; list-style-type:none; margin-right:5px;}
li.mainmenu ul {margin: 0; }
a {width: 200px;display:block; text-decoration: none; background: #00f; color: #fff;padding: 0.5em; border-bottom: 1px solid #fff; }
ul#dropdownmenu li a:hover { background: #000;}
ul{ margin: 0; list-style: none; }
当鼠标指针移动到相应的菜单标题上时，显示两个菜单项中的一个菜单项的 jQuery 代码如下:
你的菜单 q.js
$(document).ready(function(){
$('li.mainmenu').hover(
function() {
$('ul', this).show();
},
function() {
$('ul', this).hide();
}
);
});
它是如何工作的
在样式表文件中，类选择器.mainmenu包含自动应用于两个菜单标题 Books 和 Movies 的属性。它包含设置为left的float属性，以使第一个菜单标题在浏览器窗口中向左浮动(为第二个菜单标题在其右侧显示留出空间)。将width属性设置为220px，使菜单标题的宽度为 220 像素。margin–right属性被设置为5px以在两个菜单标题之间创建 5px 的间距。
类型选择器li.mainmenu ul包含自动应用于无序列表的样式属性，该列表嵌套在类.mainmenu的列表项中(即，作为带有文本书籍和电影的列表项的菜单项的无序列表)。它包含的属性是一个设置为 0 值的margin属性，用于制作无序列表的列表项(菜单项如 Web 开发、编程等)。在这两个菜单标题中，书籍和书籍一个接一个出现(左侧没有任何层次间隙)。
类型选择器a包含应用于所有锚元素的属性(即，应用于菜单以及所有菜单项)。将width属性设置为200px来指定每个菜单项的宽度。将display属性设置为block以使锚元素作为一个独立的块，text-decoration属性设置为none以从超链接中移除传统的下划线，background属性将菜单标题和菜单项的背景色设置为蓝色，color属性将菜单(菜单标题和菜单项)上的文本的前景色设置为白色。将padding属性设置为.5em以在菜单文本及其边框之间创建默认字体大小的 50%的间距。将border-bottom属性设置为1px solid #fff以在每个锚元素下创建一条 1px 的白色实线，作为菜单项之间的分隔符。
类型选择器ul#dropdownmenu li a:hover包含样式属性，当鼠标悬停在菜单标题和菜单项上时，该属性将自动应用于它们。它包含 background 属性，当鼠标指针移动到菜单标题和菜单项上时，该属性将它们的背景色更改为黑色。
您可以在 jQuery 代码中看到，当鼠标指针移动到类mainmenu的列表项上时(即，在任何菜单标题上)，将显示嵌套在该列表项中的无序列表(包含菜单项)。将鼠标指针从菜单标题上移开会使其菜单项不可见，因为该列表项的无序列表被设置为隐藏模式。
最初会出现两个菜单标题，如图 5-7 所示。
图 5-7
两个菜单标题，书籍和电影
将鼠标指针移动到菜单标题 Books 上，其菜单项(嵌套在带有文本 Books 的列表项内的无序列表)将显示如图 5-8 所示。
图 5-8
“书籍”菜单的菜单项以悬停效果显示
将鼠标指针移动到菜单标题电影上，其菜单项将被显示，菜单标题书籍的菜单项将不可见，如图 5-9 所示。
图 5-9
具有悬停效果的电影菜单的菜单项
5.7 创建两个带有子菜单项的菜单
问题
您希望显示两个菜单，每个菜单都有菜单项，并将子菜单项附加到几个菜单项。您还希望在菜单、菜单项和子菜单项上有悬停效果。
解决办法
创建一个 HTML 文件来表示两个菜单标题及其菜单项。您还将定义子菜单项。您可以借助无序列表来做到这一点，一个列表嵌套在另一个列表中。HTML 文件可能如下所示:
Twomenuwithsub.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="styletwomenusub.css" type="text/css" media="screen" />
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="twomenuwithsubjq.js" type="text/javascript"></script>
</head>
<body>
<ul class="dropdown">
<li><a href="http://example.com">Books</a>
<ul>
<li><a href="http://example.com">Programming</a></li>
<li><a href="http://example.com">Web Development</a>
<ul>
<li><a href="http://example.com">.Net</a></li>
<li><a href="http://example.com">JSP</a></li>
</ul>
</li>
<li><a href="http://example.com">RDBMS</a></li>
<li><a href="http://example.com">Web Services</a></li>
<li><a href="http://example.com">Open Source</a></li>
</ul>
</li>
<li><a href="http://example.com">Movies</a>
<ul>
<li><a href="http://example.com">Movie Reviews</a></li>
<li><a href="http://example.com">Celebrity Interviews</a></li>
<li><a href="http://example.com">Latest Hollywood Movies</a>
<ul>
<li><a href="http://example.com">Arnold Schwarzenegger</a></li>
<li><a href="http://example.com">Sylvester Stallone</a></li>
<li><a href="http://example.com">Bruce Willis</a></li>
</ul>
</li>
<li><a href="http://example.com">Action Movies</a>
<ul>
<li><a href="http://example.com">Casino Royale</a></li>
<li><a href="http://example.com">Rambo III</a></li>
</ul>
</li>
<li><a href="http://example.com">Comedy Movies</a></li>
</ul>
</li>
</ul>
</body>
</html>
要分配给无序列表以使其以菜单标题、菜单项和子菜单项的形式出现的样式属性如下:
styletwmenusub . CSS
a{ text-decoration: none; color:#000;}
ul{margin:0; list-style: none; }
ul.dropdown li {float: left; background: cyan; }
ul.dropdown a:hover {background: #0f0; color: #00f; }
ul.dropdown li a {display: block; padding: 4px; border-right: 1px solid #000; }
ul.dropdown ul {width:150px; visibility: hidden; position: absolute; }
ul.dropdown ul li {background: yellow; border-bottom: 1px solid #000; width:100%; }
ul.dropdown ul li a { border-right: none; width:100%; }
ul.dropdown ul ul {left:100%; width:100%;top: 0; }
.hover {position: relative; }
用于使菜单项和子菜单出现在屏幕上的 jQuery 代码如下:
Twomenuwithsubjq.js
$(document).ready(function(){
$("ul.dropdown li").hover(function(){
$(this).addClass("hover");
$('ul:first',this).css('visibility', 'visible');
}, function(){
$(this).removeClass("hover");
$('ul:first',this).css('visibility', 'hidden');
});
$("ul.dropdown li ul li:has(ul)").find("a:first").append(" >");
});
它是如何工作的
在 HTML 文件中，创建了一个无序列表，并为其分配了类名dropdown。它包含两个列表项，文本指定为书籍和电影。这两个列表项依次包含被赋予类名submenu的无序列表项。书籍列表项的无序列表包含五个列表项:编程、 Web 开发、RDBMS、Web 服务、和开源。在这些列表项中， Web 开发包含一个无序列表来表示名为的子菜单项。Net 和 JSP 。
类似地，包含在电影列表项中的无序列表包含四个列表项:电影评论、名人访谈、最新好莱坞电影和动作片。在这些列表项中，最新好莱坞电影包含一个无序列表来表示名为阿诺德·施瓦辛格、西尔维斯特·史泰龙和布鲁斯·威利斯的子菜单项。同样，列表项动作电影包含一个无序列表来表示子菜单项皇家赌场、兰博 III 和喜剧电影。
在样式表文件中，类型选择器a将属性text-decoration设置为值none，以从所有锚元素(即，从菜单标题、菜单项和子菜单项)中移除传统下划线，并将color属性设置为黑色，以使所有菜单上的文本以黑色显示。
类型选择器ul包含设置为0的margin属性，以移除列表项左侧的层次边距，并使菜单项一个接一个地出现。属性list-style被设置为值none,以从无序列表中移除传统的项目符号。
在类型选择器ul.dropdown li中定义的样式被自动应用到属于类别dropdown的无序列表的列表项目中(即，应用到菜单标题书籍和电影)。将float属性设置为left以使一个菜单标题出现在浏览器窗口的左侧，为下一个菜单标题出现在其右侧创造空间。背景颜色设置为青色。
属性选择器ul.dropdown a:hover包含 background 和 color 属性，用于设置悬停在上面的锚元素(所有菜单项)的背景色和前景色，分别为绿色和蓝色。
类型选择器ul.dropdown li a包含样式属性，这些属性将应用于代表菜单标题书籍和电影的锚元素。它包含设置为block的display属性，以使锚元素作为独立的块元素，设置为4px的padding属性，以在菜单文本及其边框之间创建一些间距，以及设置为1px solid #000的border-right属性，以在每个菜单标题的右侧创建 1px 的黑色边框(以单独显示它们)。
类型选择器ul.dropdown ul包含将应用于包含菜单项的无序列表的样式。设置为150px的width属性使每个菜单项的宽度为 150px，设置为hidden的visibility属性隐藏整个菜单项块，仅当菜单标题悬停时才可见。设置为absolute的position属性使菜单项块出现在它们各自的菜单标题下。
类型选择器ul.dropdown ul li包含将应用于所有代表菜单项的列表项的属性。background属性将所有菜单项和子菜单项的背景色设置为黄色，border-bottom属性设置为1px solid #000以使每个菜单项下面出现一个 1px 的黑色边框来分隔它们。
类型选择器ul.dropdown ul li a包含应用于代表菜单项和子菜单项的所有锚元素的属性。将border-right属性设置为none来移除菜单项右边的边框，因为您将在菜单项的右边显示子菜单项。将width属性设置为100%,使锚元素占据所有分配的 200 像素宽度。
类型选择器ul.dropdown ul ul应用于表示子菜单项的无序列表。将left属性设置为100%，以使子菜单项出现在距离左侧 100%的位置(即，在菜单项的宽度之后)，否则它将与菜单项重叠。将top属性设置为0,使子菜单项与正在显示的子菜单项的距离(从浏览器的上边框)相同
样式规则.hover；通过 jQuery 代码应用于列表项，使子菜单项出现在相对于它们的菜单项的位置。
在开始理解 jQuery 代码之前，让我们先了解一下:first是做什么的，因为它用在了上面的代码中。
:首先
自定义选择器返回指定元素的第一个实例。
示例:
$('p:first)
将返回第一个段落元素。
在上面的 jQuery 代码中，当鼠标指针移动到任何一个菜单标题、书籍或电影(id 为dropdown的无序列表的列表项)上时，样式表文件中定义的 CSS 类.hover的属性将应用于它，并且第一个无序列表(相应菜单标题的菜单项)也将处于可见模式。类似地，当任何菜单项被悬停时(具有子菜单项形式的无序列表)，该无序列表也将被显示(即，子菜单项将被显示)。当鼠标指针离开菜单项或菜单标题时，菜单项或子菜单项分别被隐藏。此外，对于所有嵌套了无序列表的列表项，符号>被附加到它的锚元素上，以表示它附加了子菜单项。
最初，两个菜单标题书籍和电影，如图 5-10 所示。
图 5-10
菜单标题:书籍和电影
将鼠标指针移动到菜单标题书籍上，其菜单项显示如图 5-11 所示。
图 5-11
“书籍”菜单的菜单项(包含子菜单项的菜单项显示有一个>符号)
将鼠标指针移动到带有子菜单的菜单项上，将显示如图 5-12 所示的子菜单项。
图 5-12
突出显示的“书籍”菜单的子菜单项
同样的事情也适用于第二个菜单标题，电影。当鼠标悬停在它上面时，它的菜单项将变得可见。同样，当鼠标悬停在该菜单项上时，会显示该菜单项的子菜单项，如图 5-13 所示。
图 5-13
高亮显示的“电影”菜单的子菜单项
5.8 制作手风琴菜单
问题
您希望以折叠菜单的形式显示两个菜单(即，通过使用向上滑动或向下滑动技术，悬停在其上的菜单的菜单项将变得可见，而其他菜单标题的菜单项将变得不可见)。您还希望当鼠标指针离开两个菜单时，菜单项消失。
解决办法
让我们创建一个 HTML 文件来表示两个菜单标题及其菜单项。您可以借助一个无序列表来做到这一点，一个列表嵌套在另一个列表中。HTML 文件可能如下所示:
make gation . html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="styleaccordion.css" type="text/css" media="screen" />
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="makingaccordionjq.js" type="text/javascript"></script>
</head>
<body>
<p class="menus">Books</p>
<div class="menuitems">
<ul>
<li><a href="example.com">Web Development</a></li>
<li><a href="example.com">Programming</a></li>
<li><a href="example.com">RDBMS</a></li>
</ul>
</div>
<p class="menus">Movies</p>
<div class="menuitems">
<ul>
<li><a href="example.com">Latest Movie Trailers</a></li>
<li><a href="example.com">Movie Reviews</a></li>
<li><a href="example.com">Celebrity Interviews</a></li>
</ul>
</div>
</body>
</html>
要将这些样式应用到上面的无序列表中，使它们具有可折叠菜单的外观，请使用以下文件:
style agreement . CSS
.menus{
width: 200px;
padding:5px;
margin:1px;
font-weight:bold;
background-color: #0ff;
}
.menuitems{
display:none;
}
a{
display:block;
border-bottom: 1px solid #fff;
text-decoration: none;
background: #00f;
color: #fff;
padding:10px;
font-weight:bold;
width: 190px;
}
.menuitems a:hover {
background: #000;
}
li {
display:inline;
}
ul{display:inline;}
jQuery 代码显示悬停菜单标题的菜单项，并以滑动效果隐藏另一个菜单标题(鼠标指针移开的位置)的菜单项，如下所示:
make gacucionijq . js
$(document).ready(function() {
$('p.menus').mouseout(function(){
$("div.menuitems'").slideUp("slow");
$('p').css({backgroundImage:""});
});
$('p.menus').mouseover(function(){
$(this).css({'background-image':"url(down.png)", 'background-repeat':"no-repeat",
'background-position':"right"}).next("div.menuitems").slideDown(500)
.siblings("div.menuitems").slideUp("slow");
$(this).siblings().css({backgroundImage:""});
});
});
它是如何工作的
在 HTML 文件中，有两个类menus的段落元素，文本书籍和电影来表示两个菜单标题。每个段落元素后面跟着一个menuitems类的div元素，该元素包含一个无序列表，其中三个列表项分别代表每个菜单标题的菜单项。无序列表(text Books 的 paragraph 元素下面)有三个列表项: Web 开发、编程、 RDBMS 。类似地，名为电影的段落元素下面的无序列表有三个列表项:最新电影预告片、电影评论和名人访谈。
在样式表文件中，在类选择器.menus中定义的属性将自动应用于类.menu的段落元素，以赋予它们菜单标题的形状。将width属性设置为200px以将菜单标题定义为 200 像素宽，将padding属性设置为5px以在边框和菜单文本之间保留一些空间。margin属性被设置为1px以在两个菜单标题之间保持 1px 的间距。通过将代码#0ff应用于background-color属性，将font-weight属性设置为bold以使菜单标题以粗体显示，并将菜单标题的背景设置为青色。
类选择器.menuitems中的属性将自动应用于类menuitems的div元素。它包含设置为none的display属性，用于最初隐藏菜单项。
在类型选择器a中定义的属性将应用于所有锚元素(所有菜单项)。将display属性设置为block,使锚元素充当一个块。将border bottom属性设置为1px solid #fff,在每个锚元素下创建一条 1px 的白色实线来分隔所有菜单项。text-decoration属性被设置为none以从锚元素中移除传统的下划线。background 和 color 属性用于将菜单项的背景色和前景色分别设置为蓝色和白色。将padding属性设置为10px来定义菜单项文本和边框之间的间距。将font-weight属性设置为bold以使菜单项以粗体显示，将width属性设置为190px以使菜单项的宽度为 190px。
当鼠标指针悬停在菜单项上时，属性选择器.menuitems a:hover中定义的属性将自动应用于嵌套在类menu element的div元素中的锚元素。它包含使悬停菜单项的背景颜色变成黑色的背景属性。
类型选择器li包含设置为inline的 display 属性，用于移除列表项之间的任何间距。类似地，类型选择器ul将 display 属性设置为inline，以移除无序列表上下的空格
上述 jQuery 代码语句的含义如下:
您将 mouseout 事件附加到类menus的段落元素上(即，附加到菜单标题书籍和电影)。这样做的原因是，如果鼠标指针离开两个菜单，您希望隐藏菜单项。
然后将 mouseover 事件附加到类menus的段落元素上(即，附加到菜单标题书籍和电影)。
然后使用.css()方法显示一个指向悬停菜单标题的向下指针的图像(显示当前它处于展开模式)。将background-repeat属性设置为no-repeat以使其出现一次，将background-position属性设置为right以使向下指针出现在菜单标题的右端。
下一个元素(匹配选择器)的内容只不过是类menuitems的一个div元素(包含被悬停的段落元素的菜单项)，通过下滑效果变得可见，而其匹配选择器的兄弟元素(即另一个菜单标题的菜单项，如类menuitems的div元素)通过上滑效果变得不可见。
最后，从失去焦点的菜单项中移除背景图像。
在执行上述 jQuery 代码时，菜单标题将一个接一个地出现，如图 5-14 所示。
图 5-14
两个菜单标题，书籍和电影
将鼠标悬停在第一个菜单标题 Books 上，其菜单项将以下拉效果显示，如图 5-15 所示。您可以看到菜单标题上有一个向下的指针，表示它现在处于展开模式。此外，这些菜单项具有悬停效果(即，当鼠标指针移过它们时，它们会高亮显示)。
图 5-15
“书籍”菜单的菜单项以下拉效果出现
同样，将鼠标指针移动到另一个菜单标题上，如电影，你会看到它的菜单项出现，书籍菜单的菜单项消失，并带有上滑效果，如图 5-16 所示。
图 5-16
“电影”菜单的菜单项以下拉效果出现
5.9 制作动态可视化菜单
问题
你想制作一个弧形的标签导航菜单，它有三个菜单，分别叫做书籍、电影和音乐。您希望菜单选项卡具有悬停效果(当鼠标移动到它们上面时突出显示)。您还需要鼠标悬停时显示的菜单选项卡的相关信息。
解决办法
创建一个 HTML 文件来定义锚元素，文本书籍、电影和音乐嵌套在类buttons的 span 元素中。锚元素分别被赋予 idbooksbutton、moviesbutton和musicbutton(通过 jQuery 代码访问)，并指向一个名为example.com的假想网站，如果菜单项被选中，用户将被发送到该网站。HTML 文件如下所示:
dynamic display menu . html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="stylevisualmenu.css" type="text/css" media="screen" />
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="visualmenujq.js" type="text/javascript"></script>
</head>
<body>
<span class="buttons"><a href="example.com" id="booksbutton"> Books </a></span>
<span class="buttons"><a href="example.com" id="moviesbutton"> Movies </a> </span>
<span class="buttons"><a href="example.com" id="musicbutton"> Music </a></span><br><br>
<p class="books">Books of different subjects available at reasonable prices. Ranging from web development, programming languages and text books all are available at heavy discount. Shipping is free. Also available in stock the popular Magazines, E-books and Tutorial CDs at affordable prices.</p>
<p class="movies">Find new movie reviews & latest hollywood movie news. Includes new movie trailers, latest hollywood releases, movie showtimes, entertainment news, celebrity interviews etc. Also find Hollywood actress, actor, videos biography, filmography, photos, wallpapers, music, jokes live tv channels at your doorsteps</p>
<p class="music">Find music videos, internet radio, music downloads and all the latest music news and information. We have a large collection of music and songs classified by type, language and region. All downloads are streamed through RealAudio. You can also watch free music videos, tune in to AOL Radio, and search for your favorite music artists.</p>
</body>
</html>
在 span 元素下面，您会发现三个段落元素，它们有三个不同的类名，分别被指定为books、movies和music。这些段落包含与三个菜单选项卡相关的信息。
对于这个解决方案，您需要两个选项卡图像。一个选项卡图像用于菜单选项卡的左侧，使其具有曲线斜率，如图 5-17 所示。
图 5-17
菜单选项卡左侧的图像
左侧图像以文件名tabl.jpg保存，菜单页签右侧图像以文件名tabr.jpg保存，如图 5-18 所示。
图 5-18
菜单选项卡右侧的图像
图 5-17 和 5-18 中的两幅图像为黑色。您还需要同样的两个绿色图像(将在悬停在菜单选项卡上时使用)。分别如图 5-17 和 5-18 的左右斜率为绿色的两幅图像保存在tablselect.jpg和tabrselect.jpg文件中。
样式表文件style.css包含几个样式规则，使 span 元素显示为选项卡导航菜单。style.css 文件如下所示:
visual menu . CSS
.buttons{
background-image:url(tabl.jpg);
background-repeat:no-repeat;
background-position: left;
background-color:#000;
width: 80px;
float: left;
text-align: center;
}
a{
display:block;
background-image:url(tabr.jpg);
background-repeat:no-repeat;
background-position: right;
padding:3px;
text-decoration:none;
font-weight:bold;
color:#fff;
}
.rightselectfig{
display:block;
background-image:url(tabrselect.jpg);
background-repeat:no-repeat;
background-position: right;
padding:3px;
text-decoration:none;
font-weight:bold;
color:#fff;
}
.leftselectfig{
background-image:url(tablselect.jpg);
background-repeat:no-repeat;
background-position: left;
background-color:#0f0;
width: 80px;
float: left;
text-align: center;
}
将悬停效果应用于菜单选项卡并显示其相关信息的 jQuery 代码如下:
视觉菜单.js
$(document).ready(function() {
$('.books').hide();
$('.movies').hide();
$('.music').hide();
$('a').hover(
function(event){
$(this).addClass('rightselectfig');
$(this).parent().addClass('leftselectfig');
},
function(){
$(this).removeClass('rightselectfig');
$(this).parent().removeClass('leftselectfig');
}
);
$('#booksbutton').click(function(event){
event.preventDefault();
$('.books').show('slow');
$('.movies').hide();
$('.music').hide();
});
$('#moviesbutton').click(function(event){
event.preventDefault();
$('.movies').show('slow');
$('.books').hide();
$('.music').hide();
});
$('#musicbutton').click(function(event){
event.preventDefault();
$('.music').show('slow');
$('.books').hide();
$('.movies').hide();
});
});
它是如何工作的
类选择器.buttons包含将自动应用于类buttons的 span 元素的样式属性(即，应用于所有三个文本:书籍、电影和音乐)。将背景图像属性设置为url(tabl.jpg)使图 5-17 所示的图像与菜单文本一起出现，将background repeat属性设置为no-repeat使图像只出现一次，将background-position属性设置为left使图像出现在菜单文本的左侧，为其指定左侧的坡度。
菜单选项卡的background颜色设置为black，分配给菜单选项卡的width为80px。将float属性设置为left以使菜单选项卡出现在浏览器窗口的左侧，并在其右侧留出空间(以便其他菜单选项卡出现在右侧)。将text-align属性设置为center，使菜单文本出现在定义的 80px 宽度的中心。
类型选择器a中定义的属性将自动应用于锚元素。将display属性设置为block以使锚元素充当块元素，而不是单个元素。将background-image属性设置为tabr.jpg以应用菜单标签右侧图 5-18 所示的图像。将background –repeat属性设置为no-repeat以使图像仅出现一次。将background-position设置为right以使图像出现在右侧，并在其右侧分配一个斜坡形状。padding属性被设置为3px以使菜单文本与其边框之间的间距为 3px。将text-decoration属性设置为none以移除通常出现在锚元素下方的传统下划线。将font-weight属性设置为bold以使菜单文本以粗体显示，将color设置为white以使菜单文本以白色显示。
风格法则。rightselectfig包含当鼠标指针移动到锚元素上时将应用于它们的属性。它包含设置为block的display属性，以使锚元素充当块元素而不是单个元素。将background-image属性设置为tabrselect.jpg以将图 5-18 所示的图像应用于菜单标签右侧的绿色。将background–repeat属性设置为no-repeat以使图像仅出现一次。将background-position设置为right以使图像出现在右侧，并在其右侧分配一个斜坡形状。padding属性被设置为3px以使菜单文本与其边框之间的间距为 3px。将text-decoration属性设置为none以移除通常出现在锚元素下方的传统下划线。将font-weight属性设置为bold以使菜单文本以粗体显示，将color设置为white以使菜单文本以白色显示。
样式规则.leftselectfig包含当鼠标指针移动到菜单标签按钮上时将应用于它们的属性。背景图像属性设置为url(tablselect.jpg)使图 5-17 所示的绿色图像与菜单文本一起出现。将background-repeat属性设置为no-repeat以使图像仅出现一次，将background-position属性设置为left以使图像出现在菜单文本的左侧，并在左侧为其指定一个坡度。菜单标签的background颜色被设置为green来给它一个悬停的效果。分配给菜单选项卡的width是80px。将float属性设置为left以使菜单选项卡出现在浏览器窗口的左侧，并在其右侧留出空间(以便其他菜单选项卡出现在右侧)。将text-align属性设置为center，使菜单文本出现在定义的 80px 宽度的中心。
在 jQuery 代码中，类books、movies和music的所有段落元素都是不可见的，因为只有当您将鼠标悬停在相应的菜单选项卡上时才会显示它们。然后，将悬停事件附加到锚元素，并将样式规则.rightselectfig中定义的属性应用到菜单选项卡(正被悬停在其上),对其应用绿色，并在菜单选项卡的右侧添加图像(tabrselect.jpg)。你用同样的方法处理左侧。
当鼠标不再停留在选项卡上时，您删除样式规则.rightselectfig和.leftselectfig的样式属性，使菜单选项卡显示为鼠标离开菜单选项卡时的初始状态。
接下来是选项卡的点击事件。在这些情况下，您可以防止表单被提交到服务器，或者在单击菜单选项卡时被导航到目标网站。然后显示与被单击的选项卡相关联的信息，并隐藏与其他选项卡相关联的段落元素的内容。
当你将鼠标悬停在书籍菜单标签上时，你会发现它的背景颜色变为绿色，并且还会显示与书籍相关的信息，如图 5-19 所示。
图 5-19
悬停在菜单选项卡上时，该选项卡会高亮显示，并显示相应的信息
为了给显示的文本提供动画效果，可以使用slideDown()和slideUp()方法，而不是简单的show()和hide()方法，如下面的 jQuery 代码所示:
menu slide jq . js
$(document).ready(function() {
$('.books').hide();
$('.movies').hide();
$('.music').hide();
$('#booksbutton').mouseover(function(){
$('.books').slideDown('slow');
$('.movies').slideUp('slow');
$('.music').slideUp('slow');
});
$('#moviesbutton').mouseover(function(){
$('.movies').slideDown('slow');
$('.books').slideUp('slow');
$('.music').slideUp('slow');
});
$('#musicbutton').mouseover(function(){
$('.music').slideDown('slow');
$('.books').slideUp('slow');
$('.movies').slideUp('slow');
});
});
5.10 摘要
在本章中，您看到了如何创建不同类型的菜单，如面包屑菜单、上下文菜单、折叠菜单和动态可视菜单。您还了解了如何使用访问键访问菜单项，以及如何制作带有悬停菜单项的菜单。
在下一章，你将学习动画是如何应用于不同的 HTML 元素的。您将学习左右移动图像、操作 jQuery 队列、单击按钮时逐个显示图像、放大图像、单击“read more”链接时显示详细信息，以及使用动画展开和折叠列表。
六、实现动画
在这一章中，你将学习如何将动画应用于不同的 HTML 元素。你将在本章中制作以下食谱:
将图像向右移动，然后向左移动
管理和操作 jQuery 队列
点击“下一个”和“上一个”按钮，逐个显示图像
当鼠标悬停在图像上时放大图像
点击阅读更多信息链接显示详细信息
使用动画展开和折叠列表
6.1 先将图像向右移动，然后向左移动
问题
你有一个图像，你想让它从左到右动画，然后回到原来的位置。
解决办法
以下是显示网页标题、按钮和图像的 HTML 程序:
Animation1.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="animation1style.css" type="text/css" media="screen" />
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="animation1bjq.js" type="text/javascript"></script>
</head>
<body>
<p>We deal with Electronics Products</p>
<button id="anim">Animate Image</button><br/>
<img class="pic" id="pic1" src="chip.jpg" width="200" height="100">
</body>
</html>
您可以在上面的代码中看到，段落元素用于显示文本我们处理电子产品。文本下方是一个标签为动画图像的按钮。为了唯一地识别它，按钮被赋予一个 IDanim。在按钮下方，筹码图像以 200 像素宽和 100 像素高显示。
将图片从左到右动画化，然后返回到原始位置的 jQuery 代码如下:
动画 1jq.js
$(document).ready(function() {
$("button#anim").click( function() {
$("img#pic1").animate({ left: '350px'}, 'slow',
function(){
$("img#pic1").animate({ left: '0px'}, 'slow');
});
});
});
这个 jQuery 代码使用了left属性，所以让我们快速看一下。
左侧属性
它设置 HTML 元素相对于浏览器窗口左边界的位置。有效选项包括
distance:元素定位在 px、cm 等中提到的指定距离。%:元素的距离设置为容器的指定百分比。auto:浏览器从左边界确定元素的位置。这是默认选项。initial:选择默认值作为该元素的值。inherit:该属性的值继承自其父元素。
位置属性
在使用left属性之前，必须设置position属性，因为除非元素被定位，否则 left 属性将不起作用。以下是position属性的有效选项:
absolute/fixed:元素的左边缘将被设置为指定值。relative:元素的左边缘将根据其当前位置进行设置。sticky:视其位置而定，是相对的还是固定的。此选项不会让元素离开屏幕。static:左侧属性不起作用。
它是如何工作的
当点击 ID 为anim的按钮时，ID 为pic1的图像从其当前位置向右缓慢移动，并在浏览器屏幕左边界 350px 处停止(见图 6-1 )。在animate方法的回调函数中(即当图像从左边界到达它的右边目的地 350px 时)，回调函数将执行，它以缓慢的速度将图像向左移动，当图像到达离浏览器屏幕左边界 0px 的距离时将停止。
图 6-1
单击该按钮时，图像向右移动，然后再向左移动
在回调函数中，可以粘贴另一张图片。让我们修改上面的 jQuery 代码，使芯片图像向右移动，移动时其高度和宽度增加，最后芯片图像被替换为笔记本电脑图像。jQuery 文件Animation1jq.js显示了这样做的代码。
动画 1jq.js
$(document).ready(function() {
$("button#anim").click( function() {
$("img#pic1").animate({ left: '350px', width: '400px', height: '350px'}, 'slow',
function(){
$("img#pic1").attr("src", "computer.jpg");
});
});
});
最初将出现如图 6-2(a) 所示的筹码图像和按钮。当点击 ID 为anim的按钮时，ID 为pic1的筹码图像从其当前位置向右移动。芯片图像将显示动画，直到它到达离浏览器屏幕左边界 350 像素的距离。当图像动画时，其宽度会慢慢增加到 400 像素，其高度也会慢慢增加到 350 像素(见图 6-2(b) )。在动画结束时(即当芯片图像变成 400 像素宽和 350 像素高时)，它将通过回调函数被替换为笔记本电脑图像(见图 6-2(c) )。
图 6-2
(a)出现芯片图像和按钮。(b)筹码图像向右移动，其宽度和高度随着移动而增加。(c)芯片映像被笔记本电脑映像取代
6.2 管理和操作 jQuery 队列
问题
对图像执行几种动画方法，这些方法存储在 jQuery 队列中。您可以根据自己的需求操作存储在队列中的方法。
解决办法
显示图像的 HTML 程序如下，您将在该图像上执行不同的动画方法:
Animation2.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="animation2jq.js" type="text/javascript"></script>
</head>
<body>
<img class="pic" id="pic1" src="chip.jpg" width="200" height="100">
</body>
</html>
您可以在上面的程序中看到，显示了一个 200 像素宽、100 像素高的图像。图像被分配类别pic和 ID pic1。
将某些动画任务应用于图像并显示 jQuery 队列长度的 jQuery 代码如下:
动画 2jq.js
$(document).ready(function() {
$("img#pic1")
.animate({ "height" : 300 })
.fadeOut()
.fadeIn()
.animate({ "width" : 400 })
.slideToggle( 3000 )
var n =$("img#pic1").queue( "fx" ).length;
alert("The queue length is "+n);
});
在这个 jQuery 代码中，使用了slideToggle()和queue()方法，所以让我们快速看一下这两个方法。
slideToggle()
顾名思义，slideToggle()方法在所选元素的slideUp()和slideDown()之间切换。如果元素是隐藏的，那么slideDown()方法将执行以使元素可见。类似地，如果元素是可见的，那么slideUp()方法将运行使其不可见。
语法:
speed定义滑动的速度。该参数是可选的，其默认值为 400 毫秒。有效选项为slow、fast和毫秒。easing参数决定动画在不同阶段的速度。以下是有效选项:它使过渡在开始和结束时变慢，但在中间变快。这是默认选项。
linear:它使过渡以恒定的速度发生。
$(selector).slideToggle(speed,easing,callback)
。队列( )
顾名思义，队列包含应该在所选元素上运行的函数。如果需要，可以操作这些功能。队列允许在一个元素上异步执行一系列函数。它基本上是一个按先进先出(FIFO)顺序处理的函数数组。
语法:
$(selector).queue(queue_name)
其中参数queue_name表示队列的名称。默认的 jQuery 队列名是fx.
要检索对 jQuery 队列的引用，可以调用没有函数参数的.queue()方法。
以下方法用于操作队列:
push:用于在队列末尾增加一个功能pop:用于从队列中删除最后一个功能unshift:用于在队列的开头插入一个函数shift:用于从队列的开始处删除一个功能dequeue():当被调用时，这个方法表明你想要移动到队列中的下一个项目(即，你想要从队列中移除顶部的函数并执行它)。clearQueue():该方法删除队列中所有尚未执行的函数。当前正在执行的功能将不起作用。
它是如何工作的
ID 为pic1的图像是动态的(即，其高度将从当前高度缓慢增加，直到达到 300 像素高)。然后图像会慢慢变得不可见，又会慢慢重新出现。此后，图像将显示动画，宽度逐渐增加到 400 像素。然后slideToggle()的方法会让图像慢慢不可见。因为在选中的元素上(即图像上)有五个动作在排队，所以通过警告对话框你得到队列长度为 5，如图 6-3 所示。
图 6-3
“报警”对话框显示队列长度(即在图像上排队的操作数)
从队列中弹出最后一个函数
您可以利用pop()函数从 jQuery 队列中移除最后一个函数。jQuery 文件Animation2jq.js可以修改如下:
动画 2jq.js
$(document).ready(function() {
$("img#pic1")
.animate({ "height" : 300 })
.fadeOut()
.fadeIn()
.animate({ "width" : 400 })
.slideToggle( 3000 )
var queue = $("img#pic1").queue();
var popped_func = queue.pop();
});
从<img>元素中检索对 jQuery 队列的引用，并将其赋给变量queue。最后一个方法slideToggle(3000)将从队列中删除，并赋给变量popped_func，因为最后一个方法不再在队列中，所以它不会执行。因此，芯片图像将不会变得不可见(在其高度和宽度增加之后),而是将保持在那里。
您甚至可以删除队列中的最后一个函数，并通过使用如下的unshift()方法将其插入到开始处:
var queue = $("img#pic1").queue();
var popped_func = queue.pop();
queue.unshift(popped_func);
第一个增加图像高度的animate方法在运行应用时执行。然后通过使用pop()方法将最后一个方法slideToggle(3000)从队列的末尾移除，并将其赋给popped_func变量。然后将popped_func变量中的最后一个方法添加到队列的开头。增加图像高度后，执行slideToggle(3000)方法，使图像不可见。
您可以通过在 jQuery 代码中添加以下语句来清除存储在队列中的所有方法，从而停止动画:
$("img#pic1").clearQueue();
因为上述语句将删除队列中的所有方法，所以在完成当前正在执行的方法后，动画将立即停止。您甚至可以在单击按钮时调用clearQueue()方法，允许用户在任何需要的时候停止动画。
您还可以运行队列中所需的方法，方法是用所需的方法范围重新定义队列，如下面的代码所示:
$("img#pic1").queue(queue.slice(3,4));
这里从第三个索引位置直到第四个索引位置的语句将被用来创建一个新队列。指定索引位置的语句是.animate({ "width" : 400 }),因此新队列将只有这条语句。因此，芯片图像的宽度会慢慢增加到 400px。就这样。因为队列中没有其他东西，所以不会发生其他事情。
6.3 通过单击下一个和上一个按钮逐个显示图像
问题
您有几幅图像，并且希望一次显示一幅图像。当用户单击“下一个”按钮时，将显示序列中的下一个图像。类似地，通过单击 previous 按钮，之前显示的图像应该会再次出现。
解决办法
下面的 HTML 程序显示五幅图像和左右箭头键。为了管理边距和显示格式，图像被放在一个无序列表中，这个列表又被放在一个<div>元素中。
animation3.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="animation3style.css" type="text/css" media="screen" />
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="animation3jq.js" type="text/javascript"></script>
</head>
<body>
<div id="image_slider">
<ul>
<li><img src="chip.jpg" width="200" height="150" /></li>
<li><img src="chip2.jpg" width="200" height="150" /></li>
<li><img src="chip3.jpg" width="200" height="150" /></li>
<li><img src="chip4.jpg" width="200" height="150" /></li>
<li><img src="chip5.jpg" width="200" height="150" /></li>
</ul>
<img src="leftarrow.png" class="leftarrow" />
<img src="rightarrow.png" class="rightarrow" />
</div>
</body>
</html>
您可以在上面的代码中看到，用 ID image_slider定义了一个<div>元素。在<div>元素中定义了一个无序列表元素。在无序列表元素中定义了五个列表项，在每个列表项中定义了一个图像。在无序列表元素下面，左侧显示一个左箭头图像来表示“上一步”按钮，右侧显示一个右箭头图像来表示“下一步”按钮。
为了一次只显示一个图像并隐藏其余的图像，并对<ul>和<div>元素应用填充和其他显示格式，某些样式被写入 CSS 样式表。
Animation3style.css
body {
padding: 10px;
}
#image_slider {
width: 210px;
height: 230px;
overflow: hidden;
margin: auto;
display: block;
}
#image_slider ul {
list-style: none;
width: 1200px;
height: 210px;
margin: 0;
padding: 0;
}
#image_slider li {
width: 210px;
height: 200px;
float: left;
}
.leftarrow {
float: left;
width: 20px;
height: 20px;
}
.rightarrow {
float: right;
width: 20px;
height: 20px;
}
在这个 CSS 样式表中，使用了属性padding、overflow、display和float，所以让我们快速浏览一下。
填充属性
属性用于创建元素内容之间的间距。为了在元素的每一侧插入间距，有一些padding属性的变体，包括padding-top、padding-right、padding-bottom和padding-left来分别管理元素顶部、右侧、底部和左侧的间距。
padding属性的有效值为
value:以 px、pt、cm 等为单位指定间距的值。%:间距以容器宽度的%来指定。inherit:间距继承自父元素。
溢出属性
overflow属性决定了对太大而无法放入容器的内容执行的操作(即，它决定是通过应用滚动条来显示整个元素，还是根据容器大小来裁剪内容)。有效选项包括
visible:该元素将被完全显示。hidden:容器边界外的区域将被裁剪，只有容器内的区域可见。scroll:容器边界内的区域可见，并添加滚动条，可以用来查看隐藏的内容。auto:类似于scroll，但是它只在需要的时候给元素添加滚动条。
显示属性
属性决定了元素应该如何呈现。该属性的一些有效值包括
inline:元素显示为内嵌元素。不考虑元素的高度和宽度。block:元素显示为块元素(即元素显示在新的一行上，覆盖浏览器屏幕的整个宽度)。contents:容器被移除，子元素成为 DOM 中更高一级元素的子元素。
浮动属性
float属性用于相对于同一容器中的另一个组件定位和格式化内容。它通常用于在图像周围排列文本。以下是有效选项:
left:元素浮动在容器的左边。right:元素浮动到其容器的右边。none:元素不浮动。这是默认值。inherit:元素从其父元素继承浮点值。
10px 的填充空间设置在<body>元素的四周。
ID 为image_slider的<div>元素的宽度和高度分别设置为 210px 和 230px。通过使用overflow属性，无法容纳在指定宽度和高度区域内的图像被隐藏。这个想法是一次只能看到一幅图像。整个<div>元素显示为一个块(即，它将显示在新行上，并将覆盖浏览器屏幕的整个宽度)。
无序列表项中的常规项目符号将被删除，无序列表的宽度和高度被设置为 1200px 和 210px，以便容纳所有的图像。在无序列表中，边距和填充间距设置为 0。
列表项的宽度和高度被设置为 210px 和 200px，因为图像将仅通过列表项显示。使用float属性，列表项(即图像)被设置为在其容器中向左浮动。左右箭头图像显示为 20px 宽和 20px 高。左箭头被设置为位于左侧，右箭头图像被设置为显示在右侧。
动画 3jq.js
$(document).ready(function() {
$('img.leftarrow').click(function() {
if($("ul").css("marginLeft") == "0px"){
alert("You are at the first image");
} else {
$("#image_slider").children("ul").animate({
"margin-left" : "+=210px"
}, 2000);
};
});
$('img.rightarrow').click(function() {
if($("ul").css("marginLeft") == "-840px"){
alert("You are at the last image");
} else {
$("#image_slider").children("ul").animate({
"margin-left" : "-=210px"
}, 2000);
};
});
});
在这段 jQuery 代码中，使用了css()方法和margin-left属性，我们先来了解一下。
css()
方法设置或返回所选元素的样式属性。
语法:
以下语法返回指定属性的值:
css("property");
以下语法设置指定 CSS 属性的值:
css("property","value");
左边距属性
此属性设置元素距浏览器窗口左边界的边距。以下是有效选项:
length:距左边距的距离以像素、磅、厘米等为单位。默认值为 0px。%:左边界的边距以容器宽度的百分比来指定。auto:离左边界的距离由浏览器决定。initial:取该属性的默认值。inherit:该值继承自父元素。
它是如何工作的
运行程序时，最初将显示第一幅图像(参见图 6-4(a) )。单击左箭头图像时，首先检查左边距值是否为 0px。如果左边距的值为 0px，则表示正在显示第一张图片，并且在当前图像的左边没有图像，因此显示您在第一张图像上，没有其他动作发生的信息。但是如果左边距的值不是 0px，这意味着显示的是其他图像，而不是第一个图像。在这种情况下，左边距值增加 210 px，使下一个图像可见，并隐藏前面的图像。左边距的值会以慢速动画的形式增加，因此下一个图像会以滑入的形式出现。
同样，当单击右箭头图像时，首先检查左边距的值是否等于-840px。因为每点击一次右箭头，左边距的值就减少 210px，当显示最后一幅图像时，左边距的值将等于-840px，因此显示消息你在最后一幅图像(见图 6-4(c) )。如果左边距的值大于-840px，左边距的值减少 210px，使第二幅图像可见，前一幅图像不可见，如图 6-4(b) 所示。
图 6-4
(a)显示第一幅图像。(b)单击右箭头图像，第二个图像变得可见，隐藏第一个图像。(c)当在最后一幅图像上点击右箭头图像时，出现通知“您在最后一幅图像上”的警告对话框
当按下任何箭头键时，逐个显示所有隐藏的图像
在这段代码中，当您按下右箭头图像时，所有图像将一个接一个地向左滑动，并且在显示最后一个图像后滑动将停止，而不是像在早期的 jQuery 代码中那样在显示一个图像后停止。类似地，在点击左箭头图像时，所有图像将一个接一个地向右滑动，并且在显示第一个图像后滑动将停止。
执行此操作的 jQuery 代码如下:
动画 3bjq.js
$(document).ready(function() {
$('img.leftarrow').click(function() {
if($("ul").css("marginLeft") == "0px"){
alert("You are at the first image");
} else {
for(i=0;i<4;i++){
$("#image_slider").children("ul").animate({
"margin-left" : "+=210px"
}, 2000);
}
};
});
$('img.rightarrow').click(function() {
if($("ul").css("marginLeft") == "-840px"){
alert("You are at the last image");
} else {
for(i=0;i<4;i++){
$("#image_slider").children("ul").animate({
"margin-left" : "-=210px"
}, 2000);
}
};
});
});
您可以在上面的代码中看到，在单击左箭头图像时，使用了一个for循环，它将执行四次迭代，在每次迭代中，无序列表元素的左边距增加 210px，从而隐藏当前图像并取消隐藏右侧的图像。回想一下，图像是通过无序列表元素的列表项来表示的。for循环将图像一张一张地向左滑动，并停留在最后一张图像上，如图 6-5(a) 所示。
单击右箭头图像时，重复该过程。再次，for循环将迭代四次，在每次迭代中将无序列表元素的左边距减少 210px。因此，当前图像将被隐藏，左侧的一个图像将变得可见。for循环将给出滑动效果，好像图像一个接一个地向正确的方向滑动，并在第一个图像上停止，如图 6-5(b) 所示。
图 6-5
(a)单击左箭头使所有图像向左移动，并停在最后一幅图像上。(b)单击向右箭头使所有图像向右滑动，并在第一个图像处停止
使图像连续滑动
让我们修改 jQuery 代码来制作一个图像滑块(即，图像将一个接一个地向左滑动)。也就是说，将显示一幅图像，然后它将向左移动，消失，并被序列中的下一幅图像所取代。图像滑块的 jQuery 代码如下:
动画 3cjq.js
$(document).ready(function() {
$.leftrotate = function(){
$("#image_slider").children("ul").animate({
"margin-left" : "-=210px"
}, 2000,
function(){
if($("ul").css("marginLeft") == "-1050px"){
$("ul").css( {"marginLeft" : "0px" });
}
});
$.leftrotate();
}
$.leftrotate();
});
你可以在上面的代码中看到，定义了一个名为leftrotate的函数，其中<div>元素内无序列表元素的左边距缓慢递减 210px。因此，当前图像将变得不可见，右边的图像将慢慢变得可见，从而产生动画效果。显示图像后，检查是否到达最后一幅图像(即，左边距是否等于-1050px)。如果是，那么左边距设置为 0px，使第一个图像再次可见。如果还没有到达最后一幅图像，再次调用leftrotate函数将左边距减少 210px，使当前图像不可见，使右边的下一幅图像可见。由于递归的原因，leftrotate函数会被重复调用，使得图像无限滑动，如图 6-6 所示。
图 6-6
图像无限滑动
6.4 当鼠标悬停在图像上时放大图像
问题
您有一些尺寸较小的图像，它们一个接一个地显示。您希望当鼠标悬停在图像上时图像被放大，当鼠标移出图像时图像恢复到原来的大小。
解决办法
显示一些图像的 HTML 代码如下:
Zoomonhover.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="zoomonhoverstyle.css" type="text/css" media="screen" />
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="zoomonhoverjq.js" type="text/javascript"></script>
</head>
<body>
<ul id="image_hover">
<li><img src="chip.jpg" /></li>
<li><img src="chip2.jpg" /></li>
<li><img src="chip3.jpg" /></li>
<li><img src="chip4.jpg" /></li>
<li><img src="chip5.jpg" /></li>
</ul>
</body>
</html>
您可以在上面的代码中看到，创建了一个 id 为image_hover的无序列表元素。无序列表元素包含五个列表项，每个列表项通过<img>元素显示一个图像。
将样式应用于 HTML 元素的 CSS 样式表如下:
Zoomonhoverstyle.css
#image_hover {
list-style: none;
}
img {
width: 100px;
height: 75px;
}
为了避免在列表项中显示默认项目符号，list_style: none属性被应用于 id 为image_hover的无序列表项。此外，图像默认设置为 100 像素宽，75 像素高。
当鼠标在图像上时放大图像，当鼠标指针离开图像时缩小到原来大小的 jQuery 代码如下:
Zoomonhoverjq.js
$(document).ready(function() {
$("#image_hover").children("li").find("img").on("mouseenter", function() {
$(this).css( {"width" : "350px" });
$(this).css( {"height" : "250px" });
}).on("mouseleave", function() {
$(this).css( {"width" : "100px" });
$(this).css( {"height" : "75px" });
});
});
它是如何工作的
运行程序时，最初图像会以较小的尺寸一个接一个地出现(即 100 像素宽，75 像素高，如图 6-7 左侧所示)。当鼠标指针悬停在列表项上(即列表项内包裹的图像上)时，通过使用css()方法，图像的宽度和高度分别增加到 350px 和 250px(见图 6-7 右侧)。当鼠标指针离开图像时，再次使用css()方法将图像缩小到原来的大小。
图 6-7
(左)图像以小尺寸一个接一个地出现。(右)当鼠标指针悬停在图像上时，图像的宽度和高度会增加
6.5 点击“阅读更多”链接时显示详细信息
问题
您希望显示一个主题的简短介绍，并在其下方显示一个 read more 链接。您希望当用户点击阅读更多信息链接时显示隐藏的内容。此外，当显示隐藏内容时，您希望将阅读更多链接转换为阅读更少链接。如果点击 read less 链接，您还希望最近变得可见的内容隐藏起来。
解决办法
显示两个段落元素和一个超链接的 HTML 程序如下所示。第二段包含详细信息，最初是隐藏的，但单击超链接时会显示出来。
Readmore.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="readmorejq.js" type="text/javascript"></script>
</head>
<body>
<p>jQuery is a lightweight cross-platform JavaScript library. Because of its easy to use syntax, jQuery has made it quite easy to include JavaScript on any web site. </p>
<p>It has not only simplified the complex coding but also has reduced the size of code as well. Below are the features of jQuery. To use jQuery, no installation is required. You need to simply download jQuery from its official jQuery website, http://jquery.com/ which has several versions of jQuery. You can download the most stable version out of them. After downloading jQuery on your local file system, you simply refer to the file's location using the HTML script element. </p>
<a href="#" id="expand">read more</a>
</body>
</html>
您可以在上面的代码中看到，两个<p>元素是由特定的文本组成的。在第二段下面，定义了一个超链接，默认文本为阅读更多信息。为了在 jQuery 代码中访问它，超链接被分配了 ID expand。
单击超链接时显示隐藏段落的 jQuery 代码如下所示。当点击超链接时，代码还将超链接的文本从阅读更多更改为阅读更少。当点击 read less 链接时，这段代码也会隐藏该段落。
Readmorejq.js
$(document).ready(function() {
$('p').eq(1).hide();
$('a#expand').click(function(event) {
event.preventDefault();
if ($('a#expand').text() == 'read more') {
$('p').eq(1).hide().slideToggle('slow');
$('a#expand').text('read less');
} else {
$('p').eq(1).show().slideToggle('slow');
$('a#expand').text('read more');
}
});
});
上面的 jQuery 代码中使用了preventDefault()方法，我们先来了解一下这个方法。
event.preventDefault()方法
顾名思义，event.preventDefault()方法避免元素采取默认动作。例如，使用此方法，您可以阻止用户在单击链接时导航到目标 URL。
语法:
event.preventDefault()
其中参数event由事件绑定函数提供，可以是任何值；它可以是任何字符或单词。
它是如何工作的
在运行 HTML 程序时，您会发现第一个段落(即索引位置为 0 的段落)是可见的，而索引位置为 1 的段落元素(即第二个段落)是隐藏的。该段下方显示超链接，文字继续阅读，如图 6-8(a) 所示。超链接元素被分配了 ID expand，当它被点击时(即如果点击了 read more 链接)，调用preventDefault()方法以避免超链接的默认动作，从而阻止它导航到目的网页。此外，如果 ID 为expand的超链接的文本为请继续阅读，则通过调用slideToggle()方法，可以慢慢看到当前隐藏的第二段。即隐藏段落显示隐藏的文本，超链接文本变为已读少告知用户详细信息已经可见(见图 6-8(b) )。
如果超链接的文本为少读并被点击，则通过调用slideToggle()方法使可见段落慢慢不可见，超链接的文本变为多读。
图 6-8
(a)在该段落下面，显示一个带有文本“阅读更多”的超链接(b)点击“阅读更多”链接后，显示隐藏的段落
6.6 使用动画展开和折叠列表
问题
您希望以可扩展列表项目的形式显示某些电子项目，如相机和笔记本电脑。每当用户单击列表项时，它就会展开以显示详细信息。如果再次单击，展开的列表项将会缩小。
解决办法
显示包含几个列表项的无序列表的 HTML 代码如下所示，其中列表项本身是一个无序列表。列表将从节点电子产品开始，将显示两款电子产品，相机和笔记本电脑。相机列表项将显示两款相机，分别名为索尼和佳能。同样****笔记本电脑列表项将只显示一台笔记本电脑的名称，宏碁。索尼和佳能列表项目可以展开显示各自的配置和价格。另外，宏基列表项可以展开显示其配置和价格。
Explandlistanim.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="expandlistanimjq.js" type="text/javascript"></script>
</head>
<body>
<ul id="list">
<li class="electronics">Electronic Products
<ul>
<li class="electronics">Cameras
<ul>
<li class="electronics">Sony
<ul>
<li>Digital Camera w/ 16-50mm and 55-210mm Power Zoom Lenses</li>
<li>Monitor Type: 7.5 cm</li>
<li>$698</li>
</ul>
</li>
<li class="electronics">Canon
<ul>
<li>Digital Camera w/ 50x Optical Zoom</li>
<li>Wi-Fi & NFC Enabled</li>
<li>$279</li>
</ul>
</li>
</ul>
</li>
<li class="electronics">Laptops
<ul>
<li class="electronics">Acer
<ul>
<li>14" Full HD Touch</li>
<li>Intel Core i7-1165G7</li>
<li>Intel Iris Xe Graphics</li>
<li>16GB LPDDR4X</li>
<li>$1292</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
您可以看到创建了一个 ID 为list的无序列表，其中只有一个列表项 Electronics Products 。对于通过 jQuery 代码的访问，列表项被分配了类electronics。电子产品列表项由一个无序列表组成，该列表由两个列表项组成，相机和笔记本电脑。所有列表项都被分配了类别electronics。同样，列表项相机由一个无序列表组成，该列表由两个列表项索尼和佳能组成。类似地，列表项 Laptops 由一个无序列表组成，该列表又由一个列表项 Acer 组成。列表项 Sony 包含一个无序列表，由三个列表项组成，显示了索尼相机的配置和价格。
类似地，佳能列表项包装了一个无序列表，该列表由三个显示佳能相机详细特性的列表项组成。宏基列表项包含五个列表项的无序列表，其中每个列表项显示宏基笔记本电脑的功能及其价格。
单击一次时展开列表项，再次单击时折叠列表项的 jQuery 代码如下:
Expanlistanimjq.js
$(document).ready(function() {
$('#list ul').hide();
$('.electronics').click(function() {
$(this).children("ul").slideToggle();
return false;
});
});
它是如何工作的
您可以看到，ID 为list的无序列表中包装的无序列表被隐藏，因此除了父无序列表的文本之外，不会出现子无序列表(即最初会显示电子产品)。如果用户单击任何列表项，将显示包装在该列表项中的无序列表。因为使用了slideToggle()方法，这意味着如果无序列表(即被点击的列表项的子元素)是可见的，那么它将被设为不可见，反之亦然。因此，如果列表项当前处于折叠模式，单击它将会展开，或者如果它已经展开，将会折叠。
在运行程序时，您会在屏幕上获得父无序列表的列表项文本，即电子产品。单击列表项时，它会展开以显示其中的无序列表。里面的无序列表有两个列表项，相机和笔记本电脑，所以显示在屏幕上。点击列表项相机时，它将再次展开并显示该列表项内的无序列表(即屏幕上将显示索尼和佳能列表项；参见图 6-9(a) 。类似地，单击任何列表项，隐藏在其中的无序列表就会显示出来，显示其中的信息。点击所有列表项，将显示如图 6-9(b) 所示的信息。
图 6-9
(a)出现父未订购列表“电子产品”的文本。(b)单击任何列表项，它将展开以显示其中的无序列表
6.7 总结
在这一章中，你学习了如何在 HTML 元素上实现动画。你学会了先将图像向右移动，然后向左移动。您学习了管理和操作 jQuery 队列。您了解了如何通过单击下一个和上一个按钮来逐个显示图像，以及如何在鼠标悬停在图像上时放大图像。您还学习了在单击“read more”链接时展开文本并显示详细信息，最后，您学习了使用动画展开和折叠列表。
下一章将演示滑动和视觉效果。您将学习如何在无限循环中显示滑动图像。您还将学习如何使球弹跳，如何使图像在框内垂直向上滚动，如何垂直显示图像，以及如何制作新闻滚动器。
七、滑动和视觉效果
在这一章中，你将学习如何对不同的 HTML 元素应用不同的滑动和视觉效果。在本章中，您将制作以下食谱:
无限地一次显示一个图像
使球弹跳
使图像在框内垂直向上滚动
垂直显示图像，每个图像被序列中的下一个图像替换
制作新闻滚动器
悬停时一个接一个地显示图像
按页面显示图像
向任一方向拖动图像
编写钟摆滚动器
使用数组滚动图像
图像滚动和滑动配方可以在任何网站上用来展示产品或服务。新闻滚动菜单可以用来显示一个组织的最新活动。弹跳球的秘诀是解释如何管理动画的速度和距离。
7.1 无限显示图像，一次一个
问题
您有几个图像，并且希望这些图像一个接一个地显示在页面的顶部中央。一幅图像慢慢出现，然后逐渐消失，被下一幅图像慢慢取代，然后也逐渐消失，如此类推。显示完最后一幅图像后，第一幅图像将再次出现，并无休止地继续下去。
解决办法
通过一个无序列表的列表项显示五幅图像的 HTML 代码如下所示，该列表又被包含在一个<div>元素中:
animation1.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="animation1style.css" type="text/css" media="screen" />
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="animation1jq.js" type="text/javascript"></script>
</head>
<body>
<div id="slideshow">
<ul>
<li><img src="chip.jpg"></li>
<li><img src="chip2.jpg"></li>
<li><img src="chip3.jpg"></li>
<li><img src="chip4.jpg"></li>
<li> <img src="chip5.jpg"></li>
</ul>
</div>
</body>
</html>
你可以在上面的代码中看到，一个<div>元素是用 IDslideshow定义的。在<div>元素中定义了一个无序列表，其中五幅图像通过无序列表的列表项显示。
为了将样式应用于<div>、<p>和<img>元素，在级联样式表中定义了某些样式类:
Animation1style.css
img{
width: 300px;
height: 200px;
border: 5px solid red;
padding: 10px;
margin: 10px;
}
#slideshow {
margin: 30px auto;
position: relative;
width: 350px;
height: 250px;
padding: 10px;
}
#slideshow ul li {
position: absolute;
}
在这个样式表文件中，使用了一个名为position的属性，我们先了解一下。
位置属性
属性定义了一个元素的位置。有效选项包括
static:默认属性。元素被定位为静态的(即，top、bottom、left 和 right 属性不会影响 HTML 元素)。relative:顾名思义，这个元素将会相对于它的正常位置进行定位。可以将 top、right、bottom 和 left 属性添加到元素中，以获得更精确的位置。fixed:即使页面滚动，元素也将始终保持在同一位置。absolute:如果元素没有祖先，则相对于最近定位的祖先或文档体定位元素。sticky:元素根据滚动位置在相对位置和固定位置之间切换。
在 CSS 文件中，您可以看到图像元素被设置为宽 300 像素，高 200 像素。此外，在图像周围显示 5px 厚度的红色边框，并且在边框内的图像周围(在边框和图像之间)创建 10px 填充(即，间距)。此外，在边框之外创建了 10px 的边距。
id 为slideshow的<div>元素的margin被设置为30px。<div>元素的位置被设置为relative，其width和height分别被设置为350px和250px。设置<div>元素的宽度和高度，以便一次只能看到一个图像。padding间距设置为10px(即图像和<div>元素边框之间的间距设置为 10px)。
<li>元素的位置被设置为absolute(也就是说，这些列表项是相对于它们的祖先<div>元素设置的)。
下面的 jQuery 代码将只让一个图像出现在浏览器窗口的顶部中间位置。代码会让它在一段时间内消失，并被序列中的下一幅图像所取代。
动画 1jq.js
$(document).ready(function() {
$("#slideshow ul li").slice(1).hide();
setInterval(function() {
$('#slideshow ul li:first')
.fadeOut(500)
.next()
.fadeIn(500)
.end()
.appendTo('#slideshow ul');
}, 2000);
});
这个 jQuery 代码使用了方法slice(), next(), end(), setInterval()和appendTo()，所以让我们先快速浏览一下。
切片( )
从指定的索引位置开始，从选定的元素中提取一组元素。
语法:
starting_index_location表示开始提取的索引位置。索引位置从 0 开始。如果使用负值，则意味着必须从末尾开始提取。stop_index_location是必须进行提取的索引位置。如果省略，提取会一直进行到集合的末尾。
$(selector).slice(starting_index_location,stop_index_locatin)
下一个( )
获取所选元素的下一个同级元素。兄弟元素是那些拥有相同父元素的元素。
语法:
$(selector).next(filter)
其中filter表示查找下一个兄弟的表达式。
结束( )
结束最近的操作，并将匹配的元素返回到其以前的状态。
语法:
recent_operation(s).end( )
setInterval()
用于在指定的时间间隔调用一个功能或执行某些操作。重新调用函数或执行操作的时间以毫秒为单位。该方法将一直调用所需的函数或操作，直到方法clearInterval()被调用或窗口被关闭。
附录( )
在选定元素的末尾插入指定元素。
语法:
required_elements表示要插入的内容。selected_element代表必须附加元素的选定元素。
$(required_elements).appendTo(selected_element)
如果required_element (s)已经存在，那么它将从其当前位置移除，并将被附加到所选元素。
在 jQuery 代码中，最初，从索引位置 1 到结尾的所有列表项都是隐藏的(即，除了第一个图像，通过列表项显示的所有图像都是不可见的)。此后，功能被设置为每 2000 毫秒执行一次。在该功能中，通过第一个列表项显示的第一幅图像在 500 毫秒内慢慢变得不可见(参见图 7-1(a) )。此后，第二幅图像在 500 毫秒内慢慢变得可见(见图 7-1(b) )。然后，第一个图像被追加到无序列表的末尾。该功能将在每 2000 ms 后继续执行。再次，现在已经成为第一列表项的第二图像逐渐变得不可见，并且下一列表项(即，第三图像)慢慢变得可见。第二个图像被添加到无序列表的末尾(在之前添加的第一个图像之后)。这个过程不断重复。
图 7-1
(a)第一个图像是可见的。(b)第一图像变得不可见，并被第二图像取代
7.2 使球弹跳
问题
你想用动画让球弹跳。随着每次反弹，球上升的高度减少一半，最终球停止。
解决办法
显示球图像的 HTML 代码如下:
Animation2.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="animation2style.css" type="text/css" media="screen" />
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="animation2jq.js" type="text/javascript"></script>
</head>
<body>
<img id="ball" src="ball.jpg"></img>
</body>
</html>
您可以在这段代码中看到，通过使用一个<img>元素显示了一个球。
要对球图像应用样式，需要使用以下代码创建一个. css 文件:
Animation2style.css
#ball {
position: absolute;
}
球的位置被设置为相对于主体元素的absolute。现在，通过 jQuery 代码应用bottom属性，球可以很容易地被弹回。
使球弹跳的 jQuery 代码如下:
动画 2jq.js
$(document).ready(function() {
function bounce() {
var height = 250;
var speed=1000;
for (var i = 1; i <= 6; i++) {
$('#ball').animate({
'bottom' : height}, speed);
$('#ball').animate({'bottom' : 0}, speed);
height = height/2;
}
}
bounce();
});
定义了一个名为bounce的函数。在该函数中，height和speed分别被初始化为值250和1000。因为您希望您的球在停止前反弹六次，所以for循环被设置为运行六次。您可以根据需要让球弹跳任意次数。随着for循环的每一次迭代，球的高度将减少一半(即球的高度将除以值 2)。首先，使球以动画形式逐渐升高到某个高度，然后球被设置为到达底部(即，球被设置为接触地面)。在重复for循环的下一次迭代之前，球的高度降低(除以 2)。一旦文件准备就绪，就会调用bounce功能，球将会出现弹跳，每次弹跳后，球的高度会降低一半，然后最终停止(参见图 7-2 )。
图 7-2
弹跳球。球会上下垂直弹跳
7.3 使图像在框内垂直向上滚动
问题
您有几个图像，并且希望这些图像在浏览器窗口顶部中间的一个框中持续滚动。在最后一幅图像之后，滚动将从第一幅图像开始继续。
解决办法
通过无序列表的列表项显示五幅图像的 HTML 代码如下。无序列表嵌套在<div>元素中。
Animation3.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="animation3style.css" type="text/css" media="screen" />
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="animation3jq.js" type="text/javascript"></script>
</head>
<body>
<div id="slideshow">
<ul id="scroll">
<li><img src="chip.jpg"></li>
<li><img src="chip2.jpg"></li>
<li><img src="chip3.jpg"></li>
<li><img src="chip4.jpg"></li>
<li> <img src="chip5.jpg"></li>
</ul>
</div>
</body>
</html>
创建一个 id 为slideshow的<div>元素。在<div>元素中，用 id scroll定义了一个无序列表元素。id 被分配给<div>和<ul>元素，以便在 jQuery 代码中可以访问它们。五幅图像通过<ul>元素中的五个列表项显示。
为了对图像、无序列表和<div>元素应用样式，某些样式类定义如下:
Animation3style.css
img{
width: 300px;
height: 200px;
padding: 10px;
margin: 10px;
}
#scroll{
list-style: none;
width: 320px;
height: 1000px;
margin: 0;
padding: 0;
}
#slideshow {
width: 320px;
height: 220px;
border: 5px solid red;
overflow: hidden;
margin: auto;
display: block;
}
图像设置为 300 像素宽，200 像素高。图像的填充和边距设置为 10px。回想一下，填充是元素与其边框之间的间距，而边距是元素周围的间距(即两个元素的边框之间的间距)。
在 id 为scroll的无序列表中，默认为disc的列表项标记被设置为 none(即列表项不会显示任何标记)。虽然图像被设置为在 300px 的宽度内显示，但是为了使图像与其填充空间一起显示，<ul>元素的宽度被设置为 320px。有五张图片，每张高 200px，所以<ul>元素的高度被设置为 1000px。空白和填充空间被设置为无序列表的 0px。
包围<ul>列表的<div>元素的宽度和高度分别设置为 320px 和 220px。这是因为您希望一次只显示一幅图像。图像周围显示 5px 厚的红色边框。使用overflow属性，一次只显示一个图像，任何超出给定宽度和高度的图像都将被裁剪掉。<div>元素被设置为显示为一个块(即，其中的图像将显示在一个新行上，并占据分配给它的整个宽度)。
让图像在框中一个接一个滚动的 jQuery 代码如下:
动画 3jq
$(document).ready(function() {
var imageslide = function() {
$("#slideshow").children("ul").animate({
"margin-top": -1000}, 4000, function() {
$('#slideshow').append($('#scroll').clone());
$('#scroll').css({ "margin-top": 0 });
});
imageslide();
}
imageslide();
});
定义了一个名为imageslide的函数。该函数使无序列表中的所有列表项(即所有图像)以动画形式缓慢向上滚动，直到上边距达到-1000px。回想一下，每个图像的高度都是 200px，所以所有的图像都将一个接一个地向上滚动，直到上边距变成-1000px(也就是说，当最后第五个图像向上滚动时)。此后，克隆(即 id scroll的<ul>元素中所有列表项的副本)被制作并被附加到 id slideshow的<div>元素中。追加列表项的副本，以便图像不断向上滚动。<ul>元素的上边距设置为 0px。该函数被递归调用，因此<ul>元素中的图像将再次向上滚动，直到上边距变为-1000px。该函数将不断递归调用，使图像不断向上滚动(见图 7-3 )。
图 7-3
图像不断向上滚动
7.4 垂直显示图像，每个图像按顺序被下一个图像替换
问题
你有一些图像，你想让它们都垂直显示。除此之外，你希望他们每隔几秒钟就改变他们的位置。也就是说，显示所有图像，并且每个图像被序列中的下一个图像替换。
解决办法
下面显示了通过无序列表的列表项定义图像的 HTML 代码。为了提供滚动效果和应用样式，无序列表被包含在一个<div>元素中。
Animation4.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="animation4style.css" type="text/css" media="screen" />
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="animation4jq.js" type="text/javascript"></script>
</head>
<body>
<div id="slideshow">
<ul id="scroll">
<li><img src="chip.jpg"></li>
<li><img src="chip2.jpg"></li>
<li><img src="chip3.jpg"></li>
<li><img src="chip4.jpg"></li>
<li> <img src="chip5.jpg"></li>
</ul>
</div>
</body>
</html>
用 id slideshow定义了一个<div>元素。在<div>元素中定义了一个 id 为scroll的<ul>元素。在无序列表中定义了几个列表项，其中每个列表项包含一个图像。也就是说，这五个图像是通过无序列表中的五个列表项显示的。
下面是将样式应用于图像、无序列表和<div>元素的级联样式表文件:
Animation4style.css
img{
width: 300px;
height: 200px;
padding: 10px;
margin: 10px;
}
#scroll{
list-style: none;
width: 320px;
height: 1000px;
margin: 0;
padding: 0;
}
#slideshow {
width: 320px;
height: 1000px;
border: 5px solid red;
overflow: hidden;
margin: auto;
display: block;
}
图像设置为 300 像素宽，200 像素高。为了保证图像之间的适当间距，填充和边距被设置为 10px。因为您希望显示所有的图像，所以无序列表的宽度和高度分别设置为 320px 和 1000px。无序列表中没有设置间距，因为图像之间已经有足够的间距。<div>元素的宽度和高度分别设置为 320px 和 1000px。此外，在<div>元素周围(即图像周围)绘制了 5px 厚的红色实心边框。<div>元素被设置为显示一个将占据整个可用宽度的块。
垂直显示所有图像并让它们按顺序被下一个图像替换的 jQuery 代码如下:
Animation4jq.js
$(document).ready(function() {
setInterval(function() {
$("#slideshow ul li:first").animate({
"scrollTop": 200}, 400, function(){
$("#scroll").find('li:last').after($('li:first', "#scroll"));
});
},1000);
});
在这段 jQuery 代码中，使用了scrollTop属性和after()方法，所以在了解 jQuery 代码之前，我们先快速了解一下。
scrollTop 属性
用于指定元素应该垂直滚动的像素数。此外，该属性可用于返回元素垂直滚动的像素数。
语法:
element.scrollTop
这段代码返回scrollTop属性(即元素垂直滚动的像素数)。
element.scrollTop = pixels
这段代码设置了scrollTop属性。
在( )之后
用于在选定元素后插入指定元素。
语法:
element表示要插入的元素。function(index)表示返回要插入内容的函数。索引位置表示集合中的元素。
$(selector).after(element,function(index))
您可以在 jQuery 代码中看到，定义了一个函数，并设置为每隔 1000 毫秒执行一次。第一个图像包含在第一个列表元素中，设置为垂直向上滚动 200px。当第一个图像向上滚动时，它被添加到最后一个列表项之后。现在第二个图像变成了第一个图像，因为第一个图像向上滚动，从顶部看不到，并附加在底部。再次调用该函数，当前位于顶部的图像向上滚动，并附加到最后一项。当前最后一个列表项是第一个图像，因此第二个图像被附加在第一个图像之后。该过程无限继续(参见图 7-4 )。
图 7-4
图像向上滚动。向上滚动的图像被添加在最后一个图像之后
7.5 制作新闻滚动器
问题
您希望某些文本以滚动形式显示，就像屏幕上的新闻滚动一样。当鼠标悬停在文本上时，新闻将停止滚动，当鼠标移开时，新闻将再次开始滚动。
解决办法
您将使用一个<p>元素来显示文本。为了使它滚动，它将被嵌套在一个<div>元素中。下面是执行此操作的 HTML 代码:
Scrollingnews.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="scrollingnewsstyle.css" type="text/css" media="screen" />
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="scrollingnewsjq.js" type="text/javascript"></script>
</head>
<body>
<div class="scroller">
<p class="scroll">
jQuery is an open source project that is licensed under the MIT License to permit its free use on any site and if required, it can be relicensed under the GNU Public License for inclusion in other GNU-licensed open source projects.
It has a large community of users and contributors making it better every day. Huge numbers of posts are published by its community on its bug fixes and enhancements
It has huge number of plug-in enabling you to add additional features to your web page and develop the apps compatible to different platforms.
Its API is fully documented making it easy to use and access its full features
</p>
</div>
</body>
</html>
定义了一个<div>元素，并为其分配了一个名为scroller的类。在<div>元素中有一个<p>元素，它包含了某些被认为是您想要滚动的新闻的文本。<p>元素被分配了类别scroll。
为了将样式应用于段落和<div>元素，在级联样式表文件scrollingnewsstyle.css中定义了一些样式类，如下所示:
Scrollingnewsstyle.css
.scroller {
width: 200px;
height: 400px;
overflow: hidden;
margin: auto;
padding:10px;
position: relative;
border: 1px solid;
}
.scroll {
position: relative;
}
<div>元素的宽度和高度分别设置为 200px 和 400px。超出给定宽度和高度的内容将被剪裁。<div>元素和浏览器窗口之间的margin间距被设置为auto(即浏览器将决定间距)。在<div>元素周围绘制一个 1px 粗细的边框。<div>和<p>元素的position属性被设置为relative，这样就可以看到top属性(通过 jQuery 代码应用)的影响。
让新闻滚动并在鼠标悬停时停止滚动的 jQuery 代码如下:
卷轴新闻 jq.js
$(document).ready(function() {
$('.scroller').append($('.scroll').clone());
var scroll = function(content) {
$('.scroll').animate({
top: -400
}, 4000, function() {
$('.scroll').css({
top: 0
});
scroll($(this));
});
$('.scroll').hover(function() {
$('.scroll').stop(true, false);
});
$(".scroll").mouseleave(function(){
scroll();
});
}
scroll();
});
在这段 jQuery 代码中，使用了stop()方法，我们先来了解一下它的用法。
停止( )
停止当前正在运行的选定元素的动画。
语法:
stop_queued是一个布尔值。这里提供了true来停止排队的动画。默认值为false。complete_all是一个布尔值。true此处提供，立即完成所有动画。默认值是false.
$(selector).stop(stop_queued,complete_all)
运行应用时，<p>元素中的所有文本显示如图 7-5(a) 所示。制作一个克隆体(即类scroll的<p>元素的副本)并将其附加到类scroller的<div>元素上。功能由名称scroll定义。在该函数中，scroll类的<p>元素被设置为动画(即向上滚动，直到其位置在<div>元素上边缘上方 400px 处)。这种向上滚动将以动画形式发生，持续时间为 4000 毫秒(见图 7-5(b) )。此后，将<p>元件的位置设置在距离<div>元件顶部边缘 0px 处。
递归调用该函数，以便继续该过程(即，<div>元素中可见的任何文本都向上滚动，以便其顶部边缘到达比<div>元素顶部边缘高 400px 的位置)。向上滚动的文本被附加在底部，并且该过程继续。
当鼠标指针悬停在<p>元素上时，会调用stop()方法，这会停止当前在<p>元素上运行的动画。
当鼠标指针离开<p>元素时，再次调用scroll()函数继续滚动<p>元素。
图 7-5
(a)显示
元素中的所有文本。(b)文本向上滚动
7.6 悬停时依次显示图像
问题
你有几个图像要显示，你想一个接一个地显示它们。显示第一个图像，当您将鼠标悬停在它上面时，您希望它淡出，另一个图像淡入。然后，您希望第二个图像在悬停时淡出，第三个图像淡入，依此类推。在最后一个图像之后，您希望第一个图像再次出现。
解决办法
创建一个 HTML 文件，以超链接的形式显示所有五个图像，这样，如果访问者单击图像，他们将被导航到目标网站，显示图像所代表的对象的完整信息。目前，您假设目标网站是任何假设的网站。HTML 文件如下所示:
showimageonhover.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="stylesliding.css" type="text/css" media="screen" />
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="showimageonhoverjq.js" type="text/javascript"></script>
</head>
<body>
<a class="imge" href="http://example.com" ><img src="chip.jpg" width=300px
height=300px></a>
<a class="imge" href="http://example.com"><img src="chip2.jpg" width=300px
height=300px></a>
<a class="imge" href="http://example.com"><img src="chip3.jpg" width=300px
height=300px></a>
<a class="imge" href="http://example.com" ><img src="chip4.jpg" width=300px
height=300px></a>
<a class="imge" href="http://example.com" ><img src="chip5.jpg" width=300px
height=300px></a>
</body>
</html>
所有锚元素都被赋予类名imge，以自动应用在外部样式表(style.css)中定义的类选择器.imge中定义的样式属性。
类名也用于标识要应用 jQuery 代码的元素。此外，所有图像都被指定了相同的宽度和高度 300 像素，以使它们具有统一的外观。样式表代码如下:
stylesliding.css
.imge{
position:absolute;
top:10px;
left:10px;
}
使一个图像慢慢淡出(变得不可见)并用另一个慢慢淡入(变得可见)的图像替换它的 jQuery 代码如下:
showimageonhoverjarq . js
$(document).ready(function() {
$(".imge").hide();
$('.imge:first').fadeIn('slow');
$('.imge').hover(
function(){
$(this).fadeIn('slow');
},
function(){
var next = ($(this).next().length) ? $(this).next() :$('.imge:first');
$(this).fadeOut('slow');
next.fadeIn('slow');
}
);
})
它是如何工作的
您希望当您将鼠标悬停在一个图像上时，它会被同一位置的另一个图像替换，因此您使用position属性并将类选择器.imge设置为absolute来定义图像出现在网页上的确切位置。此外，top和left属性被设置为10px，以确保图像出现在距离浏览器窗口的顶部和左侧边界 10px 的位置。
现在来看 jQuery 代码本身，您最初让所有图像消失，因为您希望它们一个接一个地出现。然后让类imge的所有 HTML 元素的第一个元素慢慢出现在网页上。也就是说，在打开网页时,(所有图像中的)第一幅图像将缓慢出现。这是将首先出现在网页上的初始图像。完成后，将悬停事件附加到所有图像(类imge的所有 HTML 元素)。
在悬停事件中，当鼠标停留在图像上时，您可以让当前图像缓慢显示。当鼠标指针离开正在显示的图像时，您会看到要显示的下一个图像。首先检查你是否在最后一个图像上(类imge的元素),然后将序列中的下一个图像赋给变量next。如果你在最后一个图像，第一个图像(?? 类的 HTML 元素)被分配给变量next。换句话说，变量next被设置为指向序列中的下一幅图像或第一幅图像(如果你已经到达了类的最后一幅图像imge)。
一旦决定了下一个要显示的图像，当前可见的图像会慢慢淡出。最后，将变量next(指序列中的下一张图片)中的图片设置为在网页上缓慢出现(淡入)。最初，你在屏幕上得到五幅图像中的第一幅，如图 7-6 所示。
图 7-6
加载网页时显示的第一个图像
将鼠标悬停在图像上(即，将鼠标移动到图像上并将其拿走)，序列中的下一幅图像将缓慢出现，如图 7-7 所示。同样，所有的图像将被逐一显示。当到达最后一个图像时，第一个图像将再次出现。
图 7-7
悬停时，序列中的下一个图像会替换第一个图像
制作幻灯片
所以让我们来做一个幻灯片。您将显示一个图像，单击该图像时，它将被序列中的另一个图像替换，依此类推。您将对前面的 jQuery 代码进行的唯一修改是，将 click 事件(即 mousedown 事件)而不是 hover 事件附加到图像上。jQuery 代码如下:
slide showjq . js
$(document).ready(function() {
$(".imge").hide();
var next;
$('.imge:first').fadeIn('slow');
$('.imge').on("mousedown", function(event) {
$(this).fadeIn('slow');
next = ($(this).next().length) ? $(this).next() :$('.imge:first');
$(this).fadeOut('slow');
next.fadeIn('slow');
event.preventDefault();
});
});
你可以看到所有的图像最初都是不可见的。第一个图像通过淡入效果变得可见。鼠标按下事件被附加到图像上，如果点击事件发生在任何图像上，序列中的下一个图像被检索并存储在变量next中。先前可见的图像通过淡出效果慢慢变得不可见，序列中的下一个图像(在next变量中检索)通过淡入效果变得可见。为了在单击图像时停止迁移到目标网页，使用了事件对象的preventDefault方法(由 JavaScript 自动传递给事件处理函数)。
7.7 按页面显示图像
问题
您在网页上有几个图像，并且您想按页面方式显示它们，其中一个页面可能包含一个或多个图像(取决于网页上的空间)。在图像的顶部，您希望数字代表页码。您希望所选页码的图像显示在屏幕上。
解决办法
创建一个 HTML 文件来定义您想要显示的五个图像。此外，由于您希望图像充当超链接，将访问者导航到目标网页(该网页将显示所选图像的更多详细信息)，因此您需要将图像元素嵌套在锚元素中。HTML 文件如下所示:
图像平铺. html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="stylepagewise.css" type="text/css" media="screen" />
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="imagespagewisejq.js" type="text/javascript"></script>
</head>
<body>
<div id="images">
<a href="http://example.com" ><img src="chip.jpg" width=150px height=150px /></a>
<a href="http://example.com"><img src="chip2.jpg" width=150px height=150px /></a>
<a href="http://example.com"><img src="chip3.jpg" width=150px height=150px /></a>
<a href="http://example.com" ><img src="chip4.jpg" width=150px height=150px /></a>
<a href="http://example.com" ><img src="chip5.jpg" width=150px height=150px /></a>
</div>
</body>
</html>
您可以在 HTML 页面中看到，所有的img元素都被分配了相同的宽度和高度，即 150 像素，以使它们具有统一的外观，锚元素指向一些假设的网站，访问者选择任何图像都会被导航到这些网站。
现在让我们在外部样式表文件stylepagewise.css中定义 CSS 类:
style pagewise . CSS
.page{
margin:5px;
}
.hover{
color: blue ;
background-color:cyan
}
将图像分成页面并显示所选页面图像的 jQuery 代码如下:
imagespagesejq . js
$(document).ready(function() {
var $pic = $('#images a');
$pic.hide();
var imgs = $pic.length;
var next=$pic.eq(0);
next.css({'position': 'absolute','left':10});
next.show();
var $pagenumbers=$('<div id="pages"></div>');
for(i=0;i<imgs;i++)
{
$('<span class="page">'+(i+1)+'</span>').appendTo($pagenumbers);
}
$pagenumbers.insertBefore(next);
$('.page').hover(
function(){
$(this).addClass('hover');
},
function(){
$(this).removeClass('hover');
}
);
$('span').on("mousedown", function(event){
$pic.hide();
next=$pic.eq($(this).text()-1);
next.show();
});
});
它是如何工作的
CSS 类 page 包含设置为5px的样式属性margin以定义页码之间的间距，类hover包含两个属性color和background-color，分别设置为蓝色和青色，以在鼠标指针经过页码时改变它们的背景和前景色。
现在让我们看看 jQuery 代码本身。首先，检索嵌套在 ID 图像的div元素中的所有锚元素(即锚元素中包含的所有图像),并将其存储在变量$pic中。对象$pic包含所有的图像。然后你隐藏所有的图像，并设置一些变量；图像的数量存储在变量imgs中，$pic对象中的第一幅图像存储在变量next中。
对于存储在变量next中的第一幅图像，使用.css()方法应用一些样式属性。
将position属性设置为absolute并将left属性设置为10px以使存储在变量next中的图像出现在距离浏览器窗口左边界 10px 的位置。完成后，next变量中的图像在屏幕上可见，你定义一个变量$pagenumbers，ID 为pages的div元素被分配给它。
然后使用一个for循环来创建类页面的几个 span 元素(等于图像的数量)。span 元素中的文本是 1，2...(作为页码)。span 元素被赋予类名pages，这样在类选择器.pages(在style.css文件中)中定义的属性可以自动应用于它们。跨度元素被附加到您分配给变量$pagenumbers的 ID pages的div元素中。
包含 span 元素(包含页码)的 ID pages的整个div元素被插入到通过变量next显示的第一个图像之前，当鼠标指针移动到页码上时，您可以将 CSS 类hover应用到页码(类page的 span 元素)并将其移除。然后，您需要将 mousedown 事件附加到 span 元素(即页码)。
在这里，您可以使所有图像不可见，包括当用户选择任何页码时显示的当前图像。最后，根据所选页码的值，从$pic对象(包含一个图像数组)中检索图像；您将它存储在变量next中，并显示在变量next中检索到的图像。
在执行 jQuery 代码时，最初显示的第一个图像的顶部带有页码，如图 7-8 所示。
图 7-8
第一个图像，以及它上面的页码列表
选择页码后，将显示该页码的图像，如图 7-9 所示。
图 7-9
点击第 4 页时出现的图像
7.8 向任一方向移动图像
问题
您希望在网页上的一个不可见窗口中显示一些图像，并在图像下方显示左右箭头按钮。您希望它的工作方式是，当按下左箭头按钮时，图像向左侧移动(使隐藏的图像向左滚动)，当选择右箭头按钮时，所有图像向右滚动以显示任何隐藏的图像。
解决办法
创建一个 HTML 文件来定义要显示的图像。图像嵌套在 ID 为images的div元素中(通过 jQuery 代码应用样式和代码)，而 jQuery 代码又嵌套在 ID 为scroller的div元素中。您要创建的 HTML 文件如下所示:
shufflingeither.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="styleshufflingeither.css" type="text/css" media="screen" />
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="shufflingeitherjq.js" type="text/javascript"></script>
</head>
<body>
<div id="scroller">
<div id="images">
<a href="http://example.com" ><img src="chip.jpg" width=150px height=150px /></a>
<a href="http://example.com"><img src="chip2.jpg" width=150px height=150px /></a>
<a href="http://example.com"><img src="chip3.jpg" width=150px height=150px /></a>
<a href="http://example.com" ><img src="chip4.jpg" width=150px height=150px /></a>
<a href="http://example.com" ><img src="chip5.jpg" width=150px height=150px /></a>
</div>
</div>
<div id="direction">
<img src="leftarrow.png" class="leftarrow"/>
<img src="rightarrow.png" class="rightarrow"/>
</div>
</body>
</html>
图像包含在锚元素中，以便将访问者导航到目标网页，显示关于所选图像的详细信息。目前，假设目标网站是某个假想的网站。包含img元素的锚元素包含在两个div元素中，一个在另一个的内部。外部的div元素被赋予 ID scroller，内部的div元素被赋予 ID images。对于外部的div元素，应用样式属性来定义不可见窗口的宽度；也就是说，它决定了你一次想看多少张图片。对于内部的div元素，应用决定整个图像块总宽度的样式属性。所有图像都被指定了相同的宽度和高度 150 像素，以给它们一个统一的外观。此外，您还可以使用img元素来显示左右箭头按钮。这些img元素分别被赋予类名leftarrow和rightarrow，这样在类选择器中定义的样式属性就可以应用于它们。这两个箭头嵌套在分配了 ID direction的div元素中。在样式表styleshuflingeither . CSS中定义div元素和img元素的样式属性，如下所示:
styleshufflingeither.css
#scroller {
position: relative;
height:150px;
width: 460px;
overflow:hidden;
margin:auto;
}
#images{
width: 770px;
}
#images a img { border:0; position:relative;}
#direction
{
width: 460px;
margin:auto;
}
.leftarrow{margin-top:10px;}
.rightarrow{margin-left:300px;margin-top:10px;}
选择左右箭头图像时使图像滚动的 jQuery 代码如下所示:
shufflingeitherjq.js
$(document).ready(function() {
var $wrapper=$('#scroller a img');
var leftanimator = function(imgblock) {
imgblock.animate({left:-310 }, 2000);
}
var rightanimator = function(imgblock) {
imgblock.animate({left:0 }, 2000);
}
$('.leftarrow').on("mousedown", function(event){
leftanimator($wrapper);
event.preventDefault();
});
$('.rightarrow').on("mousedown", function(event){
rightanimator($wrapper);
event.preventDefault();
});
});
它是如何工作的
您可以在style.css文件中看到，ID 选择器#scroller包含设置为relative的position属性，这是使图像滚动的必要条件(当您为图像指定相对于其当前位置的某个位置时，图像会滚动)。高度和宽度分别设置为 150 像素和 460 像素。
一次最多显示三幅图像需要 460px 的宽度(宽度包括三幅各为 150px 的图像的宽度，中间留有一些空间)。将overflow属性设置为hidden,使不在该不可见窗口宽度之外的图像区域不可见。将margin属性设置为auto，使水平滚动条出现在浏览器窗口宽度的中心。
ID 选择器#images包含将应用于内部div元素的宽度属性。
width 属性设置为 770px，这是您希望在滚动条中显示的所有图像的总宽度(图像之间有一定距离)。这里的 width 属性决定了您希望在水平滚动条中看到的图像数量。此外，样式表包含一个类型选择器#images a img来将样式属性应用到嵌套在锚元素中的img元素，锚元素又被 ID 为images的 HTML 元素包围。正如您所注意到的，images包含设置为 0 的border属性(使图像的边界不可见)和设置为相对的position属性以使图像滚动。
ID 选择器#direction包含将应用于左右箭头图像块的样式属性。设置为 460px 的width属性指定该块(两个箭头图像的)可以占据的最大宽度，设置为auto的margin值使该块(两个图像的)出现在浏览器窗口的中心，就在图像块的下面。
类别选择器.leftarrow包含自动应用于左箭头图像的属性。它将margin-top属性设置为10px,使左箭头与其顶部的图像块保持 10px 的距离。同时，类选择器.rightarrow包含自动应用于右箭头图像的样式属性。它包含设置为300px的margin-left属性，以使右箭头图像在分配的 460px 的宽度内右对齐，并且margin-top属性设置为10px，以使其与顶部的图像块保持 10px 的距离。
现在转到这个解决方案中的 jQuery 代码，您会注意到 ID 为scroller的div元素的锚元素中嵌套的所有图像都被检索并存储在一个名为$wrapper的变量中。
接下来定义一个名为leftanimator的函数，该函数接受参数imgblock，它缓慢地向左移动，并在距离左边界-310px 处停止(左边界内 310px)。因此，图像块左侧的两个图像消失在不可见窗口的左边框内，使得右侧的两个图像(之前隐藏的)变得可见。
rightanimator方法接受参数imgblock，它缓慢地向右移动，并在距离左边界 0px 处停止。也就是说，它使图像块向右边界滚动，并在块的第一个图像变得可见时停止。当前三个图像在不可见窗口中可见时，滚动停止。它使右边的两个图像变得不可见。
接下来，在左箭头图像上附加一个 mousedown 事件，当 mousedown(即鼠标点击事件)发生时，调用leftanimator函数，将包含所有五个图像块的$wrapper变量发送给它，该变量将被赋给它的参数imgblock。该函数使图像块向左滚动，显示最后三幅图像。为事件对象调用preventDefault方法，以避免导航到图像(嵌套在锚元素中)所指向的目标网站。
最后，在右箭头图像上附加一个 mousedown 事件，当鼠标点击事件发生时，rightanimator函数被调用，包含所有五个图像块的$wrapper变量被发送给它，并将被赋给它的参数imgblock。该功能使图像块向右滚动，使前三个图像重新出现在屏幕上。调用事件对象的preventDefault方法以避免导航到图像(嵌套在锚元素中)所指向的目标网站。最初，前三幅图像连同其下方的左右箭头一起显示，如图 7-10 所示。
图 7-11
选择左箭头时，图像向左滚动
图 7-10
最初会出现三个图像，底部会出现左右箭头。选择左箭头按钮时，图像将向左滚动，您将能够看到(五幅图像块的)最后三幅图像，如图 7-11 所示
类似地，如果您选择右箭头按钮，图像将向右滚动，使前三个图像重新出现。
7.9 编写钟摆滚动条
问题
你有一个由五幅图像组成的块，你想让它工作，这样最初五幅图像中的三幅出现在一个不可见的窗口中。然后这些图像应该向左滚动，消失在窗外，就好像它们在钟摆上摆动。当最后一个图像也消失时，您希望图像从左边界出现并向右边界滚动(使最后一个图像首先出现，然后是第四个，依此类推)。所有图像将向右边界滚动，并从窗口中消失。当第一个图像消失时，您希望图像再次向左边界滚动，并且该过程继续。
解决办法
让我们建立一个 HTML 文件来定义您想要显示的图像。图像嵌套在 ID 为images的div元素中(通过 jQuery 代码应用样式和代码)，而 jQuery 代码又嵌套在 ID 为scroller的div元素中。HTML 文件如下所示:
pendulum.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="styleshufflingeither.css" type="text/css" media="screen" />
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="pendulumjq.js" type="text/javascript"></script>
</head>
<body>
<div id="scroller">
<div id="images">
<a href="http://example.com" ><img src="chip.jpg" width=150px height=150px /></a>
<a href="http://example.com"><img src="chip2.jpg" width=150px height=150px /></a>
<a href="http://example.com"><img src="chip3.jpg" width=150px height=150px /></a>
<a href="http://example.com" ><img src="chip4.jpg" width=150px height=150px /></a>
<a href="http://example.com" ><img src="chip5.jpg" width=150px height=150px /></a>
</div>
</div>
</body>
</html>
图像包含在锚元素中，以便将访问者导航到目标网页，显示所选图像的详细信息。目前，假设目标网站是某个假想的网站。
包含img元素的锚元素包含在两个div元素中，一个在另一个的内部。外部的div元素被赋予 ID scroller，内部的div元素被赋予 ID images。对于外部的div元素，应用样式属性来定义不可见窗口的宽度；也就是说，它决定了你一次想看多少张图片。对于内部的div元素，应用决定整个图像块总宽度的样式属性。所有图像都被指定了相同的宽度和高度 150 像素，以给它们一个统一的外观。
在这个菜谱中，您将使用您在菜谱 7-8 中使用的同一样式表 styleshufflingeither.css ，来将样式属性应用到div元素和img元素。
让图像像钟摆一样滚动的 jQuery 代码如下所示:
pendulum MQ . js】的缩写
$(document).ready(function() {
var $wrapper=$('#scroller a img');
var left_rightanimator = function() {
$wrapper.animate(
{left:-770}, 5000,
function() {
$wrapper.animate({left:465 }, 5000);
left_rightanimator();
}
);
}
left_rightanimator();
});
它是如何工作的
您可以在style.css文件中看到，ID 选择器#scroller包含一个设置为relative的position属性，这是使图像滚动的必要条件(当您为图像指定相对于其当前位置的某个位置时，图像会滚动)。高度和宽度分别设置为 150 像素和 460 像素。
一次最多显示三个图像需要 460px 的宽度(宽度包括三个 150px 宽度的图像的宽度，中间留有一些空间)。overflow属性被设置为hidden以使落在该不可见窗口宽度之外的图像区域不可见。将margin属性设置为auto，使水平滚动条出现在浏览器窗口宽度的中心。
ID 选择器#images包含应用于内部div元素的width属性。
width 属性设置为 770px，这是您希望在滚动条中显示的所有图像的总宽度(图像之间有一定距离)。这里的 width 属性决定了您希望在水平滚动条中看到的图像数量。
此外，样式表包含一个类型选择器#images a img来将样式属性应用到嵌套在锚元素中的img元素，锚元素又被 ID 为images的 HTML 元素包围。
它包含设置为0的border属性(使图像的边框不可见)和设置为relative的position属性(使图像滚动)。现在看看 jQuery 代码，所有嵌套在锚元素和 ID 为scroller的div元素中的图像都被检索并存储在$wrapper变量中。也就是说，$wrapper变量包含五幅图像的整个块。
接下来定义一个名为left_rightanimator的函数，它将图像块动画化到(不可见窗口的)左边界，并在距离左边界–770px 处停止(即左边界内 770 px)，这将使五个图像的整个块消失(回想一下，每个图像宽 150px，图像之间有一些空间)。同样，图像块被设置为从左边界出现，并被设置为向右移动(使最后一个图像首先出现)，并且当第一个图像也消失在离左边界 465px 的窗口之外(从右边界)时，即当第一个图像也消失在不可见窗口的右边界中时，滚动将停止。
这个方法的最后一个动作是递归调用left_rightanimator()函数，使图像块保持左右滚动。最后，调用left_rightanimator()函数让流程继续进行。
图像向左边界滚动，消失，从左边界重新出现，然后向右边界滚动。向左滚动时，最后两幅图像如图 7-12 所示。
图 7-12
图像向左滚动并消失
7.10 使用数组滚动图像
问题
你有一个由五幅图像组成的块，你想让它工作，这样最初五幅图像中的三幅出现在不可见窗口中。然后这些图像应该向左边界滚动(使最后两个隐藏的图像出现在不可见的窗口中)。所有的图像应该消失在左边界。你需要借助数组来实现。
解决办法
您将使用在配方 7-9 中使用的相同 HTML 文件和样式表文件styleshufflingeither.css。使每个图像向左边界滚动并逐个变得不可见的 jQuery 代码如下:
scroll ingsingarraysjq . js
$(document).ready(function() {
var $pic = $('#scroller a img');
var imgs = $pic.length;
var next;
for (var i=0;i<imgs;i++){
next=$pic.eq(i);
scroll(next);
};
});
function scroll(im)
{
im.animate({'left': -770}, 5000);
};
这里，首先检索嵌套在锚元素中的所有图像，这些锚元素又嵌套在 ID 为scroller的div元素中，并将它们存储在变量$pic中。$pic现在是一个由五幅图像组成的数组。然后找出the $pic数组中图像的数量，并将计数存储在imgs变量中。在for循环中，你从$pic数组中获取一幅图像，并将其存储在变量next中。也就是说，所有的图像将被逐一分配给变量next。要滚动，您调用函数scroll，存储在变量next中的图像被传递给它(也就是说，变量next被赋给它的参数im)。
在scroll()方法中，图像被设置为向左移动，并在距离左边界-770px(即左边界内 770px)处停止，以使最后一个(第五个)图像消失。滚动时的图像可能如图 7-13 所示。
图 7-13
所有图像向左滚动
在其他图像上滚动图像
假设您想要修改上面的解决方案，因为您想要三个图像保持静止，一个图像(第四个)在这三个图像的块上滚动。该解决方案的 jQuery 代码如下:
scroll imageoverjq . js
$(document).ready(function() {
var $pic = $('#scroller a img');
var next;
next=$pic.eq(3);
scroll(next);
});
function scroll(im)
{
im.animate({'left': -770}, 5000);
};
您可以看到，在第四条语句中，变量next被赋给了$pic数组中的第四幅图像(位于索引位置 3 ),并被传递给了scroll函数来滚动图像。最初，你有三个图像出现在不可见窗口中，如图 7-14 所示。
图 7-14
加载网页时的初始图像
第四幅图像从右边界开始，在三幅图像上向(不可见窗口的)左边界滚动，如图 7-15 所示，其中第四幅图像在第二幅和第三幅图像之上。
图 7-15
在其他图像之上向左滚动的图像
仅滚动悬停的图像
你有三个最初出现在不可见窗口中的图像，并且你想要这样的功能，即任何被悬停的图像都将向左边界滚动并消失。jQuery 代码如下:
scroll imagehoverjq . js
$(document).ready(function() {
var $pic = $('#scroller a img');
$pic.hover(
function(){
$(this).animate({'left': -770}, 5000);
});
});
您可以看到，第三条语句将悬停事件附加到图像块(存储在$pic数组中),并且在其事件处理函数中，您将悬停图像向左边界移动，并使其停在距离左边界–770px 的位置(即左边界内 770 px ),使其完全不可见。如果你将鼠标悬停在中间的图像上，它将开始向左滚动，如图 7-16 所示。
图 7-16
悬停在上面的图像开始向左滚动
当中间图像完全滚动到左边界时，图像块的中间会留下一个空白，如图 7-17 所示。
图 7-17
中间的图像向左滚动，形成一个空白
淡出和替换图像
您有三个最初出现在不可见窗口中的图像，并且您希望悬停在其上的任何图像都通过淡出效果慢慢变得不可见，并且其空间由下一个图像填充(使隐藏的图像可见)。jQuery 代码如下:
fadiingutreplacingj . js
$(document).ready(function() {
var $pic = $('#scroller a img');
$pic.hover(
function(){
$(this).fadeOut(5000);
});
});
一个悬停事件被附加到$pic变量，这个变量就是五个图像的数组。在 hover 事件的事件处理函数中，您让被悬停的图像在 500 毫秒内淡出。当图像变得完全不可见时，$pic数组中的下一个图像将填充空白空间。
最初，窗口中有三幅图像可见，如图 7-16 所示。当第一个图像被悬停时，它会慢慢淡出，其位置将被序列中的下一个图像占据。
向左滚动一幅图像，向右滚动一幅图像，并淡出中间
让我们以对当前配方的最后的、相当奇特的修改来结束这一组配方，只是为了给你更多关于什么是可能的想法，现在你已经有了关于滚动和褪色的核心解决方案！
假设您有三个最初出现在不可见窗口中的图像，您希望第一个图像向左边界滚动并消失，第三个图像向不可见窗口的右边界滚动并消失，中间的图像保持在原来的位置并慢慢淡出。这一次，jQuery 代码如下:
滚动式飞行 jq.js
$(document).ready(function() {
var $pic = $('#scroller a img');
$pic.eq(0).animate(
{'left': -155}, 5000,
function(){
$pic.eq(2).animate(
{'right': -155}, 5000,
function(){
$pic.fadeOut(5000);
}
);
}
);
});
ID 为scroller的锚元素中嵌套的所有图像元素都被检索并存储在变量$pic中。第一个图像($pic数组中索引位置 0 处的图像)设置为向左边界动画化，并在距离左边界-155px(即左边界内 155px)处停止，这足以让 150px 宽的图像消失。同样，第三个图像被设置为向右边界移动，并在距离右边界-155 像素(即右边界内 155 像素)处停止，以使图像消失。留下的中间图像设置为在 5000 毫秒内慢慢淡出。
7.11 摘要
在本章中，您学习了如何显示从左向右无限滑动的图像。你还学会了让球弹跳。你学会了在一个盒子里水平和垂直滑动图像。最后，您学会了制作新闻滚动器。
在下一章，你将学习表格。您将学习如何对表格进行排序、过滤所需信息、对表格内容进行分页等。
八、处理表格
在本章中，您将尝试以下将在餐桌上执行的食谱:
悬停在表格行上
突出显示替代列
筛选出选定的行
擦除选定的列
给表格编页码
展开和折叠列表项
展开和折叠表格的行
排序列表项目
整理表格
从表中筛选行
8.1 悬停在表格行上
问题
您有一个由几行和几列组成的表格。您希望当您悬停在任一行上时(鼠标指针在其上移动)，该行应该突出显示。
解决办法
创建一个包含表格元素的 HTML 文件，表格元素中定义了一些行和列元素(th, td, tr)。HTML 文件如下所示:
hover hover ws . html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="hoverrowsjq.js" type="text/javascript"></script>
</head>
<body>
<table border="1">
<thead>
<tr><th>Roll</th><th>Name</th><th>Marks</th></tr>
</thead>
<tbody>
<tr><td>101</td><td>John</td><td>87</td></tr>
<tr><td>102</td><td>Naman</td><td>90</td></tr>
<tr><td>103</td><td>Chirag</td><td>85</td></tr>
</tbody>
</table>
</body>
</html>
在样式表文件style.css中定义一个名为.hover的样式规则，将样式属性应用于悬停的行:
style.css
.hover { background-color: #00f; color: #fff; }
将悬停效果应用于表格行的 jQuery 代码如下:
hoverhowsjq . js
$(document).ready(function() {
$('tbody tr').hover(
function(){
$(this).find('td').addClass('hover');
},
function(){
$(this).find('td').removeClass('hover');
}
);
});
它是如何工作的
在 HTML 文件中，您可以看到定义了一个边框为 1px 的表格。它有三个列标题(使用th元素定义):滚动、名称和标记。此外，它还包含三行学生记录。表格标题嵌套在thead元素中，表格主体(包含信息的行)嵌套在tbody元素中。
在样式表文件中，.hover样式规则包含设置为# 00f的background-color属性和设置为值#fff的color属性，以将悬停行的背景色和前景色分别更改为蓝色和白色。
在 jQuery 代码中，您将hover()事件附加到嵌套在tbody元素中的tr(行元素)上，因为您希望只悬停包含学生信息的行，而不是包含列标题的行。在hover事件的事件处理函数中，您搜索悬停行的td元素，并应用样式规则.hover(存在于样式表文件style.css中)中定义的属性将它们的背景色和前景色分别更改为蓝色和白色，以便突出显示它们。
最初，表格如图 8-1 所示。
图 8-1
由几行和几列组成的表格
将鼠标指针移动到任一行上时，它们将被高亮显示，如图 8-2 所示。
图 8-2
悬停在突出显示的行上
8.2 突出显示备选列
问题
您有一个由几行和几列组成的表格。您希望突出显示表格的备选列(即，对它们应用了一些样式)。
解决办法
对于本解决方案，您将使用与配方 8-1 中相同的 HTML 和样式表文件(style.css)。
将样式规则.hover中定义的样式属性应用于表的替代列的 jQuery 代码如下:
**```js
$(document).ready(function() {
$('td:nth-child(odd)').addClass('hover');
});
### 它是如何工作的
由于您在上面的 jQuery 代码中使用的是`:nth-child()`方法，我们先来了解一下它是做什么的。
#### :第 n 个子代( )
此方法用于检索作为其父元素的第 n 个子元素的所有元素。此方法从 1 开始(即，它从 1 而不是从 0 开始计数)。该方法在以下两个方面不同于`:eq()`方法:
* `:eq()`方法只匹配一个元素，而`:nth-child()`方法匹配多个元素(即，一个元素对应一个具有指定索引的父元素)。
* `:eq()`方法是基于 0 的(即从 0 开始计数)，而`:nth-child()`是基于 1 的(即从 1 开始计数)。
例如，
```js
$('tr:nth-child(3)');
选择作为其父元素(可能是一个tbody或table元素)的第三个子元素的所有tr元素，因此它将选择表格的第三行。
同样，声明
$('tr:nth-child(even)');
选择表格中所有偶数行。
在上面的 jQuery 代码中，语句
$('td:nth-child(odd)').addClass('hover');
选择表格的奇数列(换句话说，每个td都是其父列的奇数子列)并对其应用样式规则hover中定义的样式属性，将其背景色改为蓝色，前景色改为白色，如图 8-3 所示。
图 8-3
突出显示奇数列的表格
突出显示替代行
要突出显示表中的备用行，请修改 jQuery 代码，如下所示:
亮显旧行 sjq.js
$(document).ready(function() {
$('table tr:odd').addClass('hover');
});
该 jQuery 代码将选择表中所有奇数行，并将样式规则.hover中定义的样式属性应用于这些行，以便高亮显示它们，如图 8-4 所示。
图 8-4
突出显示替代行的表格
突出显示悬停在上面的列
您希望只突出显示那些列标题被悬停的列(即，当鼠标指针移动到任何列标题上时，您希望突出显示该列)。jQuery 代码如下:
高亮度 column jq . js
$(document).ready(function() {
$('th').hover(
function(){
var colindex=$(this).parent().children().index(this);
$('table td:nth-child('+(colindex+1)+')').addClass('hover');
},
function(){
$('table tr').children().removeClass('hover');
}
);
});
在开始理解 jQuery 代码之前，让我们先了解一下代码中使用的.index()方法。
。索引( )
此方法在每个匹配的元素中搜索传递的元素，如果找到，则返回该元素的序号索引，从 0 开始。如果在匹配的集合中没有找到传递的元素，则返回-1。如果在这个方法中传递了一个 jQuery 对象，那么只检查第一个元素。
语法:
.index(element)
上述 jQuery 代码的含义如下。首先将悬停事件附加到表格标题(th)元素。
当用户悬停在一个表格标题上时，您找出该列的索引(列号)并将该索引位置存储在变量colindex中。.index()方法使用基于 0 的计数，这意味着它从 0 开始计数。因此，索引 0 表示悬停在第一个列标题上，1 表示悬停在第二个列标题上，依此类推。
然后，您可以将样式规则.hover中定义的样式属性应用于索引位置存储在变量colindex中的列。由于:nth-child()方法是基于 1 的(即，与从 0 开始计数的.index()方法相比，它是从 1 开始计数的)，所以在将样式规则.hover应用到由hover事件的事件处理函数中的colindex表示的列之前，您需要将存储在变量colindex中的值增加 1。
在事件处理函数(当鼠标指针离开列标题时调用)中，从表格的所有行中删除样式规则.hover中定义的样式属性。
标题被悬停的列的内容被突出显示，如图 8-5 所示。
图 8-5
悬停在列标题上的突出显示的列内容
悬停时突出显示列标题
在上面的示例中，当鼠标悬停在列标题上时，列内容会高亮显示，但列标题不会高亮显示。它看起来和最初一样。您需要在 jQuery 代码中再添加一条语句(以粗体显示)来突出显示列标题:
高亮度 colheadjq.js
$(document).ready(function() {
$('th').hover(
function(){
var colindex=$(this).parent().children().index(this);
$(this).addClass('hover');
$('table td:nth-child('+(colindex+1)+')').addClass('hover');
},
function(){
$('table tr').children().removeClass('hover');
}
);
});
该声明
$(this).addClass('hover');
如图 8-6 所示，当鼠标悬停在列标题上时，将样式规则.hover中定义的样式属性应用于列标题。
图 8-6
突出显示的列内容和悬停在列标题上的列标题
当鼠标悬停在表格上时，突出显示表格的各个单元格
您希望当鼠标悬停在表格中除列标题之外的任何单元格上时，它必须高亮显示。执行此操作的 jQuery 代码如下:
高亮度 cell hoverdajq . js
$(document).ready(function() {
$('td').hover(
function(){
$(this).addClass('hover');
},
function(){
$('table tr').children().removeClass('hover');
}
);
});
你可以看到，这次悬停事件被附加到了td元素上，因此如果任何单元格被悬停(除了列标题)，样式规则.hover中定义的属性将被应用到它，以高亮显示它，如图 8-7 所示。
图 8-7
悬停时表格单元格高亮显示
8.3 过滤行
问题
您有一个由几行和几列组成的表格。您希望当鼠标指针在任何一行上移动时，它必须被突出显示，并且当用户单击该行的任何部分时，除了被单击的行之外，表中的所有行都应该消失。
解决办法
对于本解决方案，您将使用与配方 8-1 中相同的 HTML 和样式表文件(style.css)。
jQuery 代码突出显示悬停的行，并使除被单击的行之外的所有行变得不可见，如下所示:
Filterrowsjq.js
$(document).ready(function() {
$('tbody tr').hover(
function(){
$(this).find('td').addClass('hover');
},
function(){
$(this).find('td').removeClass('hover');
}
);
$('tbody tr').click(function(){
$('table').find('tbody tr').hide();
$(this).show();
});
});
它是如何工作的
在 jQuery 代码的前半部分，您将hover()事件附加到嵌套在tbody元素中的tr(行元素)上，因为您希望只悬停包含学生信息的行，而不是包含列标题的行。在hover事件的事件处理函数中，您搜索悬停行的td元素，并应用样式规则.hover(存在于样式表文件style.css中)中定义的属性将它们的背景色和前景色分别更改为蓝色和白色，以便突出显示它们。
在 jQuery 代码的后半部分，您将 click 事件附加到所有的tr元素(嵌套在tbody元素中)，并且在它的事件处理函数中，您搜索所有的tr元素(嵌套在tbody元素中)并且使它们全部不可见(即，除了列标题之外的所有行都不可见)。此后，您使被单击的行的内容可见，因此只有被单击的行出现在表中。
将鼠标悬停在表格的任意一行上，表格将出现如图 8-8 所示。
图 8-8
该行在被覆盖时会突出显示
点击任意一行，除了被点击的那一行之外，其他行都不可见，如图 8-9 所示。
图 8-9
选定的行留在表格中
隐藏选定的行
您可以修改上面的 jQuery 代码来反转这个过程(即，您可以隐藏选中的行，而不是保留选中的行)。jQuery 代码如下:
Hidingrowsjq.js
$(document).ready(function() {
$('tbody tr').hover(
function(){
$(this).find('td').addClass('hover');
},
function(){
$(this).find('td').removeClass('hover');
}
);
$('tbody tr').click(function(){
$(this).hide();
});
});
您可以在这个 jQuery 代码中看到，通过使用.hide()方法使选中的行不可见，从而隐藏了该行。将鼠标悬停在最后一行时，表格可能会出现如图 8-8 所示。点击该行时，您会发现它被删除，剩下的表格可能会出现，如图 8-10 所示。
图 8-10
选定的行将从表格中删除
8.4 隐藏选定的列
问题
您有一个由几行和几列组成的表格。您希望当鼠标指针在任何列标题上移动时，该列(包括列标题)被突出显示。此外，当用户单击任何列标题时，整个列及其标题都会被隐藏。
解决办法
对于本解决方案，您将使用与配方 8-1 中相同的 HTML 和样式表文件(style.css)。
突出显示该列(当其列标题悬停在上方时)并使其内容在被单击时不可见的 jQuery 代码如下:
hiding column jq . js的缩写形式
$(document).ready(function() {
$('th').hover(
function(){
var colindex=$(this).parent().children().index(this);
$(this).addClass('hover');
$('table td:nth-child('+(colindex+1)+')').addClass('hover');
},
function(){
$('table tr').children().removeClass('hover')
;
}
);
$('th').click(function(){
$(this).hide();
colindex=$(this).parent().children().index(this);
$('table td:nth-child('+(colindex+1)+')').hide();
});
});
它是如何工作的
jQuery 代码的含义如下。首先将悬停事件附加到表格的所有列标题上。在事件处理程序中，找出被悬停的列标题的索引位置，并将其存储在变量colindex中。.index()方法使用基于 0 的计数(即从值 0 开始)。
然后，将样式规则.hover中定义的样式属性应用到突出显示的列标题和索引位置存储在colindex变量中的列(被悬停的那个)上，以突出显示它们。由于:nth-child()方法是从 1 开始的(也就是说，从 1 开始计数，而不是从 0 开始计数)，所以在突出显示它之前，将colindex的值增加 1。
当鼠标指针离开列标题时，您将从表格的所有行中删除样式规则.hover中定义的属性。
在 click 事件处理程序中，隐藏被点击的列标题，并找出它的索引，存储在colindex变量中。
最后，隐藏其值存储在colindex变量中的列内容(被单击的列标题的索引位置)。因此，当单击任何列标题时，列标题以及完整的列内容都将不可见。
将鼠标悬停在列标题上时，它将与整个列的内容一起高亮显示，如图 8-11 所示。
图 8-11
当鼠标悬停在列标题上时，列内容和列标题会突出显示
点击列标题，它将和列的内容一起被删除，如图 8-12 所示。
图 8-12
选定的列将从表格中删除
筛选出列
除了列标题被单击的列之外，您希望使表中的所有列都不可见。也就是说，您希望保留被单击的选定列(及其标题)，使其余的列不可见。
修改后的 jQuery 代码突出显示该列(当其列标题悬停在上方时),并隐藏除被单击列之外的所有列，如下所示:
过滤栏 jq . js】??
$(document).ready(function() {
$('th').hover(
function(){
var colindex=$(this).parent().children().index(this);
$(this).addClass('hover');
$('table td:nth-child('+(colindex+1)+')').addClass('hover');
},
function(){
$('table tr').children().removeClass('hover')
;
}
);
$('th').click(function(){
colindex=$(this).parent().children().index(this);
$('table th:not(:nth-child('+(colindex+1)+'))').hide();
$('table td:not(:nth-child('+(colindex+1)+'))').hide();
});
}
);
它是如何工作的
让我们看看这个 jQuery 代码中使用的:not()选择器。
:不是( )
该选择器选择与指定选择器不匹配的所有元素。例如，
$('table :not(.student)')
选择表格中不属于类别student的所有元素。
jQuery 代码的含义如下。在 hover 事件处理程序中，您找到被悬停的列标题的索引位置，并将其存储在变量colindex中。.index()方法使用基于 0 的计数(即从值 0 开始计数)。然后，将样式规则.hover中定义的样式属性应用到高亮显示的列标题和索引位置存储在colindex变量中的列(被悬停的那个)以高亮显示它。因为:nth-child()方法是从 1 开始的(即从 1 开始计数，而不是从 0 开始计数)，所以在高亮显示之前，将colindex的值增加 1。
当鼠标指针离开列标题时，您将从表格的所有行中删除样式规则.hover中定义的属性。
在 click 事件处理程序中，找出被点击的列标题的索引，并将该值存储在colindex变量中。
然后使用:not选择器隐藏所有未被点击的列标题(即，保留索引位置存储在colindex变量中的列标题)。其余的列标题不可见。
最后，隐藏其值不等于存储在colindex变量中的索引位置(被点击的列标题的索引位置)的所有列内容。也就是说，其列标题未被单击的所有列都是隐藏的。换句话说，唯一保持可见的列是其列标题被单击的列。
将鼠标悬停在列标题上时，它将与整个列的内容一起高亮显示，如图 8-13 所示。
图 8-13
当鼠标悬停在列标题上时，列标题和列内容会突出显示
点击任何列标题，该标题及其列内容将被过滤掉，使表格的其余列不可见，如图 8-14 所示。
图 8-14
选定的列被过滤掉
8.5 对表格进行分页
问题
您有一个由几行和几列组成的表格。您希望表格的行按页面显示。也就是说，在表格的顶部，您希望显示页码，并且当单击任何页码时，显示属于该页码的行。
解决办法
对于此解决方案，您将使用在配方 8-1 中使用的相同 HTML 文件。您需要定义样式规则来突出显示页码(当鼠标悬停在上面时)并在页码之间保持一定的间距。您定义的两个样式规则是.hover和.page，如下面的样式表文件所示:
style pagination . CSS
.hover { background-color: #00f; color: #fff; }
.page{ margin:5px; }
jQuery 代码将表中的行分成页面(取决于您希望每页看到的行数),并在单击页码时显示相应的行，如下所示:
page ingtablejq . js
$(document).ready(function() {
var rows=$('table').find('tbody tr').length;
var no_rec_per_page=1;
var no_pages= Math.ceil(rows/no_rec_per_page);
var $pagenumbers=$('<div id="pages"></div>');
for(i=0;i<no_pages;i++)
{
$('<span class="page">'+(i+1)+'</span>').appendTo($pagenumbers);
}
$pagenumbers.insertBefore('table');
$('.page').hover(
function(){
$(this).addClass('hover');
},
function(){
$(this).removeClass('hover');
}
);
$('table').find('tbody tr').hide();
var tr=$('table tbody tr');
$('span').click(function(event){
$('table').find('tbody tr').hide();
for(var i=($(this).text()-1)*no_rec_per_page;
i<=$(this).text()*no_rec_per_page-1;
i++)
{
$(tr[i]).show();
}
});
});
它是如何工作的
样式规则.hover包含分别设置为值#00f和#fff的background-color和color属性，将悬停页码的背景色变为蓝色，前景色变为白色。样式规则.page包含设置为5px的margin属性，以在页码之间创建 5px 的间距。
jQuery 代码执行以下任务。首先计算行数(嵌套在tbody元素中的tr元素)，并将计数存储在变量rows中。对于这个例子，您希望每页只看到一行，所以您将变量no_rec_per_page的值初始化为 1。接下来，您必须通过将总行数除以您希望在每页上看到的记录数来确定总页数。页数被分配给变量no_pages。在开始处理事件处理程序之前，要做的最后一件事是设置页码显示。首先定义 id 为pages的div元素，并将其赋给变量$pagenumbers。
在一个for循环的帮助下，你创建了几个包含页码 1、2…序列的 span 元素(等于页数), span 元素被赋予了名为page的类，这样在类选择器.page中定义的样式属性可以自动应用到所有的页码。最后，所有包含页码的 span 元素都被附加到 id pages的div元素中。为了完成这项工作，您将 id 为pages的div元素插入到 table 元素之前的变量$pagenumbers中。这使得页码出现在表格上方。
接下来，将hover()事件附加到页码上(类.pages的 span 元素)。在事件处理程序中，当鼠标指针移动到页码上时，突出显示页码(样式规则.hover中定义的属性应用于页码，将它们的背景色和前景色分别更改为蓝色和白色)。相反，当鼠标指针离开它们时，您删除了样式属性(样式规则.hover)。
在 hover 事件处理程序之后，因为您不想在页面第一次加载时看到任何数据，所以您隐藏了表格的所有行(tr元素嵌套在tbody元素中)，只保持列标题可见。只有当用户选择一个页码时，才会显示属于该页码的行。然后检索表中的所有行，并将它们存储在变量tr中(也就是说，现在tr是一个包含表中所有行的数组)。
在页码的 click 事件处理程序中，隐藏表格的所有行(仅保持列可见)。然后，使用tr数组显示被点击的页码范围内的行。
最初，你得到一个空白表格，顶部只有列标题和页码，如图 8-15 所示。
图 8-15
带有列标题和页码的表格
将鼠标悬停在任意页码上，该页码将被高亮显示，点击该页码，将显示该页码的行，如图 8-16 所示。
图 8-16
显示页码为 1 的行(假设每页 1 行)
您只显示了一行，因为您将变量no_rec_per_page(决定每页显示的行数)的值设置为 1(参考第 3 条语句)。让我们设置它的值等于 5。假设 HTML 文件的 table 元素中增加了一些行，你现在可以选择任意页码得到 5 行，如图 8-17 所示。
图 8-17
显示页码 1 的行(假设每页五行)
此外，您可以修改 jQuery 代码，在开头显示属于第 1 页的行(而不是只显示列标题；参见图 8-15 。默认情况下，显示第一页页码的行的 jQuery 代码如下:
行第一页 jq.js
$(document).ready(function() {
var rows=$('table').find('tbody tr').length;
var no_rec_per_page=1;
var no_pages= Math.ceil(rows/no_rec_per_page);
var $pagenumbers=$('<div id="pages"></div>');
for(i=0;i<no_pages;i++)
{
$('<span class="page">'+(i+1)+'</span>').appendTo($pagenumbers);
}
$pagenumbers.insertBefore('table');
$('.page').hover(
function(){
$(this).addClass('hover');
},
function(){
$(this).removeClass('hover');
}
);
$('table').find('tbody tr').hide();
var tr=$('table tbody tr');
for(var i=0;i<=no_rec_per_page-1;i++)
{
$(tr[i]).show();
}
$('span').click(function(event){
$('table').find('tbody tr').hide();
for(i=($(this).text()-1)*no_rec_per_page;i<=$(this).text()*no_rec_per_page-1;i++)
{
$(tr[i]).show();
}
});
});
您可以看到添加了一个for循环，使第一个页码的行(取决于分配给变量no_rec_per_page的值)在屏幕上可见。
8.6 展开和折叠列表项
问题
您有一个包含两个列表项的无序列表，这两个列表项又包含一个嵌套的无序列表。您希望这两个列表项在其左侧显示一个加号(+)图标(表示其中隐藏了一些项目)。当用户选择加号图标时，您希望列表项展开以显示隐藏在其中的所有元素，并且您还希望在展开模式下加号图标替换为减号(-)图标。
解决办法
创建一个 HTML 文件，其中包含一个无序列表，该列表包含两个列表项，茶和咖啡。两个列表项都被赋予类名drink，以便通过 jQuery 代码来识别和访问它们。第一个列表项( Tea )包含三个列表项的无序列表。三个列表项的文本分别是大吉岭、阿萨姆和喀拉拉邦。列表项阿萨姆邦被分配了名为drink的类，它包含一个无序列表项，有两个列表项:绿叶和草药。
第二个列表项， Coffee ，包含一个无序列表元素，其中有两个列表项: Cochin 和 Kerala 。HTML 文件如下所示:
Expandingcollapsinglist.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="styleexpandlist.css" type="text/css" media="screen" />
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="expandcollapselistjq.js" type="text/javascript"></script>
</head>
<body>
<ul>
<li class="drink">Tea
<ul>
<li>Darjeeling</li>
<li class="drink">Assam
<ul>
<li>Green Leaves</li>
<li>Herbal</li>
</ul>
</li>
<li>Kerala</li>
</ul>
</li>
<li class="drink">Coffee
<ul>
<li>Cochin</li>
<li>Kerala</li>
</ul>
</li>
</ul>
</body>
</html>
在没有应用任何样式或 jQuery 代码的情况下，上面的 HTML 文件在执行时显示无序列表及其各自的列表项，如图 8-18 所示。
图 8-18
无序列表元素及其列表项
要将加号和减号图标添加到列表项中，您需要应用某些样式规则。样式表文件style.css包含以下样式规则:
样式表导出列表. css
.plusimageapply{list-style-image:url(plus.jpg);}
.minusimageapply{list-style-image:url(minus.jpg);}
.noimage{list-style-image:none;}
为了将这些样式规则应用于列表项，并使它们在选择左侧的加号和减号图标时展开和折叠，您需要使用以下 jQuery 代码:
展开胶盖 q.js
$(document).ready(function() {
$('li.drink').addClass('plusimageapply');
$('li.drink').children().addClass('noimage');
$('li.drink').children().hide();
$('li.drink').each(
function(column) {
$(this).click(function(event){
if (this == event.target) {
if($(this).is('.plusimageapply')) {
$(this).children().show();
$(this).removeClass('plusimageapply');
$(this).addClass('minusimageapply');
}
else
{
$(this).children().hide();
$(this).removeClass('minusimageapply');
$(this).addClass('plusimageapply');
}
}
});
}
);
});
它是如何工作的
样式规则plusimageapply应用于所有包含嵌套无序列表的列表项(折叠模式),它包含设置为值url(plus.jpg)的list-style-image属性，用加号图标(存在于图像文件plus.jpg中)替换传统的项目符号。类似地，样式规则minusimageapply应用于扩展模式中的所有列表项，它包含设置为值url(minus.jpg)的list-style-image属性，以在列表项的左侧显示一个减号图标。(图像文件minus.jpg中包含一个减号图标。)样式规则noimage应用于所有没有无序列表嵌套的列表项，并且它包含设置为值none的list-style-image属性，以便用传统的项目符号显示它们。
jQuery 代码的含义如下。对类别drink的列表项(那些嵌套了无序列表项的列表项)应用样式规则plusimageapply，使加号图标出现在它们的左侧。对于其余的列表项(其中没有嵌套的列表项)，应用样式规则noimage使它们以传统的项目符号出现。最初，您使列表项的所有嵌套元素(包含无序列表项)不可见。也就是说，您让所有列表项(包含无序列表项)以折叠模式显示。
要应用扩展功能，您需要将一个 click 事件逐个附加到每个列表项(其中有一个无序列表项)。在事件处理程序中，检查发生单击事件的列表项是否应用了样式规则plusimageapply。也就是说，测试列表项是否有加号图标。如果有，则显示列表项的隐藏内容。
然后，删除样式规则plusimageapply的样式属性，并应用样式规则minusimageapply的样式属性，将展开列表项的加号图标替换为减号图标。
如果被点击的列表项左边有一个减号图标(即样式规则plusimageapply没有应用于它)，那么你隐藏了嵌套的内容。
您还可以删除样式规则minusimageapply的样式属性，并应用样式规则plusimageapply的样式属性，将处于折叠模式的列表项的减号图标替换为加号图标(您需要折叠应用了minusimageapply样式规则并被单击的列表项)。
最初，列表项将以折叠模式出现，左侧有一个加号图标，如图 8-19 所示。
图 8-19
折叠模式下的两个列表项
选择加号图标(或列表项本身)，它将被展开，显示其中嵌套的无序列表，并将加号图标替换为减号图标，如图图 8-20 所示。阿萨姆邦列表项中有一个无序列表项，这就是为什么它的左边有一个加号图标。
图 8-20
单击时显示的第一个列表项的内容
在选择阿萨姆邦列表项的加号图标时，会展开显示其中隐藏的列表项，加号图标会被减号图标取代，如图 8-21 所示。
图 8-21
单击时显示的第一个列表项的嵌套列表项的内容
在选择咖啡列表项的加号图标(或列表项本身)时，会展开显示其中的列表项，加号图标会被减号图标取代，如图 8-22 所示。
图 8-22
单击时显示的第二个列表项的内容
8.7 展开和折叠表格的行
问题
假设您有一个由 15 行组成的表，每行有三列。该表代表学生的记录。该表最初显示三行:辊 101-105、辊 106-110、辊 111-115 。您希望一次最多看到五个学生的记录，所以如果您将鼠标悬停在第行 Roll 101-105 上，它会展开以显示编号在 101 和 105 之间的学生记录。类似地，如果您将鼠标悬停在第行 Roll 106-110 上，它会展开以显示具有给定范围的编号的学生记录，依此类推。
解决办法
创建一个包含表格元素的 HTML 文件，该表格元素包含表格标题和由 15 行(tr)元素组成的表格体，如下所示:
Expandcollapserows.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="expandcollapserowsjq.js" type="text/javascript"></script>
</head>
<body>
<table border="1">
<thead>
<tr><th>Roll</th><th>Name</th><th>Marks</th></tr>
</thead>
<tbody>
<tr><td colspan=3 class="studgroup" align="center">Roll 101-105</td></tr>
<tr><td>101</td><td>John</td><td>87</td></tr>
<tr><td>102</td><td>Naman</td><td>90</td></tr>
<tr><td>103</td><td>Chirag</td><td>85</td></tr>
<tr><td>104</td><td>David</td><td>92</td></tr>
<tr><td>105</td><td>Kelly</td><td>81</td></tr>
<tr><td colspan=3 class="studgroup" align="center">Roll 106-110</td></tr>
<tr><td>106</td><td>Charles</td><td>77</td></tr>
<tr><td>107</td><td>Jerry</td><td>91</td></tr>
<tr><td>108</td><td>Beth</td><td>75</td></tr>
<tr><td>109</td><td>Caroline</td><td>82</td></tr>
<tr><td>110</td><td>Hanen</td><td>71</td></tr>
<tr><td colspan=3 class="studgroup" align="center">Roll 111-115</td></tr>
<tr><td>111</td><td>Douglas</td><td>57</td></tr>
<tr><td>112</td><td>Tim</td><td>86</td></tr>
<tr><td>113</td><td>Michael</td><td>68</td></tr>
<tr><td>114</td><td>Kimbley</td><td>88</td></tr>
<tr><td>115</td><td>Christina</td><td>72</td></tr>
</tbody>
</table>
</body>
</html>
表格标题由嵌套在thead元素中的th元素表示，学生记录由嵌套在tbody元素中的tr元素表示。要指定一个 5 行的块，您需要定义 3 行(由一个跨越 3 列的td元素组成)，分别称为 Roll 101-105、Roll 106-110 和 Roll 111-115 。这些行(td元素跨越三列)被分配了类studgroup，以便在 jQuery 中识别和使用它们。
为了突出显示这些行，在样式表文件style.css中定义一个样式规则.hover，如下所示:
style.css
.hover { background-color: #00f; color: #fff; }
当鼠标悬停在相应的行(指定相应的行块)上时，扩展隐藏行的 jQuery 代码如下:
展开 collapserowssjq . js
$(document).ready(function() {
$('table tbody tr').hide();
$('table tbody').find('.studgroup').parent().show();
$('tbody tr').hover(
function(){
var tr=$('table tbody tr');
var rindex=$(this).parent().children().index(this);
for(var i=rindex;i<=rindex+5;i++)
{
$(tr[i]).show();
}
$(this).addClass('hover');
},
function(){
$('table tbody tr').hide();
$('table tbody').find('.studgroup').parent().show();
$(this).removeClass('hover');
}
);
});
它是如何工作的
.hover样式规则包含设置为#00f的background-color属性和设置为#fff的color属性，以将悬停行的背景色和前景色分别更改为蓝色和白色。
jQuery 代码的含义如下。首先隐藏嵌套在表格的tbody元素中的所有行(即，除了表格标题之外，隐藏所有的行)。
然后显示代表五行块的三行(由跨越三列的td元素组成): Roll 101-105、Roll 106-110 和 Roll 111-115 。这三行被赋予类名studgroup。
然后将悬停事件附加到表格的可见行。在事件处理程序中，当鼠标指针移动到该行上时高亮显示该行(在样式规则.hover中定义的属性被应用到该行，将其背景和前景色分别更改为蓝色和白色)。相反，当鼠标指针离开该行时，您将删除样式属性(样式规则.hover)。同样，在悬停事件处理程序中，您检索表中的所有行，并将它们存储在变量tr中(即，现在tr是一个包含表中所有行的数组，您找出用户悬停的行的索引号，并将其存储在变量rindex)。此后，在一个for循环的帮助下，显示接下来的 5 行(即，显示行标题下的行(类名studgroup)。
在鼠标指针离开行时执行的悬停事件的事件处理程序中，除了删除hover样式规则的属性之外，还隐藏了除标题行之外的所有行。
在执行上面的 jQuery 代码时，您会发现带有文本 **Roll 101-105、Roll 106-110、**和 Roll 111-115 的三行，它们指定了下面的记录组，如图 8-23 所示。
图 8-23
带有行的表格，指定其下的行组
将鼠标悬停在任一行上时，将显示嵌套在类名studgroup的行中的五条记录。因此，如果您将鼠标悬停在行 Roll 101-105 上，您将获得如图 8-24 所示的行，并且悬停的行也将突出显示。
图 8-24
当鼠标悬停在指定学生组的行上时，显示学生的记录
类似地，当行 Roll 111-115 被悬停时，不仅该行会被高亮显示，而且属于该卷号范围的学生记录也会被显示，如图 8-25 所示。
图 8-25
各自的学生记录显示在悬停在他们的行组上
带有加号和减号图标的行
对于各行(如图 8-23 所示),您希望在其左侧显示一个加号图标。当鼠标悬停在这些行上时，它应该展开以显示相应范围内的记录，加号图标应该替换为减号图标。
jQuery 代码可以修改如下:
瑞士联合交易所
$(document).ready(function() {
$('.studgroup').css(
{'background-image':"url(plus.jpg)",
'background-repeat':"no-repeat",
'background-position':"left"}
);
$('table tbody tr').hide();
$('table tbody').find('.studgroup').parent().show();
$('tbody tr').hover(
function(){
$(this).find('.studgroup').css(
{'background-image':"url(minus.jpg)",
'background-repeat':"no-repeat",
'background-position':"left"}
);
var tr=$('table tbody tr');
var rindex=$(this).parent().children().index(this);
for(var i=rindex;i<=rindex+5;i++)
{
$(tr[i]).show();
}
$(this).addClass('hover');
},
function(){
$(this).find('.studgroup').css(
{'background-image':"url(plus.jpg)",
'background-repeat':"no-repeat",
'background-position':"left"}
);
$('table tbody tr').hide();
$('table tbody').find('.studgroup').parent().show();
$(this).removeClass('hover');
}
);
});
jQuery 代码的含义如下。在显示卷号范围的行中(横跨三列的td元素，并分配了类别.studgroup，您显示一个存在于图像文件plus.jpg中的加号图标。此外，您还可以利用.css()方法中的background-repeat和background-position属性来使图标只出现一次，并且出现在该行的左侧。
然后隐藏嵌套在表的tbody元素中的所有行。也就是说，您隐藏了所有学生的记录(除了表格标题),因为您希望仅当鼠标悬停在相应行的加号图标上时才显示它们。然后，您将显示显示卷号范围的三行(分配了类别studgroup并附有加号图标的行)。
当鼠标悬停在任一行上时，使用.css()方法将其加号图标替换为减号图标，并将background-repeat和background-position属性分别设置为值no-repeat和left，以使减号仅出现一次，并且位于该行的左侧。此外，在悬停事件处理程序中，您检索表中的所有行并将它们存储在变量tr中(即，现在tr是一个包含表中所有行的数组，您找出用户悬停的行的索引号并将其存储在变量rindex中)。此后，在一个for循环的帮助下，显示接下来的 5 行(即，显示行标题(类名studgroup)下的行)。最后，对于悬停事件，应用样式规则hover中定义的属性来突出显示悬停的行。
当鼠标指针离开悬停的行时，使用.css()方法将其减号图标替换为加号图标，并将background-repeat和background-position属性分别设置为值no-repeat和left，以使加号图标仅出现一次，并且位于该行的左侧。然后隐藏表格中的所有行，除了显示滚动编号范围和加号图标的行(这是当鼠标指针从悬停的行移开时您想要的)。
最后，删除在.hover样式规则中定义的属性，使鼠标指针离开该行时，该行显示为最初的样子。
在执行这个 jQuery 代码时，您会发现三行文本 **Roll 101-105、Roll 106-110、**和 Roll 111-115 ，它们指定了下面的一组记录。此外，你会发现每一行的左边都有一个加号图标，表示这些行当前处于折叠模式，如图 8-26 所示。
图 8-26
下方指定一组记录的行，左侧有一个加号图标
当你将鼠标悬停在任一行上时，比如说掷骰 101-105 ，该行将被高亮显示，并且将显示在 101-105 范围内的学生记录，同时加号图标将被悬停行中的减号图标所取代，如图 8-27 所示。
图 8-27
悬停的行组显示其范围内的记录，加号图标被减号图标替换
同样，如果您将鼠标悬停在第行 106-110 上，它将被高亮显示，并且将显示编号在 106-110 范围内的学生记录。此外，悬停行的加号图标将被减号图标取代，同时失去焦点的行(之前悬停的行)将恢复加号图标，并显示为最初的样子，如图 8-28 所示。
图 8-28
当焦点不在行组上时，行组恢复加号图标来表示折叠模式
8.8 列表项排序
问题
您有一个由几个列表项组成的无序列表，您想对这些列表项进行排序。
解决办法
制作一个包含无序列表的 HTML 文件:
sort English . html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="sortinglistjq.js" type="text/javascript"></script>
</head>
<body>
<ul>
<li>Tea</li>
<li>Coffee</li>
<li>Pepsi</li>
<li>Energy Drink</li>
<li>Soup</li>
</ul>
</body>
</html>
该 HTML 文件在浏览器中打开时将显示如图 8-29 所示的列表项目。
图 8-29
原始未排序列表项目
对无序列表元素的列表项进行排序的 jQuery 代码如下:
幸运之神。js
$(document).ready(function() {
var drinks = $('ul').children('li').get();
drinks.sort(function(a, b) {
var val1 = $(a).text().toUpperCase();
var val2 = $(b).text().toUpperCase();
return (val1 < val2) ? -1 : (val1 > val2) ? 1 : 0;
});
$.each(drinks, function(index, row) {
$('ul').append(row);
});
});
它是如何工作的
jQuery 代码语句的含义如下。您获得了一个无序列表的所有子列表项，并将它们存储在变量drinks中，该变量将成为一个包含列表项文本的数组。
然后对drinks数组调用.sort()函数，该函数一次重复获取数组中的两个元素，并将它们赋给参数a和b进行比较。排序函数将根据分配给参数a和b的值返回一个值。当函数返回时
< 0:表示第二个值大于第一个值，因此被下推。
=0:两个值相等，不需要改变排序顺序。
-
0:表示第一个值大于第二个值，必须下推。
在调用排序算法之前，将传递给排序函数的两个数组元素转换为大写。然后使用排序算法返回值，如上所述，这将按字母顺序(升序)对列表项进行排序。
最后，each()函数对数组drinks(包含排序的列表项)进行操作，从中提取存储在其中的每个元素，并将其追加到无序列表元素中(即，将排序的列表项追加到无序列表元素中进行显示)。
在执行 jQuery 代码时，您会得到如图 8-30 所示的排序列表。
图 8-30
排序列表项目
8.9 对表格排序
问题
您有一个由几行和几列组成的表格。您希望当您选择表中的任意列时，其内容按照所选列的升序排序。
解决办法
创建一个包含表格元素的 HTML 文件，表格元素中定义了一些行和列元素:
可排序. html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="stylesortingtable.css" type="text/css" media="screen" />
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="sortingtablejq.js" type="text/javascript"></script>
</head>
<body>
<table border="1">
<thead>
<tr><th>Roll</th><th>Name</th><th>Marks</th></tr>
</thead>
<tbody>
<tr><td>103</td><td>Chirag</td><td>85</td></tr>
<tr><td>102</td><td>Naman</td><td>90</td></tr>
<tr><td>101</td><td>John</td><td>87</td></tr>
</tbody>
</table>
</body>
</html>
在这个 HTML 文件中，您可以看到一个边框为 1px 的表格由三个列标题定义(使用th元素定义): Roll 、 **Name、**和 Marks 。此外，它还包含三行学生记录。表格标题嵌套在thead元素中，表格主体(包含信息的行)嵌套在tbody元素中。
你将分三步学习这个食谱 :
确定单击了哪个列标题
根据选定的列对表格进行排序(仅按升序)
根据所选列对表格进行升序和降序排序
确定单击了哪个列标题
在按任何列的升序或降序对表格进行排序之前，您需要知道表格的哪个列标题被选中。为了突出显示用户选择的列标题，您需要在样式表文件中定义一个名为.hover的样式规则:
stylesortingtable.css
.hover{
cursor: default;
color: blue ;
background-color:cyan
}
显示用户选择了哪个列标题的 jQuery 代码如下:
Sortingtablejq.js
$(document).ready(function() {
$('th').each(function() {
$(this).hover(
function(){
$(this).addClass('hover');
},
function(){
$(this).removeClass('hover');
}
);
$(this).click(function(){
alert($(this).text()+' column is selected');
});
});
});
它是如何工作的
在样式表文件中，样式规则.hover包含设置为default的cursor属性，以使鼠标指针正常显示(以指针的形式)。color和background颜色属性分别设置为蓝色和青色，将突出显示的列标题的背景色变为青色，前景色变为蓝色。
您可以在 jQuery 代码中看到，每个表格标题都被检查，看它是否被悬停。如果一个表格标题被悬停(鼠标指针在上面移动)，在样式规则.hover中定义的样式属性被应用于它以高亮显示它(它的背景色变为青色，它的前景色变为蓝色)。此外，当鼠标指针离开列标题时，.hover样式规则的样式属性将被删除，使列标题显示为最初的样子。此外，还要检查是否单击了任何表格标题。如果一个表格标题被点击，你使用alert()方法显示列标题的文本。
将鼠标指针移动到任一列标题上时，它会高亮显示，并通过alert()方法显示其名称，如图 8-31 所示。
图 8-31
悬停在列标题上时显示的列名
根据选定的列对表格进行排序(仅按升序)
按选定列的升序对表进行排序的 jQuery 代码如下:
【定序结肠镜检查. js】
$(document).ready(function() {
$('th').each(function(column) {
$(this).hover(
function(){
$(this).addClass('hover');
},
function(){
$(this).removeClass('hover');
}
);
$(this).click(function(){
var rec=$('table').find('tbody >tr').get();
rec.sort(function(a, b) {
var val1 = $(a).children('td').eq(column).text().toUpperCase();
var val2 = $(b).children('td').eq(column).text().toUpperCase();
return (val1 < val2) ? -1 : (val1 > val2) ? 1 : 0;
});
$.each(rec, function(index, row) {
$('tbody').append(row);
});
});
});
});
在这段代码中，>符号是一个选择器，用于查找所选元素的子元素:
>
它是一个选择器，表示所选元素的子元素。
语法:
E1>E2
它选择与元素 E2 匹配的元素 E1 的所有子元素。
jQuery 代码的含义如下。检查每个表格标题，看它是否被悬停。如果将鼠标悬停在任何表格标题上，样式规则.hover中定义的样式属性将应用于该标题以高亮显示。此外，当鼠标指针离开列标题时，.hover样式规则的样式属性将被删除，使列标题显示为最初的样子。
然后在每个表格标题上附加一个 click 事件。在 click 处理程序中，检索所有表格行(嵌套在tbody元素中)并将它们存储在变量rec中。rec现在是一个包含所有表格行的数组。通过调用rec数组上的sort()函数，您可以一次重复获取数组中的两个元素(行),并按升序排列它们。
为此，传递给sort()函数的第一个和第二个参数(行)的列内容被提取出来，并在比较之前转换成大写。
然后，sort()函数返回三个值< 0、=0 或> 0 中的任意一个，这有助于决定哪些列内容应该在排序顺序中前移，哪些应该在排序顺序中下移。当这个sort函数结束时，rec数组将所有的行按照所选列的升序排序。
最后，从rec数组中检索排序后的行，并附加到表的tbody元素中进行显示。
最初，表格如图 8-32 所示。
图 8-32
原始未排序表格
在选择辊栏时，该栏被高亮显示，表格行按照辊号的升序排列，如图 8-33 所示。
图 8-33
按卷号升序排序的表格
类似地，在选择名称列时，它被高亮显示，并且表格行按照名称的升序排序，如图 8-34 所示。
图 8-34
按名称升序排序的表格
根据选定的列按升序和降序对表格进行排序
您希望如果第一次单击任何列标题，表格必须按该列的升序排序，如果再次单击该列，表格必须按该列的降序排序。换句话说，您希望每次点击时切换排序顺序。为了通知用户当前对列应用的排序顺序，您需要在列标题中显示向上或向下箭头。向上箭头表示表格当前按列的升序排序，向下箭头表示表格按列的降序排序。
要在列标题中显示上下箭头，需要在样式表文件中定义两个样式规则，stylesortcolascdesc.css:
style sort scdesc . CSS
.asc{
background:url('up.png') no-repeat; padding-left:20px;
}
.desc{
background:url('down.png') no-repeat; padding-left:20px;
}
让我们修改 jQuery 代码，以便按照所选列的升序和降序对表进行排序。jQuery 代码如下:
幸灾乐祸。js
$(document).ready(function() {
$('th').each(function(column) {
$(this).hover(
function(){
$(this).addClass('hover');
},
function(){
$(this).removeClass('hover');
}
);
$(this).click(function(){
if($(this).is('.asc'))
{
$(this).removeClass('asc');
$(this).addClass('desc');
sortdir=-1;
}
else
{
$(this).addClass('asc');
$(this).removeClass('desc');
sortdir=1;
}
$(this).siblings().removeClass('asc');
$(this).siblings().removeClass('desc');
var rec=$('table').find('tbody >tr').get();
rec.sort(function(a, b) {
var val1 = $(a).children('td').eq(column).text().toUpperCase();
var val2 = $(b).children('td').eq(column).text().toUpperCase();
return (val1 < val2) ? -sortdir : (val1 > val2) ? sortdir : 0;
});
$.each(rec, function(index, row) {
$('tbody').append(row);
});
});
});
});
它是如何工作的
样式规则.asc包含设置为url(up.png)的background属性，以在列标题中显示向上箭头指针。值no-repeat将使指针在列标题中只出现一次，并且padding-left属性被设置为20px以在左边留出一些空间。类似地，样式规则desc包含background属性来显示列标题中的向下箭头指针。
jQuery 代码执行以下任务。检查每个表格标题，看它是否被悬停。如果将鼠标悬停在表格标题上，则样式规则.hover中定义的样式属性将应用于表格标题以高亮显示。此外，当鼠标指针离开列标题时，.hover样式规则的样式属性将被删除，使列标题显示为最初的样子。
然后将一个 click 事件附加到每个表格标题上，并检查所选的列标题是否应用了样式规则.asc。也就是说，检查表格是否已经按照所选列标题的升序排序。
如果是，您删除样式asc中定义的样式属性，并应用样式desc中定义的样式属性(当已经按升序排序的列标题再次被单击时)。因此，列标题将在其左侧显示一个向下的箭头指针。此外，变量sortdir的值被设置为-1，用于操作sort函数的返回值，以降序排序。
如果所选列已经应用了desc样式规则(即，表格按照所选列的降序排序)，则删除样式规则desc中定义的样式属性，并应用样式规则asc中定义的属性，这将使一个向上箭头指针出现在列标题的左侧。此外，变量sortdir的值被设置为1，以使sort函数按升序进行排序。
一旦对列进行了排序，您需要从除用户选择的列标题之外的所有列标题中删除其他列标题的样式规则.asc和.desc的属性(这些属性可能已经应用于其他列标题)。您还需要检索所有表格行(嵌套在tbody元素中)并将它们存储在变量rec中。rec现在将是一个包含所有表格行的数组。
然后，您可以在rec数组上调用sort函数。sort函数将一次重复获取数组中的两个元素(行),并按照变量sortdir中的值决定的排序顺序排列它们。sort函数首先提取传递给sort函数的第一个和第二个参数(行)的列内容，并在比较前转换成大写。
该函数返回三个值<0, =0, or > 0 中的任意一个，这有助于决定哪些列内容应该在排序顺序中前移，哪些应该在排序顺序中下移。当这个sort函数结束时，rec数组根据分配给变量sortdir的值，将所有行按照所选列的升序或降序排序。
最后，从rec数组中检索排序后的行，并附加到表的tbody元素中进行显示。
最初，表格可能如图 8-35 所示。
图 8-35
由几行和几列组成的原始未排序表格
选择列标题Name一次，你会看到一个向上的箭头指针出现在它的左边(代表排序将按升序进行),表格将按名称的字母顺序排序，如图 8-36 所示。
图 8-36
按名称升序排序的表格
再次选择Name列标题，您会发现列标题中出现一个向下的指针(表示将按降序排序)，表格将按图 8-37 所示的名称降序排序。
图 8-37
按名称降序排序的表格
8.10 从表中过滤行
问题
您有一个由几行和几列组成的表格，前面有一个输入文本字段。您希望根据用户在输入文本字段中键入的字符来过滤表中的行。因此，如果用户输入字符 c，将显示表中名称以字符 c 开头的所有行，其余的行将被过滤掉。
解决办法
创建一个 HTML 文件，其中包含一个带有一些行和列元素的表格元素。此外，在表格之前，显示消息输入字符，后跟一个输入文本字段。在输入文本字段下方，显示一个提交按钮，单击该按钮将显示表格的过滤信息。HTML 文件如下所示:
Filteringrowstable.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="stylefilteringrows.css" type="text/css" media="screen" />
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="filteringrowstablejq.js" type="text/javascript"></script>
</head>
<body>
<div><span class="label">Enter the character </span><input type="text" class="infobox" /></div>
<input class="submit" type="submit" value="Submit"/><br/><br/>
<table border="1">
<thead>
<tr><th>Roll</th><th>Name</th><th>Marks</th></tr>
</thead>
<tbody>
<tr><td>101</td><td>John</td><td>87</td></tr>
<tr><td>102</td><td>Naman</td><td>90</td></tr>
<tr><td>103</td><td>Chirag</td><td>85</td></tr>
<tr><td>104</td><td>David</td><td>92</td></tr>
<tr><td>105</td><td>Kelly</td><td>81</td></tr>
<tr><td>106</td><td>Charles</td><td>77</td></tr>
<tr><td>107</td><td>Jerry</td><td>91</td></tr>
<tr><td>108</td><td>Beth</td><td>75</td></tr>
<tr><td>109</td><td>Caroline</td><td>82</td></tr>
<tr><td>110</td><td>Hanen</td><td>71</td></tr>
<tr><td>111</td><td>Douglas</td><td>57</td></tr>
<tr><td>112</td><td>Tim</td><td>86</td></tr>
<tr><td>113</td><td>Michael</td><td>68</td></tr>
<tr><td>114</td><td>Kimbley</td><td>88</td></tr>
<tr><td>115</td><td>Christina</td><td>72</td></tr>
</tbody>
</table>
</body>
</html>
您可以看到文本消息嵌套在类label的 span 元素中，输入文本字段被赋予类名infobox,，提交按钮被赋予类名submit，这样在类选择器.label, .infobox,和。submit(在样式表文件中定义)可以自动应用于它们。包含各个类选择器的样式表如下:
stylefilteringrows.css
.label {float: left; width: 120px; }
.infobox {width: 200px; }
.submit { margin-left: 125px; margin-top: 10px;}
过滤表行以显示以输入文本字段中填充的字符开头的名称的 jQuery 代码如下:
Filteringrowstablejq.js
$(document).ready(function() {
var rows;
var coldata;
$('.submit').click(function(event){
$('table').find('tbody tr').hide();
var data=$('.infobox').val();
var len=data.length;
if(len>0)
{
$('table tbody tr').each(function(){
coldata=$(this).children().eq(1);
if(coldata.text().charAt(0).toUpperCase()==data.charAt(0).toUpperCase())
{
$(this).show();
}
});
}
event.preventDefault();
});
});
它是如何工作的
在类选择器.label中定义的属性包括设置为值left的float属性，以使标签出现在浏览器窗口的左侧，为下一个元素出现在其右侧腾出空间。将width属性设置为200px以使标签适合 200 像素的宽度。类选择器.infobox包含设置为200px的width属性，以使输入文本字段的宽度为 200px，类选择器.submit包含设置为125px的margin-left属性，以使提交按钮出现在距离浏览器窗口左边界 125px 的位置(因此它出现在输入文本字段的下方)。将margin-top属性设置为10px以使提交按钮出现在距离其顶部的输入文本字段 10px 的位置。
jQuery 代码执行以下任务。首先，在 Submit 按钮上附加一个 click 事件，隐藏表格的所有行(tr元素嵌套在tbody元素中)，只显示列标题。然后检索输入文本字段中输入的内容(被赋予类名infobox)并将它们存储在变量data中。
接下来，找到变量data的长度并扫描表中的每一行(嵌套在tbody元素中的tr元素)。
对于每一行，您获得索引值为 1 的行元素的子元素的内容(即Name列的内容),并将它们存储在变量coldata中。
现在，通过将列内容的第一个字符(在coldata中)与输入文本字段中键入的字符(在将两者都转换为大写后)进行比较，开始过滤。如果匹配，则显示该行。
最后，调用事件对象的.preventDefault()方法，以避免将用户输入的信息提交给服务器(即避免单击按钮时浏览器的默认行为)。
在执行 jQuery 代码时，您会得到一个带有提交按钮的输入文本字段。如果在输入文本字段中输入字符 c，将显示表格中所有以字符 c 开头的名称，过滤掉其余的行，如图 8-38 所示。
图 8-38
显示名称以输入文本字段中输入的字符开头的行的表
8.11 摘要
在本章中，您看到了在表格上执行不同功能的不同方法，包括突出显示行和列、过滤掉选定的行、擦除选定的列、按页显示表格的行等等。您还了解了扩展和折叠表格行的方法，并学习了如何按照所选列的升序或降序对表格进行排序。
在下一章中，您将学习使用 jQuery UI 提供的不同部件。您将学习如何使用 datepicker 轻松选择日期，如何使用 autocomplete 小部件利用建议，以及如何使用折叠、对话框和选项卡分类显示大量内容。**
九、jQuery UI
在本章中，您将学习使用 jQuery UI 提供的不同小部件。你将在本章中制作以下食谱:
使用日期选择器
使用自动完成小部件
用手风琴
使用对话框
使用选项卡小部件
从 https://jqueryui.com/download/ 下载最新的 jQuery UI。您会将jquery-ui-1.12.1.zip文件下载到您的计算机上。解压文件并将jquery-ui.js和jquery-ui.css复制到你创建 HTML 文件的文件夹中。
9.1 使用日期选择器
datepicker 小部件提供了一个用户友好的界面来选择日期。日期小部件可以关联到任何需要输入日期的输入框。当用户点击输入框时，datepicker 小部件通过动画打开。用户可以用鼠标或键盘选择日期。要使用键盘导航，您需要按 Ctrl 键并使用箭头键，最后通过按 Enter 键选择日期。
问题
您正在制作一个酒店预订页面，并希望用户选择预订日期。您不需要让用户手动输入日期，而是希望打开一个 datepicker 小部件，显示该月的整个日历以及工作日，并提供导航到任何所需日期的工具。
解决办法
第一步是创建一个要求用户输入日期的界面。以下 HTML 文件显示了一个输入框，提示用户输入预订酒店房间的日期:
Datepicker.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" href="jquery-ui.css" type="text/css" media="screen" />
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="jquery-ui.js"></script>
<script>
$( function() {
$( "#reserve_date" ).datepicker();
} );
</script>
</head>
<body>
Enter Date of reservation: <input type="text" id="reserve_date">
</body>
</html>
你可以在上面的 HTML 程序中看到文本Enter Date of reservation显示在屏幕上。在文本之后，显示一个输入框，为了将日期选择器与该输入框相关联，将 idreserve_date分配给该输入框。
在 jQuery 代码中，可以看到 id 为reserve_date的输入框被选中，默认配置的 datepicker 通过datepicker()方法被调用。
在运行 HTML 程序时，您会看到一个输入框，要求用户输入预订酒店房间的日期(参见图 9-1(a) )。在 Firefox 浏览器中运行该程序时，您可能会遇到问题，因为它不支持 datepicker。点击输入框，日期选择器用动画打开并显示当前日期，如图 9-1(b) 所示。datepicker 可以配置不同的选项，但即使是默认的 datepicker 也有很多功能。使用上一个和下一个按钮，您可以导航到所需的月份。从所需月份中选择一个日期后，所选日期将被添加到输入框中，日历关闭。
图 9-1
(a)输入框要求用户输入预订酒店房间的日期。(b)日期选择器打开，单击输入框显示当前日期
配置 Datepicker 小部件的属性
以下是可以使用 datepicker 设置的属性，以便对其进行配置:
appendText:在日期选择器<input>框后添加文本，告知所选日期的格式。changeMonth:设置为true，显示月份变化下拉菜单。changeYear:将该选项设置为true，显示年度变化下拉列表。isRTL:如果您想将日历设置为从右向左的格式，请将此选项设置为true。duration:将该选项的值设置为slow、normal或fast，以决定日期选择器打开的动画速度。numberOfMonths:将该选项的值设置为1或2，以设置在单个日期选择器上显示的月数。showOtherMonths:如果不想显示上个月和下个月的最后一天和第一天，将该选项的值设置为false。
为了配置 datepicker 小部件以期望的格式显示日历，您需要修改前面显示的 jQuery 代码。此外，您不会在 HTML 文件中嵌入 jQuery 代码；您将创建一个单独的文件。因此，让我们将上面的 HTML 文件修改如下:
datepicker1.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" href="jquery-ui.css" type="text/css" media="screen" />
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="jquery-ui.js"></script>
<script src="datepicker1jq.js" type="text/javascript"></script>
</head>
<body>
Enter Date of reservation: <input type="text" id="reserve_date">
</body>
</html>
您可以在上面的代码中看到，引用了一个外部 jQuery 文件datepicker1jq.js。HTML 代码提示用户输入所需的日期。单击输入框，将打开日期选择器，允许用户选择所需的日期。
为了配置 datepicker 小部件，jQuery 代码设置了以下 datepicker 属性:
日期选择器 1jq.js
$(document).ready(function() {
var datepicker_Options = {
appendText: " MM/DD/YYYY",
changeMonth: true,
changeYear: true,
isRTL: false,
showOtherMonths: true,
numberOfMonths: 2,
duration: "normal"
};
$( "#reserve_date").datepicker(datepicker_Options);
});
在运行 HTML 程序时，你可以在上面的 jQuery 代码中看到文本MM/DD/YYYY将被附加在输入框之后，通知用户这是所选日期将被显示的格式(参见图 9-2(a) )。将显示一个带有月份的下拉菜单，使用户能够跳转到任何月份。类似地，使用changeYear选项，显示带有年份的下拉菜单，使用户能够直接选择所需的年份。
日历将被设置为从左向右显示。使用showOtherMonths选项，将显示上个月的最后几天和下个月的开始几天。使用duration选项将动画速度设置为normal。numberOfMonths选项设置为2显示两个月的日历(见图 9-2(b) )。
图 9-2
(a)文本 MM/DD/YYYY 附加在输入框之后，显示所选日期的显示格式。(b)显示两个月的日历以及与月和年相关联的下拉菜单
除了默认的日期格式 MM/DD/YYYY 之外，您还可以使用其他所需的格式。
更改日期格式
datepicker 小部件的dateFormat属性用于设置日期的格式。以下是有效的选项，可以组合这些选项以获得所需格式的日期:
d:以一位数显示一个月中的某一天dd:以两位数显示一个月中的第几天m:以一位数显示一年中的月份mm:以两位数显示一年中的月份。y:以两位数显示年份yy:以四位数显示年份D:以短格式显示日DD:显示完整的日期名称M:以短格式显示月份MM:以长格式显示月份
让我们创建另一个名为datepicker2jq.js的 jQuery 文件，并在其中编写以下 jQuery 代码，以特定格式显示所选日期:
datepicker2jq.js
$(document).ready(function() {
var datepicker_Options = {
dateFormat: "dd-mm-yy"
};
$( "#reserve_date" ).datepicker(datepicker_Options);
});
您可以看到日期被设置为以两位数显示，后跟一个破折号(-)。此后，月份以两位数格式显示，后跟一个破折号(-)。最后，年份以四位数显示(见图 9-3 )。
图 9-3
日和月以两位数显示，年以四位数显示，并用破折号作为分隔符
您还可以修改 jQuery 文件，尝试另一种日期格式，如下所示:
$(document).ready(function() {
var datepicker_Options = {
dateFormat: "dd MM y"
};
$( "#reserve_date" ).datepicker(datepicker_Options);
});
日期的格式是以两位数后跟一个空格来显示日期。此后，月份以长格式显示，后跟一个空格。最后，年份以两位数显示(见图 9-4 )。
图 9-4
日和年以两位数显示，月以长格式显示，中间用空格作为分隔符
将样式应用于日期选取器
您可以将样式应用到日历边界、显示的数字、背景颜色、悬停时数字的颜色等等。
以下 HTML 代码包括应用于不同 datepicker 组件的不同样式:
Datepicker2.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" href="jquery-ui.css" type="text/css" media="screen" />
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="jquery-ui.js"></script>
<script src="datepicker2jq.js" type="text/javascript"></script>
<style>
#ui-datepicker-div { border:1px solid #0000ff; }
#ui-datepicker-div a, .ui-datepicker-inline a {
color:#ff0000;
}
#ui-datepicker-div a:hover, .ui-datepicker-inline a:hover {
color:#00ff00 ;
background-color:#000000;
}
.ui-datepicker-header { background:#ff0000; }
</style>
</head>
<body>
Enter Date of reservation: <input type="text" id="reserve_date">
</body>
</html>
在这段代码中，datepicker 的边框设置为纯色和蓝色。日期选择器中的日期设置为以红色显示。将鼠标悬停在日期选择器中的任意一天上，背景颜色将为黑色，该天将显示为绿色。日期选择器中的标题设置为红色(见图 9-5 )。
图 9-5
应用于 datepicker 的边框、日期和标题的格式
9.2 使用自动完成小部件
为了更快地输入数据并避免输入错误，使用了自动完成部件。只要用户键入几个字符，自动完成部件就会显示建议，用户只需从显示的建议列表中单击所需的单词。建议列表可以通过数组或其他来源显示，包括任何文件或数据库。
问题
您希望让用户选择一个食物项目，并显示一个自动完成小部件，以便更快、更准确地进行选择。
解决办法
为了创建一个用户界面，要求用户选择一个食品项目，用下面的代码创建了一个 HTML 程序。HTML 代码将显示一个输入框，提示用户选择所需的快餐项目。
Autocomplete.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="jquery-ui.css" type="text/css" media="screen" />
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="jquery-ui.js"></script>
<script src="autocompletejq.js" type="text/javascript"></script>
</head>
<body>
<div class="ui-widget">
<label>Select your food item: </label>
<input id="items">
</div>
</body>
</html>
您可以在上面的 HTML 代码中看到，在类ui-widget中定义了一个<div>元素。这样做是为了让jquery-ui.css样式表文件中定义的ui-widget类的 CSS 样式可以自动应用到<div>元素。在<div>元素中，定义了一个标签和输入框。标签显示一条信息，告诉用户选择一种食物。为了在 jQuery 代码中访问它，输入框被分配了 id items。
jQuery 代码定义了要通过 autocomplete 小部件显示的食品来源，并在用户在输入框中键入任何字符时以建议的形式显示该来源，如下所示:
自学成才 jq.js
$(document).ready(function() {
var foodItems = [
"Bacon Cheese Burger",
"Biscuits",
"Blizzard",
"Cajun Fries ",
"Chicken Nuggets",
"Chicken Sandwich",
"Chicken Tenders",
"Crunch Shell Tacos",
"Curly Fries",
"Fries",
"Frosty",
"Pretzel",
"Shack Burger",
"Tacos",
"Waffle Fries" ];
$( "#items" ).autocomplete({
source: foodItems
});
});
您可以在上面的代码中看到，一个名为fooditems的字符串数组包含了您希望通过 autocomplete 小部件显示的食物项目。此后，autocomplete 小部件被关联到输入框，并且fooditems数组被链接到 autocomplete 小部件作为它的源。在运行 HTML 程序时，您会看到一个输入框，要求您选择一种食物。当你按下任何一个键的时候，所有与输入的键相关的建议都会通过 autocomplete widget 显示出来，如图 9-6 所示。
图 9-6
与输入的键相关的所有建议都通过 autocomplete 小部件显示
配置自动完成小部件
自动完成小部件可以根据您的需求进行配置。以下是可用于配置自动完成向导的选项:
appendTo:用于向 autocomplete 小部件追加一个元素。默认值为 null。autoFocus:当选项出现时，第一项会自动聚焦。默认值为 false。delay:用于指定查找匹配值的时间延迟，单位为毫秒。默认值为 300 毫秒。disabled:如果此选项设置为 true，自动完成小部件将被禁用。默认值为 false。minlength:用于指定查找匹配值需要按下的最少字符数。默认值为 1。position:决定自动完成选项弹出的位置。默认情况下，其值为{ my: "left top", at: "left bottom", collision: "none" }。source:用于指定在 autocomplete 小工具中显示的选项的来源。
为了配置 autocomplete 小部件，您需要修改之前创建的 jQuery 代码。因此，让我们创建一个新的 jQuery 文件来配置 autocomplete 小部件。修改 HTML 代码以指向这个新的 jQuery 文件。
auto mccomplete 1 . html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="jquery-ui.css" type="text/css" media="screen" />
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="jquery-ui.js"></script>
<script src="autocomplete1jq.js" type="text/javascript"></script>
</head>
<body>
<label>Select your food item: </label>
<input id="items">
</body>
</html>
上面显示的 HTML 代码只显示了两个元素，一个标签和一个输入框。标签显示一条文本消息，输入框被分配一个 iditems，jQuery 代码可以访问这个 id。
当在输入框中键入任何字符时，显示 autocomplete 小部件并配置其不同属性的 jQuery 代码如下:
自动完成 1jq.js
$(document).ready(function() {
var foodItems = [
"Bacon Cheese Burger",
"Biscuits",
"Blizzard",
"Cajun Fries ",
"Chicken Nuggets",
"Chicken Sandwich",
"Chicken Tenders",
"Crunch Shell Tacos",
"Curly Fries",
"Fries",
"Frosty",
"Pretzel",
"Shack Burger",
"Tacos",
"Waffle Fries"
];
$( "#items" ).autocomplete({
autoFocus: true,
delay: 400,
minLength: 1,
position: { my : "left top", at: "right bottom" },
//disabled: true,
source: foodItems
});
});
一个名为fooditems的字符串数组包含某些食物项目，将在 autocomplete 小部件中用作建议。当用户单击输入框中的任意字符时，autocomplete 小部件会自动打开。autocomplete 小部件被配置为将包含在fooditems数组中的食物项目显示为建议，并且当选项出现时，第一个食物项目被自动聚焦。设置 400 毫秒的时间延迟来显示匹配的选项。当用户在输入框中输入一个字符时，选项开始出现。autocomplete 小部件的位置被设置为出现在输入框的右下方。可以通过将 autocomplete 小部件的 disabled 属性设置为 true 来禁用它，但这被注释掉了，因为您希望启用 autocomplete 小部件(参见图 9-7 )。
图 9-7
在配置 autocomplete 小部件时，会自动聚焦第一个食物项目。它被放置在输入框的右下方
9.3 使用手风琴
accordion 是可折叠内容面板的组合，其中只有一个面板可以展开来显示其内容，因此它非常流行，可以在较小的空间内显示大量信息。
问题
你想用更少的篇幅来解释产品及其特点。您想介绍 jQuery，解释它的特性，以及最小空间中的 DOM 和选择器。手风琴能有效地完成这项任务。
解决办法
要显示关于 jQuery 及其特性的内容以及 DOM 和选择器，请使用以下 HTML 代码:
Accordion.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="jquery-ui.css" type="text/css" media="screen" />
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="jquery-ui.js"></script>
<script src="accordionjq.js" type="text/javascript"></script>
</head>
<body>
<div id="accordion">
<h3>jQuery Intro</h3>
<div>
<p>jQuery is a lightweight cross-platform JavaScript library. Because of its easy to use syntax, jQuery has made it quite easy to include JavaScript on any web site. </p>
</div>
<h3>Features</h3>
<div>
<p>jQuery has not only simplified the complex coding but also has reduced the size of code as well. Below are the features of jQuery: </p>
<ul>
<li>It has huge number of plug-in enabling you to add additional features to your web page and develop the apps compatible to different platforms.</li>
<li>Its API is fully documented making it easy to use and access its full features</li>
<li>Its learning curve is very easy. Because it uses CSS and HTML, so it is every easy to learn its concepts.</li>
</ul>
</div>
<h3>Understanding DOM</h3>
<div>
<p>DOM provides a representation of the HTML elements as a network of objects i.e. a tree of elements on the page. </p>
<p>Here, <html> is the ancestor or parent of all the elements on the web page. That is, all the elements are descendants or children of <html>. </p>
</div>
<h3>Selectors</h3>
<div>
<p>As the name suggests, the jQuery selectors helps in finding a DOM (Document Object Model) element in an HTML document based on id, name, types, attributes, class etc. </p>
</div>
</div>
</body>
</html>
一个<div>元素被分配了 id accordion。可以是任何 id。通过这个 id 可以访问<div>元素。一个<h3>元素用于内容面板的标题，一个<div>元素用于定义该内容面板的文本。<div>元素可以有一个<p>元素或者一个<ul>元素或者任何其他 HTML 元素来表示它的文本。因此，在最外面的<div>元素中有四个<h3>和<div>元素对来分别定义内容面板标题及其文本。四个<h3>元素包含文本 jQuery Intro、特性、理解 DOM 和选择器，它们最终将成为内容面板的标题。
调用 accordion(即，使不同的<div>元素以可展开和可折叠内容面板的形式以 accordion 的形式出现)的 jQuery 代码如下:
accordojq . js
$(document).ready(function() {
$( "#accordion" ).accordion();
});
在 id 为accordion的<div>元素上调用 accordion。您将看到四个内容面板，分别包含相应的文本。单击内容面板的标题时，它会展开以显示其中的内容。其余的内容面板将自动折叠(参见图 9-8 )。
图 9-8
折叠面板显示有四个内容面板，活动内容面板以展开的形式显示
配置折叠面板
以下是可用于配置折叠型面板的选项:
active:决定哪个面板被设置为激活或打开。面板从零开始。如果要从最后一个面板向后选择，则使用负值。默认值为0。如果可折叠选项设置为true，您可以将其设置为 false 来折叠所有面板。animate:用于使面板动画。您可以将此选项设置为false以禁用动画，或者您可以使用默认缓动以毫秒为单位指定动画的持续时间。disabled:用于通过设置布尔值true来禁用手风琴。event:确定需要在表头上执行的事件，以获得所需的动作。默认事件是单击。您可以使用鼠标悬停、鼠标释放等操作。您甚至可以使用由空格分隔的多个事件。collapsible:决定是否可以关闭所有截面，包括激活截面。默认值为false。header:表示表头元素的选择器。请记住，内容面板需要是紧接在标题之后的同级面板。heightStyle:决定手风琴及其面板的高度。有效选项包括"auto":所有面板将被设置为等于最高面板的高度。"fill":所有面板的高度都将基于手风琴的父高度。"content":面板的高度足以容纳其内容。
icons:决定标题中使用的图标类型。您可以将此选项设置为false以使标题中没有图标。默认值为{ "header": "ui-icon-triangle-1-e", "activeHeader": "ui-icon-triangle-1-s" }
要配置 accordion，您需要对其应用不同的属性，如以下 jQuery 代码所示:
Accordion1jq.js
$(document).ready(function() {
$( "#accordion" ).accordion({
active: 3,
animate: 1000,
disabled: false,
event: "mouseover",
collapsible: true,
heightStyle: "content",
header: "h3",
icons: { "header": "ui-icon-arrowthick-1-s", "activeHeader": "ui-icon-arrowthick-1-n" }
});
});
默认情况下，您使第四个内容面板处于活动状态(即，在运行 HTML 程序时，第四个内容面板，选择器，将以展开的形式显示其内容，其余的内容面板将以折叠的形式显示)。每当任何内容面板展开或折叠时，都会以动画形式发生，延迟为 1000 毫秒。通过将手风琴的disabled属性设置为false来启用手风琴。您不需要单击内容面板的标题来展开或折叠它；只要用鼠标悬停在内容面板的标题上就足以展开或折叠它，因为事件属性被设置为mousehover。通过将collapsible属性设置为true，当标题栏被悬停时，内容面板将展开，当再次被悬停时，内容面板将折叠。内容面板的高度被设置为等于其内容(即，内容面板的高度足以完全显示其内容)。HTML 文件中的所有<h3>元素都被设置为表示标题(即内容面板的标题栏)。当内容面板处于折叠形式时，标题图标(即内容面板标题栏)变为ui-icon-triangle-1-e。并且当内容面板活动时(即，当它被展开时)，标题的图标变为ui-icon-triangle-1-s。请访问此网址查看可用图标: h ttps://api.jqueryui.com/resources/icons-list.html 。
运行 HTML 程序时，如预期的那样，第四个内容面板将显示为活动状态(参见图 9-9(a) )。你可以将鼠标悬停在任何内容面板上来展开它，也可以再次悬停在它上面来折叠它(参见图 9-9(b) )。另外，请注意内容面板展开和关闭时的图标。图标会根据需要进行更改。
图 9-9
(a)第四内容面板是活动的并且处于展开形式。(b)活动和非活动内容面板的图标被改变
9.4 使用对话框
对话框是一个浮动框，用于向用户显示某些信息。它有一个标题和一个 x 图标，可用于关闭对话框。可以使用标题栏来移动对话框，也可以通过拖动其边界来调整其大小。如果对话框缩小到看不到全部内容，滚动条会自动出现。
问题
您希望通过一个对话框向用户显示一些内容，用户可以在阅读信息后关闭该对话框
解决办法
要定义对话框的标题并通过它显示文本，HTML 代码如下:
Dialog.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="jquery-ui.css" type="text/css" media="screen" />
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="jquery-ui.js"></script>
<script src="dialogjq.js" type="text/javascript"></script>
</head>
<body>
<div id="jquery_intro" title="Introduction to jQuery">
<p>jQuery is a lightweight cross-platform JavaScript library. Because of its easy to use syntax, jQuery has made it quite easy to include JavaScript on any web site. It has not only simplified the complex coding but also has reduced the size of code as well. Below are the features of jQuery.</p>
</div>
</body>
</html>
你可以在上面的 HTML 代码中看到，用标题jQuery 简介定义了一个<div>元素。这个标题将成为对话框标题。为了使 jQuery 代码中的<div>元素可以访问，它被赋予了 id jquery_intro。在<div>元素中有一个<p>元素，它包含了通过对话框显示的文本。要调用对话框并将其与 id 为jquery_intro的<div>元素链接，必须编写以下 jQuery 代码:
对话框 q . js】??
$(document).ready(function() {
$( "#jquery_intro" ).dialog();
});
您可以看到对话框被调用，并且与 id 为jquery_intro的<div>元素相关联。在运行 HTML 程序时，你会得到一个对话框，显示通过嵌套在<div>元素中的<p>元素定义的文本，如图 9-10 所示。您可以随时使用对话框右上角的图标关闭该对话框。
图 9-10
出现一个对话框，显示指定的文本
配置对话框的选项
您可以根据需要使用以下属性来配置对话框:
appendTo:用于将对话框追加到指定元素。使用appendTo选项时，需要关闭对话框。title:用于指定对话框的标题。其默认值为 null。如果未指定标题，则使用与选择器关联的标题。autoOpen:确定应用启动时，对话框是打开还是关闭。如果该选项设置为false，对话框将保持关闭，直到open()方法被调用，它才被打开。默认值为true。buttons:决定对话框上显示的按钮类型。您可以指定按钮的标签、图标以及按钮上发生任何事件时要触发的回调函数。在一个对话框中，可以有多个数组形式的按钮。closeOnEscape:默认情况下，该选项设置为true，这意味着当用户获得焦点并按下 Esc 键时，对话框将关闭。如果您不想在按下 Esc 键时关闭对话框，您可以将此选项设置为false。draggable:默认情况下这个选项是true，它允许对话框被它的标题栏拖动。要使其不浮动，将此选项设置为false。height:用于指定对话框的高度。它的默认值是auto,,这意味着对话框的高度将被设置为适应其内容。您还可以指定对话框的初始高度，以像素为单位。width:用于指定对话框的宽度。其默认值为300 pixels。hide:用于指定对话框关闭时的隐藏方式。您可以指定关闭时所需的动画类型以及指定的持续时间。如果不指定持续时间，动画将以默认持续时间执行。它的默认值是true，这意味着对话框将以默认的持续时间和默认的缓动淡出。如果你分配一个布尔值false给这个选项，这意味着对话框将立即关闭，没有任何动画。maxHeight:确定调整大小时对话框可以达到的最大高度。它的默认值是false(也就是说，对话框可以根据需要调整高度)。maxWidth:用于指定对话框可以调整的最大宽度。其默认值为false。minHeight:用于指定对话框可以调整的最小高度(即对话框的高度不能小于指定值)。其默认值为150px。minWidth:用于指定对话框可以缩小到的最小宽度。其默认值为150px。modal:该选项可以设置为true，使对话框成为模态对话框。模式对话框是一个在对话框关闭之前阻止你与页面其他部分交互的对话框。其默认值为false。resizable:该选项决定对话框是否可以调整大小。其默认值为true。如果该选项设置为false，对话框的高度和宽度不能改变。show:决定对话框是立即显示还是通过动画缓慢显示。如果该选项的值设置为false，对话框将立即打开。如果这个选项被设置为true，对话框将会以默认的持续时间和渐入渐出。您也可以指定动画，它的持续时间，以及缓动。默认动画被认为是fadeIn。如果未指定持续时间和缓动，则使用默认的持续时间和缓动。
要配置该对话框，可以设置它的不同属性，如以下 jQuery 代码所示:
对话 1jq.js
$(document).ready(function() {
$( "#jquery_intro" ).dialog({
title: "What is jQuery",
closeOnEscape: false,
draggable: false,
height: "auto",
width: 200,
minHeight: 200,
maxHeight: 400,
minWidth: 150,
maxWidth: 300,
// hide: "slideUp",
hide: { effect: "fadeOut", duration: 2000 },
buttons: [
{
text: "Close",
icon: "ui-icon-closethick",
click: function() {
$( this ).dialog( "close" );
}
}
],
modal: true,
//show: true
show: { effect: "slideDown", duration: 1000 }
});
});
对话框的标题被设置为What is jQuery，对话框不仅可以通过其右上角的图标关闭，还可以在焦点位于对话框上时通过按 Esc 键关闭。通过将draggagle属性设置为false，对话框不能被它的标题栏拖动。对话框的高度被设置为根据其内容进行调整。对话框的宽度设置为 200 像素。对话框的高度可以增加到 400 像素，也可以减少到 200 像素。同样，对话框的宽度可以增加到 300 像素，也可以减少到 150 像素。当关闭对话框时，它可以设置为带有向上滑动效果的动画。它被注释掉，并被设置为动画，淡出效果持续时间为 2000 毫秒。一个按钮被设置为显示在带有文本Close和图标ui-icon-closethick的对话框中，当按钮上发生点击事件时，对话框将关闭。请访问此网址查看可用图标: https://api.jqueryui.com/resources/icons-list.html 。该对话框被设置为显示为模式对话框(即，在对话框关闭之前，用户不能与网页的任何其他部分进行交互)。该对话框可以设置为通过动画显示。该对话框设置为以 1000 毫秒时长的下滑动画打开(参见图 9-11 )。
图 9-11
对话框中会显示一个关闭按钮，并且该对话框被设置为显示为模式对话框
9.5 使用选项卡小部件
选项卡用于在有限的空间内显示分类信息。它是具有多个面板的单个区域，单击每个面板的标题或选项卡时，会显示所需的信息。
问题
您希望显示与 jQuery 简介、jQuery 特性和理解 DOM 相关的信息，并使用一个选项卡小部件，其中每个选项卡或面板在被单击时都会显示所需的信息。
解决办法
第一步是定义要通过选项卡或面板显示的内容。在这里，重要的是要理解，要使用选项卡小部件，选项卡必须在有序的、<ol>,或无序的、<ul>,列表中。选项卡标题必须包含在每个<li>中，并用一个href属性包装。通过选项卡小部件显示内容的 HTML 代码如下:
Tabs.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="jquery-ui.css" type="text/css" media="screen" />
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="jquery-ui.js"></script>
<script src="tabsjq.js" type="text/javascript"></script>
</head>
<body>
<div id="showinfo">
<ul>
<li><a href="#tab1">jQuery Intro</a></li>
<li><a href="#tab2">Features</a></li>
<li><a href="#tab3">Understanding DOM</a></li>
</ul>
<div id="tab1">
<p>jQuery is a lightweight cross-platform JavaScript library. Because of its easy to use syntax, jQuery has made it quite easy to include JavaScript on any web site.</p>
</div>
<div id="tab2">
<p>jQuery has not only simplified the complex coding but also has reduced the size of code as well. Below are the features of jQuery: </p>
<ul>
<li>It has huge number of plug-in enabling you to add additional features to your web page and develop the apps compatible to different platforms.</li>
<li>Its API is fully documented making it easy to use and access its full features</li>
<li>Its learning curve is very easy. Because it uses CSS and HTML, so it is every easy to learn its concepts.</li>
</ul>
</div>
<div id="tab3">
<p>DOM provides a representation of the HTML elements as a network of objects i.e. a tree of elements on the page. </p>
<p>Here, <html> is the ancestor or parent of all the elements on the web page. That is, all the elements are descendants or children of <html>. </p>
</div>
</div>
</body>
</html>
您可以在 HTML 代码中看到一个用 id showinfo定义的<div>元素。通过这个 id，jQuery 代码中的<div>元素将被访问，选项卡小部件将与它相关联。为了定义选项卡或面板的标题，用三个<li>元素定义了一个无序列表<ul>，其中每个<li>元素都有一个嵌套的锚<a>，元素的href属性将选项卡或面板的标题与它们各自的内容链接起来。锚元素被设置为分别指向 idtab1、tab2和tab3。这意味着当单击任何锚元素时，它将搜索具有指定 id 的元素并导航到该元素。三个<li>元素被设置为分别显示面板的标题、 jQuery Intro 、 Features 和 Understanding DOM 。
为了定义当任何选项卡或面板的标题被单击时显示的内容，用 idtab1、tab2和tab3定义了三个<div>元素。也就是说，当点击任何一个具有href属性的锚元素时，它将导航到 id 与它所指向的 id 相匹配的<div>元素。<div>使用<p>元素、<ul>元素等。以所需的格式显示其内容。
要将<div>元素与选项卡小部件相关联，并通过其面板显示内容，需要以下 jQuery 代码:
tabasq . js的缩写
$(document).ready(function() {
$( "#showinfo" ).tabs();
});
id 为showinfo的<div>元素被访问，选项卡小部件被设置为通过<div>元素中定义的<ul>元素显示面板的标题。同样，具有href属性的锚元素链接到相应的<div>元素，以在点击任何面板的标题时显示信息，如图 9-12 所示。
图 9-12
选项卡小部件被设置为显示面板的标题，并显示所单击面板的信息
配置选项卡的选项
以下是可用于配置选项卡小部件的属性:
active:决定启动时哪个选项卡必须保持活动状态。默认值为0。collapsible:如果该选项设置为true，再次选择选中的选项卡将使其取消选中。如果此选项设置为false，选择一个选定的选项卡不会取消选择。默认值为false。disabled:用于禁用所需的选项卡。例如，如果该选项设置为valu, [1,2],，将禁用前三个选项卡。默认值为false。event:您可以选择激活标签的事件。事件可以是鼠标悬停、鼠标释放、点击等。默认事件是click。heightStyle:决定标签小工具的高度。以下是有效选项:"auto":所有标签页的高度将被设置为最高标签页的高度。"fill":所有页签的高度都是基于该页签的父高度。"content":标签的高度足以容纳它的内容。
hide:决定隐藏标签的动画。默认值为null。show:决定显示标签页所需的动画。默认值为null。
要根据您的需求配置选项卡小部件，需要设置它的不同属性，因此 jQuery 代码被修改为如下所示:
选项卡 1jq.js
$(document).ready(function() {
$( "#showinfo" ).tabs({
active:1,
collapsible: true,
//disabled: [1,2]
event: "mouseover",
heightStyle:"content"
});
});
第二个面板设置为在启动时激活。选择面板标题时，它将被选中，再次选择活动面板标题时，它将被取消选中。第二个和第三个面板可以用disabled属性禁用，如上面的代码所示。但是因为您希望所有的面板都是活动的，所以disabled属性被注释掉了。要选择任何面板，您不需要单击该面板；仅仅悬停在标题上就足够了，因为event属性被设置为mouseover。面板的高度设置为足以显示其内容。在运行 HTML 程序时，你会得到选项卡小部件来显示如图 9-13 所示的内容。
图 9-13
选项卡小部件被设置为显示内容
9.6 总结
在本章中，您学习了使用 jQuery UI 提供的不同小部件。您学习了使用 datepicker 小部件选择日期并格式化该日期。此外，您还了解了如何为 datepicker 小部件配置和应用样式。然后，您将学习使用 autocomplete 小部件在输入框中键入任何字符时显示建议。此外，您还学习了通过使用 accordion 和 tabs 小部件以分类形式显示大量数据。除了显示所需的内容，您还学习了如何配置 accordion 和 tabs 小部件。此外，您还学习了如何通过可关闭的对话框向用户显示信息。
下一章将向您展示实现 AJAX 的过程，使您的网页更具响应性。您将学习从服务器返回单行和多行文本，使用 JSON 返回名称/值对，返回一个简单的 JSON 对象，以及从显示图像的服务器返回 JSON 对象。您还将学习如何使用 AJAX 将字符串转换成大写，如何通过 AJAX 请求获取所选产品的价格，以及如何使用 AJAX 验证用户身份。
十、创建交互式、快速动态网页应用的网页开发技术
在本章中，您将学习如何实现 AJAX(即在后台与 web 服务器交换数据)并异步更新网页。本章包括以下配方。
从服务器返回一行文本
从服务器返回多行文本
使用 JSON 返回名称/值对
返回一个 JSON 对象
返回显示图像的 JSON 对象
使用 AJAX 将字符串转换成大写
通过 AJAX 请求显示所选产品的价格
使用 AJAX 认证用户
验证用户名
使用自动完成
导入 HTML
获取 XML 数据
给表格分页
你需要安装 WampServer 来运行本章的程序。附录 A 包括下载和安装 WampServer 的所有步骤。
将本章中的代码(带有本书的源代码包)复制到安装在您计算机上的 WampServer 的 www 文件夹中(即 C:\wamp64\www 文件夹中)。
10.1 从服务器返回单行文本
问题
您希望向服务器发出一个返回单行文本的 AJAX 请求。
解决办法
下面是显示 H1 元素和提交按钮的 HTML 代码。H1 元素显示服务器返回的文本，提交按钮启动发送到服务器的请求。
返回文本. html
<!DOCTYPE html>
<html>
<head>
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="returnonetextjq.js" type="text/javascript"></script>
</head>
<body>
<H1 id="askname">What is your name</H1>
<button>Submit</button>
</body>
</html>
H1 元素由“askname”和“你叫什么名字”文本定义。在 H1 元素下面创建一个提交按钮。
服务器上的文件应该返回单行文本，因此服务器上的文件 returnname.txt 包含单行文本“我的名字是 Bintu”。
返回名称.txt
My Name is Bintu
下面是向服务器发出 AJAX 请求并显示服务器返回的文本行的 jQuery 代码。
返回文本 jq.js
$(document).ready(function(){
$("button").click(function(){
$.ajax({
url: "/returnname.txt",
success: function(result){
$("#askname").html(result);
}});
});
});
这个 jQuery 代码展示了一个 ajax()方法；我们先来学习一下这个方法是做什么的。
ajax()
ajax()方法在 jQuery 中实现 AJAX(即向服务器发送异步 HTTP 请求)。
语法
url 表示请求必须发送到的 URL。默认情况下，当前页面被视为 URL
success 表示当请求成功时要执行的回调函数
complete 表示当请求完成时(即，在成功和错误函数之后)要执行的回调函数
数据表示要发送到服务器的数据。数据可以是 JSON 对象、字符串或数组。
error 表示请求失败时要执行的回调函数。
$.ajax({name:value, name:value, ... })
每当按钮上发生 click 事件时，就会调用 ajax()方法。ajax()方法将请求发送到 WampServer 上的 returnname.txt 文件。当请求成功时，调用通过 success 选项定义的回调函数。回调函数将 URL 文件返回的内容显示给 H1 元素，并替换其先前的内容。当运行 HTML 程序时，你得到 H1 元素并提交如图 10-1(a) 所示。点击提交按钮，显示 URL 文件通过 H1 元素返回的文本，如图 10-1(b) 所示。
图 10-1
(a)出现 H1 要素和提交按钮。(URL 文件返回的文本将通过 H1 元素显示
10.2 从服务器返回多行文本
问题
您想向服务器发出一个 AJAX 请求，当请求成功时，服务器返回多行文本。
解决办法
服务器返回的两行文本通过 H1 元素显示，因此显示两个 H1 元素和一个提交按钮的 HTML 代码如下所示。提交按钮启动向服务器发出的 AJAX 请求。
Returnmultipletext.html
<!DOCTYPE html>
<html>
<head>
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="returnmultipletextjq.js" type="text/javascript"></script>
</head>
<body>
<H1 id="name">What is your name</H1>
<H1 id="work">What do you do</H1>
<button>Submit</button>
</body>
</html>
两个 H1 元素分别用 id、name 和 work 定义。id 为 name 的 H1 元素显示“你叫什么名字”文本。带有工作 id 的 H1 元素显示“你做什么”文本。在 H1 元素下面是一个提交按钮。
retrnata . txt
My Name is Bintu <br/>
I am working on jQuery <br/>
服务器上的文件返回两行文本，中间有一个换行符。
下面是 jQuery 代码，用于向服务器发出 AJAX 请求，并拆分服务器返回的多行内容并显示出来。
返回 multipletextjq.js
$(document).ready(function(){
$("button").click(function(){
$.ajax({
url: "/returndata.txt",
success: function(result){
var lines=result.split("<br/>");
$("#name").html(lines[0]);
$("#work").html(lines[1]);
}});
});
});
在运行 HTML 程序时，你得到两个 H1 元素，显示“你叫什么名字”和“你做什么”文本，以及底部的提交按钮(见图 10-2(a) )。当用户单击按钮时，ajax()方法被调用，将请求发送到服务器上的 returndata.txt 文件。
当请求成功时，调用用 success 选项指定的回调函数。回调函数中的参数包含服务器上 URL 中提到的文件返回的内容。因为服务器上的文件返回两行，所以行在出现
换行符的地方被分割，并且单独的行被分配给 lines 数组。从服务器返回的第一行和第二行分别被分配给行[0]和行[1]索引位置。行[0]索引位置中的文本(即，我的名字是 Bintu)通过具有名称 id 的 H1 元素显示。行[1]索引位置中的文本(即我正在处理 jQuery)通过带有工作 id 的 H1 元素显示，如图 10-2(b) 所示。
图 10-2
(a)出现两个带有提交按钮的 H1 元素。(b)服务器返回的两行通过两个 H1 元素显示
JSON 代表 JavaScript 对象符号。这是一种轻量级语法，用于将数据从服务器发送到客户端的浏览器。JSON 以逗号分隔的名称/值对的形式维护数据。对象用花括号括起来，数组用方括号。
10.3 使用 JSON 返回名称/值对
问题
您希望向服务器发出一个 AJAX 请求，如果请求成功，服务器将以 JSON 格式返回名称/值对。
解决办法
因为服务器返回的内容是通过将它附加到 HTML 文件的元素来显示的，所以 HTML 文件当前没有要显示的元素。
返回 json1.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Returning JSON using jQuery</title>
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="returnjson1jq.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>
因此，HTML 程序不显示任何内容。通过 jQuery ajax()方法向服务器发出请求，服务器返回的数据显示在 HTML 程序体中。
服务器上的 JSON 文件有一些名称/值对格式的数据。该文件包含某些快餐商品及其价格，如图所示。
JSON amp 1.json
{
"Pizza": "20$",
"Burger": "10$",
"Hot Dog": "7$"
}
下面是从服务器获取 JSON 数据并以所需格式显示在屏幕上的 jQuery 代码。
返回 json1jq.js
$.getJSON( "/jsonsample1.json", function(result ) {
var items = [];
$.each(result, function( item, price ) {
items.push( "<tr><td>" + item + "</td><td>" + price + "</td><tr/>" );
});
$( "<table/>", {
html: items.join( "" )
}).appendTo( "body" );
});
这个 jQuery 代码使用了 getJSON()、each()、arr.push()和 join()等方法，所以让我们先快速浏览一下这些方法。
getJSON（ ）
顾名思义，getJSON()方法使用 GET HTTP 请求从服务器获取 JSON 数据。
语法
url表示请求将被发送到的 URL。data表示要发送的数据。success表示请求成功时执行的回调函数。
$(selector).getJSON(url,data,success(data,status,xhr))
成功函数的语法是
data代表从服务器返回的数据。status表示包含请求状态的字符串。状态可以是“成功”、“未修改”、“错误”、“超时”或“解析错误”)。xhr表示 XMLHttpRequest 对象。
success(data,status,xhr)
每个( )
each()方法指定了一个必须在每个匹配元素上执行的函数。
语法
function(index,element)表示对每个匹配元素执行的函数。index代表选择器的索引位置。element代表当前元素。
$(selector).each(function(index,element))
arr.push()
arr.push()方法类似于通常使用堆栈执行的 push 操作(即，它将一个或多个值推入或添加到数组中)。
语法
arr.push(element1, element2 ...)
element表示要插入数组的元素。
加入( )
join()方法将数组返回为字符串格式。原始数组不变。指定的分隔符分隔数组的所有元素。默认分隔符是逗号(，)。
语法
array.join(separator)
分隔符是可选的。如果不使用，逗号分隔元素。
getJSON()方法向服务器发送 AJAX 请求，如果请求成功，就执行回调函数。位于服务器上的 jsonsample1.json 文件中的内容通过回调函数的 result 参数返回。定义了一个项目。使用 each()方法，观察服务器上的文件返回的结果，并对返回的每个名称/值对应用回调函数。名称(即，项目名称)和值(即，其价格)被推送(即，在将它们包含在表列中之后，被添加到项目数组中)。表格列以适当的对齐方式排列项目名称及其价格。在将所有商品名称及其价格值添加到商品数组之后，元素被关闭。通过调用 join()方法，items 数组中的整个表被转换为字符串格式。
最后，包含商品名称及其价格的字符串格式的表格被附加到 HTML 文件的元素中进行显示(见图 10-3 )。
图 10-3
服务器上的文件返回的结果以表格的形式格式化并显示
10.4 返回 JSON 对象
问题
您希望向服务器发出一个 AJAX 请求，以获得一个 JSON 对象作为回报。JSON 对象包含一个人的姓名和工作——服务器返回这个人的姓名和工作类型。
解决办法
为了通过 H1 元素显示一个人的姓名和工作，定义了两个 H1 元素和一个按钮。这两个 H1 元素显示了服务器返回的 JSON 对象的名称和工作属性。下面是 HTML 代码。
返回 json2.html
下面是显示两个 H1 元素和一个按钮的 HTML 代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Returning JSON using jQuery </title>
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="returnjson2jq.js" type="text/javascript"></script>
</head>
<body>
<H1 id = "Name">What is your Name</H1>
<H1 id = "Work">What do you do</H1>
<div>
<button type = "button">Enter Info</button>
</div>
</body>
</html>
这两个 H1 元素分别用 id、Name 和 Work 定义。两个 H1 元素都被设置为显示某些默认文本。JSON 对象返回的 name 属性通过第一个 H1 元素显示，JSON 对象的 work 属性通过第二个 H1 元素显示。
服务器上的 URL 文件包含一个 JSON 对象，该对象包含两个属性:name 和 work。
JSON amp 2.json
{"name": "Bintu Harwani", "work": "I am working with jQuery"}
下面是从服务器获取 JSON 对象、从对象中访问 name 和 work 属性并显示它的 jQuery 代码。
返回 json2jq.js
$(document).ready(function(){
$("button").click(function(){
$.getJSON( "/jsonsample2.json", function(jsonObj ) {
$("#Name").html( jsonObj.name);
$("#Work").html( jsonObj.work);
});
});
});
运行该应用时，显示两个 H1 元素，并为它们分别分配了默认文本:“你叫什么名字”和“你是做什么的”。H1 元素的下方是一个按钮，如图 10-4(a) 所示。当按钮上发生 click 事件时，调用 getJSON()方法，将 AJAX 请求发送到服务器。如果请求成功，回调函数被调用，服务器返回的 JSON 对象被赋给回调函数的 jsonObj 参数。人员的姓名和工作存储在 JSON 对象 jsonObj 的姓名和工作属性中，分别通过 H1 元素 IDs、name 和 work 显示(参见图 10-4(b) )。
图 10-4
(a)出现两个带有指定文本的 H1 元素和一个按钮。(b)从服务器返回的 JSON 对象访问的名字和作品通过 H1 元素显示
10.5 返回显示图像的 JSON 对象
问题
您希望向服务器发出一个 AJAX 请求，如果请求成功，服务器将返回产品名称及其图像文件名。
解决办法
您希望当用户单击按钮时，产品名称和图像出现在屏幕上。下面是显示按钮和
元素的 HTML 代码。
返回 jsonimages.html
<html>
<head>
<title>Returning Images using JSON</title>
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="returnjsonimagesjq.js" type="text/javascript"></script>
</head>
<body>
<div>
<button type = "button">Show Images</button>
</div>
<div id='Images'></div>
</body>
</html>
id
元素显示 JSON 对象中相应属性返回的图像。
下面是服务器上的文件，它包含一个 JSON 对象数组，其中每个 JSON 对象包含两个属性:Name 和 Image。
jsonsampollage . JSON
[
{
"Name": "Intel",
"Image": "chip.jpg"
},
{
"Name": "AMD",
"Image": "chip2.jpg"
},
{
"Name": "Cisc",
"Image": "chip3.jpg"
},
{
"Name": "Risc",
"Image": "chip4.jpg"
},
{
"Name": "Dual Core",
"Image": "chip5.jpg"
}
]
下面是将 AJAX 请求发送到服务器的 jQuery 代码，当请求成功时，代码访问由提到的 URL 返回的 JSON 对象，并在屏幕上显示图像名称和相应的图像。
返回 jsonimagesj . js
$(document).ready(function(){
$("button").click(function(){
$.getJSON("/jsonsampleimages.json", function (data) {
var arrItems = [];
$.each(data, function (index, value) {
arrItems.push(value);
});
var arrImages = [];
for (var i = 0; i < arrItems.length; i++) {
arrImages.push( "<tr><td><H1>" + arrItems[i].Name + "</H1></td><td><img src=" + arrItems[i].Image + "></td><tr/>" );
};
$( "<table/>", {
html: arrImages.join( "" )
}).appendTo( "#Images" );
});
});
});
当按钮上发生 click 事件时，调用 getJSON 方法，向服务器发出 AJAX 请求；如果请求成功，将返回服务器上 jsonsampleimages.json 文件中的 JSON 对象，并且可以通过回调函数中的 data 参数访问这些对象。
定义了一个 arrItems 数组。使用 each 方法，URL 文件中的每个 JSON 对象都被访问并被推入 arrItems 数组。因此，arrItems 数组包含从服务器获取的 JSON 对象。
现在，是时候在 JSON 对象中分离名称和图像属性，并将它们插入到另一个数组中，这样就又创建了一个数组 arrImages。for 循环用于访问 arrItems 数组中的每个 JSON 对象，并将 JSON 对象的名称和图像属性放入 and 元素中，然后将它们放入 arrImages 数组。and 元素使 JSON 对象属性以表格格式出现。JSON 对象的 Name 和 Image 属性分别包含产品名称和图像文件名。通过调用 join()方法，表格格式的所有产品名称和图像文件名都被转换成一个字符串，并附加到 id 的元素 Images 中以供显示。应用运行时，屏幕上出现显示图像按钮，如图 10-5(a) 所示。当按下显示图像按钮时，显示产品名称和相应的图像，如图 10-5(b) 所示。
图 10-5
(a)屏幕上出现显示图片按钮。(b)按下显示图像按钮
显示产品名称及其相应的图像
10.6 使用 AJAX 将字符串转换为大写
问题
您有一个提示用户输入字符串的网页。如果单击 Submit 按钮，AJAX 请求将被发送到服务器，服务器将访问服务器上的 PHP 脚本。它将输入的字符串转换为大写，并将其返回给浏览器。
解决办法
下面是包含提示用户输入字符串的代码的 HTML 文件，该字符串被发送到服务器进行大写转换。
ajxphp 1 . html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="ajax1style.css" type="text/css" media="screen" />
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="ajaxphp1jq.js" type="text/javascript"></script>
</head>
<body>
<form>
<label>Enter a string</label>
<input type="text" size="50" class="enteredStr"/> <br/>
<input type="submit" id="submit"/>
</form>
<div id="response"></div>
</body>
</html>
您可以在 HTML 代码中看到定义了一个表单，并且在表单中定义了一个标签、一个输入框和一个按钮。标签被设置为显示“输入字符串”消息。输入框应该从用户那里获取一个字符串。框的大小被定义为 50 个字符，但是当输入的文本滚动时，用户可以输入更多的字符。单击该按钮时，会向服务器发起 AJAX 请求。服务器发送的响应通过 id，response 的
元素显示。
下面是 jQuery 代码，用于发出 AJAX 请求，将用户输入的字符串发送到服务器上的文件，并显示服务器发回的响应。
ajxphp 1 jq . js
$(document).ready(function() {
$('#submit').click(function () {
var str = $('.enteredStr').val();
var data = 'enteredStr=' + str;
$.ajax({
type:"POST",
url:"convertcap.php",
data: data,
success: function (html) {
$('#response').html(html);
}
});
return false;
});
});
当按钮上发生 click 事件时，使用 enteredStr 类在输入框中输入的字符串将被访问并赋给 Str 变量。名称/值对由名称(enteredStr)和用户输入的字符串形式的值组成。这个名称/值对被分配给数据变量。
之后，向服务器发出 ajax 请求，并使用 HTTP POST 请求方法从服务器获取数据。服务器上的 convertcap.php 脚本被访问。数据变量中的名称/值对被传递给服务器上的文件(即 convertcap.php 脚本)。如果 AJAX 请求成功，回调函数被调用，服务器发送的响应被赋给 HTML 参数。
服务器在 HTML 参数中发送的响应通过 id 为 response 的
元素显示。
下面是服务器上把字符串转换成大写的 PHP 脚本文件。
转换 cap.php
<?php
$str = $_POST['enteredStr'];
echo "String in upper case is: ". strtoupper($str);
?>
PHP 脚本中使用了 strtoupper()方法。我们来讨论一下这个方法的作用。
吸管( )
函数的作用是:将一个字符串转换成大写。
语法
strtoupper(string)
string 参数表示要转换为大写的字符串。
运行程序时，HTML 程序显示一个输入框，要求用户输入一个字符串，如图 10-6(a) 所示。让我们假设用户在输入框中输入一些文本并点击提交按钮。发生的情况是，使用 PHP 超全局变量$_POST，访问传递给脚本文件的字符串。回想一下，名称/值对通过数据变量发送到服务器上的 PHP 脚本文件，其中名称是输入的字符串，值是用户输入的字符串。使用$_POST 全局变量访问用户输入的字符串，并将其赋给 str 变量。最后，通过调用 strtoupper()方法，将字符串转换成大写并返回，然后显示在屏幕上，如图 10-6(b) 所示。
图 10-6
(a)出现输入框，要求用户输入字符串。(b)输入的字符串被转换成大写并显示在屏幕上
10.7 通过 AJAX 请求显示所选产品的价格
问题
您希望使用一个组合框显示三种快餐食品，当用户选择任何一种食品时，就会向服务器发出 AJAX 请求。服务器发送所选食品的价格。
解决办法
下面是显示一个组合框的 HTML 代码，该组合框显示三种食品。
ajxphp 2 . html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="ajax1style.css" type="text/css" media="screen" />
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="ajaxphp2jq.js" type="text/javascript"></script>
</head>
<body>
Select your food item :
<select class="fooditem" >
<option value="" selected>Select Food Item</option>
<option value="Pizza">Pizza</option>
<option value="Burger">Burger</option>
<option value="Hot Dog">Hot Dog</option>
</select>
<div id="info"></div>
</body>
</html>
您可以看到显示一条文本消息“选择您的食物”。在文本消息之后，使用 HTML select 元素显示一个组合框。该组合框中定义了三种食品。在组合框之后，用 id“info”定义了一个
元素，以显示 AJAX 请求成功时服务器发送的结果。
发出 AJAX 请求的 jQuery 代码将选择的食物发送到服务器上的文件中，并显示服务器返回的食物价格。
ajxphp 2 jq . js
$(document).ready(function() {
$('.fooditem').on('change', function () {
var str = $('.fooditem').val();
var data = 'fooditem=' + str;
$.ajax({
type:"GET",
url:"findprice.php",
data: data,
success: function (html) {
$('#info').html(html);
}
});
return false;
});
});
组合框被分配给 fooditem 类。回调函数在组合框的“change”事件上被调用(也就是说，在选择任何食物项目时，回调函数被调用)。在回调函数中，用户选择的食物被访问并赋给 str 变量。名称/值对由名称和数据定义，其中名称是 fooditem。该值是用户选择的食物项目。向服务器发出一个 AJAX 请求，使用 HTTP GET 方法，将名称/值对传递给 PHP 脚本 findprice.php。如果 ajax 请求成功，服务器返回的内容(即服务器返回的食品价格被分配给与 AJAX()方法的 success 选项相关联的回调函数的 HTML 参数)。服务器返回的价格通过使用 info id 的
元素显示在屏幕上。
find price . PHP
<?php
$product = $_GET['fooditem'];
if($product == "Pizza")
$price="15 $";
if($product == "Burger")
$price="10 $";
if($product == "Hot Dog")
$price="5 $";
echo "You have chosen " . $product . " and its price is " . $price;
?>
使用组合框显示某些食品(参见图 10-7 (a))。当选择一个食物时，会发出一个 AJAX 请求，调用服务器上的 PHP 脚本。在 PHP 脚本中，您会发现使用 PHP 超全局变量$_GET，可以访问名为 fooditem 的值并将其赋给 product 变量。回想一下，用户选择的食物项目和名称 food item 一起被传递给服务器。当使用 if-else 语句时，检查食品项目，并将其价格赋给价格变量。最后，价格变量中食品的价格被返回到客户端的浏览器并显示出来，如图 10-7(b) 所示。
图 10-7
(a)使用组合框显示一些食品。(b)显示由服务器返回的所选食品的价格
10.8 使用 AJAX 认证用户
问题
您有一个 MySQL 数据库表，其中包含用户的电子邮件地址、密码和姓名。如果用户输入了有效的电子邮件地址和密码，用户会收到一条欢迎消息，并从 MySQL 表中获取用户名。
解决办法
要做这个菜谱，您需要创建一个 MySQL 数据库和一个表，并插入几行。让我们快速看一下 MySQL 的基本语句。
创建数据库
create database 语句创建一个新的 SQL 数据库。
语法
Create database database_name;
database_name表示要创建的数据库的名称。
显示数据库
顾名思义，show databases 语句是获取所有 MySQL 数据库的列表。
语法
Show databases;
使用语句
use 语句通知 MySQL 使用指定的数据库来执行后续的 SQL 语句。
语法
USE database_name;
一旦使用了 USE 语句，指定的数据库将保持为当前数据库，直到出现另一个 USE 语句。
创建表格
顾名思义，create table 语句创建一个数据库表。
语法
create table table_name(
column_name datatype optional_attribute,
column_name datatype optional_attribute,
..................
);
数据类型包括 varchar、int 和 timestamp，它们是存储在该列中的数据类型。
可选属性可以是以下任何一种。
NOT NULL:该列存储一个值。此列中不允许空值。
默认值:当没有为此列提供值时，该列存储指定的值。
AUTO_INCREMENT:当添加一个新行时，该列中的值自动增加 1。
主键:此列中的值必须唯一。该属性通常与 AUTO_INCREMENT 一起使用。如果数据库表有主键列，则可以有效地对其进行搜索。
显示表格语句
该语句显示当前打开的数据库中的表。语法
Show tables [LIKE 'pattern']
使用 LIKE 关键字，只显示与指定模式匹配的表。
选择查询
SELECT 语句从 MySQL 数据库获取数据。这个语句可以通过命令提示符运行，也可以用任何脚本编写，比如 PHP 和 Ruby。
语法
[DISTINCT | ALL]显示唯一行，而 ALL 显示所有行，包括重复行。“全部”选项是默认选项。[ * | selected fields]显示所选表格的所有字段。您还可以在输出中显示选定的字段。FROM table_name指定必须从中选择选定字段的一个或多个表格。必须指定表名。WHERE条件指定了逻辑表达式。将显示满足给定条件的行。这是可选的。
SELECT [DISTINCT|ALL ] [ * | selected fields ] FROM table_name [WHERE condition]
插入
INSERT INTO 语句将新行插入指定的表中。
语法
INSERT INTO table_name (column1, column2, column3,...)
VALUES (value1, value2, value3,...)
您可以按顺序指定列名及其各自的值。但是，如果要为表中的所有列指定值，则不需要指定列名，但是所提供的值必须与表中列的顺序相匹配。
打开 MySQL 命令行客户端窗口并运行以下命令，该命令创建一个名为 jquerydb 的 MySQL 数据库，并在该数据库中创建一个名为 users 的表。users 表有三列:电子邮件地址、密码和用户名。
mysql> create database jquerydb;
mysql> use jquerydb;
mysql> create table users(
email_address varchar(50) NOT NULL,
password varchar(15) Not NULL,
user_name varchar(50),
primary key(email_address));
mysql> show tables;
mysql> select * from users;
mysql> insert into users values('bintu@yahoo.com', 'gold123', 'bintu');
mysql> insert into users values('chirag@gmail.com', 'chirag123', 'chirag');
mysql> select * from users;
+------------------+-----------+-----------+
| email_address | password | user_name |
+------------------+-----------+-----------+
| bintu@yahoo.com | gold123 | bintu |
| chirag@gmail.com | chirag123 | chirag |
+------------------+-----------+-----------+
2 rows in set (0.00 sec)
MySQL 命令执行的截图如图 10-8 和 10-9 所示。
图 10-9
显示表、运行 Select 和 Insert SQL 语句的屏幕截图
图 10-8
创建数据库和表的屏幕截图
下一步是为用户界面创建一个 HTML 文件。
下面是要求用户输入电子邮件地址和密码的 HTML 代码。
ajxphp 3 . html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="ajax1style.css" type="text/css" media="screen" />
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="ajaxphp3jq.js" type="text/javascript"></script>
</head>
<body>
<form>
<label>Enter your Email Address</label>
<input type="text" class="email"/> <br/>
<label>Enter your Password</label>
<input type="password" name="password" class="passwd"/> <br/>
<input type="submit" id="submit"/>
</form>
<div id="response"></div>
</body>
</html>
您可以在 HTML 代码中看到定义了一个
在两个输入框下面是一个 Submit 按钮，单击它会启动 AJAX 请求。Submit 按钮下面是 id，response 的
元素，用于显示 AJAX 请求成功时服务器发送的结果。
下面是发出 AJAX 请求、调用服务器上的 PHP 脚本并获取服务器发送的结果的 jQuery 代码。
ajxphp 3jq . js
$(document).ready(function() {
$('#submit').click(function () {
var emailaddr = $('.email').val();
var pwd = $('.passwd').val();
var data='email='+emailaddr+'&password='+pwd;
$.ajax({
type:"GET",
url:"authenticate.php",
data:data,
success:function(html) {
$("#response").html(html);
}
});
return false;
});
});
当单击 Submit 按钮时，用户输入的电子邮件地址被访问并分配给 emailaddr 变量。访问用户输入的密码，并将其分配给 pwd 变量。名称和密码组合成一个名称/值对，并分配给数据变量。发出一个 AJAX 请求，数据变量中的电子邮件地址和密码被传递给服务器上的 PHP 脚本 authenticate.php。如果 AJAX 请求成功，将调用 success 选项中的回调函数。服务器发送的结果被赋给回调函数的 HTML 参数。服务器在 HTML 参数中发送的内容通过 id，response 的
元素显示在屏幕上。
下面的 PHP 脚本建立了与 MySQL 数据库的连接，并将用户输入的电子邮件地址和密码与 MySQL 表中的数据进行比较。
Authenticate.php
<?php
$emailaddr = trim($_GET['email']);
$pswd = trim($_GET['password']);
$connect = mysqli_connect("localhost", "root", "gold123", "jquerydb");
if(!$connect){
die('Please, check your server connection.');
}
$query = "SELECT user_name FROM users WHERE email_address LIKE '$emailaddr%' and password like '$pswd%'";
$results = mysqli_query($connect, $query);
if($results)
{
$count = mysqli_num_rows($results);
if ($count >0)
{
while ($row = mysqli_fetch_array($results,MYSQLI_ASSOC)) {
extract($row);
echo 'Welcome ' . $user_name. ' !';
}
}
else
echo "Invalid email address or password";
}
else
echo "Sorry database table not found or access is denied";
?>
PHP 脚本使用了几种方法，比如 trim()、mysqli_connect()、die()、mysqli_query()和 mysqli_num_rows()。我们先来快速浏览一下这些方法。
修剪( )
trim()函数从所提供的字符串中删除空白和一些预定的字符。
语法
string 表示必须从中删除空格的字符串。
char_to_remove 表示要从字符串中删除的字符。这是可选的，如果不使用，后面的所有字符都将被删除。
“\0”(空字符)
" \t "(制表符间距)
" \n "(换行符)
" \x0B "(垂直制表符)
" \r "(回车)
" "(空白)
trim(string, char_to_remove)
mysqli_connect()
mysql_connect 打开一个到 mysql 服务器的新连接。
语法
host 代表主机名。也可以提到主机的 IP 地址。如果使用本地服务器，可以使用关键字 localhost。它是可选的。
用户名代表一个真实的 MySQL 用户名。这个参数是可选的，通常根是用户名。
password 代表 MySQL 密码
database 表示必须建立连接的数据库。
port 代表连接 MySQL 服务器的端口号。它是可选的。
socket 表示要使用的套接字或命名管道。它是可选的。
mysqli_connect(host, user_name, password, database, port, socket)
模具( )
die()方法打印错误消息并退出脚本。
语法
die(message)
message 参数包含要显示的文本。它是可选的。
mysqli_query（）
mysqli_query()方法在数据库上执行指定的查询。
语法
connection_link 表示要使用的 MySQL 连接
query_string 表示 SQL 查询字符串
result_mode 是可选的，它决定了结果如何从 MySQL 服务器返回。可以使用以下常量。
MYSQLI_STORE_RESULT(默认)返回一个带有缓冲结果集的 mysqli_result 对象。
MYSQLI_USE_RESULT 返回一个带有未缓冲结果集的 mysqli_result 对象。除非提取了所有行，否则连接线会占线，所有后续调用都会导致错误。因此，要么必须从服务器获取所有行，要么必须通过调用 mysqli_free_result()丢弃结果集。
MYSQLI_ASYNC 查询是异步执行的，不会立即返回结果集。mysqli_poll()函数用于获取结果。
mysqli_query(connection_link, query_string, result_mode)
mysqli_num_rows （ ）
函数的作用是:返回结果集中的行数。它经常用于确定所需的数据在数据库中是否可用。
语法
mysqli_num_rows(result_set);
result_set 参数表示由类似 mysqli_query()的 fetch 查询函数返回的结果集。
当 HTML 程序运行时，您会看到一个屏幕，提示用户输入电子邮件地址和密码。输入电子邮件地址和密码后，当用户单击提交按钮时，AJAX 请求调用服务器上的 PHP 脚本。在 PHP 脚本中，通过数据变量发送的电子邮件地址和密码是使用 PHP 超全局变量$_GET 访问的。传递给 PHP 脚本的电子邮件地址和密码被访问并分配给 emailaddr 和 pswd 变量。
通过传递 userid、root 和密码来建立与 jquerydb MySQL 数据库的连接。建立到 MySQL 数据库的连接后，执行 SQL SELECT 语句在 users 表中查找与提供的电子邮件地址和密码匹配的行。如果在用户表中找不到该行，则向客户端的浏览器返回一条消息、无效的电子邮件地址或密码(参见图 10-10 (a))。如果在用户表中找到与提供的电子邮件地址和密码匹配的任何行，一条欢迎消息连同用户名(从用户表中访问)被发送回客户端的浏览器进行显示，如图 10-10(a) 所示。
图 10-10
(a)当在用户表中找不到该行时，会出现无效的电子邮件地址或密码消息。(b)如果在用户的表中找到匹配的行，欢迎消息将与用户名一起显示
10.9 验证用户名
问题
您希望让用户输入一个名称，并且希望使用服务器端脚本来确认该字段没有留空。如果用户没有在 name 字段中输入任何内容，他们应该会得到一条错误消息。
解决办法
让我们首先创建一个 HTML 文件，该文件显示一个标签:“输入您的姓名”和一个输入文本字段以及一个提交按钮。HTML 文件可能如下所示。
验证器. html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="stylesuservalidate.css" type="text/css" media="screen" />
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="validateuserjq.js" type="text/javascript"></script>
</head>
<body>
<form>
<span class="label">Enter your Name</span>
<input type="text" name="uname" class="uname"/> <span class="error">
</span><br>
<input type="submit" id="submit"/>
</form>
</body>
</html>
这里可以看到，输入文本字段被分配了 uname 类，以便通过 jQuery 代码访问它。输入文本字段之后是 error 类的空 span 元素。如果用户将输入文本字段留空，则从服务器生成的响应中为该 span 元素分配文本。
为了指定输入文本字段标签的宽度和错误消息的颜色，您需要在样式表文件中编写一些样式规则。
stylesuservalidate.css
.label {float: left; width: 120px; }
.uname {width: 200px; }
.error { color: red; padding-left: 10px; }
#submit { margin-left: 125px; margin-top: 10px;}
下面是调用服务器端脚本的 jQuery 代码，该脚本将用户输入的名称作为参数传递给 validateuser.php，如果用户将该名称留空，将显示一条错误消息。
validator rjq . js
$(document).ready(function() {
$('.error').hide();
$('#submit').click(function () {
var name = $('.uname').val();
var data='uname='+name;
$.ajax({
type:"POST",
url:"validateuser.php",
data:data,
success:function(html) {
$('.error').show();
$('.error').text(html);
}
});
return false;
});
});
validateuser.php 脚本文件在服务器上。它检查用户名是否为空。下面是代码。
验证器. php
<?php
if($_POST['uname'] == '')
{
echo "This field cannot be blank";
}
?>
它是如何工作的
通过隐藏 error 类的 span 元素并将一个 click 事件附加到分配了提交 id 的 Submit 按钮，可以启动前面看到的 jQuery 代码。然后，检索用户在输入文本字段(uname 类的)中输入的名称，并将其存储在一个名称变量中。
该变量存储一个字符串 uname=name，其中 name 保存用户输入的名称。
该数据变量被发送到服务器，以分配给 validateuser.php 脚本文件(假设服务器上已经存在)，从而确认该名称没有为空。
您通过 ajax()方法调用请求，在该方法中，您指定将要使用的请求方法是 POST，并且在服务器上执行的脚本文件的名称是 validateuser.php。您还指定要传递给脚本文件的参数包含在字符串数据中。
处理完传递的数据后，您在 validateuser.php 中的代码生成输出，该输出由回调函数的 HTML 参数中的 JavaScript 文件接收。然后将脚本文件返回的响应(存储在 HTML 中)分配给 error 类的 span 元素，以便向用户显示错误响应，该响应是由服务器上的脚本文件生成的。但是，在将响应 HTML 分配给 error 类的 span 元素之前，您首先要使它可见，因为您在代码的开头就将它隐藏起来了。最后，在 click 事件中返回 false，以取消默认的浏览器单击行为；也就是说，您希望它采取通过 jQuery 代码指定的动作，而不是它的默认动作。
您还可以看到 PHP 脚本是如何通过$_POST 数组检索通过数据参数传递的名称的，当发现名称为空时，就用一条错误消息进行响应。此字段不能为空，它显示在错误类的 span 元素中。如果名称不为空，则不会生成响应。
将输入文本字段留空，如果选择提交按钮，将显示错误消息，如图 10-11 所示。
图 10-11
名称字段留空时显示的错误消息
如果输入了有效的名称，则该名称被接受而不显示任何错误信息，如图 10-12 所示。
图 10-12
接受名称，不显示错误消息
10.10 使用自动完成
问题
您希望让用户在输入文本字段中输入姓名，以便在用户键入姓名的第一个字符时，会出现一个建议框，显示以所键入的字符开头的所有姓名。您还希望显示在建议框中的名称具有悬停效果，这样当鼠标指针移动到这些名称上时，它们会高亮显示，并且单击的名称会插入到输入文本字段中。
解决办法
让我们创建一个 HTML 文件，显示一个标签:“输入用户 id”和一个输入文本字段。在输入文本字段的下面，创建两个被分配了类名的空 div 元素:listbox 和 nameslist。以下是 HTML 文件。
autocomplete.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="stylesautocomplete.css" type="text/css" media="screen" />
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="autocompletejq.js" type="text/javascript"></script>
</head>
<body>
<form>
<span class="label">Enter user id</span>
<input type="text" name="userid" class="userid"/>
<div class="listbox">
<div class="nameslist">
</div>
</div>
</form>
</body>
</html>
listbox 类的 div 元素显示一个框。nameslist div 元素以悬停效果显示名称。您可以在下面的 style.css 文件中定义应用于两个 div 元素的样式规则。
stylesautocomplete.css
.listbox {
position: relative;
left: 10px;
margin: 10px;
width: 200px;
background-color: #000;
color: #fff;
border: 2px solid #000;
}
.nameslist {
margin: 0px;
padding: 0px;
list-style:none;
}
.hover {
background-color: cyan;
color: blue;
}
下面是 jQuery 代码，当用户在输入文本字段中键入第一个字符时，它会使建议框出现，并使单击的名称(在建议框中)自动出现在输入文本字段中。
自学成才 jq.js
$(document).ready(function() {
$('.listbox').hide();
$('.userid').keyup(function () {
var uid = $('.userid').val();
var data='userid='+uid;
$.ajax({
type:"POST",
url:"autocompletescript.php",
data:data,
success:function(html) {
$('.listbox').show();
$('.nameslist').html(html);
$('li').hover(function(){
$(this).addClass('hover');
},function(){
$(this).removeClass('hover');
});
$('li').click(function(){
$('.userid').val($(this).text());
$('.listbox').hide();
});
}
});
return false;
});
});
服务器上的 autocomplete.php 脚本文件用于发送姓名列表作为响应；它应该看起来像下面这样。
autocompletescript.php
<?php
echo '<li>Jackub</li>';
echo '<li>Jenny</li>';
echo '<li>Jill</li>';
echo '<li>John</li>';
?>
获取从数据库生成的名称
服务器端脚本的一个缺点是它只返回以字符 j 开头的名字。即使用户键入任何其他字符，它仍然会生成以 j 字符开头的名称。您希望生成以用户键入的任何字符开头的名称。为此，您需要创建一个数据库和一个包含数百个姓名的表。我创建了一个名为 autofill 的数据库(使用 MySQL server)和一个包含姓名信息的表。表格信息包含一个字段名称，您将在其中插入几个名称，以字符 a 到 z 开头。
自动复合脚本. php
<?php
$name = $_POST['userid'];
$connect = mysqli_connect("localhost", "root", "gold123", "jquerydb");
if(!$connect){
die('Please, check your server connection.');
}
$query = "SELECT user_name FROM users WHERE user_name LIKE '$name%'";
$results = mysqli_query($connect, $query);
if($results)
{
while ($row = mysqli_fetch_array($results,MYSQLI_ASSOC)) {
extract($row);
echo '<li>' . $user_name. '</li>';
}
}
?>
它是如何工作的
在样式表文件中，listbox 样式规则包括设置为相对值的 position 属性，以便为其分配相对于其容器(未定义时通常是浏览器窗口)的位置。left 属性设置为 10px，使建议框出现在距离浏览器窗口左边框 10px 的位置。Margin 属性被设置为值 10px，以使其上方的输入文本字段保持 10px 的距离。Width 属性设置为 200px，使名称(显示在此框中)占据 200px。background-color 和 color 属性分别设置为值#000 和#fff，以使框的背景颜色变为黑色，名称显示为白色。border 属性的值设置为 2px solid #000，使 2px 粗细的黑色实心边框出现在建议框中显示的姓名周围。
继续看 jQuery 代码，您在开头隐藏了 listbox 类的 div 元素，因为您只想在用户在输入文本字段中键入字符时显示它。您将 keyup()事件附加到输入文本字段，该字段被分配了类名 userid，以便当用户释放键盘上的一个键时触发其事件处理函数。然后，检索用户在 userid 类的输入文本字段中键入的字符，并将其存储在 uid 变量中；然后定义一个存储字符串 userid=uid 的数据变量，其中 uid 保存用户输入的(姓名的)第一个字符。该数据变量被发送到服务器，以分配给 autocomplete.php 脚本文件(假设已经存在于服务器上),从而向用户显示建议框。
您通过 ajax()方法调用实际的请求，其中您指定将要使用的请求方法是 POST，在服务器上执行的脚本文件的名称是 autocompletescript.php。要传递给脚本文件的参数包含在字符串数据中，其中包含字符串 userid=uid。处理完传递的数据后，脚本文件(服务器上的 autocompletescript.php)在回调函数的 HTML 参数中生成 jQuery 文件接收到的输出。然后，使 listbox 类的 div 元素可见，以显示其中的名称。
您还可以将脚本文件(存储在 HTML 中)返回的响应分配给 nameslist 类的 div 元素。然后，脚本文件以列表项的形式返回几个名字。接下来，将悬停事件附加到脚本文件返回的名称上(以列表项的形式)。在这种情况下，当鼠标指针移动到名称上时，将在悬停样式规则中定义的样式属性添加到名称(以列表项的形式)，使它们在青色背景上以蓝色显示。当鼠标指针移开时，还可以从名称中删除悬停样式规则中定义的样式属性。
将 click 事件附加到列表项中存在的名称上，使被单击的名称出现在 userid 类的输入文本字段中，并隐藏包含名称的建议框。在 click 事件中返回 false 以禁止默认的浏览器单击行为，因为您希望它执行通过 jQuery 代码指定的操作，而不是它的默认操作。
您可以看到，PHP 代码只是以列表项的形式生成了几个名字，并将其发送回 jQuery 文件。如果用户只输入这个字符(作为第一个字符)，脚本会发送几个以 j 字符开头的名字。要让这个脚本生成以用户输入的任何字符开头的名字(从 a 到 z)，您需要一个包含数百个名字的数据库。您很快就会看到与这样的数据库交互，但是现在，在执行时，您会发现一个“输入用户 id”输入文本字段。当用户输入一个字符时，服务器发送的名字显示在一个建议框中，如图 10-13 所示。
图 10-13
在输入文本字段中输入单个字符时，会出现一个建议框
您可以将鼠标指针悬停在任何名称上。您可能还会注意到悬停的名称被突出显示，如图 10-14 所示。
图 10-14
将鼠标悬停在可用选项上时，这些选项会高亮显示
点击一个名字会在输入文本栏中显示出来，如图 10-15 所示。
图 10-15
单击的选项出现在输入文本字段中
让我们来看看数据库解决方案。我使用了 jquerydb 和在 10-8 菜谱中创建的 users 表。为了在输入字符时显示用户名，我在输入框的 users 表中多插入了几行。下面是为了在 users 表中插入几行而执行的 SQL 命令列表。在插入行之前，让我们看看用于选择数据库和显示表中现有行的 SQL 语句。
mysql> show databases;
+--------------------+
| Database |
+--------------------+
| information_schema |
| jquerydb |
| mysql |
| performance_schema |
| sys |
+--------------------+
5 rows in set (1.21 sec)
mysql> use jquerydb;
Database changed
mysql> select * from users;
+------------------+-----------+-----------+
| email_address | password | user_name |
+------------------+-----------+-----------+
| bintu@yahoo.com | gold123 | bintu |
| chirag@gmail.com | chirag123 | chirag |
+------------------+-----------+-----------+
2 rows in set (0.09 sec)
mysql> insert into users values('ben@gmail.com', 'ben777', 'ben');
Query OK, 1 row affected (0.44 sec)
mysql> insert into users values('bekky@yahoo.com', 'bekky123', 'bekky');
Query OK, 1 row affected (0.15 sec)
mysql> insert into users values('bittu@yahoo.com', 'bitty555', 'bittu');
Query OK, 1 row affected (0.05 sec)
mysql> select * from users;
+------------------+-----------+-----------+
| email_address | password | user_name |
+------------------+-----------+-----------+
| bekky@yahoo.com | bekky123 | bekky |
| ben@gmail.com | ben777 | ben |
| bintu@yahoo.com | gold123 | bintu |
| bittu@yahoo.com | bitty555 | bittu |
| chirag@gmail.com | chirag123 | chirag |
+------------------+-----------+-----------+
5 rows in set (0.03 sec)
一旦行被插入到 jquerydb users 表中，您就可以理解 PHP 脚本中的代码了，autocompletedbscript.php。
首先，借助$_POST 数组(因为请求是通过 HTTP POST 方法发送的)检索从 JavaScript 文件发送的字符(数据参数),并将其存储在$name 变量中。然后，编写一个 SQL 查询，从 users 表中检索以$name 中存储的字符(由用户在输入文本字段中键入)开头的所有 user_name。
您执行 SQL 查询，作为查询结果由表返回的行存储在$results 数组中。然后，使用 while 循环逐个检索$results 数组中存储的每个名称，并将每个 user_name 放在
- Tag and send it to jQuery file, because you want to generate the name as a list item.Note
您还可以缓存每个用户会话的结果并在缓存上进行过滤。
现在，您将获得以您在输入文本字段中键入的任何字符开头的名称。所以，如果你输入 b 字符，你会得到所有以字母 b 开头的名字，如图 10-16 所示。
图 10-16
建议框中的选项根据输入文本字段中键入的第一个字符而变化
10.11 导入 HTML
问题
您想将 HTML 内容从另一个文件导入当前网页。
解决办法
让我们创建一个包含段落元素和超链接的 HTML 文件。您希望仅在用户选择超链接时导入内容。以下是 HTML 文件。
importhtml.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="importhtmljq.js" type="text/javascript"></script>
</head>
<body>
<p>You are going to organize the Conference on IT on 2nd Feb 2022</p>
<a href="abc.com" class="list">Participants</a>
<div id="message"></div>
</body>
</html>
超链接被赋予列表类名，这样您就可以通过 jQuery 代码访问它。超链接下面是一个名为 message 的空 div 元素，用于显示导入的 HTML 内容。例如，您要从中导入 HTML 内容的文件被命名为 namesinfo.htm，它可能包含以下内容。
姓名信息. html
<p>The list of the persons taking part in conference</p>
<ul>
<li>Jackub</li>
<li>Jenny</li>
<li>Jill</li>
<li>John</li>
</ul>
<p>We wish them All the Best</p>
您可以看到 HTML 文件包含两个段落元素和一个列表项。下面是导入 HTML 内容的 jQuery 代码。
进口 htmljq.js
$(document).ready(function() {
$('.list').click(function () {
$('#message').load('namesinfo.html');
return false;
});
});
仅导入所需的元素
您也可以从导入的文件中仅导入所需的 HTML 元素。因此，在下面的 jQuery 代码中，您只从 namesinfo.html 文件中导入列表项(没有段落元素)。
进口需求 htmljq.js
$(document).ready(function() {
$('.list').click(function () {
$('#message').load('namesinfo.html li');
return false;
});
});
它是如何工作的
在开始理解 jQuery 代码之前，让我们先看看 load()方法是做什么的，以及它在前面代码中的用法。本质上，这个函数从服务器添加指定的文件并返回其 HTML 内容，如下所示。
语法
url 是定义服务器端脚本文件位置的字符串。
参数包含要传递给服务器端脚本文件进行某些处理的数据。
回调函数是在请求成功时执行的函数。
.load(url, parameters, callback function)
Note
对于 Internet Explorer，load()方法缓存加载的文件。
jQuery 代码首先将 click 事件附加到 list 类的超链接上，在它的事件处理函数中，加载 namesinfo.htm 文件的 HTML 内容并将其分配给 div 元素消息。您在 click 事件中返回 false 来禁止默认的浏览器单击行为，因为您希望它执行通过 jQuery 代码指定的操作，而不是它的默认操作。
最初，网页包含一个段落元素和一个带文本的超链接:参与者(见图 10-17 )。
图 10-17
带超链接的原始网页
选择超链接后，内容(由两个段落元素和列表项组成)从 namesinfo.htm 文件导入到当前网页，如图 10-18 所示。
图 10-18
从其他 HTML 文件导入内容后的网页
当只导入所需的元素时，您可以看到在 load()方法中，文件后面跟有 li，以声明您只想导入文件中的列表项。因此，当您单击参与者超链接时，只显示在 div 元素消息中导入的列表项(参见图 10-19 )。
图 10-19
从另一个 HTML 文件导入列表项后的网页
10.12 获取 XML 数据
问题
您有一个包含一些学生信息的 XML 文件。您希望将 XML 文件中的信息异步导入到当前网页中。XML 文件包含一些用户定义的标签来组织它的信息。
解决办法
让我们首先创建一个 HTML 文件，它包含一个段落元素、一个提交按钮和一个空的 div 元素。HTML 文件应该如下所示。
gettingxml.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="gettingxmljq.js" type="text/javascript"></script>
</head>
<body>
<p>To see the Names of the students extracted from XML file click the button given below: </p>
<input type="submit" id="submit"/>
<div id="message"></div>
</body>
</html>
paragraph 元素只是以友好的方式向用户显示一条消息，并且您希望用户在准备好之后选择 Submit 按钮。然后，您希望 XML 文件中的信息被导入并显示在 div 元素消息中。假设 xml 文件的名称是 student.xml，其 XML 内容可能如下所示。
student.xml
<?xml version="1.0" encoding="utf-8" ?>
<school>
<student>
<roll>101</roll>
<name>
<first-name>Anil</first-name>
<last-name>Sharma</last-name>
</name>
<address>
<street>22/10 Sri Nagar Road</street>
<city>Ajmer</city>
<state>Rajasthan</state>
</address>
<marks>85</marks>
</student>
<student>
<roll>102</roll>
<name>
<first-name>Manoj</first-name>
<last-name>Arora</last-name>
</name>
<address>
<street>H.No 11-B Alwar Gate</street>
<city>Ajmer</city>
<state>Rajasthan</state>
</address>
<marks>92</marks>
</student>
</school>
jQuery 代码导入存储在 XML 标记 first-name 中的信息，并在当前网页中以列表项的形式显示它，如下所示。
gettingxmljq.js
$(document).ready(function() {
$('#submit').on("mousedown", function(event) {
$.ajax({
type:"GET",
url:"student.xml",
dataType:"xml",
success: function (sturec) {
var stud="<ul>";
$(sturec).find('student').each(function(){
var name = $(this).find('first-name').text()
stud+="<li>"+name+"</li>";
});
stud+="</ul>";
$('#message').append(stud);
}
});
return false;
});
});
显示 XML 文件中的姓名和标记
在研究前面的代码如何工作之前，值得注意的是，您可以修改 jQuery 代码，以便非常容易地从其他标记中检索文本。下面是一些从
retrievespecificjq.js
$(document).ready(function() {
$('#submit').on("mousedown", function(event) {
$.ajax({
type:"GET",
url:"student.xml",
dataType:"xml",
success: function (sturec) {
var stud="<table border='1'>";
$(sturec).find('student').each(function(){
var roll = $(this).find('roll').text()
var fname = $(this).find('first-name').text()
var lname = $(this).find('last-name').text()
var marks = $(this).find('marks').text()
stud+="<tr><td>"+roll+"</td><td>"+fname+" "+lname+"</td><td>"+marks+"</td></tr>";
});
stud+="</table>";
$('#message').append(stud);
}
});
return false;
});
});
它是如何工作的
首先附加一个 mousedown(即，Submit 按钮的鼠标单击事件)，然后通过 ajax()方法调用请求，其中指定将要使用的请求方法是 GET，服务器上 xml 文件的 URL 是 student.xml。还断言 dataType 键的值被设置为 XML，以表示 URL 包含 XML 格式的数据。
从 XML 文件加载的信息(假设存在于服务器上)以服务器生成的响应的形式返回到 JavaScript 文件，并在回调函数的参数中接收。这里 sturec 是一个对象数组，其中每个元素包含以下标签:
您初始化了一个变量，并给它分配了一个
所以，首先在 sturec 中找到
- and 标签之间，使它们显示为列表项，并连接在 stud 变量中。最后，将 stud 变量中的内容分配给消息的 div 元素进行显示。
像往常一样，在 click 事件中返回 false 来禁止默认的浏览器单击行为。您希望事件对通过 jQuery 代码指定的事件采取动作，而不是通过其默认动作。在执行时，网页最初显示段落元素和提交按钮，如图 10-20 所示。
图 10-20
带有文本消息和提交按钮以导入 XML 内容的初始网页
选择提交按钮后，所有学生的名字(在 XML 文件中)以列表项的形式显示，如图 10-21 所示。
图 10-21
以列表项形式导入的 XML 文件的名字标记的内容
当您修改代码时，来自
图 10-22
标签:从 XML 文件中以表格
的形式导入的姓、名、姓、标记
10.13 表格分页
问题
您希望从 MySQL 服务器的一个表中检索一些学生信息，并希望按页面显示这些信息。您被要求每页显示五条记录。
解决办法
首先创建一个 HTML 文件，其中包含一个空的 div 元素消息，该消息按页面显示学生记录表。HTML 文件应该如下所示。
paginatingtable.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="stylepaginating.css" type="text/css" media="screen" />
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="paginatingtablejq.js" type="text/javascript"></script>
</head>
<body>
<div id="message"></div>
</body>
</html>
下面的 jQuery 代码将表中的行分成几页，每页 5 行，并在单击页码时显示相应的行。
page ingtablejq . js
$(document).ready(function() {
$.ajax({
type:"POST",
url:"getusersrec.php",
success:function(html) {
$('#message').html(html);
var rows=$('table').find('tbody tr').length;
var no_rec_per_page=5;
var no_pages=Math.ceil(rows/no_rec_per_page);
var $pagenumbers=$('<div id="pages"></div>');
for(i=0;i<no_pages;i++)
{
$('<span class="page">'+(i+1)+'</span>').appendTo($pagenumbers);
}
$pagenumbers.insertBefore('table');
$('.page').hover(function(){
$(this).addClass('hover');
}, function(){
$(this).removeClass('hover');
});
$('table').find('tbody tr').hide();
var tr=$('table tbody tr');
for(var i=0;i<=no_rec_per_page-1;i++)
{
$(tr[i]).show();
}
$('span').click(function(event){
$('table').find('tbody tr').hide();
for(i=($(this).text()-1)*no_rec_per_page;i<=$(this).text()*no_rec_per_page-1;i++)
{
$(tr[i]).show();
}
});
}
});
});
您可以看到，您正在通过 ajax()方法调用请求，其中您指定请求的方法是 POST，服务器端脚本文件的 URL 是 getstudrec.php。从服务器端脚本文件生成的响应(所有学生记录)被返回到 JavaScript 文件，并在回调函数的 HTML 参数中接收。然后将服务器响应(HTML)分配给 div 元素消息进行显示。以下是 getusersrec.php 脚本文件的代码。
获取 sersrec.php
<?php
$connect = mysqli_connect("localhost", "root", "gold123", "jquerydb");
if(!$connect){
die('Please, check your server connection.');
}
$query = "SELECT user_name, password, email_address from users";
$results = mysqli_query($connect, $query);
if($results)
{
echo '<table border="1">';
echo '<thead>';
echo '<tr><th>User Name</th><th>Password</th><th>Email Address</th></tr>';
echo '</thead>';
echo '<tbody>';
while ($row = mysqli_fetch_array($results,MYSQLI_ASSOC)) {
extract($row);
echo '<tr><td>' . $user_name . '</td><td>' . $password . '</td><td>' . $email_address . '</td></tr>';
}
echo '</tbody>';
echo '</table>';
}
?>
要对页码应用悬停效果并在这些页码周围分配间距，需要在样式表文件中定义两个样式规则，如下所示。
style pagination . CSS
.hover { background-color: #00f; color: #fff; }
.page{ margin:5px; }
它是如何工作的
在服务器端脚本中，首先连接到 MySQL 服务器并选择 jquerydb 数据库。然后编写一个 SQL 查询，从 users 表中检索所有用户的用户名、密码和电子邮件地址。然后执行 SQL 查询，表作为查询结果返回的行存储在$results 数组中。
悬停样式规则包含分别设置为#00f 和#fff 值的背景色和颜色属性，以将悬停页码的背景色变为蓝色，将其前景色变为白色。页面样式规则包含设置为值 5px 的 margin 属性，以便在页码之间创建 5px 的间距。
在 jQuery 代码本身中，您通过 ajax()方法调用请求，其中您指定将要使用的请求方法是 POST，服务器端脚本的 URL 是 getusersrec.php。服务器端脚本文件生成的响应被返回到 JavaScript 文件，并在回调函数的 HTML 参数中接收。请注意，HTML 是一个用户行数组，因此它是一个用户记录表(包含关于用户名、密码和电子邮件地址的用户数据)。
服务器端脚本生成的响应被分配给 div 元素消息，用于在屏幕上显示记录表。为此，您计算行数(嵌套在 tbody 元素中的 tr 元素)并将该计数存储在变量行中。假设您希望每页看到 5 行，并将 no_rec_per_page 变量的值初始化为 5。
通过将总行数除以每页要查看的记录数，可以得到页码的总数。页数被分配给 no_pages 变量。您定义了 div 元素页面，并将其分配给 pagenumbers 变量。然后，在 for 循环的帮助下，创建几个包含页码序列(如 1、2、3……)的 span 元素(等于页数)，并为 span 元素分配名称 page class，以便在选择器 page 类中定义的样式属性自动应用于所有页码。最后，所有包含页码的 span 元素都被追加到 id pages 的 div 元素中。在 table 元素之前插入存储在$ pagenumbers 变量中的 div 元素 pages，以便页码显示在表格上方。
在页码的悬停事件(pages 类的 span 元素)中，您将看到当鼠标指针移动到页码上时，通过操作悬停样式规则中定义的应用于页码的属性来突出显示页码。在该事件中，将背景色和前景色分别更改为蓝色和白色。当没有悬停时，您将移除这些样式属性和关联的视觉效果。
然后隐藏表中的所有行(即嵌套在 tbody 元素中的 tr 元素)，仅保持列标题可见，并检索表中的所有行并将它们存储在 tr 变量中。请记住，tr 是一个包含所有表格行的数组，因此您使用 for 循环来显示表格的前五行。
将 click 事件附加到 span 元素，以便显示表格的所有页码和隐藏行，只留下列标题。最后，使用 tr 数组显示用户单击的页码范围内的行。在执行时，你得到表格的前五行和顶部的页码，如图 10-23 所示。
图 10-23
顶部显示页码的表格
10.14 摘要
在本章中，您了解了 AJAX 是如何在后台异步完成处理的。您学习了从服务器返回单行和多行文本。您还学习了使用 JSON 返回名称/值对，从包含文本的服务器返回 JSON 对象，以及显示图像的 JSON 对象。您还学习了使用 AJAX 转换字符串的大小写，显示所选产品的价格，以及使用 AJAX 验证用户身份。
下一章集中在创建一个插件，使插件可链接，并传递定制选项给插件。您还将学习使用内置插件，如 Magnific Popup 插件、iCheck 插件、blueimp Gallery 插件和 validation 插件来制作图像滑块、格式化复选框和单选按钮，以及验证表单。
十一、创建和使用 jQuery 插件
jQuery 插件使得函数可移植，并且易于与任意数量的项目集成，因此实现了可重用性。在这一章中，你将学习如何从头开始创建 jQuery 插件，以及如何使用一些流行的 jQuery 插件。你学习如何用本章的食谱做以下事情。
创建一个插件来改变元素的字体大小，字体风格，前景色和背景色，并使插件可链接
允许将定制选项传递给插件
使用插件修改内容
使用 Magnific 弹出插件显示图像滑块
使用 iCheck 插件显示动态复选框和单选按钮
使用 blueimp Gallery 插件创建一个图库和轮播
使用 jQuery 验证插件验证表单
11.1 创建插件
插件是用标准 JavaScript 文件编写的代码，它提供了某些可以直接与 jQuery 库方法一起应用的 jQuery 方法。插件的编写使得它可以很容易地在代码中重用。因此，你写一次，受益多次。以下是创建插件的规则。
插件中的所有方法都必须以分号(；).
除非明确指出，否则该方法必须返回 jQuery 对象。
关键字 this.each 必须迭代匹配的元素。
插件文件名必须以扩展名为. js 的 jQuery 为前缀。
下面是命名 jQuery 插件的语法。
jquery.plugin_name.js
如图所示，通过添加最小值来表示缩小版本。
jquery.plugin_name.min.js
Note
在命名创建的插件时使用 jquery 前缀消除了与其他库的名称冲突。
您可以通过向原型添加函数来增加 jQuery 特性。为此，您需要公开 jQuery 原型。jQuery 原型通过 jQuery.fn 公开。换句话说，创建插件最简单的方法是使用 fn 属性。在 jQuery 中，fn 属性是 jquery.fn 函数的 prototype 属性的简单别名。
语法
jQuery.fn = jQuery.prototype = {
jquery code;
}
将函数添加到这个原型中，可以从任何构造的 jQuery 对象中调用和使用这些函数。构造的 jQuery 对象根据使用的选择器保存一个元素数组。例如，$('p ')构造了一个保存
元素的 jQuery 对象。
11.2 11-1.创建一个插件来改变一个元素的字体大小，字体风格，前景色和背景色
问题
您想要创建一个插件，当应用于任何 HTML 元素时，必须将其字体大小设置为 25px，将其字体样式更改为斜体，并将前景和背景颜色分别更改为红色和黄色。
解决办法
为了应用和测试插件，让我们创建一个销售少量产品的 HTML 文件。下面的 HTML 代码通过两个
元素显示了两种待售产品，手机和笔记本电脑。两个
元素都被包装在
元素中，如下所示。
crplugin 1 . html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="jquery.crplugin1.js" type="text/javascript"></script>
<script src="crplugin1jq.js" type="text/javascript"></script>
</head>
<body>
<div> We deal with variety of products:
<p>Mobiles</p>
<p>Laptops</p>
</div>
</body>
</html>
您可以看到一个
元素是用特定的文本定义的。嵌套在元素中的是两个
元素，它们显示指示应用插件效果的产品名称的文本。
下面的 jQuery 代码创建了一个名为 style_products 的插件。
Jquery.crplugin1.js
$.fn.style_products = function() {
this.css({ fontSize: "25px",
color: "red",
"font-style": "italic",
background: "yellow" });
};
请记住，插件函数中的“this”关键字表示调用该函数的构造的 jQuery 对象。插件函数将 CSS 样式属性应用于 jQuery 对象。对象的字体大小设置为 25 px，前景色设置为红色，字体样式设置为斜体，背景色设置为黄色。
下面是将插件的方法应用于 HTML 文件的
元素的 jQuery 代码。
Crplugin1jq.js
$(document).ready(function() {
$("p").style_products();
});
当$(“p”)时。style_products()被调用时,“this”的值是指包含页面上所有
元素的 jQuery 对象。结果两个产品名称的字号都是 25px，字体样式为斜体，背景色为黄色，文字颜色为红色，如图 11-1 所示。
图 11-1
两个产品名称的字号都变成了 25px，字体变成了斜体，背景颜色变成了黄色，前景色变成了红色
11.3 11-2.使插件可链接
为了让 jQuery 插件能够在实际例子中使用，它需要支持链接，这意味着能够应用其他函数。为此，插件的函数必须返回原始的 jQuery 对象，如下所示。
Jquery.crplugin1.js
$.fn.style_products = function() {
this.css({ fontSize: "25px",
color: "red",
"font-style": "italic",
background: "yellow" });
return this;
};
最后一句话，“还这个；返回原始的 jQuery 对象。
为了演示在所选元素上链接的应用，让我们创建一个 CSS 样式表，其中包含名为的放大样式类，如下所示。
Crplugin1style.css
.enlarge{
width: 100px;
height: 100px;
}
您可以看到，放大样式类包含两个属性—宽度和高度，这两个属性的值都设置为 100px。
要应用并查看链接的效果，请修改 jQuery 代码 crplugin1jq.js，如下所示。
$(document).ready(function() {
$("p").style_products().addClass("enlarge");
});
您可以看到，由于在所选的
元素上应用了链接，所以应用了 jQuery 插件的 style_products()方法，然后在< p >元素上也应用了放大。通过应用 style_products()方法，两个产品名称的字体大小都设置为 25px，字体样式设置为斜体，文本的背景颜色设置为黄色，文本颜色设置为红色。通过应用放大样式类，将包含产品名称的< p >元素的宽度和高度设置为 100px，如图 11-2 所示。
图 11-2
设置字体大小、字体样式、背景和前景色后，商品名称的宽度和高度设置为 100px
11.4 11-3.允许将定制选项传递给插件
问题
你想创建一个插件，并想给它传递不同的定制选项。
解决办法
有时，您希望插件是可定制的(例如，用户可以更改或修改它的某些默认值)。在这个方法中，您将创建一个插件方法，定义它的默认选项，并用用户传递的选项覆盖它们(例如，将不同的定制选项传递给插件，使它可以在不同的选择器上重用)。为了创建一个可定制的插件，jQuery 提供了一个$。扩展工具方法，创建一个插件，从而帮助增强 jQuery 特性。
要通过可定制的插件在 HTML 元素上应用想要的选项，让我们创建一个 HTML 文件。下面是定义一个
元素的 HTML 代码，在元素中，两个
元素定义如下。
Crplugin1b.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="jquery.crplugin1b.js" type="text/javascript"></script>
<script src="crplugin1bjq.js" type="text/javascript"></script>
</head>
<body>
<div> We deal with variety of products:
<p id="phone">Mobiles</p>
<p id="computer">Laptops</p>
</div>
</body>
</html>
您可以看到定义了一个
元素来显示一条消息，表明该站点上销售的产品类型。两个
元素被定义为显示网站上销售的两种产品，手机和笔记本电脑。因为，在一个
元素上，你想用默认选项应用插件函数，在另一个
元素上，你想用用户提供的选项应用插件函数，不同的 id，“电话”和“计算机”被分配给两个
元素。
下面显示了使用 style_products 方法的 jQuery 插件代码。方法包含属性的默认值，如果用户提供了这些值，它会将这些值应用于属性。
jquery。crplugin 1b . js
(function ($) {
$.fn.style_products = function(custom) {
var settings = $.extend({
fontSize: "15px",
color : "white",
fontStyle: "bold",
background : "blue"
}, custom);
return this.css({
fontSize: settings.fontSize,
color: settings.color,
fontStyle: settings.fontStyle,
background: settings.background
});
};
}(jQuery));
您可以在代码中看到，默认设置指定字体大小为 15px，字体样式为粗体，背景和文本颜色分别为蓝色和白色。如果用户提供了任何属性值(即，字体大小、颜色、字体样式或背景颜色)，属性的默认值将被用户指定的值覆盖。
下面是 jQuery 代码，用于调用插件的默认和可定制功能。
Crplugin1bjq.js
$(document).ready(function() {
$("#computer").style_products();
$("#phone").style_products({
fontSize: "25px",
color: "red",
fontStyle: "italic",
background: "yellow"
});
});
可以调用方法来应用默认属性，也可以应用自定义属性。代码中的第一条语句调用插件的 style_products 方法。默认属性应用于具有计算机 id 的元素(例如，Laptops 文本以粗体白色显示，字体大小为 15 px，背景颜色为蓝色)。为了查看用户如何在属性中提供定制的值，在带有电话 id 的
元素上调用 style_products()方法。对于手机文本，应用由用户指定值的属性。因此，手机文本为红色斜体，字体大小为 25px，背景颜色为黄色(见图 11-3 )。
图 11-3
通过应用属性，文本 Mobiles 以 25px 的字体大小、斜体样式和黄色背景显示，文本以红色显示。笔记本电脑的字体大小为 15 px，粗体，蓝色背景，白色文本
使用插件修改内容
您可以使用插件覆盖任何 HTML 元素的样式属性。例如，您可以更改或添加文本(例如，HTML 元素的内容可以通过插件进行修改)。
要向任何 HTML 元素添加文本，插件的方法修改如下。
jquery。crplugin 1b . js
(function ($) {
$.fn.style_products = function(custom) {
var settings = $.extend({
product_name: 'Refrigerators',
fontSize: "15px",
color : "white",
fontStyle: "bold",
background : "blue"
}, custom);
return this.append(", "+settings.product_name).css({
fontSize: settings.fontSize,
color: settings.color,
fontStyle: settings.fontStyle,
background: settings.background
});
};
}(jQuery));
您可以看到一个用户定义的属性，product_name 设置为默认值，冰箱；用户总是可以通过提供该属性的所需值来更改其默认值。当返回“this”jQuery 对象时，您可以附加一个逗号(，)和分配给 product_name 属性的值。因此,“冰箱”文本被附加到应用插件方法的 HTML 元素中。
在 HTML 文件中有两个
元素，所以对一个
元素，应用带有默认值的插件方法，对第二个
元素，应用带有用户值的插件方法。通过这样做，您可以看到插件方法对默认选项和用户值的影响。
下面是使用默认选项和定制选项应用插件方法的 jQuery 代码。
Crplugin1bjq.js
$(document).ready(function() {
$("#computer").style_products();
$("#phone").style_products({
product_name:'AirConditioners',
fontSize: "25px",
color: "red",
fontStyle: "italic",
background: "yellow"
});
});
style_products 方法应用于具有计算机 id 的
元素，而不提供任何属性值。因此，style_products()方法对其属性使用默认值。“冰箱”被附加到具有计算机 id 的< p >元素的文本中(即“笔记本电脑”被修改为“笔记本电脑，冰箱”)，如图 11-4 所示。
图 11-4
文字修改为“笔记本电脑、冰箱”，“空调”追加到“手机”
用户提供了空调值作为 product_name 属性。“空调”被附加到带有电话 id 的
元素的文本中。因此，段落文本显示为手机、空调(见图 11-4 )。
使用插件
jQuery 在 https://plugins.jquery.com 有一个很大的插件库。大多数插件都包含了演示、例子、代码和文档的链接。本注册表中提到的插件都是在 GitHub ( http://github.com )代码库中管理的。GitHub 追踪插件的流行程度。我演示了使用一些插件的最快方法，并使用了他们的一些方法。我建议你参考这里讨论的插件的官方文档以获得完整的覆盖范围。
在代码中使用插件非常简单:下载并解压缩它。复制插件的。js 和。css 文件添加到您站点的文件夹中。一旦你的站点目录中有了插件，你就可以在你的网页上引用它。确保在主 jQuery 源文件之后、调用插件的 jQuery 脚本之前引用插件。
11.5 11-4.使用放大的弹出插件显示图像滑块
Dmitry Semenov 开发了 Magnific Popup。它是一个非常轻便和移动友好的 lightbox 和一个模态对话框插件，专注于优化性能和为使用任何设备的用户提供最佳体验(对于 jQuery 或 Zepto.js)。使用这个插件，图像、视频、谷歌地图和图片库可以显示动画效果。您可以在 https://plugins.jquery.com/magnific-popup/ 的弹出窗口中找到完整的信息。该页面显示了演示、下载、文档、主页等的链接。单击“立即下载”链接下载代码。zip 格式的代码包被下载到您的计算机上。解压文件。从 dist 文件夹中，将 jquery.magnific-popup.js 和 magnific-popup.css 文件复制到您站点的文件夹中。
问题
您希望使用 Magnific 弹出插件以图像滑块的形式显示某些图像和视频。
解决办法
你正在逐步学习使用 Magnific 弹出插件制作一个图像滑块。首先，制作一个单个图像的小图像弹出窗口，然后增加图像。最后，你学习制作一个完整的图像滑块，不仅可以显示图像，还可以显示视频。
使用 Magnific Popup 插件的最简单的例子是显示一个超链接，该超链接打开带有动画的相关图像。
下面是显示指向图像文件的超链接的 HTML 代码。
电站 gpopp . html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<link rel="stylesheet" href="magnific-popup.css">
<script src="jquery.magnific-popup.js"></script>
<script src="usingpopupjq.js" type="text/javascript"></script>
</head>
<body>
<a class="test-popup-link" href="img/chip.jpg">Open popup</a>
</body>
</html>
您可以看到由 magnific-popup.css 插件提供的 CSS 样式表与 jquery.magnific-popup.js 文件一起包含在 HTML 代码中。此外，您可以看到创建了一个“打开弹出”超链接；它指向图像文件夹中的 chip.jpg。将 test-popup-link 类分配给
Note
我在这个程序中使用了图像。不要忘记将随书的代码包提供的 images 文件夹复制到您站点的文件夹中。
下面是将插件方法应用于 HTML 文件中定义的超链接的 jQuery 代码。
发电厂 IP . js
$(document).ready(function() {
$('.test-popup-link').magnificPopup({
type: 'image'
});
});
您可以看到，对于带有 test-popup-link 类的超链接，插件的 magnificPopup()方法被应用，并且“type”属性被设置为“image”值。结果，网页上出现一个“打开弹出”链接，如图 11-5(a) 所示。当用户点击超链接时，链接的图像会弹出一个对话框，对话框右上方有一个关闭按钮(见图 11-5(b) )。
图 11-5
(a)打开弹出链接出现在网页上。(b)链接的图像弹出一个对话框
如果您想要显示两个或更多的图像，您需要为每个图像创建指向其各自图像的超链接。下面是完成这项工作的 HTML 代码。
电站 gpopp . html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<link rel="stylesheet" href="magnific-popup.css">
<script src="jquery.magnific-popup.js"></script>
<script src="usingpopupjq.js" type="text/javascript"></script>
</head>
<body>
<div class="parent-container">
<a href="img/chip.jpg">Preprocessor Chip</a>
<a href="img/chip2.jpg">RISC chip</a>
<a href="img/chip3.jpg">CISC chip</a>
</div>
</body>
</html>
您可以在 HTML 代码中看到定义了三个超链接，每个超链接都指向其各自的图像，该图像位于 images 文件夹中。所有三个超链接都嵌套在
元素中，为了让插件方法可以访问元素及其超链接，元素被赋予了 parent-container: class。
为了将插件的方法应用于包含超链接的
元素，jQuery 代码修改如下。
发电厂 IP . js
$(document).ready(function() {
$('.parent-container').magnificPopup({
delegate: 'a', // by clicking on it popup will open
type: 'image'
});
});
您可以在 jQuery 代码中看到，对 parent-container: class 的
元素应用了 magnificPopup 方法，将 delegate 属性设置为“a”，并将“type”属性设置为“image”值。
结果，三个超链接出现在浏览器窗口左上角的屏幕上。每个超链接打开它所指向的相应图像(见图 11-6(a) )。点击一个超链接会在一个弹出窗口中显示其图像，窗口右上角有一个关闭按钮，如图 11-6(b) 所示。关闭对话框后，焦点将回到超链接上，您可以单击任何其他超链接来查看与之关联的图像。
图 11-6
(a)三个超链接出现在屏幕的左上角。( b)单击超链接会在弹出窗口中显示其图像
在前面的程序中，单击超链接会使关联的图像显示在弹出对话框中，您可以关闭该对话框。关闭对话框后，您可以单击另一个超链接来查看另一个图像。现在让我们看看如何在弹出对话框中添加“下一个”和“上一个”按钮，这样你就可以轻松地导航到任何图像。
让我们假设您想要显示两个图片库。第一个图像库显示两个图像。第二个图像库显示两个图像和一个视频。HTML 代码修改如下。
电站 gpopp . html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<link rel="stylesheet" href="magnific-popup.css">
<script src="jquery.magnific-popup.js"></script>
<script src="usingpopupjq.js" type="text/javascript"></script>
</head>
<body>
<div class="gallery">
<a href="img/chip.jpg">Preprocessor Chip (gallery #1)</a>
<a href="img/chip2.jpg">RISC chip (gallery #1)</a>
</div>
<div class="gallery">
<a href="img/chip3.jpg">CISC chip (gallery #2)</a>
<a href="img/chip4.jpg">EPIC chip (gallery #2)</a>
<a href="http://bmharwani.com/videos/01javafirstlecturesampleinenglish.mp4" class="mfp-iframe">Open my video</a>
</div>
</body>
</html>
您可以看到定义了两个
元素，每个元素都被分配了 gallery 类，该类被分配来自动将附加 CSS 样式表 make 中提到的相应 CSS 样式应用到元素，并使它们在 jQuery 代码中可访问。第一个元素包含了两个超链接，这两个超链接指向将在第一个图像库中显示的两个图像。第二个元素包含三个超链接，其中前两个超链接指向两个图像，第三个超链接指向要在图像库中显示的视频。
下面是显示图库的代码，这些图库显示可以导航到下一个或上一个图像或视频的图像和视频。
【usingopjq . js】
$(document).ready(function() {
$('.gallery').each(function() { // the containers for all your galleries
$(this).magnificPopup({
delegate: 'a', // the selector for gallery item
type: 'image',
gallery: {
enabled:true
}
});
});
});
在 jQuery 代码中，可以看到 gallery 类中的
元素被选中。在其中的每一个中，回调函数中的语句都被执行。在回调函数中，对元素调用 magnificPopup 方法，将 delegate 属性设置为 value，“a”，将 type 属性设置为 value，image，将 gallery 属性的 enabled 元素设置为 true。结果，两个 div 元素中的超链接出现在网页左上角的两行中，如图 11-7(a) 所示。您可以单击任何想要弹出其图像的画廊的任何链接。点击图片的超链接后，会弹出一个窗口，如图 11-7(b) 所示。您可以在对话框的右上角看到一个关闭按钮，使您能够关闭图像库并返回到顶部的超链接。此外，您可以在图像的右侧和左侧看到下一个和上一个箭头。使用这些箭头，您可以导航到画廊中的其他图像。图 11-7(c) 显示了视频如何出现在图库中的输出。点击最后一个图像/视频上的下一个按钮，显示第一个图像/视频。同样，单击第一个图像/视频上的“上一个”按钮会显示最后一个图像或视频。
图 11-7
(a)两个 div 元素中提到的超链接出现在左上角的两行中。(b)单击图库中的链接，在弹出窗口中打开图像。(c)视频出现在图库中
到目前为止，您已经看到了弹出对话框和图库中的图像。接下来，您将学习在单击图像时缩放图像。为了显示图像的缩略图，HTML 代码修改如下。
电站 gpopp . html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<link rel="stylesheet" href="magnific-popup.css">
<script src="jquery.magnific-popup.js"></script>
<script src="usingpopupjq.js" type="text/javascript"></script>
</head>
<body>
<a href="img/chip3.jpg" class="image-link">
<img src="img/chip3thumnail.jpg" />
</a>
</body>
</html>
您可以看到创建了一个显示图像缩略图的超链接。缩略图的文件名是 chip3thumnail.jpg。超链接通过 chip3.jpg 链接到图像的缩放版本。为了应用 CSS 样式并使其在 jQuery 代码中可访问，超链接被分配了 image-link 类。
下面是 jQuery 代码，当单击图像的缩略图时，它会在弹出窗口中显示图像的放大版本。
发电厂 IP . js
$(document).ready(function() {
$('.image-link').magnificPopup({
type: 'image',
mainClass: 'mfp-with-zoom', // this class is for CSS animation below
zoom: {
enabled: true, // By default it's false, so don't forget to enable it
duration: 300, // duration of the effect, in milliseconds
easing: 'ease-in-out', // CSS transition easing function
opener: function(openerElement) {
return openerElement.is('img') ? openerElement : openerElement.find('img');
}
}
});
});
您可以看到带有 image-link 类的超链接被选中，插件方法 magnificPopup 被应用于它，并且 type 属性被设置为 image。mainClass 属性设置为 mfp-with-zoom，以便在缩放图像时应用动画。zoom 属性的 enabled 元素设置为 true，动画持续时间设置为 300 毫秒，缓动过渡设置为渐强渐弱。opener 属性设置为指向返回布尔值的函数，如果操作应用于 img 元素，则为 true。
当应用运行时，会显示一个缩略图(参见图 11-8(a) )。点击缩略图会弹出一个大图，如图 11-8(b) 所示。
图 11-8
(A)出现一个缩略图。(b)单击缩略图在弹出窗口中显示其缩放版本
11.6 11-5.使用 iCheck 插件显示动态复选框和单选按钮
iCheck 是由 Damir Sultanov 开发的 jQuery 插件。它提供了高度可定制的复选框和单选按钮。在不同的浏览器和设备上都有相同的复选框和单选按钮，无论是移动设备还是台式机。这些输入也适用于 iOS、Android、黑莓、Windows Phone 和亚马逊 Kindle 等触摸设备。它支持 jQuery 和 Zepto，并提供 32 个选项来定制复选框和单选按钮，11 个回调来处理更改，9 个方法以编程方式进行更改，等等。
你可以在 https://plugins.jquery.com/icheck/ 找到 iCheck 插件的完整信息。该页面显示了演示、下载、文档、主页等的链接。单击“立即下载”链接下载代码。zip 格式的代码包被下载到您的计算机上。解压缩该文件，并将 icheck.js 文件复制到您站点的文件夹中。从 skins 子文件夹中，将 minimal、futurico 和 line 文件夹复制到您站点的文件夹中。这些文件夹包含将样式应用于复选框和单选按钮的 CSS 样式。
问题
您希望显示一个网页，其中显示一些食品和付款方式。用户可以选择任意数量的食品和付款方式。因为用户可能选择不止一个食品，所以食品通过复选框显示。因为用户只能选择一种付款方式，所以付款方式通过单选按钮显示。通过应用 iCheck 插件，可以使这些复选框和单选按钮看起来更动态。
解决办法
您希望显示三种食品和两种付款方式选项。下面是显示三个复选框和两个单选按钮的 HTML 代码。
发电厂尾箱. html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link href="minimal/minimal.css" rel="stylesheet">
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="icheck.js" type="text/javascript"></script>
<script src="usingicheckjq.js" type="text/javascript"></script>
</head>
<body>
<p> Select your fast food item: </p>
<label><input type="checkbox" name="food" value="Pizza">Pizza</label><br/>
<label><input type="checkbox" name="food" value="Hot Dog">Hot Dog</label><br/>
<label><input type="checkbox" name="food" value="Burger" checked>Burger</label><br/>
<p> Select the payment method: </p>
<form id="pay">
<label><input type="radio" name="iCheck" value="Payment By Card">Payment By Card</label><br/>
<label><input type="radio" name="iCheck" value="Payment By Cash" checked>Payment By Cash</label><br/>
</form><br/>
<input type="button" id="btnSubmit" value="Submit" />
</body>
</html>
通过访问 minimal 文件夹中的 minimal.css 文件，可以对复选框和单选按钮应用不同的 css 样式。此外，插件的 icheck.js 文件包含在 jQuery 文件之后。
一个
元素显示“选择您的快餐项目:”文本。在段落元素下面，三对
单选按钮出现在复选框之后。定义了另一个
元素，带有文本“选择付款方式:”。因为只能选择一个单选按钮，所以两个按钮都必须嵌套在一个
下面是将不同的样式和其他维度应用于复选框和单选按钮的 jQuery 代码。
发电厂尾箱. js
$(document).ready(function() {
$('input').iCheck({
checkboxClass: 'icheckbox_minimal',
radioClass: 'iradio_minimal',
increaseArea: '20%' // optional
});
$("#btnSubmit").click(function() {
var selected = [];
$.each($("input[name='food']:checked"), function(){
selected.push($(this).val());
});
paymethod = $('input[name="iCheck"]:checked', '#pay').val();
selected.push(paymethod)
alert("Selected food items and pay method is: " + selected.join(", "));
});
});
您可以看到，在所有输入元素上，插件的 iCheck 方法被执行，以将所需的 CSS 样式应用于单选按钮和复选框。当单击 id 为 btnSubmit 的按钮时。换句话说，当单击提交按钮时，就会发生 click 事件。它的回调函数在定义“selected”的地方执行。所有被选中的复选框的值被推送(即，添加到“选择的”数组)。无论选择了披萨、热狗还是汉堡，它的值都会添加到“selected”数组中。
在观察到所有复选框之后，单选按钮被观察到(即，所有名为 iCheck 的输入元素被观察到)。如果选中了其中的任何一个，就会访问它的值并将其赋给 paymethod 变量。回想一下，所有的单选按钮都被命名为 iCheck。无论用户是否选中了“用卡支付”按钮或“用现金支付”单选按钮，相应的支付方法都被分配给 paymethod 变量。paymethod 中的值被推送到“selected”数组中，这意味着它包含用户选择的食物项目和用户选择的支付方法。
运行该应用时，会出现一个屏幕，要求您选择您想要的食物并选择付款方式，如图 11-9(a) 所示。用户选择的任何食物和支付方式都存储在“selected”数组中。最后，利用告警对话框将该数组中的所有信息显示在屏幕上，如图 11-9(b) 所示。
图 11-9
(a)选择食物项目的屏幕和付款方式之一出现。(b)通过警告对话框显示选择的食品和付款方式
在这个 HTML 程序中，您使用了 minimal 文件夹中的 minimal.css 样式表。这个 iCheck 插件为你提供了许多不同的 CSS 样式表，让复选框和单选按钮看起来更有吸引力，更有活力。您可以在 HTML 程序的 futurico 文件夹中使用 futurico.css 样式表。为此，修改 HTML 文件中的语句，以包含插件的 CSS 样式表。
<link href="futurico/futurico.css" rel="stylesheet">
要将 futurico.css 文件中提到的样式应用于复选框和单选按钮，您需要在 jQuery 文件中进行更改。回想一下 jQuery 代码，下面两行使用了最少的样式类。
checkboxClass: 'icheckbox_minimal',
radioClass: 'iradio_minimal',
要应用 futurico 样式类而不是最小样式类，请修改 jQuery 代码中的前两行，如下所示。
checkboxClass: 'icheckbox_futurico',
radioClass: 'iradio_futurico',
就这样。不需要其他更改。在运行 HTML 程序时，您可以看到空复选框不再是白色而是黑色。此外，选中的复选框为绿色。同样，单选按钮也是黑色的。选中时，单选按钮有一个绿色小圆圈(见图 11-10 )。
图 11-10
空复选框为黑色，选中时为绿色。单选按钮是黑色的，选中时，它们会包含一个绿色的小圆圈
iCheck 插件还在 line 文件夹中提供了一个名为 line.css 的 CSS 样式表，它通常使用完整的行来显示复选框或单选按钮。复选框和单选按钮标签共享相同的背景(即，复选框的背景颜色)，并且其标签是相同的。同样，单选按钮及其标签的背景色也是一样的。为了正确地应用样式类，
发电厂尾箱 2.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link href="line/line.css" rel="stylesheet">
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="icheck.js" type="text/javascript"></script>
<script src="usingicheck2jq.js" type="text/javascript"></script>
</head>
<body>
<p> Select your fast food item: </p>
<input type="checkbox" name="food" value="Pizza">
<label>Pizza</label><br/>
<input type="checkbox" name="food" value="Hot Dog">
<label>Hot Dog</label><br/>
<input type="checkbox" name="food" value="Burger" checked>
<label>Burger</label><br/>
<p> Select the payment method: </p>
<form id="pay">
<input type="radio" name="iCheck" value="Payment By Card">
<label>Payment By Card</label><br/>
<input type="radio" name="iCheck" value="Payment By Cash" checked>
<label>Payment By Cash</label><br/>
</form><br/>
<input type="button" id="btnSubmit" value="Submit" />
</body>
</html>
您可以在 HTML 代码中看到,
元素显示文本，要求用户选择想要的食物。另外，请注意
要应用 line.css 样式表文件中提到的样式类，必须对 jQuery 代码进行如下修改。
发电厂尾箱. js
$(document).ready(function() {
$('input').each(function(){
var self = $(this),
label = self.next(),
label_text = label.text();
label.remove();
self.iCheck({
checkboxClass: 'icheckbox_line',
radioClass: 'iradio_line',
insert: '<div class="icheck_line-icon"></div>' + label_text
});
});
$("#btnSubmit").click(function() {
var selected = [];
$.each($("input[name='food']:checked"), function(){
selected.push($(this).val());
});
paymethod = $('input[name="iCheck"]:checked', '#pay').val();
selected.push(paymethod)
alert("Selected food items and pay method is: " + selected.join(", "));
});
});
您可以在代码中看到，所有的输入元素都被选中，并且对每个输入元素执行一个回调函数。在回调函数中，
元素。为了自动应用特定的样式，icheck_line-icon 类被分配给元素。换句话说，每个复选框和单选按钮都被一个具有特定类的元素所替代。代码的其余部分是相同的，它检测选中的复选框和单选按钮，并显示通过复选框选择的食品和通过单选按钮选择的支付方法。选中的选项通过警告对话框显示，如图 11-11 所示。
图 11-11
每个复选框和单选按钮都由一个具有特定类的
元素替换。样式类应用于复选框和单选按钮元素。选定的选项通过警告对话框显示
11.7 11-6.使用 blueimp 图库插件创建图库和轮播
blueimp Gallery 插件是由 Sebastian Tschan 创建的。它是一个支持触摸、响应迅速、可定制的图像和视频库、旋转木马和灯箱，针对移动和桌面应用进行了优化。它支持滑动、鼠标和键盘导航以及过渡效果等功能。它很容易使用。
你可以在 https://plugins.jquery.com/blueimp-gallery/ 找到 blueimp 图库插件的完整信息。该页面显示了演示、下载、文档、主页等的链接。单击“立即下载”链接下载代码。zip 格式的代码包被下载到您的计算机上。解压文件。从 js 子文件夹中，将 blueimp-gallery.js 文件复制到您站点的文件夹中。从 css 子文件夹中，将 blueimp-gallery.css 文件复制到您站点的文件夹中。现在，您可以在您的网页上使用 blueimp Gallery 插件了。
Note
我用这个插件制作食谱时使用了图像，所以你需要复制本书代码包中提供的图像文件夹，并复制你站点文件夹中的图像文件夹。
问题
你正在学习使用 blueimp Gallery 插件制作一个图片轮播，但这是一个循序渐进的方法。首先，你学习制作一个图库。假设您有三张图片，并且您想使用 blueimp Gallery 插件创建一个图片库。最初，会显示图像的缩略图。单击任何缩略图都会以图像库的形式显示其较大版本，并带有“下一个”和“上一个”按钮，可以导航到任何图像。此外，正在显示的图像的标题出现在图像库的左上角。
解决办法
假设包含缩略图和缩放图像的图像文件夹被复制到您站点的文件夹中，创建一个显示三个超链接的 HTML 文件，如下所示。
【usgblueimp . html】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link href="blueimp-gallery.css" rel="stylesheet">
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="blueimp-gallery.js" type="text/javascript"></script>
<script src="usingblueimpjq.js" type="text/javascript"></script>
</head>
<body>
<div
id="blueimp-gallery"
class="blueimp-gallery blueimp-gallery-controls"
aria-label="image gallery"
aria-modal="true"
role="dialog"
>
<div class="slides" aria-live="polite"></div>
<h3 class="title"></h3>
<a
class="prev"
aria-controls="blueimp-gallery"
aria-label="previous slide"
aria-keyshortcuts="ArrowLeft"
></a>
<a
class="next"
aria-controls="blueimp-gallery"
aria-label="next slide"
aria-keyshortcuts="ArrowRight"
></a>
<a
class="close"
aria-controls="blueimp-gallery"
aria-label="close"
aria-keyshortcuts="Escape"
></a>
<a
class="play-pause"
aria-controls="blueimp-gallery"
aria-label="play slideshow"
aria-keyshortcuts="Space"
aria-pressed="false"
role="button"
></a>
<ol class="indicator"></ol>
</div>
<div id="links">
<a href="img/chip.jpg" title="Preprocessor">
<img src="img/chipthumnail.jpg" alt="Preprocessor" />
</a>
<a href="img/chip2.jpg" title="RISC chip">
<img src="img/chip2thumnail.jpg" alt="RISC chip" />
</a>
<a href="img/chip3.jpg" title="CISC chip">
<img src="img/chip3thumnail.jpg" alt="CISC chip" />
</a>
</div>
</body>
</html>
CSS 样式表文件 blueimp-gallery.css 包含在 HTML 代码中。blueimp-gallery.js 文件包含在 HTML 文件中。除此之外，您可以看到一个
元素被定义并被分配了链接”。id 被分配给 CSS 样式表中提到的自动应用样式，并使其在 jQuery 代码中可访问。在元素中有三个超链接。这三个超链接显示了三个缩略图，并链接到它们的大图。所有
下面是显示这三个缩略图并在单击任何缩略图时显示图像滑块所需的 jQuery 代码。
usgblueippjq . js
$(document).ready(function() {
document.getElementById('links').onclick = function (event) {
event = event || window.event
var target = event.target || event.srcElement
var link = target.src ? target.parentNode : target
var options = { index: link, event: event }
var links = this.getElementsByTagName('a')
blueimp.Gallery(links, options)
}
});
当运行程序时，你会在浏览器窗口的左上角看到三个缩略图，如图 11-12(a) 所示。点击任一图像，显示其缩放版本，标题在左上角，如图 11-12(b) 所示。图像上还有左右按钮。您可以导航到任何图像。例如，在最后一个图像上单击“下一个”按钮会再次显示第一个图像。同样，单击第一个图像上的“上一个”按钮会显示最后一个图像。
图 11-12
(a)三个缩略图出现在左上角。(b)单击任何图像都会显示其缩放版本及其标题
拉伸图像
有时，您想在保持图像纵横比的同时，将图像库中较小的图像拉伸到图库容器的尺寸。为此，将 blueimp-gallery-contain CSS 类添加到 gallery 小部件中。也就是修改 HTML 文件中最外层的
元素的类。在 HTML 程序中，您会看到最外层的类是 blue imp-gallery blue imp-gallery-controls。这几行重复如下，供您参考。
<div
id="blueimp-gallery"
class="blueimp-gallery blueimp-gallery-controls"
通过修改前面的语句，将元素的类更改为 blue imp-gallery blue imp-gallery-contain，如下所示。
<div
id="blueimp-gallery"
class="blueimp-gallery blueimp-gallery-contain"
不需要其他更改。运行该程序时，您会在浏览器窗口的左上角看到三个缩略图。点按任何缩略图图像都会放大图像，并保持其纵横比不变。图像的高度等于图库的高度。图像上的左右按钮使您能够导航到任何图像(参见图 11-13 )。
图 11-13
单击的缩略图显示为完全拉伸
制作图像旋转木马
blueimp Gallery 插件可以让你用最少的努力制作一个图片轮播。图像转盘是在浏览器窗口中心显示图像的转盘。几秒钟后，该图像自动滑向浏览器窗口的左边界并消失。接下来，另一个图像从浏览器窗口的右边框出现，向左滑动，并停在浏览器窗口的中心。同样，几秒钟后，该图像自动滑向左边界，程序继续。要制作一个图像轮播，其中每个图像不断滑动，您需要修改 HTML 代码如下。
【usgblueimp . html】
按如下方式修改 html 文件。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link href="blueimp-gallery.css" rel="stylesheet">
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="blueimp-gallery.js" type="text/javascript"></script>
<script src="usingblueimpjq.js" type="text/javascript"></script>
</head>
<body>
<div
id="blueimp-gallery-carousel"
class="blueimp-gallery blueimp-gallery-carousel"
aria-label="image carousel"
>
<div class="slides" aria-live="off"></div>
<h3 class="title"></h3>
<a
class="prev"
aria-controls="blueimp-gallery-carousel"
aria-label="previous slide"
></a>
<a
class="next"
aria-controls="blueimp-gallery-carousel"
aria-label="next slide"
></a>
<a
class="play-pause"
aria-controls="blueimp-gallery-carousel"
aria-label="play slideshow"
aria-pressed="true"
role="button"
></a>
<ol class="indicator"></ol>
</div>
<div id="links">
<a href="img/chip.jpg" title="Preprocessor">
<img src="img/chipthumnail.jpg" alt="Preprocessor" />
</a>
<a href="img/chip2.jpg" title="RISC chip">
<img src="img/chip2thumnail.jpg" alt="RISC chip" />
</a>
<a href="img/chip3.jpg" title="CISC chip">
<img src="img/chip3thumnail.jpg" alt="CISC chip" />
</a>
</div>
</body>
</html>
您可以在 HTML 代码中看到，只要使用了 blueimp-gallery 类，它就会被 blueimp-gallery-carousel 类替换，这样插件的 CSS 样式表中提到的样式类就会自动应用于图像超链接，相应的 jQuery 代码也可以应用于它们。
要将图像超链接转换成图像轮播，jQuery 代码需要修改如下。
usgblueippjq . js
$(document).ready(function() {
document.getElementById('links').onclick = function (event) {
event = event || window.event
var target = event.target || event.srcElement
var link = target.src ? target.parentNode : target
var options = { index: link, event: event }
var links = this.getElementsByTagName('a')
blueimp.Gallery(links, options)
}
blueimp.Gallery(document.getElementById('links').getElementsByTagName('a'), {
container: '#blueimp-gallery-carousel',
carousel: true
})
});
当您运行该程序时，您会在浏览器屏幕的中央找到第一幅图像。几秒钟后，该图像滑向浏览器的左边缘并消失。第二个图像出现在浏览器的右边缘，向左滑动，停在浏览器窗口的中央。几秒钟后，第二个图像滑向浏览器窗口的左边缘，然后消失。第三个图像从右边缘开始出现，向左滑动，停在浏览器窗口的中央。这一过程无休止地继续下去。
如果您点按任何图像，会出现“下一个”和“上一个”按钮。您可以使用它们导航到任何图像(参见图 11-14 )。当你停止导航时，图像自动滑动开始。
图 11-14
图像一个接一个地出现在浏览器屏幕的中央。点按任何图像后，会出现“下一个”和“上一个”按钮
11.8 11-7.使用 jQuery 验证插件验证表单
jQuery 验证插件 v1.19.3 由 jQuery 团队的成员 rn Zaefferer 编写和维护。
这个 jQuery 插件为客户端表单验证提供了一种简单的技术，并提供了几个定制选项来满足您的需求。该插件有几个验证方法来验证电子邮件地址、URL、用户名等，所有方法都有默认的英语错误消息和 37 种其他语言的翻译。该插件还提供了一个 API 来编写你自己的方法。全部捆绑
你可以在 https://jqueryvalidation.org 找到更多关于 jQuery 验证插件的信息。该页面显示了演示、下载、文档、GitHub 库等的链接。单击“立即下载”链接，然后单击“源代码”链接下载代码。zip 格式的代码包被下载到您的计算机上。解压文件。从 dist 子文件夹中，将 jquery.validate.js 文件复制到您站点的文件夹中。现在，您可以在您的网页上使用 blueimp Gallery 插件了。
问题
您有一个表单，要求用户输入用户名、电子邮件地址、URL 和注释。您希望使用 jQuery 验证插件来验证这个表单。
解决办法
您需要一个 HTML 表单来提示用户输入他们的姓名、电子邮件地址、URL 和评论。下面是显示一个要求用户输入这些信息的表单的 HTML 代码。
工厂形验证. html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="jquery.form.js" type="text/javascript"></script>
<script src="usingformvalidatejq.js" type="text/javascript"></script>
</head>
<body>
<form class="cmxform" id="myform" method="get" action="">
<fieldset>
<legend>Please provide your name, email address and a comment</legend>
<p>
<label for="cname">Name (required, at least 2 characters)</label>
<input id="cname" name="name" minlength="2" type="text" required>
</p>
<p>
<label for="cemail">E-Mail (required)</label>
<input id="cemail" type="email" name="email" required>
</p>
<p>
<label for="curl">URL (optional)</label>
<input id="curl" type="url" name="url">
</p>
<p>
<label for="ccomment">Your comment (required)</label>
<textarea id="ccomment" name="comment" required></textarea>
</p>
<p>
<input class="submit" type="submit" value="Submit">
</p>
</fieldset>
</form>
</body>
</html>
可以看到一个表单是用 id、commentForm 和 cmsform 类定义的。id 和类被分配来自动应用 CSS 样式，并使其在 jQuery 代码中可访问。在
minlength 属性与元素一起使用，要求输入用户名，以通知用户名称至少需要两个字符。用于搜索姓名、电子邮件地址、URL 和评论的元素分别被赋予唯一的 id、cname、cemail、curl 和 ccomment。插件方法正是通过这些 id 来验证表单的这些元素。由于 input 元素设置为 optional(即，用户也可以将输入框留空)，因此不会对 URL 应用任何验证。
应用表单验证的 jQuery 代码如下。
发电厂 gformvalidateq . js
$(document).ready(function() {
$("#myform").validate({
submitHandler: function(form) {
form.submit();
}
});
});
可以看到 id 为 myform 的表单被访问，插件的 validate 方法被调用。当用户单击 Submit 按钮时，submitHandler 调用回调函数来提交表单。但是，如果所有的元素都通过验证，则不会提交表单。如果元素不符合标准，会出现一个弹出对话框，显示错误。当用户开始输入元素时，弹出对话框自动消失。如果用户单击提交按钮，并且任何元素未通过验证，则弹出窗口再次出现。
在运行 HTML 程序时，底部有四个输入框和一个提交按钮。输入框要求用户输入用户名、电子邮件地址、URL 和评论(见图 11-15(a) )。
图 11-15
(a)出现四个输入框和一个提交按钮。(b)出现错误弹出窗口，要求输入至少两个字符作为名称。(c)输入无效电子邮件地址时弹出错误提示。(d)如果注释框为空，将出现一个错误弹出窗口，要求填写该框
输入姓名时必须至少输入两个字符，因此会出现一个错误弹出窗口，要求用户在姓名框中不输入任何内容或仅输入一个字符时输入至少两个字符(见图 11-15(b) )。
如果用户没有输入电子邮件地址或者输入了没有@符号的无效电子邮件地址，则会弹出一个错误，要求输入有效的电子邮件地址(参见图 11-15(c) )。如果 URL 框为空或输入了任何无效的 URL，则不会出现错误，因为不会对 URL 框执行任何验证。因为注释框不能为空，必须在注释框中输入一些内容，如果注释框为空，一个错误弹出窗口要求用户填写注释框(参见图 11-15(d) )。
11.9 11-8.总结
在这一章中，你学习了如何创建一个插件来改变一个元素的字体大小，字体风格，前景色和背景色。您还学习了如何制作可链接的插件。您还学习了根据需要定制插件。您学习了如何使用插件，包括显示图像滑块的 Magnific Popup 插件、显示动态复选框和单选按钮的 iCheck 插件、创建图像库和轮播的 blueimp Gallery 插件以及验证表单的 jQuery validation 插件。
下一章重点介绍 CSS 的使用。您将学习使用 CSS 来区分 HTML 元素，对嵌套元素应用样式，缩进段落，以及对段落应用首字母大写。您还学习了如何应用 CSS 来消除标题和段落之间的间隙、对标题文本应用样式、缩进多个段落的第一行、创建带有悬挂缩进的段落以及创建带边框的引用。在经历了更多的食谱后，使用 CSS 的概念变得更加清晰。
十二、使用 CSS
这最后一章提供了一套严重依赖 CSS 的食谱。这些食谱补充了本书中的其他食谱，因为 CSS 永远不会远离 JavaScript 开发人员的工作。我包含了一些我最常用的 CSS 技术，以便在您开发自己的 web 应用时快速参考。
本章包括以下配方。
区分 HTML 元素
将样式应用于嵌套在另一个元素中的元素
缩进段落
对段落应用首字母大写
消除标题和段落之间的间隙
对标题文本应用样式
缩进多个段落的首行
创建带有悬挂缩进的段落
创建带边框的引用语
使用图像创建重要报价
将列表属性应用于列表项目
仅将样式应用于选定的列表项
在列表项之间放置分隔线
将图像标记应用于列表
创建内嵌列表
将样式应用于超链接和邮件
为 HTML 元素分配不同的维度
放置 HTML 元素
创建多栏布局
在图像周围环绕文本
在图像后面放置投影
当鼠标移动到链接上时更改光标
在特定区域显示一长段文本
制作圆角柱
应用文本装饰
缩放图像
设置背景图像
使背景图像在浏览器中居中
使背景图像静止
12.1 区分 HTML 元素
问题
当您想要对 HTML 文件的两个不同段落或两个不同 h1 元素应用不同的样式时，您必须通过为它们分配不同的类来区分它们。此外，您需要编写可以单独应用于这些类的样式规则。
解决办法
首先编写一个包含两个段落和两个 h1 元素的 HTML 文件。为了区分它们，你给它们分配不同的类。段落元素分别被分配 feature1 和 feature2 类。h1 元素分别被指定为 feature2 和 feature3 类。
Distinguishhtml.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="distinguishhtmljq.js" type="text/javascript"></script>
</head>
<body>
<p class="feature1">Styles make the formatting job much easier and efficient.</p>
<p class="feature2">To give an attractive look to web sites, styles are heavily used.</p>
<h1 class="feature2">Using jQuery</h1>
<h1 class="feature3">Power of selectors</h1>
</body>
</html>
要将样式应用于不同类的 HTML 元素，需要在样式表中编写以下样式规则。
Style.css
.greencolor{color:green;font-style:italic}
.highlight{background-color:aqua;color:blue;font-family:arial;}
.redandbold{color:red;font-family:arial;font-weight:bold}
下面是将样式规则应用于段落和 H1 元素的 jQuery 代码。
区分 htmljq.js
$(document).ready(function() {
$('p.feature1').addClass('greencolor');
$('.feature2').addClass('highlight');
$('h1.feature3').addClass('redandbold');
});
它是如何工作的
第一条语句将绿色中定义的属性仅应用于段落元素以及属于 feature1 类的元素(即以
标签开头的元素)。第二条语句将高亮样式规则中定义的属性应用于 feature2 类中的任何 HTML 元素。在 HTML 文件中，一个段落元素和一个 h1 元素属于 feature2 类(由
和
标签表示)，因此该规则中定义的属性适用于这两个元素。第三条语句将 feature3 样式规则中定义的属性仅应用于属于 feature3 类的 h1 元素。输出如图 12-1 所示。
图 12-1
不同的类应用于< p >和< h1 >标签
12.2 将样式应用于嵌套在另一个元素中的元素
问题
有时，span 元素嵌套在另一个具有特定 id 或类的 HTML 元素中，您需要对该嵌套的 span 元素应用样式。
解决办法
在以下 HTML 文件中，您定义了要素类的段落元素。在这个段落元素中，定义了一个 span 元素。
Stylenested.tml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="stylenestedjq.js" type="text/javascript"></script>
</head>
<body>
<p class="feature">Styles make the formatting job much easier and efficient. <span>To give an attractive look to web sites,</span> styles are heavily used.</p>.
</body>
</html>
应用于要素类的段落元素和嵌套在其中的 span 元素的样式规则是在样式表中编写的，可能如下所示。
Style.css
.greencolor{color:green;font-style:italic}
.highlight{background-color:aqua;color:blue;font-family:arial;}
将样式应用于 feature1 类的段落元素和嵌套在要素类的段落元素内的 span 元素。下面是 jQuery 代码。
style nestedjq . js
$(document).ready(function() {
$('p.feature').addClass('greencolor');
$('p.feature span').addClass('highlight');
});
它是如何工作的
首先，让我们看看你是如何定义 CSS 样式的。
.feature{property:value; property:value;...}
它用 class="feature "定义了一个可以应用于任何 HTML 元素的样式。
.feature span {property:value; property:value;...}
它定义了一个样式，该样式可以应用于嵌套在任何 HTML 元素中的 span 元素。
p.feature span {property:value; property:value;...}
它使用 class="feature "定义了一个样式，该样式可以应用于嵌套在段落元素内的 span 元素。
feature1 span.feature2 {property:value; property:value;...}
它定义了一个可以应用于 span 元素的样式，其中 class="feature2 "嵌套在 class="feature1 "的任何 HTML 元素中。
p.feature1 span.feature2 {property:value; property:value;...}
它定义了一个样式，该样式可以应用于 span 元素，其中 class="feature2 "嵌套在 paragraph 元素中，class="feature1 "。
第一个 jQuery 语句使用 class="feature "将 greencolor 中定义的样式属性应用于段落元素。第二条语句将突出显示样式规则中定义的属性应用于在 paragraph 元素中定义的 span 元素，该元素带有 class="feature "。换句话说，样式应用于包含在和标记之间的文本区域，这些标记是在具有 class="feature "的段落元素中定义的。样式应用的输出如图 12-2 所示。
图 12-2
将样式应用于嵌套在另一个 HTML 元素中的 span 元素
12.3 缩进段落
问题
在一个 HTML 文件中有三个段落，你想在三个不同的层次缩进它们。
解决办法
下面是包含这三个段落的 HTML。
Indentingparagraph.thml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="styleindenting.css" type="text/css" media="screen" />
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="indentingparagraphjq.js" type="text/javascript"></script>
</head>
<body>
<p class="feature1">Styles make the formatting job much easier and efficient. To give an attractive look to web sites, styles are heavily used. Styles can be written within HTML document or can be attached externally. External styles are considered better</p>
<p class="feature2">JQuery is a powerful JavaScript library that allows us to add dynamic elements to our web sites. Not only it is easy to learn but easy to implement too.</p>
<p class="feature3"> jQuery Selectors are used for selecting the area of the document where we want to apply styles. JQuery has the power of handling events also meaning we can apply styles when a particular action takes place</p>
</body>
</html>
您可以看到这三个段落被分配了三个不同的类名:feature1、feature2 和 feature3。您正在使用 margin 属性来缩进这些段落。下面是写在外部样式表中的样式规则。
Styleindenting.css
.indent1{
margin-left:10%;
}
.indent2{
margin-left:20%;
}
.indent3{
margin-left:30%;
}
要将样式规则应用于这三个段落，您需要编写以下 jQuery 代码。
indenting 僇 jq.js
$(document).ready(function() {
$('p.feature1').addClass('indent1');
$('p.feature2').addClass('indent2');
$('p.feature3').addClass('indent3');
});
它是如何工作的
第一条语句从 HTML 文件中选择 feature1 类的 paragraph 元素，并对其应用 indent1 样式规则中定义的属性。同样，第二个和第三个语句选择 feature2 类和 feature3 类的段落元素，并分别应用 indent2 和 indent3 样式规则中定义的属性。输出如图 12-3 所示。
图 12-3
缩进三个不同层次的三个段落
12.4 对段落应用首字母大写
问题
您希望将段落的第一个字符作为首字母大写。首字母大写可以是不同的字体，不同的颜色，或者你甚至可以使用图片作为首字母大写。
解决办法
让我们考虑下面这个只有一个段落元素的 HTML 文件。
Initialcap.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="styleinitialcap.css" type="text/css" media="screen" />
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="initialcapjq.js" type="text/javascript"></script>
</head>
<body>
<p><span class="cap">S</span>tyles make the formatting job much easier and efficient. To give an attractive look to web sites, styles are heavily used. Styles can be written within HTML document or can be attached externally. External styles are considered better
</body>
</html>
下面是您应用的样式规则，写在样式表中。
style initial cap . CSS
.initialcap{
font-size: 2em;
}
下面是将样式规则应用于名为 cap class 的 span 元素的 jQuery 代码。
首字母 capjq.js
$(document).ready(function() {
$('span.cap').addClass('initialcap');
});
它是如何工作的
您可以在 HTML 中看到，为了将段落的第一个字符与正文的其余部分区分开来，它被包含在一个 span 标记中，并被分配了一个 cap 类。对于这个 cap 类，可以通过 jQuery 代码应用样式规则。你可以看到第一个字符的字体大小是默认字体(段落其余部分)的两倍，如图 12-4 所示。
图 12-4
段落的第一个字符设置为首字母大写
您还可以更改第一个字符的前景色和背景色，如下面的样式规则所示。
style initial cap . CSS
.initialcap{
font-size:2em;
background-color:black;
color:white;
}
12.5 消除标题和段落之间的间隙
问题
每当您将标题应用于任何段落时，标题和段落之间都会有间隙。你想消除这个差距。
解决办法
下面是标题和段落的 HTML。
Removinggap.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="styleremovinggap.css" type="text/css" media="screen" />
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="removinggapjq.js" type="text/javascript"></script>
</head>
<body>
<h3>Formatting Makes Attractive</h3>
<p>Styles make the formatting job much easier and efficient. To give an attractive look to web sites, styles are heavily used. Styles can be written within HTML document or can be attached externally. External styles are considered better</p>
</body>
</html>
下面是去除段落和标题之间间隙的样式规则。
Styleremovinggap.css
.heading{
margin:0;
padding:0;
}
p{
margin:0;
padding:0;
}
下面是将样式应用于 h3 元素的 jQuery 代码。
删除 apjq.js
$(document).ready(function() {
$('h3').addClass('heading');
});
它是如何工作的
没有应用任何 jQuery 代码的 HTML 的原始输出如图 12-5 所示。你可以看到标题和段落之间有很大的空隙。
图 12-5
段落和标题之间通常有间隔
在这个样式表中，标题类选择器应用于 h3 元素，p类型选择器直接应用于段落元素。
在对段落和标题应用样式时，你会发现它们之间的间隙被消除了，如图 12-6 所示。
图 12-6
段落和标题之间通常的空白被删除
12.6 对标题文本应用样式
问题
您希望将样式应用于文本的标题。
解决办法
你在食谱 12-4 中使用相同的 HTML，它包含一个段落和一个标题。为了突出标题，你首先需要消除标题和段落之间的间隙。然后，你把它变成斜体，并给它加上边框。您在样式表中编写以下样式规则。
Stylestoheading.css
.heading{
margin:0;
padding:0;
font-style: italic;
border-top:5px solid black;
border-bottom:5px solid black;
}
p{
margin:0;
padding:0;
}
让我们用下面的 jQuery 代码将该样式应用于 h3 元素。
Stylestoheadingjq.js
$(document).ready(function() {
$('h3').addClass('heading');
});
它是如何工作的
样式规则中的边距和填充属性消除了标题和段落之间通常的间隙，字体样式使标题以斜体显示。border 属性为标题附加上边框和下边框。
应用样式后的段落标题如图 12-7 所示。
图 12-7
带有样式化标题的段落
12.7 缩进多个段落的第一行
问题
您想要缩进文档中段落的第一行。
解决办法
让我们写一些 HTML，里面有几个段落，如下。
indeting first line . html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="styleindentfirstline.css" type="text/css" media="screen" />
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="indentingfirstlinejq.js" type="text/javascript"></script>
</head>
<body>
<p>Styles make the formatting job much easier and efficient. To give an attractive look to web sites, styles are heavily used
. Styles can be written within HTML document or can be attached externally. External styles are considered better</p>
<p>jQuery is a powerful JavaScript library that allows us to add dynamic elements to our web sites. Not only it is easy to learn but easy to implement too.</p>
<p> jQuery Selectors are used for selecting the area of the document where we want to apply styles. JQuery has the power of handling events also meaning we can apply styles when a particular action takes place</p>
</body>
</html>
HTML 显示三个段落，没有任何缩进。要在段落的第一行应用缩进，需要使用 text-indent 属性。下面是样式表中的样式规则。
style indent linetype . CSS
.firstindent{
text-indent:10%;
}
下面是将 firstindent 应用于 HTML 文件的所有段落元素的 jQuery 代码。
indetingfirstlinejq . js
$(document).ready(function() {
$('p').addClass('firstindent');
});
它是如何工作的
应用该样式时，HTML 文件的段落第一行缩进，如图 12-8 所示。
图 12-8
首行缩进的段落
12.8 创建带悬挂缩进的段落
问题
您希望在文档中段落的第一行有悬挂缩进。
解决办法
在这个食谱中，你使用你在食谱 12-6 中使用的相同的 HTML。HTML 有三个段落元素。
您可以利用 text-indent 和 margin-left 属性来创建悬挂缩进。以下是风格法则。
stylehangindent . CSS
.hangingindent{
text-indent:-10%;
margin-left:10%;
}
下面是将悬挂缩进样式规则应用于段落的 jQuery 代码。
hangingindenttjq . js
$(document).ready(function() {
$('p').addClass('hangingindent');
});
它是如何工作的
通过将 margin-left 属性设置为 10%,可以将段落设置为从浏览器窗口左侧开始，为浏览器窗口宽度的 10%(即，整个段落向右移动浏览器窗口宽度的 10%)。通过将 text-indent 的值设置为–10%,您可以使段落的第一行向左移动，移动量等于浏览器窗口宽度的 10 %,从而使其看起来像悬挂的缩进。
在应用样式时，每段的第一行都有一个悬挂式缩进，如图 12-9 所示。
图 12-9
首行缩进的段落
12.9 创建带边框的引用语
问题
在一大段文字的中间，你想突出某些文字来吸引访问者的眼球。也就是说，你需要做一个有边界的引用。
解决办法
让我们编写一个包含三个段落的 HTML，您想要突出显示的段落通过为其分配一个要素类名称来与其他段落区分开来。下面是 HTML。
Pullquote.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="stylepullquote.css" type="text/css" media="screen" />
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="pullquotejq.js" type="text/javascript"></script>
</head>
<body>
<p>Styles make the formatting job
much easier and efficient. To give an attractive look to web sites, styles are heavily used. Styles can be written within HTML document or can be attached externally. External styles are considered better</a>
<p class="feature">jQuery is a powerful JavaScript library that allows us to add dynamic elements to our web sites. Not only it is easy to learn but easy to implement too.</a>
<p> jQuery Selectors are used for selecting the area of the document where we want to apply styles. JQuery has the power of handling events also meaning we can apply styles when a particular action takes place</a>
</body>
</html>
您可以利用边距、颜色和字体样式属性来突出显示文本。以下是您在外部样式表中编写的样式规则。
style pullquote . CSS
.quote{
margin:5%;
color:#00a;
font-style: italic;
border:5px solid black;
padding: .5em;
}
以下是将样式规则引用应用于具有要素类名称的段落的 jQuery 代码。
pullquote q . js
$(document).ready(function() {
$('p.feature').addClass('quote');
});
它是如何工作的
margin 属性将段落从四个边界缩进 5%。color 属性使段落的颜色为蓝色。font-style 属性使其成为斜体。要在引用语周围创建边框，请向引用样式规则添加两个属性:border 在段落周围创建指定宽度的边框，padding 属性在边框和段落文本之间创建间隙。
在应用样式规则时，段落显示为带边框的引用，如图 12-10 所示。
图 12-10
被区分为带边框的引用的段落
12.10 使用图像创建拉动式报价
问题
要使文本在一大段文本中显得有吸引力和动态，您需要用图像做一个引用来突出它。引用可以像图片一样给大量文本的文档一些关注点，而不需要图片。
解决办法
对于这个食谱，你使用你在食谱 12-7 中使用的相同的 HTML。您知道，在 HTML 中，您想要与文本的其余部分区分开来的段落被分配了一个要素类名称。
为了在引用的两个对角应用图像，您制作了两个图形:leftfig.jpg 和 rightfig.jpg。leftfig.jpg 如图 12-11 所示。
图 12-11
leftfig.jpg 文件中的数字
放置在段落右下角的图像如图 12-12 所示。
图 12-12
rightfig.jpg 文件中的数字
您需要将两个图像应用到要突出显示的段落:一个在左上角，另一个在右下角。因为一个元素只能应用一种样式，所以要将两个图像应用于段落元素，需要将它放在 div 元素中。现在，您可以将一种样式应用于段落元素(添加一个图像)，将另一种样式应用于 div 元素以添加另一个图像。以下是将要素类名称的段落包含在 div 元素中后的 HTML 文件。
牵引尺寸. html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="stylepullquoteimages.css" type="text/css" media="screen" />
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="pullquoteimagesjq.js" type="text/javascript"></script>
</head>
<body>
<p>Styles make the formatting job much easier and efficient. To give an attractive look to web sites, styles are heavily used. Styles can be written within HTML document or can be attached externally. External styles are considered better</p>
<div>
<p class="feature">jQuery is a powerful JavaScript library that allows us to add dynamic elements to our web sites. Not only it is easy to learn but easy to implement too.</p>
</div>
<p> jQuery Selectors are used for selecting the area of the document where we want to apply styles. jQuery has the power of handling events also meaning we can apply styles when a particular action takes place</p>
</body>
</html>
以下是将两个图像应用到重要引述的样式规则。
style pull quote . CSS
.quote{
background-image:url(leftfig.jpg);
background-repeat: no-repeat;
margin:5%;
color:#00a;
font-style: italic;
padding:30px 5px 5px 30px;
}
.closing{
background-image:url(rightfig.jpg);
background-repeat: no-repeat;
background-position: bottom right;
}
以下是将样式规则引号和结束语添加到要素类名称段落和 div 元素的 jQuery 代码。
毛衣尺寸 jj . js
$(document).ready(function() {
$('p.feature').addClass('quote');
$('div').addClass('closing');
});
它是如何工作的
引用样式规则在段落的左上角应用 leftfig.jpg。“背景重复”的值设置为“不重复”,以仅显示图像一次。margin 属性使段落从四边缩进浏览器窗口宽度的 5%。font-style 属性使段落以斜体显示，padding 属性设置段落文本和图像之间的距离。结束样式规则在段落的右下角应用 rightfig.jpg。
在应用样式时，你会看到引用与两个图像一起显示在两个对角，如图 12-13 所示。
图 12-13
该段落被识别为带有图像的引用
12.11 将列表属性应用于列表项
问题
下拉菜单中大量使用列表项，显示项的层次结构等等。您希望将列表属性应用于列表项目。
解决办法
让我们制作包含某些列表项的 HTML。以下是 HTML 文件。
list properties . html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="stylelistproperties.css" type="text/css" media="screen" />
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="listpropertiesjq.js" type="text/javascript"></script>
</head>
<body>
<ul>
<li>Tea
<ul>
<li>Darjeeling</li>
<li>Assam
<ul>
<li>Green Leaves</li>
<li>Herbal</li>
</ul>
</li>
<li>Kerala</li>
</ul>
</li>
<li>Coffee
<ul>
<li>Cochin</li>
<li>Kerala</li>
</ul>
</li>
</ul>
</body>
</html>
列表项在应用列表属性之前出现，如图 12-14 所示。
图 12-14
未应用任何样式的无序列表项
让我们将样式规则定义如下。
style listproperties . CSS
.dispdisc{list-style-type:disc}
dispdisc 样式规则使光盘出现在列表项目之前。以下是将 dispdisc 样式规则应用于列表项的 jQuery 代码。
list proprietaries jq . js
$(document).ready(function() {
$('li').addClass('dispdisc');
});
它是如何工作的
列表样式类型设置为圆盘。图 12-15 显示所有列表项前面都有一个圆盘形状。
图 12-15
应用列表样式后的无序项和列表项
12.12 仅将样式应用于选定的列表项
问题
为了突出显示它们，您希望仅对部分列表项应用样式。
解决办法
要将样式仅应用于选定的列表项，您需要将它们与其他列表项区分开来。为了选择列表的一部分，可以为它分配一个类名或 id。在这个解决方案中，您将 id 作为 intro 分配给想要突出显示的列表项。
Selectedlist.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="styleselectedlist.css" type="text/css" media="screen" />
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="selectedlistjq.js" type="text/javascript"></script>
</head>
<body>
<ul>
<li>Tea
<ul id="intro">
<li>Darjeeling</li>
<li>Assam
<ul>
<li>Green Leaves</li>
<li>Herbal</li>
</ul>
</li>
<li>Kerala</li>
</ul>
</li>
<li>Coffee
<ul>
<li>Cochin</li>
<li>Kerala</li>
</ul>
</li>
</ul>
</body>
</html>
让我们用样式表文件中的 intro 定义一个应用于列表项的样式规则。
Styleselectedlist.css
.dispdisc{color:green;font-style:italic}
要将样式规则中定义的属性应用于 intro id 的列表项，可以编写如下的 jQuery 代码。
选定的是 q.js
$(document).ready(function() {
$('#intro').addClass('dispdisc');
});
样式规则将颜色和字体样式属性应用于带有 intro id 的列表项。你可以看到列表中只有一部分被高亮显示，如图 12-16 所示。
图 12-16
将样式属性应用于 id 为 intro 的列表项
对子选择器选择的列表项应用样式
symbol >是一个子组合，它查找作为具有指定 id(或类)的元素的子元素的每个列表项，并应用给定的样式规则。为了理解子选择器是如何工作的，让我们将一个名为 drink 的 id 分配给一个无序列表，如下面的 HTML 所示。
列表选择子选择器.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="stylechildselector.css" type="text/css" media="screen" />
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="childselectorjq.js" type="text/javascript"></script>
</head>
<body>
<ul>
<li>Tea
<ul id="drink">
<li>Darjeeling</li>
<li>Assam
<ul>
<li>Green Leaves</li>
<li>Herbal</li>
</ul>
</li>
<li>Kerala</li>
</ul>
</li>
<li>Coffee
<ul>
<li>Cochin</li>
<li>Kerala</li>
</ul>
</li>
</ul>
</body>
</html>
让我们假设样式表包含一个高亮样式规则，该规则应用绿色并使文本以斜体显示。
欴宒芞砉恁寁. css
.highlight {
font-style: italic;
background-color: #0f0;
}
下面是将高亮样式规则应用于带有饮料 id 的无序列表的子元素的 jQuery 代码。
儿童选择日. js
$(document).ready(function() {
$('#drink >li').addClass('highlight');
});
当使用子选择器时，它只需找到作为饮料 id 元素的子元素的每个列表项，并对其应用 highlight 类。
对未应用 CSS 类的列表项应用样式
您还可以将样式应用于未应用特定 CSS 类的元素。让我们在 JavaScript 文件中编写以下 jQuery 代码。
Stylestocssnotjq.js
$(document).ready(function() {
$('#drink >li').addClass('highlight');
$('#drink li:not(.highlight)').addClass('redandbold');
});
假设样式表文件包含两个样式规则:highlight 和 redandbold，如下所示。
欴宒芞砉恁寁. css
.highlight {
font-style: italic;
background-color: #0f0;
}
.redandbold{
color:red;
font-family:arial;
font-weight:bold
}
它是如何工作的
本示例查找所有未应用突出显示的列表项，并应用 redandbold 类中定义的属性。输出可能如图 12-17 所示。
图 12-17
应用两种不同的样式
12.13 在列表项之间放置分隔条
问题
您希望列表项显示在分隔每个列表项的直线上(没有缩进)。
解决办法
对于这个食谱，你使用你在食谱 12-10 中使用的相同的 HTML。HTML 显示某些列表项，如图 12-14 所示。
以下是风格规则。
样式生成器列表. css
.applytopborders
{
border-top: 1px solid black;
}
.applybottomborder
{
border-bottom: 1px solid black;
}
.liststyle {
list-style-type:none;
padding-left:0;
}
对无序列表应用一个样式规则，对除最后一个以外的所有列表项应用一个，对最后一个列表项应用第三个。
除暴安良 jq.js
$(document).ready(function() {
$('ul').addClass('liststyle');
$('li').addClass('applytopborders');
$('li:last').addClass('applybottomborder');
});
它是如何工作的
这个食谱有三个风格规则。
从列表项和层次缩进中移除传统的项目符号。
对除最后一项之外的所有列表项应用顶部边框。
对最后一个列表项应用 applybottomborder 以对其应用下边框。
应用这些样式得到的输出如图 12-18 所示。
图 12-18
以直线列出项目，中间用分隔线隔开
12.14 对列表应用图像标记
问题
您希望用图像替换列表项中的传统项目符号。
解决办法
对于这个菜谱，您将创建显示某些列表项的 HTML，如下所示。
图像标记列表. html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="styleimagemarker.css" type="text/css" media="screen" />
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="imagemarkerjq.js" type="text/javascript"></script>
</head>
<body>
<ul>
<li>Tea
<ul>
<li>Darjeeling</li>
<li>Assam
<ul>
<li>Green Leaves</li>
<li>Herbal</li>
</ul>
</li>
<li>Kerala</li>
</ul>
</li>
<li>Coffee
<ul>
<li>Cochin</li>
<li>Kerala</li>
</ul>
</li>
</ul>
</body>
</html>
在这个配方中，样式规则利用了两个属性 list-style-type 和 list-style-image。前者从列表项中删除传统的项目符号，后者应用指定的图像而不是项目符号。
您想要应用的图像而不是项目符号是 flower.jpg。下面是样式表中的样式规则。
欴宒桶梓暮. css
.liststyle {
list-style-type: none;
list-style-image:url(flower.jpg);
}
下面是将 liststyle 样式规则应用于无序列表的 jQuery 代码。
图像标记 q.js
$(document).ready(function() {
$('ul').addClass('liststyle');
});
它是如何工作的
通过为 list-style-type 属性指定 none，项目符号将从列表项中消失，通过为 list-style-image 属性指定 flower.jpg，存储在此文件中的图像将应用于列表项。
当应用样式规则时，列表项中的传统项目符号被存储在 flower.jpg 的图像所替换。输出如图 12-19 所示。
图 12-19
以直线列出项目，中间用分隔线隔开
12.15 创建内嵌列表
问题
您希望列表项显示在水平行中，没有任何层次级别。
解决办法
对于这个菜谱，您将创建显示某些列表项的 HTML，如下所示。
内联列表.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="styleinlinelist.css" type="text/css" media="screen" />
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="inlinejq.js" type="text/javascript"></script>
</head>
<body>
<ul>
<li>Tea
<ul>
<li>Darjeeling</li>
<li>Assam
<ul>
<li>Green Leaves</li>
<li>Herbal</li>
</ul>
</li>
<li>Kerala</li>
</ul>
</li>
<li>Coffee
<ul>
<li>Cochin</li>
<li>Kerala</li>
</ul>
</li>
</ul>
</body>
</html>
在这个配方中，样式规则使用显示、列表样式、边距和填充等属性，如下面的样式表所示。
style inlinelist . CSS
.liststyle {
display: inline;
list-style:none;
margin:0;
padding:0;
}
下面是将 liststyle 样式规则应用于无序列表及其列表项的 jQuery 代码。
内联 q.js
$(document).ready(function() {
$('ul').addClass('liststyle');
$('li').addClass('liststyle');
});
它是如何工作的
display 属性的 inline 值使列表项显示在一行中(即同一行)。将 list-style 的值设置为 none 会从列表项中移除传统项目符号。最后，赋给 margin 和 padding 的值 0 移除列表项中的分层缩进。
在应用样式属性时，列表项显示在一行中，没有任何传统的项目符号，如图 12-20 所示。
图 12-20
将一行中显示的项目列为内嵌
12.16 对超链接和邮件应用样式
问题
超链接带有传统的下划线，以区别于静态文本。您希望删除这些下划线并对这些链接应用其他样式。
解决办法
要对超链接应用样式，让我们创建一个包含超链接的 HTML 文件。
Hyperlinks.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="stylehyperlinksmailto.css" type="text/css" media="screen" />
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="hyperlinksjq.js" type="text/javascript"></script>
</head>
<body>
<div>Styles make the formatting job much easier and efficient. To give an attractive look to web sites, styles are heavily used. A person must have a good knowledge of HTML and CSS and a bit of Javascript.
jQuery is a powerful JavaScript library that allows us to add dynamic elements to our web sites. Not only it is easy to learn but easy to implement too.
jQuery is an open source project. <a href="abc.com">Click Here</a> for more information </div>
</body>
</html>
你可以看到“点击这里”是一个超链接，并在网页上加了下划线。当访问者点击此链接时，他会被导航到 abc。com 网站。
若要删除超链接的下划线并对其应用其他样式属性，请在外部样式表文件中编写以下样式规则。
超连结邮件样式. css
.linkstyle{
font-weight:bold;
background-color: #00f;
color:#fff;
text-decoration:none;
}
要将 linkstyle 样式规则应用于超链接，jQuery 代码可以编写如下。
超连结 jq.js
$(document).ready(function() {
$('a[href]').addClass('linkstyle');
});
现在让我们看看如何将样式应用于 mailto 超链接。这里有一个 HTML 文件，它有一个 mailto 超链接，当选择它时，会打开一个邮件客户端程序，向相关人员发送电子邮件。
mailto.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="stylehyperlinksmailto.css" type="text/css" media="screen" />
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="mailtojq.js" type="text/javascript"></script>
</head>
<body>
<div>Styles make the formatting job much easier and efficient. To give an attractive look to web sites, styles are heavily used. A person must have a good knowledge of HTML and CSS and a bit of Javascript.
jQuery is a powerful JavaScript library that allows us to add dynamic elements to our web sites. Not only it is easy to learn but easy to implement too.
jQuery is an open source project. <a href="mailto:bmharwani@yahoo.com">Contact Us</a> for more information </div>
</body>
</html>
下面是包含 jQuery 代码的 JavaScript 文件的内容。
mailtojq.js
$(document).ready(function() {
$('a[href^="mailto:"]').addClass('linkstyle');
});
它是如何工作的
我们的 CSS 样式规则使用 font-weight 属性使超链接以粗体显示。background-color 属性将超链接背景色设置为蓝色，color 属性设置为白色，text-decoration 属性的值设置为 none，以删除超链接的传统下划线。
以下是 jQuery 语句。
$('a[href]').addClass('linkstyle');
选择文档中所有具有 href 属性的锚元素(a ),并对它们应用 linkstyle 类。输出如图 12-21 所示。
图 12-21
从超链接中删除传统下划线
以下语句选择文档中所有具有 href 属性并以 mailto 开头的锚元素(' a ')，并对它们应用 linkstyle 类。
$('a[href^="mailto:"]').addClass('linkstyle');
输出可能如图 12-22 所示。
图 12-22
将链接样式应用于 mailto 选项
12.17 为 HTML 元素分配不同的维度
问题
您想要约束某些段落元素的大小。
解决办法
对于这个解决方案，您创建一个包含两个段落元素的 HTML 文件，这两个元素被分配了 feature1 和 feature2 类名。
不同大小. html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="differentdimensionjq.js" type="text/javascript"></script>
</head>
<body>
<p class="feature1">Styles make the formatting job much easier and efficient. To give an attractive look to web sites, styles are heavily used. A person must have a good knowledge of HTML and CSS and a bit of Javascript. </p>
<p class="feature2">jQuery is a powerful JavaScript library that allows us to add dynamic elements to our web sites. Not only it is easy to learn but easy to implement too. jQuery is an open source project that provides a wide range of features with cross platform compatibility. JQuery has hundreds of plug-ins to extend its features. jQuery helps in increasing interactions with a web site </p>
</body>
</html>
要将 width 属性应用于具有 feature1 和 feature2 类名的段落元素，您需要编写以下 jQuery 代码。
大小不同 jq.js
$(document).ready(function() {
$('.feature1').css({'width':'50%', 'padding':'10px', 'border':'1px dashed'});
$('.feature2').css({'padding':'30px', 'border':'2px solid'});
});
它是如何工作的
该解决方案使用 css()方法(在方法 3-7 中描述)。在 jQuery 代码中，第一条语句将第一段限制在浏览器窗口宽度的 50%。border 属性创建 1 px 粗细的虚线边框，padding 属性在段落文本和边框之间创建 10px 的间距。第二条语句使段落文本用尽了浏览器窗口的整个宽度。border 属性创建 2px 粗细的实心边框，padding 属性在段落文本和边框之间创建 30px 的间距。输出如图 12-23 所示。
图 12-23
以百分比形式指定宽度属性
您还可以用像素来指定宽度，如下面的 jQuery 代码所示。
$('.feature1').css({'width':'300px', 'padding':'10px', 'border':'1px dashed'});
$('.feature2').css({'padding':'30px', 'border':'2px solid'});
第一段的宽度限制为 300 像素，如图 12-24 所示。
图 12-24
以像素为单位指定宽度属性
12.18 放置 HTML 元素
问题
您想让一个段落元素出现在另一个段落元素的右边或左边。
解决办法
让我们创建一个包含两个段落元素的 HTML 文件，这两个元素被赋予 feature1 和 feature2 类名。
放置.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="placinghtmljq.js" type="text/javascript"></script>
</head>
<body>
<p class="feature1">Styles make the formatting job much easier and efficient. To give an attractive look to web sites, styles are heavily used. A person must have a good knowledge of HTML and CSS and a bit of Javascript. </p>
<p class="feature2">jQuery is a powerful JavaScript library that allows us to add dynamic elements to our web sites. Not only it is easy to learn but easy to implement too. jQuery is an open source project that provides a wide range of features with cross platform compatibility. jQuery has hundreds of plug-ins to extend its features.jJQuery helps in increasing interactions with a web site </p>
</body>
</html>
要将 float 属性应用于具有 feature1 和 feature2 类名的段落元素，您需要编写以下 jQuery 代码。
放置 htmljq.js
$(document).ready(function() {
$('.feature1').css({'width':'50%', 'border':'1px dashed', 'float':'left'});
$('.feature2').css({'border':'2px solid'});
});
制作两列布局
也可以让第一段向左浮动，第二段向右浮动。让我们修改下面的 jQuery 代码。
两列 jq.js
$(document).ready(function() {
$('.feature1').css({'width':'50%', 'border':'1px dashed', 'float':'left'});
$('.feature2').css({'width':'48%','border':'2px solid', 'float':'right'});
});
反转列
您也可以交换列的位置。也就是说，第一段可以设置为右浮动，第二段可以设置为左浮动。用于此目的的 jQuery 代码可以编写如下。
反向列 jq.js
$(document).ready(function() {
$('.feature1').css({'width':'50%', 'border':'1px dashed', 'float':'right'});
$('.feature2').css({'width':'48%', 'border':'2px solid', 'float':'left'});
});
它是如何工作的
在 jQuery 代码中，第一条语句指定属性 float:left，使第一段出现在浏览器窗口的左侧，在右侧留出 50%的空间，然后由第二段占据(见图 12-25 )。border 属性在第一段周围创建 1 px 粗细的虚线边框。第二条语句在第二段周围创建 2px 厚的实心边框。
图 12-25
应用浮动属性
当第一个段落在两栏布局中设置为左浮动时，它会在其右侧创建一个空格(供第二个段落使用)。同样，当属性 float:right 应用于第二个段落时，它会在浏览器窗口的左侧创建一个可供第一个段落使用的空间。样式应用的输出如图 12-26 所示。
图 12-26
应用浮动属性
反向布局如图 12-27 所示。
图 12-27
交换两列
12.19 创建多栏布局
问题
您希望创建一个三列布局(即三个段落位于页面上的特定位置)。
解决办法
您可以通过将栏放置在网页的三个不同位置来创建三栏布局。让我们创建一个包含三个段落元素的 HTML 文件，它们的类名分别为 leftalign、centeralign 和 rightalign。以下是 HTML 文件。
Multicolumn.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="multicolumnjq.js" type="text/javascript"></script>
</head>
<body>
<p class="leftalign">Styles
make the formatting job much easier and efficient. To give an attractive look to web sites, styles are heavily used. A person must have a good knowledge of HTML and CSS and a bit of Javascript. </p>
<p class="centeralign">jQuery is a powerful JavaScript library that allows us to add dynamic elements to our web sites. Not only it is easy to learn but easy to implement too. </p>
<p class="rightalign">jQuery is an open source project that provides a wide range of features with cross platform compatibility. jQuery has hundreds of plug-ins to extend its features. JQuery helps in increasing interactions with a web site. </p>
</body>
</html>
下面是将三个段落元素放在各自位置的 jQuery 代码。
多列节点. js
$(document).ready(function() {
$('.leftalign').css({'position':'absolute', 'left':'50px', 'width':'300px'});
$('.centeralign').css({'position':'absolute', 'left':'400px', 'width':'300px'});
$('.rightalign').css({'position':'absolute', 'left':'750px', 'width':'300px'});
});
应用浮动
通过应用以下解决方案中演示的 float 属性，可以获得相同的输出(三列布局)。在下面的 HTML 文件中，您定义了三个段落元素(没有指定任何类名)。
应用.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="applyfloatsjq.js" type="text/javascript"></script>
</head>
<body>
<p>Styles make the formatting job much easier and efficient. To give an attractive look to web sites, styles are heavily used. A person must have a good knowledge of HTML and CSS and a bit of Javascript. </p>
<p>JQuery is a powerful JavaScript library that allows us to add dynamic elements to our web sites. Not only it is easy to learn but easy to implement too. </p>
<p>JQuery is an open source project that provides a wide range of features with cross platform compatiblity. JQuery has hundreds of plug-ins to extend its features. JQuery helps in increasing interactions with a web site. </p>
</body>
</html>
然后编写以下 jQuery 代码。
应用 flowsjq . js
$(document).ready(function() {
$('p').css({'float':'left', 'width':'300px','margin':'5px'});
});
增加各列之间的间距
装订线是指各栏之间的间距。还可以通过设置 width 和 margin 属性的值来增加列之间的间距。通过减少列宽和增加边距大小，可以增加列间距(装订线大小)。
让我们减少 width 属性并稍微增加 margin 值，如下面的 jQuery 代码所示。
应用 flowsjq . js
$('p').css({'float':'left', 'width':'375px','margin':'15px'});
它是如何工作的
在第一组 jQuery 代码中，您会看到第一条语句设置了 class="leftalign "的 HTML 元素的 CSS 属性。它显示宽度为 300 像素的段落元素，并将其放置在其包含元素(在本例中为浏览器窗口)中左侧 50 像素处。类似地，第二条语句将 class="centeralign "的 HTML 元素定位在浏览器窗口左侧 400 像素处。第三条语句将 class="rightalign "的 HTML 元素定位在浏览器窗口左侧 750 像素处。输出如图 12-28 所示。
图 12-28
使用 position 属性的三列布局
在浮动示例中，您为每个段落元素提供 300 像素的宽度，并使它们一个接一个地浮动到浏览器窗口的左侧。第一段首先出现，宽度为 300 像素。在 5 个像素的边距之后，第二个段落出现(即，在浏览器窗口左侧 305 个像素之后)。第二段也取 300 像素的宽度。最后，在为第二段保留 5 个像素的边距后(即浏览器窗口的最右边)出现第三段，如图 12-29 所示。
图 12-29
使用 float 属性的三列布局
最后，图 12-30 显示了增加檐槽尺寸后的示例。装订线大小指的是各列之间的间距。
图 12-30
增加了檐槽尺寸的三列
12.20 图像周围环绕文字
问题
通常，当您在网页上显示图像和文本时，两者会相继出现。要么图像跟随文本，要么文本跟随图像(取决于在 HTML 文件中的位置)；默认情况下，两者不会相邻出现。有时，您希望图像被周围的文本包裹。
解决办法
让我们把一个图像放在一个 HTML 文件中，如下所示。
wraptext.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="wrapjq.js" type="text/javascript"></script>
</head>
<body>
<img src="cell.jpg"/>
</body>
</html>
现在编写 jQuery 代码，将 img 元素包装在 div 元素中，然后将带有一些文本的段落元素追加到 div 元素中。下面是 jQuery 代码。
包装 q.js 的制作
$(document).ready(function() {
$('img').wrap('<div></div>');
$('<p>Styles make the formatting job much easier and efficient. To give an attractive look to web sites, styles are heavily used. A person must have a good knowledge of HTML and CSS and a bit of Javascript. jQuery is a powerful JavaScript library that allows us to add dynamic elements to our web sites. Not only it is easy to learn but easy to implement too. jQuery is an open source project that provides a wide range of features with cross platform compatiblity. jQuery has hundreds of plug-ins to extend its features. JQuery helps in increasing interactions with a web site. </p>').appendTo('div');
$('img').css({'float':'left', 'width':'200px','height':'200px'});
$('p').css({'clear':'right'});
});
它是如何工作的
应用于图像的 CSS 属性使用 float 属性使其在浏览器窗口中向左浮动(允许文本显示在其右侧)。width 属性将图像限制为 200px(小于浏览器窗口总宽度的任何尺寸)，因此有空间让文本环绕图像。height 属性将图像的高度限制为特定的大小。
当“右”被分配给 clear 属性时，它会使额外的段落文本向左移动。它试图清空右侧的空间(即，如果左侧的空间可用，它试图填充左侧的空间)。因此，超出图像高度的段落的额外文本移动到左侧，使图像周围的文本环绕图像。
将前面的 CSS 属性应用于图像和段落元素，您将得到如图 12-31 所示的输出。
图 12-31
将文本环绕在图像周围
12.21 在图像后面放置投影
问题
您想要在图像后面放置一个投影。
解决办法
要创建投影，你需要制作两个图像，一个在图像右侧创建投影，另一个在底部创建阴影效果。这些图像可以使用画笔或任何技术制作。让我们将图像右边的阴影命名为 shadowright.jpg，如图 12-32 所示。
图 12-32
右侧的背景阴影图像
同样，在图像底部投下阴影的图像被命名为 shadowbottom.jpg。如图 12-33 所示。
图 12-33
底部的背景阴影图像
让我们假设一个图像文件被命名为 image4.jpg。下面是显示它的 HTML 代码。
Dropshadow.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="dropshadowjq.js" type="text/javascript"></script>
</head>
<body>
<span class="shadow"><img src="scene.jpg" /></span>
</body>
</html>
应用于 img 元素和 span 元素的样式规则是通过 css()方法应用的，如下面的 jQuery 代码所示。
drop shadow jq . js
$(document).ready(function() {
$('span').css({'background':'url(shadowright.jpg)', 'background-position':'right', 'background-repeat':'no-repeat', 'padding':'195px 15px 0px 0px'});
$('img').css({'width':'200px','height':'200px','background':'url(shadowbottom.jpg)', 'background-repeat':'no-repeat','background-position':'bottom', 'padding':'0 0 10px 0' });
});
它是如何工作的
注意，img 元素包含在 span 元素中。这样做的原因是，您需要对 img 元素应用两个样式规则，一个是在图像的右侧投下阴影，另一个是在所显示图像的底部投下阴影。但是不能对一个元素应用多个样式规则。因此，要对 img 元素应用两个样式规则，可以用 span 元素将它括起来，这样一个样式规则可以应用于 span 元素(最终应用于 img 元素)，而其他样式规则可以应用于 img 元素本身。
第一个 css()调用包含四个属性。
将 background:url 属性设置为在图像的背景中显示存储在文件 shadowright.jpg 中的图像。
background-repeat 属性设置为 no-repeat 以仅显示一次阴影图像。
背景位置设置为“右”,以在图像的右侧显示阴影图像，并与底部对齐。
padding 属性设置阴影图像与实际图像的距离。这有助于决定阴影的宽度。
类似地，第二个 css()调用包含六个属性。
width 和 height 属性设置为 200px，以将显示的实际图像的宽度和高度限制为 200 像素。
将 background:url 属性设置为在图像的背景中显示存储在文件 shadowbottom.jpg 中的图像。
“背景重复”设置为“不重复”,以便只显示一次阴影图像。
背景位置设置为底部，以在实际图像的底部显示阴影图像。
padding 属性设置阴影图像与实际图像的距离。
如图 12-34 所示，将这些属性应用于图像，使其在右侧和底部产生阴影。
图 12-34
后面有阴影的图像
12.22 当鼠标移动到链接上时更改光标
问题
当光标在链接上移动时，您想要更改光标的样式。
解决办法
对于这个问题，您创建一个 HTML 文件，该文件在一个 div 元素中包含一些信息以及一个单击此处链接，当选择该链接时，它会导航到 abc.com 站点。下面是 HTML。
Changecursor.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="changecursorjq.js" type="text/javascript"></script>
</head>
<body>
<div>Styles make the formatting job much easier and efficient. To give an attractive look to web sites, styles are heavily used. A person must have a good knowledge of HTML and CSS and a bit of Javascript.
jQuery is a powerful JavaScript library that allows us to add dynamic elements to our web sites. Not only it is easy to learn but easy to implement too.
jQuery is an open source project. <a href="abc.com">Click Here</a> for more information </div>
</body>
</html>
要对超链接应用不同的光标属性，您需要编写以下 jQuery 代码。
Changecursorjq.js
$(document).ready(function() {
$(a).hover(
function(){
$(this).css({'cursor': 'wait', 'color': 'blue' , 'background-color':'cyan'});
},
function(){
$(this).css({'cursor': 'default', 'color': '#000000' , 'background-color':'#ffffff'});
});
});
它是如何工作的
hover()方法包含两个函数:一个在鼠标指针悬停在所选元素上时执行，另一个在鼠标指针离开所选元素时执行。最初，输出如图 12-35 所示。您可以看到超链接带有下划线，鼠标指针是默认指针。
图 12-35
未访问链接时的默认光标
在链接上移动鼠标时，在 hover()中定义的 CSS 属性被应用到它上面，改变鼠标指针的形状，看起来好像在等待什么事情发生，链接的背景色变为青色，前景色变为蓝色，如图 12-36 所示。
图 12-36
当鼠标移动到链接上时，光标会改变
12.23 在特定区域显示长文本
问题
您希望在特定区域显示一段较长的文本。
解决办法
下面的 HTML 文件定义了一个段落元素，您希望将它限制在页面的一个较小区域内。
长文本区域. html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="longtextinareajq.js" type="text/javascript"></script>
</head>
<body>
<p>Styles make the formatting job much easier and efficient. To give an attractive look to web sites, styles are heavily used. A person must have a good knowledge of HTML and CSS and a bit of Javascript. <br/>
jQuery is a powerful JavaScript library that allows us to add dynamic elements to our web sites. Not only it is easy to learn but easy to implement too. jQuery is an open source project that provides a wide range of features with cross platform compatibility. jQuery has hundreds of plug-ins to extend its features. jQuery helps in increasing interactions with a web site </p>
</body>
</html>
要限制文本并将溢出属性应用于段落元素，可以使用下面的 jQuery。
long textareajq . js
$(document).ready(function() {
$('p').css({ 'width':'50%', 'height':'100px','overflow':'scroll' });
});
它是如何工作的
您将浏览器窗口的 50%和 100 像素的高度分配给段落。通过将 overflow 的值设置为 scroll，可以在段落元素的文本在指定的高度和宽度下不完全可见时显示滚动条。输出如图 12-37 所示。
图 12-37
使用滚动选项应用溢出元素
让我们看看当您将溢出属性的值设置为 hidden 时会发生什么。未能出现在指定区域内的段落文本变得不可见，如图 12-38 所示。
图 12-38
使用隐藏选项应用溢出元素
让我们将溢出属性的值设置为 auto。滚动条只显示高度，不显示宽度(与值滚动不同)(也就是说，滚动条只在需要的地方出现)。这种风格的输出如图 12-39 所示。
图 12-39
使用自动选项应用溢出元素
让我们将溢出属性的值设置为 visible。该段落的文本完全可见(即，它不局限于分配给它的区域)，如图 12-40 所示。
图 12-40
使用可视选项应用溢出元素
12.24 制作圆角柱
问题
您希望制作一个带有圆角的单列。
解决办法
要使该列显示为圆形，您需要制作一个圆角矩形，并将其粘贴到文本背景中。让我们做一个圆角矩形，如图 12-41 所示，命名为 columnfig.jpg。
图 12-41
圆角矩形
该图像被设置为文本的背景。让我们创建一个 HTML 文件，其中包含一个段落元素和一些文本，如下所示。
round column . html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="styleroundedcolumn.css" type="text/css" media="screen" />
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="roundedcolumnjq.js" type="text/javascript"></script>
</head>
<body>
<p>Styles make the formatting job much easier and efficient. To give an attractive look to web sites, styles are heavily used. A person must have a good knowledge of HTML and CSS and a bit of Javascript.
jQuery is powerful JavaScript library used to make dynamic sites.</p>
</body>
</html>
在样式表中，让我们编写一个样式规则来粘贴圆角矩形作为段落元素的背景。样式规则包括宽度、填充、背景和背景重复等属性，如下所示。
style round column . CSS
.backfig{
width:150px;
padding:10px;
background:url(columnfig.jpg);
background-repeat:no-repeat;
}
让我们编写 jQuery 代码，将 backfig 样式规则应用于段落元素。下面是 jQuery 代码。
round column jq . js
$(document).ready(function() {
$('p').addClass('backfig');
});
它是如何工作的
backfig 样式规则为段落文本指定一个宽度，该宽度等于圆角矩形的宽度，以便段落文本保持限制在圆角矩形的边界内。padding 属性在矩形边界和段落文本之间保留一个间隙。background 属性用于将存储在 columnfig.jpg 的圆角矩形图像设置为段落文本的背景，background-repeat 的值设置为 no-repeat，以使圆角矩形仅出现一次。
应用圆角矩形图像作为背景后，段落文本看起来如图 12-42 所示。
图 12-42
圆角单柱
12.25 应用文本装饰
问题
您希望对某些文本应用文本装饰，如上划线和下划线样式，以引起人们的注意。为了便于比较，您还需要应用一些效果，如删除线。例如，演示某个商品的早期折扣和当前折扣。
解决办法
以下是包含三个段落元素的 HTML，这三个元素被分配了类名 feature1、feature2 和 feature3。
Textdecor.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="textdecorjq.js" type="text/javascript"></script>
</head>
<body>
<p class="feature1">jQuery is powerful</p>
<p class="feature2">Styles make the formatting job much easier and efficient. To give an attractive look to web sites, styles are heavily used. A person must have a good knowledge of HTML and CSS and a bit of Javascript. jQuery is powerful JavaScript library used to make dynamic sites.</p>
<p class="feature3">10% Discount on all products</p>
<p>20% Discount on all products</p>
</body>
</html>
下面是对段落元素应用文本修饰的 jQuery。
文字译码. js
$(document).ready(function() {
$('p.feature1').css({'text-decoration':'underline'});
$('p.feature2').css({'text-decoration':'overline'});
$('p.feature3').css({'text-decoration':'line-through'});
});
您还可以对标题(即 feature1 类段落)应用上划线和下划线值来突出显示它。
<div>
<p class="feature1">jQuery is powerful</p>
</div>
样式规则现在改变了。
Textdecor2jq.js
$(document).ready(function() {
$('p.feature1').css({'text-decoration':'underline'});
$('div').css({'text-decoration':'overline'});
$('p.feature3').css({'text-decoration':'line-through'});
});
它是如何工作的
对 css()的第一次调用将 class="feature1 "的段落文本显示为带下划线的文本。类似地，第二个调用显示 class="feature2 "段落的文本，上面有一条线。第三个调用显示 class="feature3 "段落的文本，中间有一条线，就像文本被描边一样。输出如图 12-43 所示。
图 12-43
应用不同的文本修饰选项
使用换行的好处是访问者可以知道以前的内容是什么，并且可以与当前的内容进行比较。如前面的解决方案所示，先前的贴现率是 10%，现在增加到 20%。
为了突出显示标题，因为不能对同一个元素应用两个样式规则，所以可以将 feature1 类段落放在 div 元素中，这样就可以对 div 应用一个样式规则，对 paragraph 元素应用另一个样式规则。您可以看到，第一个样式规则使 feature1 类段落显示为带下划线。第二个样式规则使一条上划线出现在 div 元素的内容上(即 feature2 类段落上)。第三种样式规则使 feature2 类段落看起来被删除。输出如图 12-44 所示。
图 12-44
对文本标题应用上划线和下划线
12.26 缩放图像
问题
如果图像是可缩放的(即，如果放置图像的块的尺寸减小)，图像的尺寸也应该自动减小。类似地，如果封闭块的大小增加，您希望图像的大小也增加。
解决办法
让我们使用你在配方 12-19 中使用的相同的 HTML(参考图 12-30 了解该配方的结果)。这一次，您根据包含 block 元素的%(百分比)来定义图像的宽度。因为图像的包含块是浏览器窗口，所以图像的宽度响应于浏览器窗口尺寸的改变而增加或减小。以下是修改后的样式规则。
Stylescaling.css
.moveleft
{
width:40%;
float:left;
}
.imagewrap {
clear:right;
}
下面是将样式规则应用于图像和段落元素的 jQuery 代码。
Scalingimagesjq.js
$(document).ready(function() {
$('img').wrap('<div></div>');
$('<p>Styles make the formatting job much easier and efficient. To give an attractive look to web sites, styles are heavily used. A person must have a good knowledge of HTML and CSS and a bit of Javascript. jQuery is a powerful JavaScript library that allows us to add dynamic elements to our web sites. Not only it is easy to learn but easy to implement too. jQuery is an open source project that provides a wide range of features with cross platform compatiblity. jQuery has hundreds of plug-ins to extend its features. JQuery helps in increasing interactions with a web site. </p>').appendTo('div');
$('img').addClass('moveleft');
$('p').addClass('imagewrap');
});
它是如何工作的
如果从配方 12-19 增加浏览器窗口的宽度，您会发现图像的尺寸保持不变，并且不会根据浏览器窗口宽度的变化而缩放，如图 12-45 所示。
图 12-45
增加浏览器窗口的宽度时，图像不会缩放
图像不缩放的原因在于应用于它的原始样式。这些样式已添加到样式规则中以供参考。
Stylescaling.css
.moveleft
{
width:200px;
height:200px;
float:left;
}
您可以看到图像的宽度固定为 200 像素，因此，无论浏览器窗口大小如何变化，图像的宽度都保持不变。
新的 moveleft 样式规则包含两个属性。
width 属性被设置为等于浏览器窗口宽度的 40%(即，每当浏览器窗口的宽度改变时，图像的宽度改变以保持 40%的比率)。
float 属性设置为 left，以使图像保持在浏览器的左侧，为段落文本显示在其右侧留出空间。
imagewrap 样式规则应用于段落文本，并包含一个 clear 属性，使额外的段落文本(扩展图像大小的文本)出现在图像下方，以便图像在文本内换行显示。只有当浏览器窗口的大小调整到段落文本超出图像高度时，该属性的影响才可见。
当应用样式时，你会发现图像随着浏览器窗口的大小而变得可缩放，如图 12-46 所示。
图 12-46
随着浏览器窗口宽度的增加，图像被缩放(尺寸增加)
12.27 设置背景图像
问题
您希望图像作为文本的背景出现。
解决办法
假设下面的 HTML 包含一个段落元素来显示简单的文本。
Backgroundimage.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="stylebackgroundimage.css" type="text/css" media="screen" />
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<script src="backgroundimagejq.js" type="text/javascript"></script>
</head>
<body>
<p>Styles make the formatting job much easier and efficient. To give an attractive look to web sites, styles are heavily used. A person must have a good knowledge of HTML and CSS and a bit of Javascript.
jQuery is a powerful JavaScript library that allows us to add dynamic elements to our web sites. Not only it is easy to learn but easy to implement too.
jQuery is an open source project that provides a wide range of features with cross platform compatiblity. jQuery has hundreds of plug-ins to extend its features. jQuery helps in increasing interactions with a web site. </p>
</body>
</html>
为了将图像作为文本的背景，您需要编写一个样式规则，如下所示。
Stylebackgroundimage.css
.placeimage
{
background-image:url(cell.jpg);
background-repeat:no-repeat;
}
现在您需要编写 jQuery 代码来将 placeimage 应用到 body 标记。下面是 jQuery 代码。
Backgroundimagejq.js
$(document).ready(function() {
$('body').addClass('placeimage');
});
它是如何工作的
让我们假设有一个名为 cell.jpg 的图像文件。在 placeimage 样式规则中，您使用了两个属性:background-image 和 background-repeat。在背景图像的帮助下，你使存储在 cell.jpg 的图像作为文本的背景出现。默认情况下，图像会重复几次，以填满包含的块。因此，您将 background-repeat 属性的值设置为 no-repeat，以便图像只在背景中出现一次。
将 placeimage 样式规则应用到 HTML 文件的主体后，存储在 cell.jpg 文件中的图像将作为文本的背景出现，如图 12-47 所示。
图 12-47
图像被设置为文本的背景
12.28 在浏览器中将背景图像居中
问题
通常，当您将图像设置为背景时，它会与浏览器窗口的左侧对齐。您希望背景图像出现在浏览器屏幕的中央。
解决办法
在这个食谱中，你使用你在食谱 12-26 中使用的相同的 HTML 文件，它显示一个图像作为背景(左对齐)。要使左对齐的背景图像出现在屏幕中央，可以使用 background-position 属性。通过将 background-position 属性的值设置为中心，背景图像将出现在浏览器屏幕的中心。
让我们将背景位置添加到 placeimage 样式规则中(见配方 12-26 ),如下所示。
style center image . CSS
.placeimage
{
background-image:url(cell.jpg);
background-repeat:no-repeat;
background-position:center;
}
下面是将 placeimage 样式规则应用于 HTML 正文的 jQuery 代码。
Centeringimagejq.js
$(document).ready(function() {
$('body').addClass('placeimage');
});
它是如何工作的
background-image 属性使 cell.jpg 的图像显示为背景。要使背景图像只出现一次(即防止它重复出现并填满整个块)，可以将 background-repeat 属性的值设置为 no-repeat。最后，通过将值 center 分配给 background-position 属性，可以确保背景图像出现在浏览器窗口的中心。
将 placeimage 样式规则应用于 HTML 文件的主体后，保存在 cell.jpg 的图像成为背景并位于浏览器窗口的中心，如图 12-48 所示。
图 12-48
背景图像位于浏览器屏幕的中央
12.29 使背景图像静止
问题
当您浏览任何网页时，图像和文本在页面上向上滚动。即使上下滚动页面，您也希望背景图像保持静止。
解决办法
在这个食谱中，你使用你在食谱 12-26 中使用的相同的 HTML 文件。在这里，您向段落中添加更多的文本，使其足够大，以便对其应用滚动。若要在滚动网页时保持背景图像不动，可以使用 background-attachment 属性。通过将值固定设置为 background-attachment 属性，可以将背景图像设置为在滚动网页时保持静止。因此，让我们将 background-attachment 属性添加到您在前一个菜谱中使用的样式表中。
Styleimagestationary.css
.placeimage
{
background-image:url(cell.jpg);
background-repeat:no-repeat;
background-position:center;
background-attachment: fixed;
}
下面是将 placeimage 样式规则应用于 HTML 文件正文的 jQuery 代码。
imagestationajq . js
$(document).ready(function() {
$('body').addClass('placeimage');
});
它是如何工作的
以下是 placeimage 样式规则中使用的每个属性的功能。
background-image 属性使 cell.jpg 图像显示为背景。
通过将值 no-repeat 赋给 background-repeat 属性，将背景图像设置为仅出现一次。
将 background-position 属性设置为中心，使背景图像出现在浏览器屏幕的中心。
background-attachment 属性设置为 fixed，以使背景图像在滚动网页时保持静止。
将 placeimage 样式规则应用到 HTML 文件的主体后，背景图像作为背景出现，如图 12-49 所示。
图 12-49
当文本大于浏览器窗口大小时，会出现滚动条
现在，当你向下滚动网页时(见右边的滚动条)，背景图像保持在浏览器屏幕的中央，而文本如图 12-50 所示滚动。
图 12-50
即使滚动文本，背景图像也保持静止
12.30 摘要
在这一章中，你看到了解释经常应用于网页的 CSS 技术的方法。这包括区分 HTML 元素、对嵌套在另一个元素中的元素应用样式、缩进段落、对段落应用首字母大写、移除标题和段落之间的间隙、对标题文本应用样式以及缩进多个段落的首行。
您看到了创建带有悬挂缩进的段落、带边框的引用、带有图像的引用的过程。您学习了如何将列表属性应用于列表项，将样式应用于选定的列表项，在列表项之间放置分隔线，将图像标记应用于列表，以及创建内联列表。
最后，您了解了如何对超链接和 mailto 应用样式、为 HTML 元素分配不同的尺寸、放置 HTML 元素、创建多栏布局、在图像周围环绕文本、在图像后面放置阴影、当鼠标移动到链接上时改变光标、在特定区域内显示一段较长的文本、制作圆角栏、应用文本装饰、缩放图像、设置背景图像、将背景图像居中以及使背景图像保持静止。
