jQuery前端开发任务驱动教程 课件 第4章 jQuery实现页面交互（下）_第1页
jQuery前端开发任务驱动教程 课件 第4章 jQuery实现页面交互（下）_第2页
jQuery前端开发任务驱动教程 课件 第4章 jQuery实现页面交互（下）_第3页
jQuery前端开发任务驱动教程 课件 第4章 jQuery实现页面交互（下）_第4页
jQuery前端开发任务驱动教程 课件 第4章 jQuery实现页面交互（下）_第5页
已阅读5页，还剩40页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第4章jQuery实现页面交互（下）《jQuery前端开发任务驱动教程》学习目标/Target

掌握自定义动画的方法，能够灵活应用animate()方法自定义动画

掌握元素删除操作，能够灵活应用元素删除操作方法

掌握元素属性操作，能够灵活应用元素属性操作方法

掌握单击页面显示不同词语的实现方法，能够完成单击页面显示不同词语功能

的开发学习目标/Target

掌握随机抽奖的实现方法，能够完成随机抽奖功能的开发

掌握随机选图并放大的实现方法，能够完成随机选图并放大功能的开发

掌握向上滚动课程更新日志的实现方法，能够完成向上滚动课程更新日志功能

的开发章节概述/Summary第3章讲解了jQuery实现页面交互，并完成了Tab栏切换、返回页面顶部、高亮显示图像、留言板的开发。在实际开发中，使用jQuery还可以实现其他的页面交互效果，例如单击页面显示不同词语、随机抽奖、随机选图并放大等。本章将继续讲解使用jQuery实现页面交互。目录/Contents任务4.1任务4.2单击页面显示不同词语随机抽奖任务4.3任务4.4随机选图并放大向上滚动课程更新日志单击页面显示不同词语任务4.1任务需求某网站专为用户提供了一个知识分享社区，用户可以通过该网站学习和分享知识。为了增强网站的页面交互效果，提升用户的使用体验，该网站负责人想要对页面进行优化。具体需求是：当用户单击页面时，页面显示不同的词语，并且每次单击页面时，页面只显示一个词语，显示的词语会向上移动并逐渐消失。可以显示的词语包括“苹果、香蕉、雪梨、菠萝、芒果、樱桃、石榴、西瓜、荔枝、柠檬、葡萄、草莓”。任务需求单击页面显示不同词语的效果图如下图所示。知识储备1.自定义动画

先定一个小目标！掌握自定义动画的方法，能够灵活应用animate()方法自定义动画知识储备在开发过程中，当内置的动画效果无法满足用户的实际需求时，可以使用jQuery提供的animate()方法自定义动画，该方法的语法格式如下。1.自定义动画animate(properties[,duration][,easing][,complete])知识储备在animate()方法的语法格式中，各参数的具体解释如下。1.自定义动画参数properties是一个包含CSS属性的对象，在执行动画时，可以根据这些CSS属性改变元素的样式。参数duration用于指定动画的持续时间，单位为毫秒。参数easing表示切换效果，默认值为swing（开始和结束时速度慢，中间速度快），还可以设置为linear（匀速）。参数complete表示在动画完成后执行的回调函数。知识储备为了更好地掌握自定义动画的方法，下面通过代码进行演示，示例代码如下。<head><style>div{width:200px;height:200px;background-color:pink;position:relative;}</style></head>1.自定义动画知识储备<body>

<div></div>

<script>

$('div').on('mouseover',function(){

//创建自定义动画

$('div').animate({left:'+=100'},500);

});

</script></body>>>接上页代码1.自定义动画知识储备2.元素删除操作

先定一个小目标！掌握元素删除操作，能够灵活应用元素删除操作的方法知识储备元素删除是指将选中的元素或某个元素的子元素删除。jQuery提供了empty()方法和remove()方法用于删除元素。其中，empty()方法用于删除元素下的子元素，但不删除元素本身；remove()方法用于删除元素下的子元素和元素本身，该方法中可以传入可选参数selector，该参数表示选择器，用于筛选元素。2.元素删除操作知识储备为了更好地掌握元素删除操作，下面以empty()方法为例演示元素删除操作，示例代码如下。<body>

<divid="target">

<h2>这是一个标题</h2>

<p>这是一个段落</p>

<ahref="#">这是一个链接</a>

</div>

<script>

$('#target').empty();

</script></body>2.元素删除操作任务实现

先定一个小目标！掌握单击页面显示不同词语的实现方法，能够完成单击页面显示不同词语功能的开发任务实现创建D:\jQuery\chapter04目录，将jquery-3.6.4.min.js文件放入该目录，并使用VSCode编辑器打开该目录。创建pageDisplay.html文件，编写单击页面显示不同词语的页面结构并引入jquery-3.6.4.min.js文件。步骤1步骤2实现单击页面显示不同词语的开发编写单击页面显示不同词语页面的样式。编写逻辑代码，实现单击页面显示不同词语的效果。步骤3步骤4任务实现在浏览器中打开pageDisplay.html文件，并连续单击页面两次。单击页面显示不同词语的运行结果如下图所示。随机抽奖任务4.2任务需求小徐是某公司研发部门的一名前端开发工程师，主要负责公司电商网站的前端页面开发。在“双十一”来临之际，为了吸引更多的用户参与电商网站的活动，小徐需要在该电商网站的活动页面开发一个随机抽奖的功能。随机抽奖可以提高用户的参与度和互动频率，并吸引更多的潜在用户了解和关注网站。任务需求随机抽奖功能的开发需求如下。参与抽奖方式：用户通过访问网站的“双十一”预热活动页面参与抽奖活动。奖品设置：抽奖活动设定的奖品数量为8件，每件奖品通过图像展示。抽奖方式：用户单击“开始抽奖”按钮后，网站在设定的奖品中随机抽取一件。为了使抽奖过程更有吸引力，需要显示抽奖动画，动画效果为：以先慢后快的速度随机切换8件商品，以最终停留的奖品作为最终抽奖结果。任务需求随机抽奖的效果如下图所示。

