第11章 jQuery电子课件

第11章jQuery《JavaScript前端开发案例教程（第2版）》学习目标/Target

了解什么是jQuery，能够说出jQuery的特点掌握jQuery的下载和引入，能够下载jQuery并且能够使用两种方式引入jQuery掌握jQuery的简单使用，能够使用jQuery实现简单的页面效果

熟悉什么是jQuery对象，能够说出jQuery对象与DOM对象的区别掌握利用选择器获取元素的方法，能够利用选择器获取元素学习目标/Target熟悉jQuery中常用的选择器，能够根据需要选择合适的选择器掌握元素操作，能够实现元素的遍历、内容、样式等操作掌握jQuery中的页面加载事件，能够实现页面的初始化

掌握事件注册，能够使用两种方式实现事件注册

掌握事件触发，能够使用3种方式实现事件自动触发学习目标/Target

掌握事件委托，能够将子元素的事件注册到父元素上掌握事件解除，能够实现解除所有事件、解除指定事件以及解除事件委托掌握动画特效，能够利用内置动画方法和自定义动画方法实现动画特效

掌握jQuery中操作Ajax的常用方法，能够使用常用方法实现Ajax交互章节概述/Summary通过前面的学习，相信大家已经掌握了DOM、Ajax等操作，但在开发中，使用原生的DOM操作和Ajax操作非常麻烦，并且还存在浏览器兼容问题，那么如何才能使开发变得简单呢？这时就可以使用jQuery了。本章将针对jQuery的使用进行详细讲解。目录/Contents010203jQuery快速入门获取元素元素操作04事件操作目录/Contents050607动画特效jQuery操作Ajax动手实践：返回页面顶部jQuery快速入门11.1

先定一个小目标！了解什么是jQuery，能够说出jQuery的特点11.1.1什么是jQueryjQuery是一款快速、简洁、开源的JavaScript库，由约翰·瑞思格（JohnResig）等人创建。2006年1月的纽约BarCamp国际研讨会上，约翰·瑞思格首次发布了jQuery，发布后吸引了来自世界各地的众多JavaScript开发者的关注。11.1.1什么是jQuery11.1.1什么是jQueryjQuery的宗旨是“writeless，domore”（使用更少的代码，做更多的事情）。jQuery是一个轻量级的库，其代码非常小巧。语法简洁易懂，学习速度快，文档丰富。支持CSS1~CSS3定义的属性和选择器。跨浏览器，支持的浏览器包括IE和FireFox、Chrome等。插件丰富，可以通过插件扩展更多功能。特点1特点2特点3特点4特点511.1.1什么是jQueryjQuery的版本jQuery1.x系列版本：保持了对早期浏览器的支持，最终版本是jQuery1.12.4。jQuery2.x系列版本：不兼容IE6~8浏览器，从而更加轻量化，最终版本是jQuery2.2.4。jQuery3.x系列版本：不兼容IE6~8浏览器，此版本增加了一些新方法，对一些方法的行为做了优化和改进。

先定一个小目标！掌握jQuery的下载和引入，能够独立完成jQuery的下载并且能够使用两种方式引入jQuery11.1.2下载和引入jQuery11.1.2下载和引入jQueryuncompressed表示未压缩版minified表示压缩版slim表示简化版slimminified表示简化版的压缩版步骤1：在Chrome浏览器中访问jQuery下载页面。11.1.2下载和引入jQuery步骤2：单击“jQueryCore3.6.0”版本的“minified”链接，进入CodeIntegration界面。src属性是jQuery文件的引用地址。integrity属性用于通过一串校验码以防止脚本文件在传输的时候内容丢失或者被恶意修改。crossorigin属性用于配置CORS跨域请求，设为anonymous表示不发送用户凭据。11.1.2下载和引入jQuery步骤3：将整个<script>标签的代码复制到页面中使用，或者只复制脚本文件地址，在浏览器中访问该地址，将“jquery-3.6.0.min.js”文件保存在本地，然后手动引入。引入jQuery的示例代码如下。<scriptsrc="jquery-3.6.0.min.js"></script>

先定一个小目标！掌握jQuery的简单使用，能够使用jQuery实现简单的页面效果11.1.3jQuery的简单使用jQuery的基本使用大致可以分为以下3步。第1步：在页面中引入jQuery。第2步：获取要操作的元素。第3步：调用操作方法，如调用hide()方法将元素隐藏。11.1.3jQuery的简单使用

