JavaScript+jQuery Web前端开发技术（微课版）课件 学习单元8：JavaScript框架之jQuery应用

学习单元8

JavaScript框架之jQuery应用任务8.1

为网页添加定时广告特效——jQuery基础任务8.2

为网页添加轮播图特效——jQuery应用JavaScript框架之jQuery应用任务8.1为网页添加定时广告特效——jQuery基础jQuery的优势任务8.2为网页添加轮播图特效——jQuery应用初识jQueryjQuery元素处理元素获取jQuery动画特效jQuery事件机制jQuery版本对比jQuery库文件的引入方式jQuery对象初识jQueryjQuery是一个语法简洁并兼容多浏览器的JavaScript类库。由约翰·瑞思格（JohnResig）于2006年1月创建的开源项目。核心理念是Writeless,domore（写得更少，做得更多）。jQuery是免费、开源的。任务8.1为网页添加定时广告特效——jQuery基础（1）轻量级（2）强大的选择器（3）更少的代码（4）出色的DOM封装（5）可靠的事件处理机制（6）封装好的AJAX函数（7）解决了浏览器的兼容性问题（8）隐式迭代（9）拥有丰富的插件（10）开源jQuery优势任务8.1为网页添加定时广告特效——jQuery基础目前jQuery有3个主要的大版本：jQuery1.x系列的经典版本保持了对早期浏览器的支持，使用较为广泛，最终版本是jQuery1.12.4；jQuery2.x系列的版本不再兼容IE6～IE8浏览器，从而更加轻量级，最终版本是jQuery2.2.4；jQuery3.x系列的版本不兼容IE6～IE8浏览器，此系列的版本增加了一些新方法，对一些方法的行为进行了优化和改进。目前jQuery1.x和jQuery2.x系列的版本已停止更新，除非有特殊需求，否则一般不会使用这两大版本，本课程选择使用jQuery3.x。jQuery版本对比任务8.1为网页添加定时广告特效——jQuery基础1.引入本地下载的jQuery库文件

jQuery库文件的引用有两种方式：本地下载的jQuery库文件不需要安装，直接将下载的jQuery库文件复制到项目的指定位置，当使用该文件时，直接在网页头部进行引用即可。例如，将jQuery库文件jquery-3.7.1.min.js和引用库文件的网页放置到同一个目录下，则网页中引用jQuery库文件的语句参考如下：<scriptsrc="jquery-3.7.1.min.js"></script>jQuery库文件的引入方式任务8.1为网页添加定时广告特效——jQuery基础2.引入在线的jQuery库文件

jQuery库文件的引用有两种方式：引入在线的jQuery库文件时，用户无须下载，通过CDN引入即可。例如，在网页中引入jQuery官网的在线jQuery库文件的语句参考如下：<scriptsrc="/jquery-3.7.1.min.js"></script>jQuery库文件的引入方式任务8.1为网页添加定时广告特效——jQuery基础jQuery对象与DOM对象

DOM对象指的是普通的JavaScript对象，而jQuery对象则是包装DOM对象后产生的对象。jQuery对象的作用是通过自身提供的一系列快捷功能来降低DOM操作的复杂度，提高程序的开发效率，同时解决不同浏览器间的兼容性问题。jQuery对象任务8.1为网页添加定时广告特效——jQuery基础全局变量：$和jQuery将jQuery库文件引入后，在全局作用域下会增加“$”和“jQuery”两个全局变量，这两个全局变量引用的是同一个对象，称为jQuery顶级对象。在代码中可以使用jQuery代替$，但一般为了方便，通常都直接使用$。例如，利用jQuery技术获取页面上的“div”元素，并将该元素设置为隐藏，参考代码如下：

$("div").hide();jQuery("div").hide();jQuery对象任务8.1为网页添加定时广告特效——jQuery基础创建jQuery对象

jQuery顶级对象类似于构造函数，用来创建jQuery实例化对象（简称jQuery对象），但它不需要使用new进行实例化，其内部会自动进行实例化，返回实例化后的对象。用户可以为$()传入一个参数来创建一个jQuery对象，也可以利用$直接调用jQuery静态方法：例如：console.log($("div"));//利用$(参数)创建jQuery对象console.log($.trim("HeBei"));//利用$直接调用jQuery静态方法trim()jQuery对象任务8.1为网页添加定时广告特效——jQuery基础jQuery代码的书写位置

