CH08 jQuery事件教学课件.ppt

8.4.3逻辑实现在script中使用$(#sliderli).hover()监听li元素的鼠标悬浮事件，相关代码如下：1. script2. $(#sliderli).hover(function(){3. //获取当前鼠标悬浮的列表项索引值（从0开始计数）4. vari=$(#sliderli).index(this);5. //更新页面上的图片6. $(#pptImage).attr(src,image/+i+.jpg);7. });8. /script8.4.3逻辑实现在script中使用$(#sliderli).hover()监听li元素的鼠标悬浮事件，相关代码如下：1. script2. $(#sliderli).hover(function(){3. //获取当前鼠标悬浮的列表项索引值（从0开始计数）4. vari=$(#sliderli).index(this);5. //更新页面上的图片6. $(#pptImage).attr(src,image/+i+.jpg);7. });8. /script上述代码表示，当鼠标悬浮在某一个li元素上时，更换id=pptImage的img元素图片来源。其中图片文件位置本地image目录中，文件名称由索引值i传递。因为索引值是从0开始计数，所以后台存放的图片文件名按照顺序改成0.jpg-4.jpg。8.4.3逻辑实现此时本项目就已经全部完成了，运行效果如图所示。由于第三张图片为默认初始显示效果，这里不再重复展示。8.4.4案例思考【拓展练习】如果图片名称没有按照数组下标的规律命名要如何显示？【进阶改造】将风景图片换成新闻图片，改造成新闻轮播组件。本章小结本章小结本章主要介绍了jQuery事件的概念与常见用法。常用的jQuery事件根据类型可分为文档/窗口事件、键盘事件、鼠标事件和表单事件。HTML元素的事件监听也可以通过特定的方法来绑定或者解除，在jQuery1.7之后的版本中推荐使用on()和off()方法代替之前所有的事件绑定和解绑方法。本章阶段案例介绍了鼠标悬停切换图片的动态效果，使用jQuery事件绑定技术为列表项绑定了hover事件监听和图片来源的切换。Thankyou！8.3.2jQuery事件解除1. unbind()方法参数解释如下：event：可选参数，用于指定需要解除的一个或多个事件名称，例如click或clickdblclickmouseover。如果该参数不填写，则表示解除指定元素的全部事件。function：可选参数，用于规定需要解除的事件触发时的执行函数。8.3.2jQuery事件解除1. unbind()方法例如，为按钮button元素解除点击事件（鼠标左键单击），代码如下：$(button).unbind(click,function(){alert(按钮的点击事件被解除！);});8.3.2jQuery事件解除2. undelegate()方法delegate()方法可以用于给指定元素的子元素绑定一个或多个事件，其语法格式如下：$(selector).undelegate([childSelector,][event,][function])8.3.2jQuery事件解除2. undelegate()方法参数解释如下：childSelector：可选参数，用于规定需要绑定事件的一个或多个子元素。event：可选参数，用于指定需要解除的一个或多个事件名称，例如click或clickdblclickmouseover。function：可选参数，用于规定需要解除的事件触发时的执行函数。注：如果不填写任何参数，则表示解除之前使用delegate()方法绑定的全部事件。8.3.2jQuery事件解除2. undelegate()方法例如，在id=test的div元素中包含一个子元素button，其HTML页面代码如下：divid=testbutton我是按钮子元素/button/div8.3.2jQuery事件解除2. undelegate()方法使用undelegate()方法为其中的子元素button解除全部事件，代码如下：$(#test).undelegate(button);8.3.2jQuery事件解除2. undelegate()方法如果只希望解除子元素button的click()事件，代码修改如下：需要注意的是，udelegate()方法主要是用于解除之前使用delegate()方法绑定