jQuery前端开发任务驱动教程 课件 第2章 jQuery实现多样化菜单.pptx

第2章jQuery实现多样化菜单《jQuery前端开发任务驱动教程》

学习目标/Target掌握显示和隐藏元素的方法，能够使用显示和隐藏元素的方法实现页面特效掌握查找元素的方法，能够灵活应用查找元素的方法查找页面元素掌握元素索引的获取方法，能够使用index()方法获取元素索引掌握利用索引取出元素的方法，能够使用eq()方法从元素集中取出指定索引的元素掌握停止动画的方法，能够灵活应用stop()方法停止元素的动画效果

学习目标/Target掌握下拉菜单的实现方法，能够完成下拉菜单的开发掌握折叠式菜单的实现方法，能够完成折叠式菜单的开发掌握热卖展示菜单的实现方法，能够完成热卖展示菜单的开发掌握左进左出导航菜单的实现方法，能够完成左进左出导航菜单的开发

章节概述/Summary菜单是网站和应用程序的重要组成部分，可以有效地呈现网站和应用程序的信息结构。合理地设计菜单的层次结构和分类方式，可以清晰地展示不同页面或功能模块之间的关系，帮助用户了解网站的整体布局，让用户快速地访问不同的页面，降低操作难度，提高用户的使用体验。本章将详细讲解如何使用jQuery实现多样化菜单。

目录/Contents任务2.1任务2.2下拉菜单折叠式菜单任务2.3任务2.4热卖展示菜单左进左出导航菜单

下拉菜单任务2.1

任务需求为了进一步推广传统文化，某传统文化研究院正在打造一个传统文化精品展示网站，该网站将为专家、学者、传统文化爱好者等提供一个学习和交流传统文化的平台。为了提升用户体验，网站的产品经理建议使用下拉菜单的形式来优化导航栏，实现当用户将鼠标指针移入一级菜单项后，在一级菜单项的下方展示二级菜单项，让用户获得更多的选择。

任务需求一级菜单项二级菜单项传统工艺剪纸、陶瓷、刺绣传统戏剧京剧、川剧、粤剧传统节日春节、端午节、重阳节传统乐器二胡、琵琶、编钟一级菜单项以及相应的二级菜单项具体如下表所示。

任务需求下拉菜单的效果如下图所示。

知识储备1.显示和隐藏元素的方法先定一个小目标！掌握显示和隐藏元素的方法，能够使用显示和隐藏元素的方法实现页面特效

知识储备在网页开发中，经常会通过控制元素的显示和隐藏来实现页面特效。jQuery提供了用于显示和隐藏元素的方法，这些方法都支持添加动画效果，添加动画效果可以使元素在显示或隐藏时以动画的形式呈现。1.显示和隐藏元素的方法

知识储备1.显示和隐藏元素的方法方法说明show([duration][,easing][,complete])显示匹配的元素hide([duration][,easing][,complete])隐藏匹配的元素toggle([duration][,easing][,complete])切换元素的显示和隐藏jQuery中用于显示和隐藏元素的方法如下表所示。

知识储备1.显示和隐藏元素的方法下面对参数duration、easing和complete进行讲解。duration表示动画的持续时间，可设置为以毫秒为单位的动画时长（如1000），或预定的3种速度（slow、fast和normal），默认值为400。easing表示切换效果，默认值为swing（开始和结束时速度慢，中间速度快），还可以设置为linear（匀速）。complete表示在动画完成后执行的函数。

知识储备先定一个小目标！掌握查找元素的方法，能够灵活应用查找元素的方法查找页面元素2.查找元素的方法

知识储备在实际开发中，当使用jQuery选择器或其他方式获取元素后，可能还需要进一步查找与已获取元素相关的元素，此时可以使用jQuery提供的查找元素的方法。2.查找元素的方法

知识储备2.查找元素的方法方法说明children([selector])获取当前元素集中每个元素的所有直接子元素find(selector|element)获取当前元素集中每个元素的后代元素parents([selector])获取当前元素集中每个元素的祖先元素（不包含根元素）parent([selector])获取当前元素集中每个元素的直接父元素siblings([selector])获取当前元素集中每个元素的所有兄弟元素（不分前后）next([selector])获取当前元素集中每个元素紧邻的后一个兄弟元素prev([selector])获取当前元素集中每个元素紧邻的前一个兄弟元素jQuery中常用的查找元素的方法具体如下表所示。

知识储备2.查找元素的方法下面通过代码演示元素查找方法的使用方法，示例代码如下。body?divclass=parent??ul???liclass=