jQuery代码需要写在要操作的DOM元素的后面，确保DOM元素已经加载后，再运行jQuery代码。如果将jQuery代码写在DOM元素前面，则代码不会生效。例如：运行结果：jQuery对象任务8.1为网页添加定时广告特效——jQuery基础上述代码目的是通过jQuery代码实现修改div元素内容的目的，但运行程序查看结果，div的内容并没有被修改。究其原因是因为jQuery没有找到div元素。//语法格式1$(document).ready(function(){//页面DOM加载后执行的代码

});如果一定要将jQuery代码写在DOM元素的前面，则可以利用jQuery中的页面加载事件方法来解决，常用的语法格式有以下三种：//语法格式2$().ready(function(){//页面DOM加载后执行的代码

});jQuery对象任务8.1为网页添加定时广告特效——jQuery基础//语法格式3$(function(){//页面DOM加载后执行的代码});对前面案例进行如下两种方式修改，程序都能得到正确结果：页面加载事件利用页面加载事件修改：修改代码顺序：运行结果：jQuery对象任务8.1为网页添加定时广告特效——jQuery基础需要注意的是，虽然jQuery页面加载事件与window.onload的功能类似，但是两者在使用时有一定的区别。window.onload与jQuery页面加载事件对比对比项window.onload$(document).ready()执行时机必须等待网页中的所有内容（包括外部资源，如图片）加载完成后才能执行网页中的所有DOM结构绘制完成后就执行（可能关联内容并未加载完成）编写个数不能编写多个事件处理函数能够编写多个事件处理函数简化写法无$()jQuery对象任务8.1为网页添加定时广告特效——jQuery基础

为吸引用户关注，广告以慢慢下滑的方式显示；广告会占用页面较大篇幅，为避免引起用户反感，为广告设置3s后以慢慢上滑的方式进行隐藏的特效，或者为广告设置大幅广告慢慢隐藏、小幅广告慢慢显示并停留在页面上的特效。任务8.1为网页添加定时广告特效任务描述任务分析为一个运行的网站添加广告特效，快捷、高效是开发者关注的重点。相对于JavaScript而言，jQuery通过对JavaScript的函数进行封装，使得语法更加简洁，同时解决了很多浏览器的兼容性问题。本任务选用jQuery替代JavaScript。任务会讲解如何下载、安装、配置jQuery环境，利用jQuery实现广告定时显示与隐藏，或者定时进行大幅广告、小幅广告的切换。任务8.1为网页添加定时广告特效1.下载jQuery2.配置运行环境3.引入jQuery库文件4.为页面添加广告图片5.为广告图片设置CSS样式任务实施任务8.1为网页添加定时广告特效6.引入广告样式文件7.为广告添加显示与隐藏特效18.引入广告特效的JavaScript代码9.为广告添加显示与隐藏特效210.测试运行文件任务实施任务8.1为网页添加定时广告特效

在程序开发过程中，经常需要对HTML元素进行操作，在操作前必须先准确地找到对应的DOM元素。为此，jQuery提供了类似CSS选择器的机制，利用jQuery选择器可以轻松地获取DOM元素。jQuery支持CSS1.0～CSS3.0规则中几乎所有的选择器。如标签选择器、类选择器、ID选择器、后代选择器等，使用$()或jQuery()可以非常方便地获取需要操作的DOM元素。语法格式如下$(selector)或jQuery(selector)如$("div")表示获取DOM元素中的所有<div>元素。根据选择器获取元素方式的不同，可将选择器大致分为基本选择器、层级选择器、筛选选择器、内容选择器、可见性选择器、属性选择器、子元素选择器和表单选择器等。jQuery元素获取任务8.2为网页添加轮播图特效——jQuery应用jQuery基本选择器和CSS选择器非常类似，jQuery常用基本选择器如下表所示。选择器功能描述示例#id获取指定id的元素$("#lastname");//选取id为lastname的元素*匹配所有元素$("*");//选取所有元素.class获取同一类class的元素$(".intro");//选取所有class为intro的元素element获取相同标签名的所有元素$("p");//选取所有的<p>的元素el1,el2,el3选取多个元素$("h1,div,p");//同时获取所有<h1>、<div>和<p>的元素jQuery元素获取——基本选择器任务8.2为网页添加轮播图特效——jQuery应用jQuery层级选择器可以通过一些指定的符号来完成多层级元素之间的获取。选择器功能描述示例parent>child获取父元素下的所有子元素$("div>p");//获取<div>元素下的所有名称为<p>的直接子元素（一级）parentdescendant获取父元素下的所有后代元素$("divp");//获取<div>元素下的所有名称为<p>的后代元素（多级）element+next获取当前元素紧邻的兄弟元素$("div+p");//获取紧邻<div>元素的下一个名称为<p>的兄弟元素element~siblings获取当前元素后的所有兄弟元素$("div~p");//获取<div>元素后的所有名称为<p>的同级元素节点任务8.2为网页添加轮播图特效——jQuery应用jQuery元素获取——层级选择器在使用jQuery

