《JavaScript程序设计》课件——项目7-5 jQuery事件和其他方法.pptx

JavaScript程序设计2021

1课程导入2任务导入3知识讲解4任务实施项目7-5jQuery事件和其他方法5任务总结

知识回顾任务导入知识讲解任务实施任务总结jQuery操作样式的方法是什么？jQuery操作类的方法是什么？jQuery动画方法有哪些？提问

知识回顾任务导入知识讲解任务实施任务总结任务重难点完成留言板案例重点：jQuery事件操作jQuery其他方法

知识回顾任务导入知识讲解任务实施任务总结jQuery事件1.jQuery事件通过事件方法绑定事件：已经用过了单个事件的绑定，是通过调用某个事件方法，传入事件处理函数来实现的，如click()、change()等。1.1事件绑定

知识回顾任务导入知识讲解任务实施任务总结jQuery事件jQuery常用事件方法：分类方法说明表单事件blur([[data],function])当元素失去焦点时触发focus([[data],function])当元素获得焦点时触发change([[data],function])当元素的值发生改变时触发focusin([data],function)在父元素上检测子元素获取焦点的情况focusout([data],function)在父元素上检测子元素失去焦点的情况

知识回顾任务导入知识讲解任务实施任务总结jQuery事件jQuery常用事件方法：分类方法说明表单事件select([[data],function])当文本框（包括input和textarea）中的文本被选中时触发submit([[data],function])当表单提交时触发键盘事件keydown([[data],function])键盘按键按下时触发keypress([[data],function])键盘按键（Shift、Fn、CapsLock等非字符键除外）按下时触发keyup([[data],function])键盘按键弹起时触发

知识回顾任务导入知识讲解任务实施任务总结jQuery事件jQuery常用事件方法：分类方法说明鼠标事件mouseover([[data],function])当鼠标指针移入对象时触发mouseout([[data],function])在鼠标指针从元素上离开时触发click([[data],function])当单击元素时触发dblclick([[data],function])当双击元素时触发mousedown([[data],function])当鼠标指针移动到元素上方，并按下鼠标按键时触发鼠标事件mouseup([[data],function])当在元素上放松鼠标按钮时，会被触发浏览器事件scroll([[data],function])当滚动条发生变化时触发resize([[data],function])当调整浏览器窗口的大小时会被触发

知识回顾任务导入知识讲解任务实施任务总结jQuery事件案例演示：div绑定事件/divscript?$(div).click(function()?{?$(this).css(background,?purple);?});?$(div).mouseenter(function()?{?$(this).css(background,?skyblue);?});/script鼠标移入事件mouseenter

知识回顾任务导入知识讲解任务实施任务总结jQuery事件通过on()方法绑定事件：on()方法绑定单个事件//一次绑定一个事件$(div).on(click,function(){$(this).css(background,yellow)});on()方法绑定一个事件

知识回顾任务导入知识讲解任务实施任务总结jQuery事件通过on()方法绑定事件：on()方法绑定多个事件//一次绑定多个事件$(div).on({mouseenter:?function()?{$(this).css(background,?skyblue);?},click:?function()?{$(this).css(background,?purple);},mouseleave:?function()?{$(this).css(background,?blue);}});on()方法绑定多个事件

知识回顾任务导入知识讲解任务实施任务总结jQuery事件通过on()方法绑定事件：on()方法绑定相同的事件处理函数//为不同事件绑定相同的事件处理函数$(div).on(mouseentermouseleave,function(){$(this).toggleClass(current);});on(