先定一个小目标！熟悉jQuery对象，能够说出jQuery对象与DOM对象的区别11.1.4jQuery对象11.1.4jQuery对象在页面中引入jQuery后，全局作用域下会新增两个变量，分别是“$”和“jQuery”，这两个变量引用的是同一个对象，称为jQuery顶级对象。为了方便书写，通常使用“$”变量。11.1.4jQuery对象通过代码演示$和jQuery的使用，示例代码如下。//$的使用$('div').hide();//jQuery的使用jQuery('div').hide();11.1.4jQuery对象jQuery顶级对象与jQuery对象的关系jQuery顶级对象类似一个构造函数，用来创建jQuery实例对象（简称jQuery对象），但它不需要使用new关键字，它的内部会自动进行实例化，返回实例化后的对象。jQuery对象的本质是jQuery顶级对象对DOM对象包装后产生的对象。jQuery对象以伪数组的形式存储，它可以包装一个或多个DOM对象。11.1.4jQuery对象通过代码对比jQuery对象和DOM对象的区别，首先在页面中定义一个<div>标签，然后执行如下代码。<script>//jQuery对象vardiv1=$('div');console.log(div1);//DOM对象vardiv2=document.getElementsByTagName('div');console.log(div2);</script>11.1.4jQuery对象分析执行结果：①表示获取到的jQuery对象，在jQuery对象中，索引为0的元素是DOM对象，length属性表示DOM对象的个数。②表示获取到的DOM对象集合，索引为0的元素表示集合中的第1个DOM对象。11.1.4jQuery对象在实际开发中，经常会在jQuery对象和DOM对象之间进行转换，因为DOM对象比jQuery对象更复杂，DOM对象的一些属性和方法在jQuery对象中没有封装，所以使用这些属性和方法时需要把jQuery对象转换为DOM对象。另外，DOM对象也可以转换为jQuery对象。11.1.4jQuery对象实现jQuery对象转换为DOM对象有两种方式：第1种方式的语法是“jQuery对象[索引]”。第2种方式的语法是“jQuery对象.get(索引)”。示例代码如下。vardiv1=$('div')[0]; //第1种方式vardiv2=$('div').get(0); //第2种方式11.1.4jQuery对象利用“$(DOM对象)”语法可以将DOM对象转换为jQuery对象，示例代码如下。//获取DOM对象vardiv=document.getElementsByTagName('div')[0];//将DOM对象转换成jQuery对象vardiv=$(div);jQuery对象和DOM对象的使用方式不同，因此在编写代码时不能混用，否则程序将会出错。注意获取元素11.211.2获取元素在程序开发中，经常需要对页面中的各种元素进行操作，在操作前必须先准确地找到元素。通过第6章的学习，大家已经掌握了如何使用原生的JavaScript获取元素，由于原生的JavaScript获取元素的代码写起来烦琐，而且兼容性情况也不一致，jQuery为我们提供了更便捷的获取元素的方式，即通过选择器获取元素。

先定一个小目标！掌握利用选择器获取元素，能够在程序中利用选择器获取元素11.2.1利用选择器获取元素jQuery提供了类似CSS选择器的机制，利用选择器可以很方便地获取元素。常用的选择器有id选择器、class选择器、标签选择器等。11.2.1利用选择器获取元素11.2.1利用选择器获取元素利用jQuery选择器获取元素的基本语法是“$(选择器)”，示例代码如下。$('#one'); //获取id为one的元素$('.two'); //获取class为two的元素$('div'); //获取标签为div的元素