选择器获取元素后，如果不考虑获取到的元素数量，直接对元素进行操作，则在操作时会发生隐式迭代。隐式迭代是指当要操作的元素实际上有多个时，jQuery会自动对所有的元素进行操作。【案例】利用隐式迭代的方式为所有li元素设置颜色，参考代码如下：代码截图运行结果任务8.2为网页添加轮播图特效——jQuery应用jQuery元素获取——层级选择器开发中若需要对获取的元素进行筛选，可以使用jQuery提供的基本筛选选择器完成，常用基本筛选选择器如下表所示。选择器功能描述示例:first获取指定选择器中的第一个元素$("li:first");//获取第一个<li>元素:last获取指定选择器中的最后一个元素$("li:last");//获取最后一个<li>元素:even获取索引为偶数的指定选择器中的奇数行数据，索引默认从0开始$("li:even")获取所有li元素中，索引为偶数的奇数行数据，如索引为0、2、4的第1个、第3个和第5个<li>元素:odd获取索引为奇数的指定选择器中的偶数行数据，索引默认从0开始$("li:odd")获取所有li元素中，索引为奇数的偶数行数据，如索引为1、3、5的第2个、第4个和第6个<li>元素:eq(index)获取索引等于index的元素，默认从0开始$("li:eq(3)")获取索引为3的<li>元素:gt(index)获取索引大于index的元素$("li:gt(3)")获取索引大于3的所有<li>元素:lt(index)获取索引小于index的元素$("li:lt(3)")获取索引小于3的所有<li>元素:not(seletor)获取除指定的选择器外的其他元素$("input:not(:empty)")获取所有不为空的<input>元素:focus匹配当前获取焦点的元素$("input:focus")匹配当前获取焦点的<input>元素:animated匹配所有正在执行动画效果的元素$("div:not(:animated)")匹配当前没有执行动画的<div>元素任务8.2为网页添加轮播图特效——jQuery应用jQuery元素获取——筛选选择器（1）内容选择器jQuery提供了根据内容完成指定元素的获取，常用内容过滤选择器如下表所示。选择器功能描述示例:contains(text)获取内容包含text文本的元素$("li:contains('Hello')");//获取内容包含“Hello”的<li>元素:empty获取内容为空的元素$("li:empty");//获取内容为空的<li>元素:has(selector)获取内容包含指定选择器的元素$("li:has('a')");//获取内容中包含<a>元素的所有<li>元素:parent选取带有子元素或包含文本的元素$("li:parent");//选取带有子元素或包含文本的<li>元素任务8.2为网页添加轮播图特效——jQuery应用jQuery元素获取——其他常用选择器（2）可见性选择器为了方便开发，jQuery提供了可见或隐藏元素的获取，具体如下表所示。选择器功能描述示例:hidden获取所有隐藏元素$("li:hidden");//选取所有隐藏的<li>元素:visible获取所有可见元素$("li:visible");//选取所有可见的<li>元素任务8.2为网页添加轮播图特效——jQuery应用jQuery元素获取——其他常用选择器（3）属性选择器jQuery中提供了根据元素的属性获取指定元素的方式，常用的属性选择器如表下所示。选择器功能描述示例[attr]获取具有指定属性的元素$("[href]");//选取所有带有href属性的元素[attr=value]获取属性值等于value的元素$("[href='#']");//选取所有href属性的值等于"#"的元素[attr!=value]获取属性值不等于value的元素$("[href!='#']");//选取所有href属性的值不等于"#"的元素[attr$=value]获取属性值以value结尾的元素$("[href$='.jpg']");//选取所有href属性的值以".jpg"结尾的元素[attr^=value]获取属性值以value开始的元素$("[title^='Tom']");//选取所有title属性的值以"Tom"开头的元素[attr*=value]获取属性值包含value的元素$("[title*='Tom']");//选取所有title属性值中含有"Tom"的元素任务8.2为网页添加轮播图特效——jQuery应用jQuery元素获取——其他常用选择器（4）子元素选择器开发中若需要通过子元素的方式获取元素，则可以利用jQuery提供的子元素选择器完成。选择器功能描述示例:nth-child(index/even/odd/公式)索引index默认从1开始，匹配指定index索引、偶数、奇数或符合指定公式（如2n，n默认从0开始）的子元素$("p:nth-child(2)");//获取属于其父元素的第二个子元素的所有<p>元素:first-child获取第一个子元素$("p:first-child");//选取属于其父元素的第一个子元素的所有<p>元素:last-child获取最后一个子元素$("p:last-child");//选取属于其父元素的最后一个子元素的所有<p>元素:only-child如果当前元素是唯一的子元素，则匹配$("p:only-child");//选取属于其父元素的唯一子元素的所有<p>元素:nth-last-child(n)选择所有它们父元素的第n个子元素。计数从最后一个元素开始到第一个$("p:nth-last-child(2)");//选取属于其父元素的第二个子元素的<p>元素，从最后一个子元素开始计数:nth-of-type(n)选择同属于一个父元素之下，并且标签名相同的子元素中的第n个子元素$("p:nth-of-type(2)");//获取属于其父元素的第二个<p>元素的所有<p>元素:first-of-type选择所有相同的元素名称的第一个子元素$("p:first-of-type");//选取属于其父元素的第一个<p>元素的所有<p>元素:last-of-type选择所有相同的元素名称的最后一个子元素$("p:last-of-type");//选取属于其父元素的最后一个<p>元素的所有<p>元素:only-of-type选择所有没有兄弟元素，且具有相同的元素名称的元素$("p:only-of-type");//选取属于其父元素的特定类型的唯一子元素的所有<p>元素:nth-last-of-type(n)选择属于父元素的特定类型的第n个子元素，计数从最后一个元素到第一个$("p:nth-last-of-type(2)");//选取属于其父元素的第二个<p>元素的所有<p>元素，从最后一个子元素开始计数任务8.2为网页添加轮播图特效——jQuery应用jQuery元素获取——其他常用选择器（5）表单选择器

