CH09 jQuery特效教学课件.ppt

9.5jQuery方法链接jQuery允许在同一个元素上连续运行多条jQuery命令，这种技术成为jQuery方法链接（Chaining）。对于同一个元素，如果有多个动作需要依次执行，只需要将新的动作追加到上一个动作后面，形成一个方法链，无需每次重复查找选择相同的元素。9.5jQuery方法链接其基本语法如下：$(selector).action1().action2().action3()......actionN();9.5jQuery方法链接也可以每个动作另起一行，写法如下：前面的action动作可以任意换行，只要最后一个动作加上分号表示完成即可。jQuery会自动过滤多余的空格和折行，并按照单行方法链接进行执行。$(selector).action1().action2().action3().......actionN();9.5jQuery方法链接【例9-11】jQuery方法链接的应用9.6jQuery停止动画在jQuery中stop()方法可用于停止动画或效果。其语法结构如下：该方法中selector参数位置可以是任意有效的选择器。$(selector).stop([stopAll][,goToEnd]);9.6jQuery停止动画stop()方法中的两个参数均为可选参数，参数具体解释如下：stopAll：用于规定是否清除后续的所有动画内容，可填入布尔值。其默认值为false，表示仅停止当前动画，允许动画队列中的后续动画继续执行。goToEnd：用于规定是否立即完成当前的动画内容，可填入布尔值。其默认值为false，表示直接终止当前的动画效果。9.6jQuery停止动画【例9-12】jQuerystop()方法的应用9.7阶段案例：动态下拉菜单特效9.7.1案例需求9.7.2界面设计9.7.3逻辑实现9.7.4案例思考9.7.1案例需求背景介绍：动态下拉菜单特效在很多高校、企业等单位的门户网站上很受欢迎，当用户浏览网页时将鼠标摆放在菜单导航横栏的一级栏目上，就会有各类动画特效显示出下方的二级菜单栏目列表。功能要求：使用jQuery制作一款动态下拉菜单特效。9.7.2界面设计本案例使用无序列表ul和列表项li制作一级菜单，并为其中部分列表项制作二级菜单列表。结构如图所示。9.7.2界面设计创建一个HTML文件，文件名可自定义，例如DynamicMenu.html。在HTML5中使用nav元素声明菜单区域，在其中嵌套divid=navWrap容器实现主要内容居中并限制宽度，其内部使用ul和li元素制作一级菜单，相关代码如下：1. body2. !--菜单区域--3. nav4. !--内部区域--5. divid=navWrap6. !--菜单列表--7. ul8. liclass=mainmenuahref=#网站首页/a/li9. liclass=mainmenuahref=#菜单选项/a/li10. liclass=mainmenuahref=#菜单选项/a/li11. liclass=mainmenuahref=#菜单选项/a/li12. liclass=mainmenuahref=#菜单选项/a/li13. liclass=mainmenuahref=#菜单选项/a/li14. liclass=mainmenuahref=#菜单选项/a/li15. /ul16. /div17. /nav18. /body9.7.2界面设计使用dl和dd制作二级菜单列表项，开发者可以自行把它加入到一个或多个一级菜单的li元素内部，这里节选加到第2个li元素中查看效果，代码片段如下：1. !--菜单列表--2. ul3. liclass=mainmenuahref=#网站首页/a/li4. liclass=mainmenuahref=#菜单选项/a5. !--二级菜单--6. dlstyle=display:none;7. ddahref=#选项一/a/dd8. ddahref=#选项二/a/dd9. ddahref=#选项三/a/dd10. /dl11. /li12. liclass=mainmenuahref=#菜单选项/a/li13. liclass=main