day03_jQuery.ppt

jQuery_day03,Contents,目,录,jQuery 事件注册 jQuery 事件处理 jQuery 事件对象 jQuery 拷贝对象 多库共存 jQuery 插件,能够说出4种常见的注册事件 能够说出 on 绑定事件的优势 能够说出 jQuery 事件委派的优点以及方式 能够说出绑定事件与解绑事件 能够说出 jQuery 对象的拷贝方法 能够说出 jQuery 多库共存的2种方法 能够使用 jQuery 插件,目标,TARGET,介绍jQuery中的事件,要点提示,jQuery事件导读,掌握程度：了解,1.0 jQuery事件导读,学习jQuery中的事件绑定方法on(),要点提示,jQuery事件注册,掌握程度：应用,1.1 jQuery事件注册,学习on()的事件委派,要点提示,jQuery事件委派,掌握程度：应用,1.1 jQuery事件注册,1、on()可以一次绑定多个事件，也可以多次为同一个事件添加多个逻辑。$(div).on(mouseenter mouseleave,function()$(this).toggleClass(current););2、on()可以做事件委派，就是给未来动态创建出来的子元素绑定事件$(ol).on(click,li,function()alert(11);),1.1 jQuery事件注册,课堂问答,知识总结,完成微博发布案例,要点提示,案例：微博发布,掌握程度：应用,1.2 案例：微博发布,练习,实现微博发布案例,提示,点击发布按钮，动态创建一个小li，放入文本框的内容和删除按钮，并且添加到ul 中。点击的删除按钮，可以删除当前的微博留言。,5分钟,1.2 案例：微博发布,案例：微博发布,学会jQuery中的off()解绑事件,要点提示,jQuery事件解绑,掌握程度：应用,2.1 jQuery事件处理,1、off()可以把已经绑定在某个事件上的逻辑取消。$(div).off(click);2、one()可以绑定只触发一次的事件。$(ol).on(click,li,function()alert(11);),2.1 jQuery事件处理,课堂问答,知识总结,学会jQuery中的trigger()触发事件,要点提示,jQuery事件触发,掌握程度：应用,2.1 jQuery事件处理,学会使用jQuery中的事件对象event,要点提示,jQuery事件对象,掌握程度：应用,3.1 jQuery事件对象,1、jQuery中的事件对象兼容性更好，获取更方便，操作几乎和DOM中的event完全一样。例如：$(div).on(click,function(event)event.stopPropagation();event.preventDefault();),3.1 jQuery事件对象,课堂问答,知识总结,介绍jQuery中一些其他的方法,要点提示,jQuery其他方法导读,掌握程度：了解,4.1 jQuery其他方法导读,学会使用jQuery中的$.extend()拷贝对象,要点提示,jQuery对象拷贝(选放),掌握程度：应用,4.2 jQuery对象拷贝,学会让不同版本的jQuery多库共存,要点提示,jQuery多库共存(选放),掌握程度：应用,5.1 jQuery多库共存,学会使用瀑布流插件,要点提示,瀑布流插件,掌握程度：应用,6.1 瀑布流插件,练习,学会使用瀑布流插件,提示,下载插件在下载内容的演示案例中，复制引入相关的html/css/js修改相关内容,5分钟,6.1 瀑布流插件,瀑布流插件使用,学会使用图片懒加载插件,要点提示,图片懒加载插件,掌握程度：应用,6.2 图片懒加载插件,练习,学会使用图片懒加载插件,提示,下载插件在下载内容的演示案例中，复制引入相关的html/js修改相关图片,5分钟,6.2 图片懒加载插件,图片懒加载使用,学会使用全屏滚动插件,要点提示,全屏滚动插件(选放),掌握程度：应用,6.3 全屏滚动插件,练习,学会使用全屏滚动插件,提示,下载插件在下载内容的演示案例中，复制引入相关的html/css/js修改相关内容,5分钟,6.3 全屏滚动插件,全屏滚动插件使用,上午复习,jQuery中最好的事件绑定和解绑方法是：硬件、硬件 jQuery中事件触发的两个方法是：硬件、硬件 jQuery中拷贝对象的方法是：硬件,上午复习,上午复习,jQuery中最好的事件绑定和解绑方法是：on()、off()jQuery中事件触发的两个方法是：trigger()、triggerHandler()jQuery中拷贝对象的方法是：$.extend(),上午复习,学会bootstrap组件化开发,要点提示,bootstrap组件开发,掌握程度：应用,6.4 bootstrap组件,练习,学会bootstrap组件化开发,提示,下载bootstrap，引入css/js 文件官网查找组件内容复制到项目中,5分钟,6.4 bootstrap组件,bootstrap组件化开发,学会使用bootstrap中的JS插件,要点提示,bootstrap中的JS插件,掌握程度：应用,6.5 bootstrap中的JS插件,练习,学会使用bootstrap中的JS插件,提示,