标签，然后执行如下代码。11.1.4 jQuery对象分析执行结果：①表示
获取到的jQuery对象，在jQuery对象中，索引为0的元素是DOM对象，length属性表示DOM对象的个数。②表示获取到的D
OM对象集合，索引为0的元素表示集合中的第1个DOM对象。11.1.4 jQuery对象在实际开发中，经常会在jQuery对象和
DOM对象之间进行转换，因为DOM对象比jQuery对象更复杂，DOM对象的一些属性和方法在jQuery对象中没有封装，所以使用这
些属性和方法时需要把jQuery对象转换为DOM对象。另外，DOM对象也可以转换为jQuery对象。11.1.4 jQuery对
象实现jQuery对象转换为DOM对象有两种方式：第1种方式的语法是“jQuery对象[索引]”。第2种方式的语法是“jQuery
对象.get(索引)”。示例代码如下。var div1 = $(''div'')[0]; // 第1种方式var div
2 = $(''div'').get(0); // 第2种方式11.1.4 jQuery对象利用“$(DOM对象)”语法可以将D
OM对象转换为jQuery对象，示例代码如下。// 获取DOM对象var div = document.getElementsBy
TagName(''div'')[0];// 将DOM对象转换成jQuery对象var div = $(div);jQuery对象和D
OM对象的使用方式不同，因此在编写代码时不能混用，否则程序将会出错。注意获取元素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的元素$(''di
v''); // 获取标签为div的元素 先定一个小目标！熟悉jQuery中常用的选择器，能够根据需要选择合适的选择器11.2.2
jQuery中常用的选择器11.2.2 jQuery中常用的选择器本节介绍一些开发中可能会用到的选择器。基本选择器层次选择器筛
选选择器属性选择器子元素选择器表单选择器11.2.2 jQuery中常用的选择器下面列举常用的基本选择器。11.2.2 jQu
ery中常用的选择器下面列举常用的层次选择器。11.2.2 jQuery中常用的选择器下面列举常用的筛选选择器。11.2.2
jQuery中常用的选择器11.2.2 jQuery中常用的选择器11.2.2 jQuery中常用的选择器下面列举常用的属性选
择器。11.2.2 jQuery中常用的选择器11.2.2 jQuery中常用的选择器下面列举常用的子元素选择器。11.2.2
jQuery中常用的选择器11.2.2 jQuery中常用的选择器下面列举常用的表单选择器。11.2.2 jQuery中常
用的选择器11.2.2 jQuery中常用的选择器元素操作11.311.3 元素操作通过前面的学习，我们已经掌握了如何利用选择
器获取元素，获取元素的目的是操作元素，从而实现某些特定的功能。元素操作主要是通过jQuery提供的一系列方法来完成，下面我们将学习
常见的元素操作。11.3.1 元素遍历操作 先定一个小目标！掌握元素遍历操作，能够对元素进行遍历11.3.1 元素遍历操作当使
用“$(选择器)”语法获取到的元素有多个时，如果我们想对多个元素分别进行操作，就需要进行元素遍历操作。jQuery提供了each(
)方法用于快速实现元素遍历操作。11.3.1 元素遍历操作$(选择器).each(function (index, domEle
) { 具体操作});each()方法的参数是一个函数，遍历时每个元素都会调用一次这个函数。index参数表示每个元素的索引。d
omEle参数表示每个DOM元素对象。each()方法的基本语法格式如下。11.3.2 元素内容操作 先定一个小目标！掌握元素内
容操作，能够操作元素的内容11.3.2 元素内容操作jQuery提供了内容操作方法，用来操作元素的内容，具体如下。html()方
法text()方法val()方法11.3.2 元素内容操作元素内容操作方法的具体说明如下。11.3.2 元素内容操作html(
)方法和text()方法的区别在于：html()方法会解析HTML标签，而text()方法不会。val()方法可以操作表单元素se
lect、radio和checkbox的选中情况。当要获取的元素是select元素时，返回结果是一个包含所选值的数组。当要为表单元
素设置选中情况时，可以传递数组参数。11.3.3 元素样式操作在开发中，经常需要通过设置元素的样式来美化页面，给用户带来更好的视
觉体验。jQuery中有以下3种常用的样式操作。利用css()方法操作元素样式操作元素的尺寸和位置操作元素的样式类11.3.3
元素样式操作 先定一个小目标！掌握利用css()方法操作元素样式，能够完成元素的样式操作11.3.3 元素样式操作使用jQuer
y提供的css()方法可以获取或设置元素的样式，关于css()方法的具体说明如下。11.3.3 元素样式操作当css()方法接收
对象作为参数时，如果属性名由两个单词组成，需要将CSS属性名中的“-”去掉，并将第2个单词首字母大写。注意css()方法参数解释：
propertyName是一个字符串，表示样式属性名。value表示样式属性值。properties表示样式对象，如{color:
''red''}。11.3.3 元素样式操作 先定一个小目标！掌握操作元素的尺寸和位置，能够完成元素尺寸和位置的操作11.3.3
元素样式操作jQuery提供的尺寸方法用来获取或设置元素的高度和宽度，具体方法及说明如下。11.3.3 元素样式操作jQuer
y提供的位置方法用来获取或设置元素的位置。11.3.3 元素样式操作 先定一个小目标！掌握操作元素的样式类，能够完成元素的样式类
操作11.3.3 元素样式操作在网页中设置样式一般是使用类操作，即定义class，jQuery也可以通过操作样式类更改元素的样式
，具体操作方法及说明如下。11.3.4 元素属性操作 先定一个小目标！掌握元素属性操作，能够操作元素的属性11.3.4 元素属
性操作jQuery中的一些常用的元素属性操作方法，具体如下。11.3.4 元素属性操作当用户操作表单元素（如select、rad
io）时，如果表单元素的选中状态发生了改变，使用attr()方法无法获取，此时推荐使用prop()方法。注意对元素属性操作方法的解
释：参数name表示属性名，value表示属性值。data()方法还可以读取以data-开头的属性。11.3.5 元素查找和过滤
操作 先定一个小目标！掌握元素查找和过滤操作，能够快速查找和过滤元素11.3.5 元素查找和过滤操作列举一些常用的元素查找方法，
具体说明如下。11.3.5 元素查找和过滤操作列举一些常用的元素过滤方法，具体说明如下。11.3.6 元素追加操作 先定一个小
目标！掌握元素追加操作，能够实现元素的追加11.3.6 元素追加操作元素追加指的是在现有的元素中进行子元素或兄弟元素的添加，jQ
uery提供了元素追加的方法，可以帮助我们快速实现元素的追加。11.3.6 元素追加操作下面列举一些常用的元素追加方法，具体说明
如下。11.3.6 元素追加操作对元素追加操作方法的解释：参数content可以是DOM 元素、文本节点、元素集合、HTML字符
串或 jQuery对象。参数fn是回调函数，通过返回值传入内容（content）。参数target表示目标元素，可以传入选择器、H
TML字符串、DOM元素、元素集合或jQuery对象。11.3.7 元素替换操作 先定一个小目标！掌握元素替换操作，能够实现元素
的替换11.3.7 元素替换操作元素替换是指将选中的元素替换为指定的元素，关于元素替换操作的方法和说明如下。11.3.8 元素
删除操作 先定一个小目标！掌握元素删除操作，能够删除指定的元素11.3.8 元素删除操作关于元素删除操作的方法和说明如下。11.
3.9 元素复制操作 先定一个小目标！掌握元素复制操作，能够实现元素的复制11.3.9 元素复制操作在开发中，当我们进行元素追
加操作，将匹配元素插入到目标的末尾或者开头时，通常是移动匹配元素的位置，若要实现不移动位置，且能实现将匹配元素插入到目标中时，可以
配合jQuery提供的元素复制的方法来实现。11.3.9 元素复制操作element.clone([Events][, deep
Events])Events表示是否复制元素的事件处理程序和数据，默认为false，若该参数为true，将复制事件处理程序和数据。
deepEvents表示是否深层复制，即是否复制元素的子元素的事件处理程序和数据。clone()方法用于快速实现元素的复制，其语法
格式如下。事件操作11.411.4 事件操作事件的处理在JavaScript中是一个很重要的功能。jQuery简化了事件的操作，
我们可以直接调用相关事件的操作方法来实现事件的处理。对于页面加载事件、表单事件、鼠标事件以及键盘事件等，都可以用jQuery来完成
。 先定一个小目标！掌握页面加载事件，能够利用jQuery中的页面加载事件实现页面的初始化11.4.1 页面加载事件页面加载事件
用来实现页面的初始化。一般情况下，使用jQuery操作DOM元素时，为了确保jQuery代码能够生效，要将jQuery代码写在DO
M元素后面，否则代码不会生效。如果一定要将jQuery代码写在DOM元素前面，就需要使用页面加载事件来实现。11.4.1 页面加
载事件jQuery中的页面加载事件方法有3种语法格式，具体如下。11.4.1 页面加载事件$(document).ready(f
unction () { }); // 语法格式1$().ready(function () { }); // 语法格式2
$(function () { }); // 语法格式3虽然window.onload与jQuery页面加载事件的功能类似，但
是两者在使用时有一定的区别。11.4.1 页面加载事件11.4.2 事件注册在jQuery中，事件注册有以下两种方式。通过事件
方法进行事件注册。通过on()方法进行事件注册。 先定一个小目标！掌握通过事件方法实现事件注册，能够完成事件的注册11.4.2
事件注册11.4.2 事件注册jQuery的事件方法在jQuery中通过事件方法实现事件注册是通过调用某个事件方法，并传入事件处
理函数实现事件注册。jQuery的事件方法和DOM中的事件相比，省略了开头的“on”，如jQuery中的click()对应DOM中
的onclick事件。jQuery中的事件方法允许多次调用从而为一个事件注册多个事件处理函数。11.4.2 事件注册下面列举jQ
uery中一些常用的事件方法，具体说明如下。11.4.2 事件注册11.4.2 事件注册11.4.2 事件注册 handle
r表示触发事件时执行的事件处理函数。 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、mo
useover等。events表示多个事件类型，每个事件类型使用空格分隔。fn表示回调函数，即事件处理函数。11.4.2 事件注
册jQuery提供了hover()方法，可以代替鼠标指针移入和移出事件，语法如下。多学一招：hover()方法element.ho
ver(over, out)over表示鼠标指针移入元素时执行的事件处理函数。out表示鼠标指针移出时执行的事件处理函数。 先定一
个小目标！掌握事件触发，能够使用3种方式实现事件触发11.4.3 事件触发11.4.3 事件触发一般情况下，为元素注册事件后，
由用户或浏览器触发事件，若希望某个事件在程序中被触发，就需要手动触发这个事件。jQuery中，实现事件手动触发有以下3种方式。通过
事件方法实现事件触发。通过trigger()方法实现事件触发。通过triggerHandler()方法实现事件触发。11.4.3
事件触发在jQuery中，调用事件方法不仅可以实现事件注册，还可以实现事件触发，两者的区别在于是否传入参数，传入参数表示事件注册
，不传入参数表示事件触发，示例代码如下。// 事件注册$(''div'').click(function () { alert(''H
ello'');});// 事件触发$(''div'').click();11.4.3 事件触发使用trigger()方法可以触发指定
事件，示例代码如下。// 事件注册$(''div'').click(function () { alert(''Hello'');});
// 事件触发$(''div'').trigger(''click'');11.4.3 事件触发通过事件方法和trigger()方法触发
事件时，都会执行元素的默认行为，而通过triggerHandler()方法触发事件不会执行元素的默认行为。元素的默认行为指的是用户
发生某个动作后元素自动发生的行为，例如，文本框获取焦点时有光标闪烁的现象。11.4.3 事件触发下面演示triggerHandl
er()方法的使用。
先定一个小目标！掌握事件委托，能够将子元素的事件注册到父元素上11.4.4 事件委托11.4.4 事件委托事件
委托指的是把原本要给子元素注册的事件委托给父元素，也就是将子元素的事件注册到父元素上。jQuery中事件委托通过on()方法来实现
，具体用法如下。element.on(event, selector, fn)event表示事件类型，selector表示子元素选
择器，fn表示事件处理函数。事件委托的优势在于，可以为未来动态创建的元素注册事件，其原理是将事件委托给父元素后，在父元素中动态创建
的子元素也会拥有事件。11.4.4 事件委托通过代码演示如何实现事件委托，示例代码如下。