先定一个小目标！掌握随机抽奖的实现方法，能够完成随机抽奖功能的开发任务实现任务实现创建randomDrawing.html文件，编写随机抽奖的页面结构并引入jquery-3.6.4.min.js文件。编写随机抽奖页面的样式。步骤1步骤2编写逻辑代码，实现随机抽奖的效果。步骤3实现随机抽奖的效果任务实现在浏览器中打开randomDrawing.html文件，并单击“开始抽奖”按钮。随机抽奖的运行结果如下图所示。随机选图并放大任务4.3任务需求某公司开发了一个摄影门户网站，该网站的主要功能是展示各种摄影图片，用户访问该网站时不仅可以欣赏摄影图片，还可以分享摄影图片、学习摄影技巧等。为了使该网站的功能更加丰富，现需要增加一个随机选图并放大的功能，该功能的具体要求如下。当用户单击页面中的“开始”按钮时，随机选择动物图像。当用户单击页面中的“停止”按钮时，将随机选择的动物图像放大显示。任务需求随机选图并放大的效果如下图所示。知识储备

先定一个小目标！掌握元素属性操作，能够灵活应用元素属性操作方法元素属性操作知识储备在网页开发中，使用元素属性操作可以动态地更新页面内容。例如，通过修改某个元素的属性，可以控制该元素的可见性或改变元素的大小、形状、颜色等属性。jQuery提供了一些元素属性操作方法，包括prop()方法、attr()方法，使用这些方法可以实现不同的元素属性操作，如下表所示。元素属性操作方法说明prop(propertyName[,value])获取或设置元素的属性值。如果只传递propertyName参数，则表示获取属性值；如果传递了value参数，则表示设置属性值attr(propertyName[,value])获取或设置标签的属性值。如果只传递propertyName参数，则表示获取属性值；如果传递了value参数，则表示设置属性值知识储备为了更好地掌握元素属性操作，下面分别演示prop()和attr()方法的使用方法，示例代码如下。<body><inputtype="checkbox"id="my_checkbox">

<ahref="#"id="my_Link">请单击此处</a>

<script>

$('#my_checkbox').prop('checked',true);

console.log($('#my_checkbox').prop('checked'));$('#my_Link').attr('href','');

console.log($('#my_Link').attr('href'));

</script></body>元素属性操作知识储备元素属性操作示例代码运行后，运行结果如下图所示。

先定一个小目标！掌握随机选图并放大的实现方法，能够完成随机选图并放大功能的开发任务实现任务实现创建selectImage.html文件，编写随机选图并放大的页面结构并引入jquery-3.6.4.min.js文件。编写随机选图并放大页面的样式。步骤1步骤2编写逻辑代码，实现随机选图并放大的效果。步骤3实现随机选图并放大的开发任务实现在浏览器中打开selectImage.html文件，首先单击“开始”按钮，然后单击“停止”按钮，单击“停止”按钮后页面会随机选择一张图并将其放大显示，随机选图并放大的运行结果如下图所示。向上滚动课程更新日志任务4.4任务需求向上滚动文字的效果在网页设计中十分常见，在页面中设计向上滚动文字的效果，可以使文字信息以滚动的方式展示，以节省页面空间，提升页面的视觉效果。某公司正在对网站的页面设计进行优化，该公司的负责人提出要求：当鼠标指针未移入课程更新日志时，课程更新日志以2秒的间隔自动向上滚动，并且每次向上滚动1条；当鼠标指针移入课程更新日志时，课程更新日志停止向上滚动。任务需求其中，需要更新的课程日志内容如下。2023-12-12SpringBean生命周期。2023-12-10MyBatis执行流程。2023-11-03Ribbon负载均衡策略。2023-10-25Spring事务失效问题。2023-09-15SpringMVC执行流程。2023-08-10MyBatis延迟加载。任务需求向上滚动课程更新日志的效果如下图所示。任务实现

先定一个小目标！掌握向上滚动课程更新日志的实现方法，能够完成向上滚动课程更新日志功能的开发任务实现创建courseRenew.html文件，编写向上滚动课程更新日志的页面结构并引入jquery-3.6.4.min.js文件。编写向上滚动课程更新日志页面的样式。步骤1步骤2编写逻辑代码，实现向上滚动课程更新日志的效果。步骤3实现向上滚动课程更新日志的开发任务实现在浏览器中打开courseRenew.html文件，向上滚动课程更

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论