先定一个小目标！熟悉jQuery中常用的选择器，能够根据需要选择合适的选择器11.2.2jQuery中常用的选择器11.2.2jQuery中常用的选择器本节介绍一些开发中可能会用到的选择器。基本选择器层次选择器筛选选择器属性选择器子元素选择器表单选择器11.2.2jQuery中常用的选择器下面列举常用的基本选择器。选择器功能描述示例#id获取指定id的元素$('#btn')获取id为btn的元素*匹配所有元素$('*')获取页面中的所有元素.class获取同一class的元素$('.tab')获取所有class为tab的元素element获取相同标签名的所有元素$('div')获取所有div元素selector1,selector2,…同时获取多个元素$('div,p,li')同时获取div元素、p元素和li元素11.2.2jQuery中常用的选择器下面列举常用的层次选择器。选择器功能描述示例parent>child获取所有子元素$('ul>li')获取ul元素下的所有li子元素selectorselector1获取所有后代元素$('ulli')获取ul元素下所有li后代元素prev+next获取后面紧邻的兄弟元素$('div+.title')获取div元素后面紧邻的class为title的兄弟元素prev~siblings获取后面的所有兄弟元素$('.bar~li')获取class为bar的元素后的所有li兄弟元素11.2.2jQuery中常用的选择器下面列举常用的筛选选择器。选择器功能描述示例:first获取指定选择器中的第一个元素$('li:first')获取第一个li元素:last获取指定选择器中的最后一个元素$('li:last')获取最后一个li元素:eq(index)获取索引等于index的元素，索引从0开始$('li:eq(2)')获取索引为2的li元素:gt(index)获取索引大于index的元素$('li:gt(3)')获取索引大于3的所有li元素:lt(index)获取索引小于index的元素$('li:lt(3)')获取索引小于3的所有li元素:even获取索引为偶数的元素$('li:even')获取索引为偶数的li元素11.2.2jQuery中常用的选择器选择器功能描述示例:odd获取索引为奇数的元素$('li:odd')获取索引为奇数的li元素:not(seletor)获取除指定的选择器外的其他元素$('li:not(li:eq(3))')获取除索引为3外的所有li元素:focus获取当前获得焦点的元素$('input:focus')获取当前获得焦点的input元素:animated获取所有正在执行动画效果的元素$('div:animated')获取当前正在执行动画的div元素:target选择由文档URI的格式化识别码表示的目标元素若URI为http://localhost/#foo，则$('div:target')将获取id为foo的div元素:contains(text)获取内容包含text文本的元素$("li:contains('js')")获取内容中含“js”的li元素11.2.2jQuery中常用的选择器选择器功能描述示例:empty获取内容为空的元素$('li:empty')获取内容为空的li元素:has(selector)获取内容包含指定选择器的元素$("li:has('a')")获取内容中含a元素的所有li元素:parent获取带有子元素或包含文本的元素$('li:parent')获取带有子元素或包含文本的li元素:hidden获取所有隐藏元素$('li:hidden')获取所有隐藏的li元素:visible获取所有可见元素$('li:visible')获取所有可见的li元素11.2.2jQuery中常用的选择器下面列举常用的属性选择器。选择器功能描述示例[attr]获取具有指定属性的元素$('div[class]')获取含有class属性的所有div元素[attr=value]获取属性值等于value的元素$('div[class=current]')获取class属性值等于current的所有div元素[attr!=value]获取属性值不等于value的元素$('div[class!=current]')获取class属性值不等于current的所有div元素[attr^=value]获取属性值以value开始的元素$('div[class^=box]')获取class属性值以box开始的所有div元素11.2.2jQuery中常用的选择器选择器功能描述示例[attr$=value]获取属性值以value结尾的元素$('div[class$=er]')获取class属性值以er结尾的所有div元素[attr*=value]获取属性值包含value的元素$("div[class*='-']")获取class属性值中含有“-”符号的所有div元素[attr~=value]获取元素的属性值包含一个value，以空格分隔$("div[class~='box']")获取class属性值等于“box”或通过空格分隔并含有box的div元素，如“tbox”[attr1][attr2]...获取同时拥有多个属性的元素$("input[id][name$='usr']")获取同时含有id属性和属性值以usr结尾的name属性的input元素11.2.2jQuery中常用的选择器下面列举常用的子元素选择器。选择器功能描述:nth-child(数字/even/odd/公式)按数字（第几个，从1开始）、偶数、奇数或公式（如2n、2n+1）获取子元素:first-child获取第一个子元素:last-child获取最后一个子元素:only-child如果当前元素是父元素唯一的子元素，则获取:nth-last-child(数字/even/odd/公式)按指定条件获取相同父元素中的子元素，计数从最后一个元素开始到第一个11.2.2jQuery中常用的选择器选择器功能描述:nth-of-type(数字/even/odd/公式)按指定条件获取相同父元素下的同类子元素:first-of-type获取同类元素中的第一个子元素:last-of-type获取同类元素中的最后一个子元素:only-of-type获取没有兄弟元素的同类子元素:nth-last-of-type(数字/even/odd/公式)按指定条件获取相同父元素下的同类子元素，计数从最后一个元素开始到第一个11.2.2jQuery中常用的选择器下面列举常用的表单选择器。选择器功能描述:input获取页面中的所有表单元素，包括select元素以及textarea元素:text获取所有的文本框:password获取所有的密码框:radio获取所有的单选按钮:checkbox获取所有的复选框11.2.2jQuery中常用的选择器选择器功能描述:submit获取提交（submit）按钮:reset获取重置（reset）按钮:image获取图像域，即<iunputtype="image">:button获取所有按钮，包括<button>和<inputtype="button">:file获取文件域，即<inputtype="file">11.2.2jQuery中常用的选择器选择器功能描述:hidden获取表单隐藏项:enabled获取所有可用表单元素:disabled获取所有不可用表单元素:checked获取所有选中的表单元素，主要针对radio和checkbox:selected获取所有选中的表单元素，主要针对select元素操作11.311.3元素操作通过前面的学习，我们已经掌握了如何利用选择器获取元素，获取元素的目的是操作元素，从而实现某些特定的功能。元素操作主要是通过jQuery提供的一系列方法来完成，下面我们将学习常见的元素操作。11.3.1元素遍历操作

