原文：jQuery 2 Recipes
协议：CC BY-NC-SA 4.0
七、滑动和视觉效果
在这一章中，你将学习如何对不同的 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 小部件利用建议，以及如何使用折叠、对话框和选项卡分类显示大量内容。**