表单在Web开发中是最常见的操作之一，为此，jQuery专门提供了操作表单元素的表单选择器，常用的表单选择器如下表所示。选择器功能描述示例:input获取页面中的所有表单元素，包含<select>以及<textarea>元素$(":input");//获取所有<input>元素:text选取所有的文本框$(":text");//获取所有type="text"的<input>元素:password选取所有的密码框$(":password");//获取所有type="password"的<input>元素:radio选取所有的单选按钮$(":radio");//获取所有type="radio"的<input>元素:checkbox选取所有的复选框$(":checkbox");//获取所有type="checkbox"的<input>元素:submit获取submit提交按钮$(":submit");//获取所有type="submit"的<input>元素:reset获取reset重置按钮$(":reset");//获取所有type="reset"的<input>元素:button获取button按钮，包括<button></button>和type="button"$(":button");//获取所有type="button"的<input>元素:image获取type="image"的图像域$(":image");//获取所有type="image"的<input>元素:file获取type="file"的文件域$(":file");//获取所有type="file"的<input>元素:enabled获取所有可用表单元素$(":enabled");//获取所有启用的元素:disabled获取所有不可用表单元素$(":disabled");//获取所有禁用的元素:selected获取所有选中的表单元素，主要针对select$(":selected");//获取所有被选中的<input>元素:checked获取所有选中的表单元素，主要针对radio和checkbox$(":checked");//获取所有被选中的<input>元素任务8.2为网页添加轮播图特效——jQuery应用jQuery元素获取——其他常用选择器任务8.2为网页添加轮播图特效——jQuery应用jQuery提供了一系列方法，用于元素的遍历、创建、添加和删除操作。1.遍历元素

