Web前端开发—jQuery-Bootstrap02-项目2-制作在线书城后台首页导航菜单页面.pptxVIP

授课教师：时间：XX年XX月

全书目录项目1制作在线书城后台登录页面项目2制作在线书城后台首页导航菜单页面项目3制作在线书城后台图书类别管理页面项目4制作在线书城后台添加图书页面项目5制作在线书城后台图书列表页面项目6完善在线书城后台图书列表页面项目7制作在线书城后台用户信息管理页面项目8制作在线书城后台数据分析页面项目9制作在线书城前台页面

项目2制作在线书城后台首页导航菜单页面

项目2制作在线书城后台首页导航菜单页面2.1jQuery层级选择器2.2jQuery元素样式操作2.3jQuery事件处理2.4jQuery自定义动画

1．增强自身的责任感和职业道德，并强化团队协作精神。2．养成终身学习的习惯。素养目标1．掌握jQuery层级选择器的使用方法。2．掌握jQuery元素样式操作，包括获取和设置元素的CSS样式、高度、宽度和位置。3．掌握jQuery事件处理，包括绑定、解绑和主动触发事件等。4．掌握jQuery自定义动画的创建和设置方法。知识目标1．能够使用jQuery层级选择器获取相应的元素。2．能够使用jQuery对元素的样式进行操作。3．能够使用jQuery进行基本的事件处理。4．能够使用jQuery自定义灵活、丰富的动画。能力目标

好的。可以，注意单击后菜单的高亮样式要与鼠标指针移入后菜单的高亮样式一致。好的。我还觉得单击或鼠标指针移入某个一级或二级菜单时，应该让该菜单高亮显示。点击跳过情境小王，在线书城后台的登录页面制作好了吧。已经制作好了。接下来，我们将开始制作在线书城后台首页导航菜单页面。该页面包含一级和二级菜单，单击某个一级菜单，显示其对应的二级菜单，隐藏其他一级菜单对应的二级菜单；再次单击该一级菜单，隐藏其对应的二级菜单。

首先，为一级菜单和二级菜单绑定鼠标指针移入和移出事件，在事件处理函数中实现，当鼠标指针移入一级或二级菜单时，为其添加高亮样式；当鼠标指针移出一级或二级菜单时，删除其高亮样式。然后，利用jQuery层级选择器获取一级菜单，为其绑定单击事件，并设置不同事件处理函数。在第一个事件处理函数中，获取当前一级菜单对应的二级菜单，实现若当前一级菜单没有二级菜单或其对应的二级菜单是隐藏状态，则先隐藏其他已经显示的二级菜单，再显示当前一级菜单对应的二级菜单；实现若当前一级菜单对应的二级菜单是显示状态，则直接隐藏其二级菜单。在第二个事件处理函数中，移除所有一级菜单的高亮样式，为当前选中的一级菜单添加高亮样式，移除所有二级菜单的高亮样式。

接着，获取二级菜单并为其绑定单击事件，在事件处理函数中，移除所有二级菜单的高亮样式，为当前选中的二级菜单添加高亮样式。最后，在登录页面中为表单绑定表单提交事件，在事件处理函数中，阻止元素的默认行为，加载并显示首页导航菜单页面的内容。为了顺利完成首页导航菜单页面的制作，小王决定先学习jQuery的相关知识，包括jQuery层级选选择器、jQuery元素样式操作、jQuery事件处理和jQuery自定义动画。

jQuery层级选择器2.1

层级选择器以HTML元素之间的层级关系为筛选条件来获取相应的元素，主要包括：选择器使用方法描述示例后代选择器$(ancestordescendant)获取祖先元素（ancestor）中的所有后代元素（descendant），返回元素集$(divspan)，获取div元素中的所有span元素子代选择器$(parentchild)只能获取父元素（parent）的直接子元素（child），返回元素集$(divspan)，获取div元素中元素名是?span?的子元素相邻选择器$(prev+next)获取紧挨在前元素（prev）后面的同级元素（next），返回元素集$(.one+div)，获取紧挨在类名为one的元素后面的同级div元素兄弟选择器$(prev~siblings)获取兄元素（prev）后面的所有弟元素（siblings），返回元素集$(#two~div)，获取id为two的元素后面的所有同级div元素

在jQuery提供的层级选择器中，各层级选择器使用频率是否一致呢？后代选择器和子代选择器比较常用，而相邻选择器和兄弟选择器使用的频率相对较少，因为jQuery提供了更加简单的方法来代替它们。在jQuery中，可以使用next()方法代替相邻选择器，使用nextAll()方法代替兄弟选择器，示例代码：//使用next()方法获取紧挨在类名为one的元素后面的同级div元素$(.one).next(div);//使用next()方法获取紧挨在类名为one的元素后面的同级元素$(.one).next();//使用nextAll()方法获取id为two的元素后面的所有同级div