第四章 JQuery中的件和动画.ppt

第四章JQuery中的事件和动画 Team：李小林、石玉坪、龚娟、蒋凤、黄富贵、万正春、徐云行、侯雨阳、谷玉龙、冯幸 回 顾 在上一章节中主要学习了节点，现在我们来回顾一下： DOM是什么？ DOM分为哪几类？ 本章任务 了解JQuery中JavaScript与Html的交互 重点掌握JQuery中的事件 了解掌握JQuery中的动画 案例研究 - 视频效果展示 预习检查 JQuery中用什么方法来来实现事件的绑定？ JQuery中合成事件的方法有哪两个？ JQuery中最基本的动画方法有几个？是什么方法？ JQuery中怎样自定义动画方法？ JQuery中专门用于交互的其他方法有哪些？ 本章任务(一) JQuery中的事件 加载DOM 合成事件 事件冒泡 事件对象的属性（作用） 首先我们来了解一下这些方法和他的作用： (1)event.type()方法 (2)event.preventDefault()方法 (3)event.stopPropagation()方法 (4)event.target()方法 (5)event.relatedTarget()方法 (6)event.pageX()方法/event.pageY()方法 (7)event.which()方法 (8)event.metaKey()方法 (9)event.originalEvent()方法 事件对象的属性（详解） 首先我们来了解一下它的事件和属性： (1)event.type()方法 (2)event.preventDefault()方法 (3)event.stopPropagation()方法 (4)event.target()方法 (5)event.relatedTarget()方法 事件对象的属性（详解） (6)event.pageX()方法/event.pageY()方法 (7)event.which()方法 (8)event.metaKey()方法 (9)event.originalEvent()方法 移除事件（实例） 移除事件(实例) 事件的模拟操作 事件的其他操作 Bind()方法回顾 本章任务(二) JQuery中的动画 Show()方法和Hide()方法 Show()方法的用法 语法: $(”element”).show(); 速度参数： (1)$(“element”).show(“slow”)；//默认时间为600毫秒 (2)$(“normal”).show(“slow”)；//默认时间为400毫秒 (3)$(“fast”).show(“slow”)；//默认时间为200毫秒 (4)$(“fast”).show(数字)；//任意数字，单位为毫秒 注意：参数双引号的使用 Hide()方法的用法 语法;$(“element”).hide(); Show()方法和Hidden()方法的作用：显示和隐藏 Show()方法和Hide()方法 综合列子 html xmlns=/1999/xhtml head title/title script src=js/jquery-1.4.1-vsdoc.js type=text/javascript/script script type=text/javascript $(document).ready(function() { $(#panel h5.head).toggle(function() { $(this).next(div.content).hide(); },function(){ $(this).next(div.content).show(); }); }); /script /head body div id=panel h5 class=“head”查看书籍/h5 div class=contentimg src=images/BookCovers/9787900635280.jpg //div /div /body /html Show()方法和Hide()方法 运行效果：查看图书 fideIn()、fideOut() 作用：改变元素的不透明度 fideIn()方法：降低元素的不透明