jQuery前端开发任务驱动教程 课件 第6章 jQuery实现图像效果.pptx

第6章jQuery实现图像效果《jQuery前端开发任务驱动教程》

学习目标/Target掌握removeAttr()方法的使用方法，能够使用removeAttr()方法删除指定元素的一个或多个属性掌握nextAll()方法的使用方法，能够使用nextAll()方法获取指定元素之后的所有同级元素掌握prevAll()方法的使用方法，能够使用prevAll()方法获取指定元素之前的所有同级元素掌握鼠标指针的位置坐标的获取方法，能够使用事件对象中的offsetX、offsetY、clientX和clientY属性来获取鼠标指针的位置

学习目标/Target掌握星级评价的实现方法，能够完成星级评价功能的开发掌握图像拖曳的实现方法，能够完成图像拖曳功能的开发掌握图像切换的实现方法，能够完成图像切换功能的开发

章节概述/Summary在网页设计中，合理运用图像可以提升用户体验。图像不仅能够美化页面，还能帮助用户更好地理解和记忆所呈现的信息。因此，在网页设计中，合理选择和运用图像至关重要。本章将详细讲解如何使用jQuery实现图像效果。

目录/Contents任务6.1星级评价任务6.2图像拖曳任务6.3图像切换

星级评价任务6.1

任务需求随着网购的普及，用户在完成订单后，通常可以使用评价功能对购买的商品或服务进行评价。这种评价方式可以帮助商家获得用户的反馈，以便改善用户体验和提高服务质量。星级评价是一种常见的评价方式，用户可以通过点亮特定数量的星星来表示他们的满意度。这种评价方式简单明了，星星的数量越多，代表用户越满意，同时商家也会因此获得更高的信誉度。

星级评价的开发需求如下。任务需求①初始页面中显示5个灰色的星星，表示未评价，如下图所示。

②当鼠标指针移入某个星星时，该星星及前面的星星都会被点亮。当鼠标指针移出所有星星（即鼠标指针不在任意一个星星上）时，所有星星都恢复成灰色。鼠标指针移入第3个星星和移出所有星星的效果如下图所示。任务需求

③单击某个星星即可完成评价，该星星及前面的星星都被点亮。单击某个星星后移出鼠标指针（即鼠标指针不在任意星星上），该星星及前面的星星保持被点亮的状态。鼠标指针单击第4个星星并移出所有星星的效果如下图所示。任务需求

知识储备1.removeAttr()方法先定一个小目标！掌握removeAttr()方法的使用方法，能够使用removeAttr()方法删除指定元素的一个或多个属性

知识储备1.removeAttr()方法在HTML中，每个元素都可以具有多个属性，例如id、class、href等。有时候可能需要删除指定元素的一个或多个属性，如何实现呢？

知识储备1.removeAttr()方法可以通过jQuery中的removeAttr()方法来实现。removeAttr()方法的语法格式如下。removeAttr(attributeName)attributeName表示属性名，多个属性名用空格分隔例如，$(.box).removeAttr(id)可以删除.box类的元素的id属性；$(p).removeAttr(idclass)可以删除所有p元素的id和class属性。

知识储备1.removeAttr()方法下面通过代码演示如何使用removeAttr()方法实现单击“删除属性”按钮时，删除所有p元素的style属性，示例代码如下。bodypstyle=font-weight:bold白日依山尽，黄河入海流。/ppstyle=font-weight:bold欲穷千里目，更上一层楼。/pbutton删除属性/buttonscript$(button).on(click,function(){$(p).removeAttr(style);});/script/body

知识储备1.removeAttr()方法上述示例代码运行后，使用removeAttr()方法实现的页面效果如下图所示。

知识储备1.removeAttr()方法单击“删除属性”按钮后的页面效果如下图所示。

知识储备2.nextAll()方法先定一个小目标！掌握nextAll()方法的使用方法，能够使用nextAll()方法获取指定元素之后的所有同级元素

知识储备2.nextAll()方法在网页中，如果选择了某个特定元素，可能会对其后面的元素执行特定的操作。在jQuery中，可以通过使用nextAll()方法获取指定元素之后的所有同级元素，但不包括该元素本身，其语法格式如下。nextAll([selector])可选参