项目10 jQuery的事件与动画.pptx

项目10jQuery的事件与动画

02任务10.2jQuery动画01任务10.1jQuery事件目录

任务10.1jQuery事件事件解绑3jQuery事件1事件的绑定2切换事件5事件对象4

10.1.1jQuery事件jQuery对JavaScript的事件进行了封装，编写程序时不必再考虑浏览器的兼容性。jQuery库封装了JavaScript的常用事件，以方便开发者很便捷地绑定这些事件。

10.1.2事件的绑定1.通过事件方法绑定例如click()change()等$(选择器).事件名(function(){事件处理代码;});事件绑定的几种方法：2.通过on()绑定事件3.通过bind()方法绑定事件4.通过one()方法绑定一次事件

10.1.2事件的绑定1.事件：事件类型事件名称描述页面加载响应事件ready(fn)当DOM载入就绪可以查询及操纵时绑定一个要执行的函数鼠标事件click(fn)鼠标单击事件dbclick(fn)鼠标双击事件mouseover(fn)鼠标（指针）移入事件mouseout(fn)鼠标（指针）移出事件mousedown(fn)鼠标按下事件mouseup(fn)鼠标松开事件mousemove(fn)鼠标移动事件表单事件blur(fn)当元素失去焦点时触发focus(fn)当元素获取焦点时触发change(fn)当元素的值发生改变时触发select(fn)当文本框中的文本被选中时触发submit(fn)当表单提交时触发键盘事件keydown(fn)键盘按下按键时触发keypress(fn)键盘按下除Shift、Fn、CapsLock等非字符按键外的按键触发keyup(fn)键盘按键弹起时触发浏览器事件scroll(fn)浏览器窗口滚动条发生变化时触发resize(fn)浏览器窗口的大小发生改变时触发表10-1jQuery常用事件方法

10.1.2事件的绑定2.on()方法：on()方法用于在匹配元素上绑定一个或多个事件处理函数，格式如下：$(选择器1).on(事件名,$(选择器2)[,数据对象]function(){事件处理代码;});选择器1一般为选择器2的父元素；事件名表示一个或多个用空格分隔的事件类型，如click；选择器2为子元素选择器；数据对象为可选参数，一般是需要传递到处理函数的参数，function为绑定在元素身上的监听函数。

10.1.2事件的绑定3.bind()方法：bind()方法也是为每一个选择元素的事件绑定一个或多个处理函数，格式如下：$(选择器).bind(事件名,[数据对象],function(){事件处理代码;});对比两种方法的不同点：①bind()方法只能针对已经存在的元素进行事件的设置，但是on()方法支持未来新添加元素的事件设置。②on()方法可以指定具体的子元素，bind()方法只能绑定选择器元素。③bind()是jQuery1.7之前的版本推荐使用的，当jQuery1.7版本后开始推荐使用on()方法。

10.1.2事件的绑定4.one()方法：使用one()方法为指定选择器元素添加一个“只触发一次”的事件，格式如下：使用one()方法为所有符合指定选择器的后代元素添加一个“只触发一次”的事件，格式如下：$(选择器).one(事件名,[数据对象],function(){事件处理代码;});$(#btn).one(click,function(){alert(只弹出一次的警告框!);});$(选择器).one(事件名,[选择器2[,数据对象],]function(){事件处理代码;});$(div).one(click,p,function(){alert($(this).text());});

10.1.3事件的解绑1.解绑一个事件通过选择器查找元素后，解绑存在的一事件名，格式如下：$(选择器).off(事件名);$(.current).off(click);//将类名为current元素的单击事件解绑2.解绑多个事件通过选择器查找元素后，解绑存在的多个事件名，格式如下：$(选择器).off(事件名1事件名2…);$(.current).off(mouseovermouseout);//将类名为current元素的鼠标进入和退出事件解绑3.解绑所有事件通过选择器查找元素后，不需要传递事件名，将元素绑定的所有事件解绑。格式如下：$(选择器).off();$(.current).off();//将类名为current元素的所有事件解绑

10.1.4事件对