先定一个小目标！掌握元素遍历操作，能够对元素进行遍历11.3.1元素遍历操作当使用“$(选择器)”语法获取到的元素有多个时，如果我们想对多个元素分别进行操作，就需要进行元素遍历操作。jQuery提供了each()方法用于快速实现元素遍历操作。11.3.1元素遍历操作$(选择器).each(function(index,domEle){具体操作});each()方法的参数是一个函数，遍历时每个元素都会调用一次这个函数。index参数表示每个元素的索引。domEle参数表示每个DOM元素对象。each()方法的基本语法格式如下。11.3.2元素内容操作

先定一个小目标！掌握元素内容操作，能够操作元素的内容11.3.2元素内容操作jQuery提供了内容操作方法，用来操作元素的内容，具体如下。html()方法text()方法val()方法11.3.2元素内容操作方法说明html()获取第1个匹配元素的HTML内容html(htmlString)设置所有匹配元素的HTML内容为htmlStringtext()获取所有匹配元素包含的文本内容组合起来的文本text(text)设置所有匹配元素的文本内容为textval()获取表单元素的value值val(value)设置表单元素的value值元素内容操作方法的具体说明如下。11.3.2元素内容操作html()方法和text()方法的区别在于：html()方法会解析HTML标签，而text()方法不会。val()方法可以操作表单元素select、radio和checkbox的选中情况。当要获取的元素是select元素时，返回结果是一个包含所选值的数组。当要为表单元素设置选中情况时，可以传递数组参数。11.3.3元素样式操作在开发中，经常需要通过设置元素的样式来美化页面，给用户带来更好的视觉体验。jQuery中有以下3种常用的样式操作。利用css()方法操作元素样式操作元素的尺寸和位置操作元素的样式类11.3.3元素样式操作

先定一个小目标！掌握利用css()方法操作元素样式，能够完成元素的样式操作11.3.3元素样式操作方法说明css(propertyName)获取第一个匹配元素的样式css(propertyName,value)为所有匹配的元素设置样式css(properties)将一个键值对形式的对象properties设置为所有匹配元素的样式使用jQuery提供的css()方法可以获取或设置元素的样式，关于css()方法的具体说明如下。11.3.3元素样式操作当css()方法接收对象作为参数时，如果属性名由两个单词组成，需要将CSS属性名中的“-”去掉，并将第2个单词首字母大写。注意css()方法参数解释：propertyName是一个字符串，表示样式属性名。value表示样式属性值。properties表示样式对象，如{color:'red'}。11.3.3元素样式操作

先定一个小目标！掌握操作元素的尺寸和位置，能够完成元素尺寸和位置的操作11.3.3元素样式操作分类方法说明尺寸width()获取第一个匹配元素的当前宽度值（返回数字型结果）width(value)为所有匹配的元素设置宽度（value可以是字符串或数字）height()获取第一个匹配元素的当前高度值（返回数字型结果）height(value)为所有匹配的元素设置高度（value可以是字符串或数字）outerWidth([includeMargin])获取匹配元素集中第一个元素的当前计算的外部宽度，includeMargin表示是否包括边距，默认为false，表示不包括outerWidth(value[,includeMargin])为所有匹配的元素设置高度为valuejQuery提供的尺寸方法用来获取或设置元素的高度和宽度，具体方法及说明如下。11.3.3元素样式操作分类方法说明位置offset()获取元素的位置，返回的是一个对象，包含left和top属性offset(coordinates)利用对象coordinates设置元素的位置，必须包含left和top属性scrollTop()和scrollLeft()获取匹配元素相对滚动条顶部和左部的位置scrollTop(value)和scrollLeft(value)设置匹配元素相对滚动条顶部和左部的位置jQuery提供的位置方法用来获取或设置元素的位置。11.3.3元素样式操作