jQuery具有隐式迭代的功能，当一个jQuery对象中包含多个元素时，jQuery会对这些元素进行相同的操作。如果想对这些元素进行遍历，可以使用jQuery提供的each()方法，其基本语法如下：$(selector).each(function(index，domEle){//对每个元素进行操作});$.each()方法和each()方法的用法类似，主要用于遍历数组或对象的属性，是一种用于数据处理的实用工具，具体语法如下：$.each(Object,function(index，element){//对每个元素进行操作});jQuery元素处理——元素操作例如：利用each()方法遍历元素代码运行结果任务8.2为网页添加轮播图特效——jQuery应用jQuery元素处理——元素操作在jQuery

中直接在$()函数中传入一个HTML

字符串，即可方便地动态创建一个元素。【案例】利用jQuery动态创建一个元素，并将元素输出到控制台，参考代码如下：2.创建元素任务8.2为网页添加轮播图特效——jQuery应用jQuery元素处理——元素操作3.添加元素jQuery添加元素的方式有两种，分别是内部添加和外部添加。内部添加是指在元素内部添加元素，用户可以指定在内部的最前面还是最后面添加，通过prepend()方法和append()方法来实现。外部添加指的是在目标元素的前面或者后面添加元素，可以通过before()方法和after()方法来实现。任务8.2为网页添加轮播图特效——jQuery应用jQuery元素处理——元素操作【案例】利用jQuery动态创建元素，根据需要将创建的元素添加到另一个元素的内部或者外部，参考代码如下：3.添加元素任务8.2为网页添加轮播图特效——jQuery应用jQuery元素处理——元素操作4.删除元素常用删除元素操作一般是指删除某个元素或者某个元素的子元素，jQuery中提供了相对应的两种方法，如表所示。方法功能描述empty()删除元素下的子元素，但不删除元素本身remove([selector])删除元素下的子元素和本身，可选参数选择器用于筛选元素

元素删除方法empty()仅能删除匹配元素的文本内容，而元素节点依然存在；而remove()方法则可以同时删除匹配元素本身和文本内容。此外，用户还可以通过html()方法修改元素内容，如果在参数中传入一个空字符串，也可以实现删除元素子节点的效果，如“$('ul').html('')

”。任务8.2为网页添加轮播图特效——jQuery应用jQuery元素处理——元素操作jQuery中的操作元素内容方法，主要包括html()方法、text()方法和val()方法。html()方法用于获取或设置元素的HTML内容，tex()方法用于获取或设置元素的文本内容，val()方法用来获取或设置表单元素的value值。方法功能描述html()获取第1个匹配元素的HTML内容html(htmlString)设置第1个匹配元素的HTML内容为htmlStringtext()获取所有匹配元素包含的文本内容组合起来的文本text(text)设置所有匹配元素的文本内容为textval()获取表单元素的value值val(value)设置表单元素的value值

需要注意的是，val()方法可以操作表单（select、radio和checkbox）的选中情况。当要获取的元素是<select>元素时，返回结果是一个包含所选值的数组；当要为表单元素设置选中情况时，可以传递数组参数。jQuery元素处理——元素内容操作任务8.2为网页添加轮播图特效——jQuery应用jQuery提供了两种方式用于元素样式的操作，分别是css()方法和设置类样式方法，前者通过css()方法直接操作元素样式，后者通过给元素添加或删除类名来操作的样式。例如：利用css()方法获取及设置样式参考用法如下console.log($('div').css('width'));$('div').css('width','100px');jQuery元素处理——元素样式操作任务8.2为网页添加轮播图特效——jQuery应用本次任务就是利用jQuery实现Tab栏的切换特效。案例——Tab栏的切换特效：案例描述任务8.2为网页添加轮播图特效——jQuery应用利用jQuery实现Tab栏的切换特效可以利用jQuery提供的操作元素样式的样式类的方法，通过绑定点击事件，动态显示和隐藏对应内容，从而提升用户的交互体验和信息组织效率。案例——Tab栏的切换特效：案例分析任务8.2为网页添加轮播图特效——jQuery应用1.定义HTML结构2.定义CSS样式3.利用jQuery实现交互4.测试运行案例——Tab栏的切换特效：案例实施任务8.2为网页添加轮播图特效——jQuery应用jQuery提供了一些属性操作的方法，利用这些方法可以快捷地操作元素属性，具体方法如表所示。方法功能描述attr(name)获取第一个匹配元素的自定义属性值，获取失败返回undefinedattr(name,

value)为所有匹配的元素设置一个自定义属性值attr(properties)将一个键值对形式的对象properties设置为所有匹配元素的自定义属性removeAttr(name)从每一个匹配的元素中删除一个属性prop(name)获取第一个匹配元素的属性值，获取失败返回undefinedprop(name,

value)为所有匹配的元素设置一个属性prop(properties)将一个键值对形式的对象properties设置为所有匹配元素的属性data(name)获取指定元素上存储的数据data(name,

value)设置指定元素上存储的数据例如，利用属性操作方法设置元素属性及删除元素属性参考代码如下：$('div').attr('class','second');$('div').removeAttr('class');jQuery元素处理——元素属性操作任务8.2为网页添加轮播图特效——jQuery应用事件的处理在jQuery中是一个很重要的功能。jQuery简化了事件的操作，用户可以直接调用相关事件的操作方法来实现事件的处理。页面事件、表单事件、鼠标事件以及键盘事件等，都可以用jQuery来完成。jQuery事件机制任务8.2为网页添加轮播图特效——jQuery应用

在jQuery中，实现事件注册有两种方式，一种是通过事件方法进行注册，另一种是通过on()方法进行注册。1.通过事件方法注册事件在jQuery中通过事件方法注册事件是通过调用某个事件方法，并传入事件处理函数实现事件注册。

jQuery的事件方法允许为一个事件绑定多个事件处理函数，只需多次调用事件方法，传入不同的函数即可。jQuery中的一些常用的事件方法如下表所示。jQuery事件机制——事件注册任务8.2为网页添加轮播图特效——jQuery应用jQuery事件机制——事件注册分类方法功能描述表单事件blur([[eventData],

handler])当元素失去焦点时触发focus([[eventData],

handler])当元素获得焦点时触发change([[eventData],

handler])当元素的值发生改变时触发focusin([[eventData],

handler])在父元素上检测子元素获取焦点的情况focusout([[eventData],

handler])在父元素上检测子元素失去焦点的情况select([[eventData],

handler])当文本框（包括<input>和<textarea>）中的文本被选中时触发submit([[eventData],

handler])当表单提交时触发键盘事件keydown([[eventData],

handler])按键盘按键时触发keypress([[eventData],

handler])按键盘按键（Shift、Fn、CapsLock等非字符键除外）时触发keyup([[eventData],

handler])键盘按键弹起时触发鼠标事件mouseover([[eventData],

handler])当鼠标指针移入元素或其子元素时触发mouseout([[eventData],

handler])在鼠标指针移出元素或其子元素时触发mouseenter([[eventData],

handler])当鼠标指针移入元素时触发mouseleave([[eventData],

handler])在鼠标指针移出元素时触发click([[eventData],

handler])当单击元素时触发dblclick([[eventData],

handler])当双击元素时触发mousedown([[eventData],

handler])当鼠标指针移动到元素上方，并按鼠标按键时触发mouseup([[eventData],

handler])当在元素上放松鼠标按键时会被触发浏览器事件scroll([[eventData],

handler])当滚动条发生变化时触发resize([[eventData],

handler])当调整浏览器窗口的大小时会被触发任务8.2为网页添加轮播图特效——jQuery应用

在jQuery中，如果一直对同一个元素或元素的其他关系元素（兄弟元素、父子元素）进行操作，那么可以使用“.语法”（点语法），一直写下去，这就是jQuery中的链式编程，使用链式编程可以大大减少代码量，让代码看起来更简洁。利用链式编程给表格添加隔行变色效果，以及鼠标悬停高亮效果，参考代码如下：jQuery事件机制——事件注册任务8.2为网页添加轮播图特效——jQuery应用jQuery提供的

on()方法用于为元素绑定一个或多个事件处理函数，基本语法如下：2.通过on()方法绑定事件用法1：一次绑定一个事件处理函数element.on(event,fn);用法2：一次绑定多个事件处理函数element.on({event:fn},{event:fn},…);用法3：为不同事件注册相同的事件处理函数element.on(events,fn);jQuery事件机制——事件注册任务8.2为网页添加轮播图特效——jQuery应用其中，event表示事件类型，如click、mouseover等；events表示多个事件类型，每个事件类型之间使用空格分隔；fn表示回调函数，即绑定在元素身上的监听函数。上一案例用on（）方法实现格式如下：jQuery事件机制——事件注册任务8.2为网页添加轮播图特效——jQuery应用此外，jQuery还提供了hover()方法，可以代替鼠标指针移入、移出事件，语法如下：element.hover(over,out)其中，over表示鼠标指针移入元素时执行的事件处理函数，out表示鼠标指针移出时执行的事件处理函数。利用hover()方法再次修改上例代码，运行效果与前例的相同，修改代码参考如下：jQuery事件机制——事件注册任务8.2为网页添加轮播图特效——jQuery应用jQuery中事件委托通过on()方法实现，具体用法如下：element.on(event,selector,fn)其中，event表示事件类型，selector表示子元素选择器，fn表示事件处理函数。事件委托的优势在于，可以为未来动态创建的元素注册事件，其原理是将事件委托给父元素后，在父元素中动态创建的子元素也会拥有事件。jQuery事件机制——事件委托任务8.2为网页添加轮播图特效——jQuery应用【案例】定义一个无序序列，将子元素的单击事件委托给父元素，并且新增的子元素也拥有单击事件，部分代码如下：jQuery事件机制——事件委托任务8.2为网页添加轮播图特效——jQuery应用一般情况下，为元素注册事件后，由用户或浏览器触发事件，若希望某个事件在程序中被触发，就需要手动触发这个事件。在jQuery中，事件手动触发一般有三种方式：通过事件方法实现事件触发；通过trigger()方法实现事件触发；通过triggerHandler()方法实现事件触发。jQuery事件机制——事件触发任务8.2为网页添加轮播图特效——jQuery应用（1）通过事件方法实现事件触发在jQuery中，调用事件方法不仅可以实现事件注册，还可以实现事件触发，两者的区别在于是否传入参数，传入参数表示事件注册，不传入参数表示事件触发，示例代码如下：jQuery事件机制——事件触发任务8.2为网页添加轮播图特效——jQuery应用（2）通过trigger()方法实现事件触发通过trigger()方法可以触发指定事件，修改代码参考如下：jQuery事件机制——事件触发任务8.2为网页添加轮播图特效——jQuery应用（3）通过triggerHandler()方法实现事件触发

通过事件方法和trigger()方法触发事件时，都会执行元素的默认行为，而通过triggerHandler()方法触发事件不会执行元素的默认行为。所谓元素的默认行为指的是用户发生某个动作后元素自动发生的行为。jQuery事件机制——事件触发任务8.2为网页添加轮播图特效——jQuery应用通过triggerHandler()方法触发事件，使用方法如下:jQuery事件机制——事件触发任务8.2为网页添加轮播图特效——jQuery应用

事件解除指的是移除元素所注册的事件，jQuery提供了off()方法可以移除元素上注册的事件。关于off()方法主要有以下三种常用的方式：element.off(); //解除元素上的所有事件element.off(event);//解除元素上指定的事件element.off(event,selector);//解除元素的事件委托jQuery事件机制——事件解除任务8.2为网页添加轮播图特效——jQuery应用在程序开发中，如果某个元素的某个事件只需要触发一次，传统方式是先给元素绑定事件，事件触发后再解除事件，这样实现起来比较麻烦。jQuery提供了一个one()方法，可以简单、快速地实现此功能。jQuery事件机制——事件解除任务8.2为网页添加轮播图特效——jQuery应用

jQuery提供了许多