《JavaScript与jQuery网页前端开发与设计-第2版》课件 CH06 jQuery入门； CH07 jQuery选择器与过滤器；CH08 jQuery事件.ppt

8.2.3鼠标事件4. mousexxx()系列事件【例8-9】jQuery键盘事件mouse系列的简单应用48.2.3鼠标事件5. toggle()事件toggle()事件可以看作是一种特殊的鼠标点击事件，可以一次绑定两个或两个以上函数。当元素被鼠标点击时，会按照先后顺序每次只触发其中一个函数。8.2.3鼠标事件5. toggle()事件其语法格式如下：其中function1-N可以替换成需要触发的若干个函数，函数之间用逗号隔开即可。$(selector).toggle(function1,function2,…functionN)8.2.1文档/窗口事件1. ready()事件由于ready()事件只用于当前文档，因此也可以省略选择器将其精简为以下两种格式：需要注意是，ready()事件不要与body元素的onload属性一起使用，以免产生冲突。$().ready(function)或者$(function)8.2.1文档/窗口事件1. ready()事件【例8-1】jQueryready()事件的简单应用8.2.1文档/窗口事件2. load()事件当页面中指定的元素被加载完毕时会触发load()事件。该事件通常用于监听具有可加载内容的元素，例如图像元素img、内联框架iframe等。其语法格式如下：其中参数function为必填内容，表示元素加载完毕时需要执行的函数。$(selector).load(function)8.2.1文档/窗口事件2. load()事件例如：上述代码表示当图像元素img中的图片资源加载完毕时弹出提示框。$(img).load(function(){alert(图像已经加载完毕！);});8.2.1文档/窗口事件2. load()事件【例8-2】jQueryload()事件的简单应用8.2.1文档/窗口事件3. unload()事件当用户离开当前页面时会触发unload()事件，该事件只适用于window对象。可能导致触发unload()事件的行为如下： 关闭整个浏览器或当前页面； 在当前页面的浏览器地址栏中输入新的URL地址并进行访问； 使用浏览器上的前进或后退按钮；?点击浏览器上的刷新按钮或当前浏览器支持快捷方式刷新页面； 点击当前页面中的某个超链接导致跳转新页面。8.2.1文档/窗口事件3. unload()事件其语法格式如下：其中参数function为必填内容，表示离开页面时需要执行的函数。$(window).unload(function)8.2.1文档/窗口事件3. unload()事件例如：$(window).unload(function(){alert(您已经离开当前页面，再见！);});8.2.1文档/窗口事件3. unload()事件需要注意是，在实践中发现在不同浏览器中unload()事件的兼容情况不是很理想，例如在IE9+或Chrome浏览器中仅有刷新会触发该事件，关闭浏览器时无任何响应。与此同时，jQuery官方也宣布在jQuery3.0之后的版本将彻底取消对unload()事件的支持，因此不建议将该事件运用于未来的实践开发中。8.2.1文档/窗口事件3. unload()事件【例8-3】jQueryunload()事件的简单应用8.2.2键盘事件键盘按键的敲击可以分解为两个过程：1.按键被按下去；2.按键被松开。这两个动作分别触发或组合的jQuery键盘事件如表所示。8.2.2键盘事件以上三种键盘事件的选择器均可以是$(document)或者文档中的HTML元素。如果直接在文档上设置，则无论元素是否获取了焦点都会触发该事件；如果是指定了选择器，则必须在该选择器指定的元素获得焦点的状态下才会触发该事件。8.2.2键盘事件1. keydown()事件当键盘上的按键处于按下状态时将触发keydown()事件，其语法格式如下：$(selector).keydown(function)8.2.2键盘事件1. keydown()事件例如：上述代码表示当用户在表单的文本框input元素中输入内容时触发keydown()事件。$(input:text).keydown(function(){alert(按键被按下！);});8.2.2键盘事件2.keyup()事件当键盘上已经被按下去的按键处于被释放的状态将触发keyup()事件，其语法格式如下：$(selector).ke