先定一个小目标！掌握操作元素的样式类，能够完成元素的样式类操作11.3.3元素样式操作方法说明addClass(className)为每个匹配的元素追加指定类名的样式removeClass(className)从所有匹配的元素中删除全部或者指定的类toggleClass(className)判断指定类是否存在，存在则删除，不存在则添加在网页中设置样式一般是使用类操作，即定义class，jQuery也可以通过操作样式类更改元素的样式，具体操作方法及说明如下。11.3.4元素属性操作

先定一个小目标！掌握元素属性操作，能够操作元素的属性11.3.4元素属性操作方法说明attr(name)获取第一个匹配元素的自定义属性值，获取失败返回undefinedattr(name,value)为所有匹配的元素设置一个自定义属性值attr(properties)将一个键值对形式的对象properties设置为所有匹配元素的自定义属性removeAttr(name)从每一个匹配的元素中删除一个属性prop(name)获取第一个匹配元素的属性值，获取失败返回undefinedprop(name,value)为所有匹配的元素设置一个属性prop(properties)将一个键值对形式的对象properties设置为所有匹配元素的属性data(name)获取指定元素上存储的数据data(name,value)设置指定元素上存储的数据jQuery中的一些常用的元素属性操作方法，具体如下。11.3.4元素属性操作当用户操作表单元素（如select、radio）时，如果表单元素的选中状态发生了改变，使用attr()方法无法获取，此时推荐使用prop()方法。注意对元素属性操作方法的解释：参数name表示属性名，value表示属性值。data()方法还可以读取以data-开头的属性。11.3.5元素查找和过滤操作

先定一个小目标！掌握元素查找和过滤操作，能够快速查找和过滤元素11.3.5元素查找和过滤操作分类方法说明查找方法find(selector|ele)获取当前匹配元素集中每个元素的后代，通过选择器（selector）或元素（ele）过滤parents([selector])获取当前匹配元素集中每个元素的祖先元素（不包含根元素）parent([selector])获取当前匹配元素集中每个元素的父元素siblings([selector])获取匹配元素集中每个元素的兄弟元素（不分前后）next([selector])获取匹配元素集中每个元素紧邻的后一个兄弟元素prev([selector])获取匹配元素集中每个元素紧邻的前一个兄弟元素列举一些常用的元素查找方法，具体说明如下。11.3.5元素查找和过滤操作分类方法说明过滤方法eq(index)获取索引（index）对应的元素filter(selector|obj|ele|fn)使用选择器（selector）、对象（obj）、元素（ele）或函数（fn）完成指定元素的筛选hasClass(class)检查当前的元素是否含有某个特定的类（class），如果有，返回true，否则返回falseis(selector|obj|ele|fn)根据选择器（selector）、对象（obj）、元素（ele）或函数（fn）检查当前匹配的一组元素，如果这些元素中至少有一个与给定的参数匹配，则返回true。has(selector|ele)保留包含特定后代的元素，去掉那些不含有特定后代的元素列举一些常用的元素过滤方法，具体说明如下。11.3.6元素追加操作

先定一个小目标！掌握元素追加操作，能够实现元素的追加11.3.6元素追加操作元素追加指的是在现有的元素中进行子元素或兄弟元素的添加，jQuery提供了元素追加的方法，可以帮助我们快速实现元素的追加。分类方法说明追加子元素append(content|fn)将参数指定的内容（content）插入匹配元素集中每个元素内部的末尾prepend(content|fn)将参数指定的内容（content）插入匹配元素集中每个元素内部的开头appendTo(target)将匹配元素集中的每个元素插入目标（target）元素内部的末尾prependTo(target)将匹配元素集中的每个元素插入目标（target）元素内部的开头追加兄弟元素after(content|fn)在匹配元素集中的每个元素之后插入由参数指定的内容（content）before(content|fn)在匹配元素集中的每个元素之前插入由参数指定的内容（content）insertAfter(target)在目标（target）元素之后插入匹配元素集中的每个元素insertBefore(target)在目标（target）元素之前插入匹配元素集中的每个元素11.3.6元素追加操作下面列举一些常用的元素追加方法，具体说明如下。11.3.6元素追加操作对元素追加操作方法的解释：参数content可以是DOM元素、文本节点、元素集合、HTML字符串或jQuery对象。参数fn是回调函数，通过返回值传入内容（content）。参数target表示目标元素，可以传入选择器、HTML字符串、DOM元素、元素集合或jQuery对象。11.3.7元素替换操作