• 我是第1个li i>
• 我是第2个li
• 我是第3个li

先定一个小目标！掌握事件解除，能够实现解除所有事件、解除指定事件以及解除事件委托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中实现动画效果的常用的内置动画方法如下。11.5.1 内置动画11.5.1 内
置动画常用的内置动画方法参数说明如下。duration表示动画的速度，可设置为动画时长的毫秒值（如1000），或预定的3种速度（s
low、fast和normal）。easing表示缓动效果，默认效果为swing，还可以使用linear效果。complete表示
在动画完成时执行的函数。opacity表示透明度数字（范围在0~1之间，0代表完全透明，0.5代表50%透明，1代表完全不透明）。
先定一个小目标！掌握自定义动画，能够根据程序需要创建自定义动画11.5.2 自定义动画11.5.2 自定义动画当jQuery
提供的内置动画无法满足需求时，可以使用自定义动画实现相关效果。使用animate()方法可以创建自定义动画，语法格式如下。elem
ent.animate(properties[, duration][, easing][, complete])properti
es表示一组包含动画最终属性值的集合，如果属性名由两个单词组成，需要使用驼峰命名法。duration表示动画的速度。easing表
示切换效果。complete表示在动画完成时执行的函数。11.5.2 自定义动画通过代码演示如何创建自定义动画，示例代码如下。<
div>