先定一个小目标！掌握元素替换操作，能够实现元素的替换11.3.7元素替换操作方法说明replaceWith(newContent)将所有匹配的元素替换成新内容，参数newContent表示新内容，可以是HTML字符串、DOM元素、元素数组或jQuery对象replaceAll(selector)用匹配的元素替换掉所有选择器（selector）匹配到的元素元素替换是指将选中的元素替换为指定的元素，关于元素替换操作的方法和说明如下。11.3.8元素删除操作

先定一个小目标！掌握元素删除操作，能够删除指定的元素11.3.8元素删除操作方法说明empty()删除元素下的子元素，但不删除元素本身remove([selector])删除元素下的子元素和本身，可选参数选择器（selector）用于筛选元素关于元素删除操作的方法和说明如下。11.3.9元素复制操作

先定一个小目标！掌握元素复制操作，能够实现元素的复制11.3.9元素复制操作在开发中，当我们进行元素追加操作，将匹配元素插入到目标的末尾或者开头时，通常是移动匹配元素的位置，若要实现不移动位置，且能实现将匹配元素插入到目标中时，可以配合jQuery提供的元素复制的方法来实现。11.3.9元素复制操作element.clone([Events][,deepEvents])Events表示是否复制元素的事件处理程序和数据，默认为false，若该参数为true，将复制事件处理程序和数据。deepEvents表示是否深层复制，即是否复制元素的子元素的事件处理程序和数据。clone()方法用于快速实现元素的复制，其语法格式如下。事件操作11.411.4事件操作事件的处理在JavaScript中是一个很重要的功能。jQuery简化了事件的操作，我们可以直接调用相关事件的操作方法来实现事件的处理。对于页面加载事件、表单事件、鼠标事件以及键盘事件等，都可以用jQuery来完成。

先定一个小目标！掌握页面加载事件，能够利用jQuery中的页面加载事件实现页面的初始化11.4.1页面加载事件页面加载事件用来实现页面的初始化。一般情况下，使用jQuery操作DOM元素时，为了确保jQuery代码能够生效，要将jQuery代码写在DOM元素后面，否则代码不会生效。如果一定要将jQuery代码写在DOM元素前面，就需要使用页面加载事件来实现。11.4.1页面加载事件jQuery中的页面加载事件方法有3种语法格式，具体如下。11.4.1页面加载事件$(document).ready(function(){}); //语法格式1$().ready(function(){}); //语法格式2$(function(){}); //语法格式3虽然window.onload与jQuery页面加载事件的功能类似，但是两者在使用时有一定的区别。11.4.1页面加载事件对比项window.onload$(document).ready()执行时机必须等待网页中的所有内容（包括外部资源，如图片）加载完成后才能执行网页中的所有DOM结构绘制完成后就执行（可能关联内容并未加载完成）编写个数不能编写多个事件处理函数能够编写多个事件处理函数简化写法无$()11.4.2事件注册在jQuery中，事件注册有以下两种方式。通过事件方法进行事件注册。通过on()方法进行事件注册。

先定一个小目标！掌握通过事件方法实现事件注册，能够完成事件的注册11.4.2事件注册11.4.2事件注册jQuery的事件方法在jQuery中通过事件方法实现事件注册是通过调用某个事件方法，并传入事件处理函数实现事件注册。jQuery的事件方法和DOM中的事件相比，省略了开头的“on”，如jQuery中的click()对应DOM中的onclick事件。jQuery中的事件方法允许多次调用从而为一个事件注册多个事件处理函数。11.4.2事件注册下面列举jQuery中一些常用的事件方法，具体说明如下。分类方法说明表单事件blur([[eventData],handler])当元素失去焦点时触发focus([[eventData],handler])当元素获得焦点时触发change([[eventData],handler])当元素的值发生改变时触发focusin([[eventData],handler])在父元素上检测子元素获取焦点的情况focusout([[eventData],handler])在父元素上检测子元素失去焦点的情况select([[eventData],handler])当文本框（包括<input>和<textarea>）中的文本被选中时触发submit([[eventData],handler])当表单提交时触发11.4.2事件注册分类方法说明键盘事件keydown([[eventData],handler])按键盘按键时触发keypress([[eventData],handler])按键盘按键（Shift、Fn、CapsLock等非字符键除外）时触发keyup([[eventData],handler])键盘按键弹起时触发11.4.2事件注册分类方法说明鼠标事件mouseover([[eventData],handler])当鼠标指针移入元素或其子元素时触发mouseout([[eventData],handler])在鼠标指针移出元素或其子元素时触发mouseenter([[eventData],handler])当鼠标指针移入元素时触发mouseleave([[eventData],handler])在鼠标指针移出元素时触发click([[eventData],handler])当单击元素时触发dblclick([[eventData],handler])当双击元素时触发mousedown([[eventData],handler])当鼠标指针移动到元素上方，并按鼠标按键时触发mouseup([[eventData],handler])当在元素上放松鼠标按键时会被触发11.4.2事件注册分类方法说明浏览器事件scroll([[eventData],handler])当滚动条发生变化时触发resize([[eventData],handler])当调整浏览器窗口的大小时会被触发handler表示触发事件时执行的事件处理函数。eventData表示为事件处理函数传入的数据，可以使用“事件对象.data”获取该数据。

先定一个小目标！掌握通过on()方法实现事件注册，能够完成事件的注册11.4.2事件注册11.4.2事件注册jQuery提供的on()方法用于为元素注册一个或多个事件处理函数，用法如下。//用法1：一次注册一个事件element.on(event,fn);//用法2：一次注册多个事件element.on({event:fn},{event:fn},…);//用法3：为不同事件注册相同的事件处理函数element.on(events,fn);event表示事件类型，如click、mouseover等。events表示多个事件类型，每个事件类型使用空格分隔。fn表示回调函数，即事件处理函数。11.4.2事件注册jQuery提供了hover()方法，可以代替鼠标指针移入和移出事件，语法如下。多学一招：hover()方法element.hover(over,out)over表示鼠标指针移入元素时执行的事件处理函数。out表示鼠标指针移出时执行的事件处理函数。

先定一个小目标！掌握事件触发，能够使用3种方式实现事件触发11.4.3事件触发11.4.3事件触发一般情况下，为元素注册事件后，由用户或浏览器触发事件，若希望某个事件在程序中被触发，就需要手动触发这个事件。jQuery中，实现事件手动触发有以下3种方式。通过事件方法实现事件触发。通过trigger()方法实现事件触发。通过triggerHandler()方法实现事件触发。11.4.3事件触发在jQuery中，调用事件方法不仅可以实现事件注册，还可以实现事件触发，两者的区别在于是否传入参数，传入参数表示事件注册，不传入参数表示事件触发，示例代码如下。//事件注册$('div').click(function(){alert('Hello');});//事件触发$('div').click();11.4.3事件触发使用trigger()方法可以触发指定事件，示例代码如下。//事件注册$('div').click(function(){alert('Hello');});//事件触发$('div').trigger('click');11.4.3事件触发通过事件方法和trigger()方法触发事件时，都会执行元素的默认行为，而通过triggerHandler()方法触发事件不会执行元素的默认行为。元素的默认行为指的是用户发生某个动作后元素自动发生的行为，例如，文本框获取焦点时有光标闪烁的现象。11.4.3事件触发下面演示triggerHandler()方法的使用。<body><inputtype="text"><script>//注册获取焦点事件$('input').focus(function(){$(this).val('123456')});//触发获取焦点事件$('input').triggerHandler('focus');</script></body>

先定一个小目标！掌握事件委托，能够将子元素的事件注册到父元素上11.4.4事件委托11.4.4事件委托事件委托指的是把原本要给子元素注册的事件委托给父元素，也就是将子元素的事件注册到父元素上。jQuery中事件委托通过on()方法来实现，具体用法如下。element.on(event,selector,fn)event表示事件类型，selector表示子元素选择器，fn表示事件处理函数。事件委托的优势在于，可以为未来动态创建的元素注册事件，其原理是将事件委托给父元素后，在父元素中动态创建的子元素也会拥有事件。11.4.4事件委托通过代码演示如何实现事件委托，示例代码如下。<ul><li>我是第1个li</li><li>我是第2个li</li><li>我是第3个li</li></ul><script>$('ul').on('click','li:first-child',function(){alert('单击了第1个li’);});</script>

先定一个小目标！掌握事件解除，能够实现解除所有事件、解除指定事件以及解除事件委托11.4.5事件解除11.4.5事件解除事件解除指的是移除元素所注册的事件，jQuery提供了off()方法可以移除元素上注册的事件。关于off()方法有3种常用的方式，具体代码如下。element.off(); //解除元素上的所有事件element.off(event); //解除元素上指定的事件element.off(event,selector); //解除元素的事件委托11.4.5事件解除在程序开发中，如果希望元素的某个事件只触发一次，可以利用one()方法实现，直接注册一次性事件，示例代码如下。多学一招：one()方法$('div').one('click',function(){console.log('我只触发一次');});动画特效11.511.5动画特效在Web开发中，适当地加入动画效果不仅可以美化页面，还可以改善用户体验。jQuery中提供了以下两种添加动画特效的方式。内置动画自定义动画

先定一个小目标！掌握内置动画，能够利用内置动画方法实现动画效果11.5.1内置动画11.5.1内置动画jQuery中实现动画效果的常用的内置动画方法如下。分类方法说明显示隐藏show([duration][,easing][,complete])显示隐藏的匹配元素hide([duration][,easing][,complete])隐藏显示的匹配元素toggle([duration][,easing][,complete])元素显示与隐藏切换滑动效果slideDown([duration][,easing][,complete])垂直滑动显示匹配元素（向下增大）slideUp([duration][,easing][,complete])垂直滑动隐藏匹配元素（向上减小）slideToggle([duration][,easing][,complete])在slideUp()和slideDown()两种效果间的切换11.5.1内置动画分类方法说明淡入淡出fadeIn([duration][,easing][,complete])淡入显示匹配元素fadeOut([duration][,easing][,complete])淡出隐藏匹配元素fadeTo(duration,opacity[,easing][,complete])以淡入淡出方式将匹配元素调整到指定的透明度fadeToggle([duration][,easing][,complete])在fadeIn()和fadeOut()两种效果间的切换11.5.1内置动画常用的内置动画方法参数说明如下。duration表示动画的速度，可设置为动画时长的毫秒值（如1000），或预定的3种速度（slow、fast和normal）。easing表示缓动效果，默认效果为swing，还可以使用linear效果。complete表示在动画完成时执行的函数。opacity表示透明度数字（范围在0~1之间，0代表完全透明，0.5代表50%透明，1代表完全不透明）。

先定一个小目标！掌握自定义动画，能够根据程序需要创建自定义动画11.5.2自定义动画11.5.2自定义动画当jQuery提供的内置动画无法满足需求时，可以使用自定义动画实现相关效果。使用animate()方法可以创建自定义动画，语法格式如下。element.animate(properties[,duration][,easing][,complete])properties表示一组包含动画最终属性值的集合，如果属性名由两个单词组成，需要使用驼峰命名法。duration表示动画的速度。easing表示切换效果。complete表示在动画完成时执行的函数。11.5.2自定义动画通过代码演示如何创建自定义动画，示例代码如下。<div></div><script>$('div').mouseover(function(){//创建自定义动画$('div').animate({left:'+=100'},500);});</script>11.5.2自定义动画动画队列如果在同一个元素上调用一个以上的动画方法，那么对这个元素来说，除了当前正在调用的动画，其他的动画将被放到一个队列中，这样就形成了动画队列。动画队列中的动画都是按照顺序执行的，默认只有当第1个动画执行完毕，才会执行下一个动画。11.5.2自定义动画若希望停止动画效果可以使用jQuery提供的stop()方法实现。stop()方法不仅可以停止jQuery提供的内置动画，还可以停止自定义动画，其语法格式如下。element.stop([clearQueue],[jumpToEnd])clearQueue是布尔值，表示是否删除排队当动画队列的动画，默认为false。jumpToEnd是布尔值，表示是否立即完成当前动画，默认为false。11.5.2自定义动画stop()方法参数设置的不同，会有不同的作用，下面演示3种常用的使用方式。$('div').stop(); //停止当前动画，继续下一个动画$('div').stop(true); //删除动画队列中所有动画$('div').stop(true,true); //删除动画队列中所有动画，允许立即完成当前动画

先定一个小目标！掌握导航跟随案例的开发，能够利用自定义动画实现导航跟随效果11.5.3【案例】导航跟随效果11.5.3【案例】导航跟随效果案例需求：本案例将实现网页中导航跟随的效果，当鼠标指针移入到导航的某一项时，指示条也跟随鼠标指针移动。案例效果：11.5.3【案例】导航跟随效果案例的实现思路：编写HTML代码，定义无序列表用于实现导航的结构。编写CSS代码，用于为导航添加样式。编写jQuery代码，创建自定义动画，实现导航跟随效果。jQuery操作Ajax11.6

先定