1、HTML+CSS+JavaScript网页设计第13章使用jQuery第1页第第13章章 使用使用jQuery本章概述 本章的学习目标主要内容HTML+CSS+JavaScript网页设计第13章使用jQuery第2页本章概述本章概述ljQuery是继是继Prototype之后出现的又一个优秀的之后出现的又一个优秀的JavaScript框架。框架。jQuery 能够改变开发人员编写能够改变开发人员编写JavaScript脚本的方式，降低学习和使用脚本的方式，降低学习和使用Web前前端开发的复杂度，提高网页开发效率。无论是对端开发的复杂度，提高网页开发效率。无论是对于于JavaScript初学者
2、，还是对于初学者，还是对于Web开发资深专开发资深专家，家，jQuery都是必备的工具。本章主要介绍都是必备的工具。本章主要介绍jQuery的基本语法和具体应用。通过本章的学习的基本语法和具体应用。通过本章的学习，读者应掌握，读者应掌握jQuery的基本语法，能够通过的基本语法，能够通过jQuery简化传统的简化传统的JavaScript代码，为自己的开代码，为自己的开发带来便利。发带来便利。HTML+CSS+JavaScript网页设计第13章使用jQuery第3页本章的学习目标本章的学习目标l掌握在页面中使用掌握在页面中使用jQuery的方法的方法l理解文档就绪函数理解文档就绪函数l掌握常
3、用的选择器掌握常用的选择器l掌握基本筛选器的用法和作用掌握基本筛选器的用法和作用l掌握掌握css方法的使用方法的使用l掌握掌握jQuery遍历对象的方法遍历对象的方法l掌握掌握jQuery的事件处理方法的事件处理方法l掌握掌握jQuery的文档处理方法的文档处理方法HTML+CSS+JavaScript网页设计第13章使用jQuery第4页主要内容主要内容13.1 jQuery概述概述13.2 jQuery语法基础语法基础13.3 jQuery文档处理文档处理13.4 jQuery动画与特效动画与特效13.5 本章小结本章小结13.6 思考和练习思考和练习HTML+CSS+JavaScript
4、网页设计第13章使用jQuery第5页13.1 jQuery概述概述ljQuery是目前世界上是目前世界上JavaScript领域最受领域最受欢迎的库。最早由欢迎的库。最早由John Resig在在2006年年1月发布，为使用者编写自己的客户化月发布，为使用者编写自己的客户化JavaScript提供了多种优势特性，目前，提供了多种优势特性，目前，几乎所有的大型网站都使用几乎所有的大型网站都使用jQuery。HTML+CSS+JavaScript网页设计第13章使用jQuery第6页为什么使用为什么使用jQueryljQuery是一个轻量级的是一个轻量级的“写的少，做的多写的少，做的多”的的Ja
5、vaScript库。它具有库。它具有如下特点：如下特点：语法简练、语义易懂、学习快速、丰富文档。语法简练、语义易懂、学习快速、丰富文档。jQuery是一个轻量级的脚本，其代码非常小巧，最新版的是一个轻量级的脚本，其代码非常小巧，最新版的jQuery框架框架文件仅有文件仅有80KB左右。左右。jQuery支持支持CSS1CSS3定义的属性和选择器，以及基本的定义的属性和选择器，以及基本的xPath技术技术。jQuery是跨浏览器的，它支持几乎所有主流的浏览器，包括是跨浏览器的，它支持几乎所有主流的浏览器，包括IE 6.0+、FireFox 1.5+、Safari 2.0+和和Opera 9.0+
6、等。等。可以很容易地为可以很容易地为jQuery扩展其他功能。扩展其他功能。能将能将JavaScript脚本与脚本与HTML源代码完全分离，便于后期编辑和维护。源代码完全分离，便于后期编辑和维护。插件丰富，除了插件丰富，除了jQuery自身带有的一些特效外，可以通过插件实现更自身带有的一些特效外，可以通过插件实现更多功能，如表单验证、拖放效果、表格排序、多功能，如表单验证、拖放效果、表格排序、DataGrid、树形菜单、图、树形菜单、图像特效以及像特效以及Ajax上传等。上传等。HTML+CSS+JavaScript网页设计第13章使用jQuery第7页在页面中使用在页面中使用jQuerylj
7、Query是一个轻量级的脚本，它本质上是一个轻量级的脚本，它本质上是一个是一个js文件，可以像使用其它外部文件，可以像使用其它外部js文件文件一样在页面中引入该文件，然后就可以使一样在页面中引入该文件，然后就可以使用用jQuery的强大功能了。的强大功能了。l可以从可以从jQuery的官方网站下载最新版本的的官方网站下载最新版本的jQuery库库http:/ jQuery 可供下载：可供下载：Production version：用于实际的网站中，：用于实际的网站中，已被精简和压缩，文件名中带有已被精简和压缩，文件名中带有min。Development version：用于测试和开发，：用于测
8、试和开发，未压缩，是可读的代码。未压缩，是可读的代码。l目前最新版本是目前最新版本是3.3.1，下载，下载Production version后得到一个名为后得到一个名为jquery-3.3.1.min.js文件，将该文件复制到网站的文件，将该文件复制到网站的根目录，或新建一个根目录，或新建一个js子目录，存放该子目录，存放该js文文件。件。HTML+CSS+JavaScript网页设计第13章使用jQuery第9页在页面中使用在页面中使用jQueryl接下来，需要在使用接下来，需要在使用jQuery的页面中使用的页面中使用标签引用它：标签引用它：HTML+CSS+JavaScript网页设计
9、第13章使用jQuery第10页主要内容主要内容13.1 jQuery概述概述13.2 jQuery语法基础语法基础13.3 jQuery文档处理文档处理13.4 jQuery动画与特效动画与特效13.5 本章小结本章小结13.6 思考和练习思考和练习HTML+CSS+JavaScript网页设计第13章使用jQuery第11页13.2 jQuery语法基础语法基础l要想理解和使用要想理解和使用jQuery，需要掌握一些基，需要掌握一些基础知识。本节将介绍础知识。本节将介绍jQuery的核心功能，的核心功能，包括前面看到的包括前面看到的$函数，以及函数，以及$函数的函数的ready方法。接下来
10、介绍方法。接下来介绍jQuery的选择器和筛选的选择器和筛选器，这样就可以在页面中查找指定的元素器，这样就可以在页面中查找指定的元素。当获得一个指向页面中一个或多个元素。当获得一个指向页面中一个或多个元素的引用后，就可以对它们应用多种方法，的引用后，就可以对它们应用多种方法，如前面提到的如前面提到的css方法。方法。HTML+CSS+JavaScript网页设计第13章使用jQuery第12页文档就绪文档就绪函数函数l大部分大部分jQuery代码都是在浏览器完成页面加载后执行。等代码都是在浏览器完成页面加载后执行。等到页面完成到页面完成DOM加载后再执行代码十分重要。加载后再执行代码十分重要。
11、DOM包含包含所有所有HTML元素、脚本文件、元素、脚本文件、CSS、图像等的一个树形结、图像等的一个树形结构。如果过早执行构。如果过早执行jQuery代码代码(例如，在页面的最顶端例如，在页面的最顶端)，那么那么DOM可能还没有加载完成脚本中引用的全部元素时可能还没有加载完成脚本中引用的全部元素时就产生了错误。幸运的是，可以使用就产生了错误。幸运的是，可以使用jQuery中的文档就绪中的文档就绪函数函数ready，将代码的执行推迟到，将代码的执行推迟到DOM就绪。就绪。lready函数的声明格式如下：函数的声明格式如下：$(document).ready(function()/DOM 就绪后
12、执行此处的代码就绪后执行此处的代码);HTML+CSS+JavaScript网页设计第13章使用jQuery第13页文档就绪文档就绪函数函数ljQuery也提供了也提供了ready函数的一个快捷方式函数的一个快捷方式，下面的代码段与前面的效果相同：，下面的代码段与前面的效果相同：$(function()/DOM 就绪后执行此处的代码就绪后执行此处的代码);l需要注意的是，需要注意的是，ready后面的一对括号里是后面的一对括号里是一个匿名函数一个匿名函数function()，任何需要执，任何需要执行的语句都包含于匿名函数中，并且将在行的语句都包含于匿名函数中，并且将在$(document).r
13、eady()事件触发时得到执事件触发时得到执行。行。HTML+CSS+JavaScript网页设计第13章使用jQuery第14页基本选择器基本选择器l在在jQuery中，可以使用美元符号中，可以使用美元符号($)作为在页面中查找元作为在页面中查找元素的快捷方式，找到并返回的元素称为匹配集。素的快捷方式，找到并返回的元素称为匹配集。$方法的方法的基本语法如下所示：基本语法如下所示：$(选择器选择器)l在引号在引号(可以使用单引号或者双引号，只要在两端使用相可以使用单引号或者双引号，只要在两端使用相同的类型即可同的类型即可)之间，可输入一个或多个选择器，接下来之间，可输入一个或多个选择器，接下来
14、就将讨论这方面的内容。就将讨论这方面的内容。l通过通过jQuery选择器可以找到页面的文档对象模型中的一个选择器可以找到页面的文档对象模型中的一个或多个元素，以便向它们应用各种类型的或多个元素，以便向它们应用各种类型的jQuery方法。方法。jQuery的设计者并没有开发出一种新技术来查找页面元素的设计者并没有开发出一种新技术来查找页面元素，而是使用与，而是使用与CSS选择器完全相同的选择器。选择器完全相同的选择器。HTML+CSS+JavaScript网页设计第13章使用jQuery通用选择器通用选择器l和对应的和对应的CSS选择器一样，通用选择器使选择器一样，通用选择器使用通配符用通配符*
15、匹配页面中的全部元素；匹配页面中的全部元素；$方法方法返回返回0个或多个元素，然后可以使用多种个或多个元素，然后可以使用多种jQuery方法操作返回的这些元素。例如，方法操作返回的这些元素。例如，要将页面中每个元素的字体系列设置为要将页面中每个元素的字体系列设置为Arial，可以使用下面的代码：，可以使用下面的代码：$(*).css(font-family,Arial);第15页HTML+CSS+JavaScript网页设计第13章使用jQueryID选择器选择器l和对应的和对应的CSS选择器一样，这个选择器通选择器一样，这个选择器通过过id来查找和获取元素。例如，要为名为来查找和获取元素。例
16、如，要为名为tabel1的表格设置的表格设置CSS类，可以使用如下类，可以使用如下代码：代码：$(#table1).addClass(myClass);l当这行代码使用当这行代码使用addClass方法设置方法设置CSS类类时，将会遵循标准的时，将会遵循标准的CSS规则，即需要通规则，即需要通过外部过外部CSS文件或者嵌入式样式表定义名文件或者嵌入式样式表定义名为为myClass的类。的类。第16页HTML+CSS+JavaScript网页设计第13章使用jQuery元素选择器元素选择器l元素选择器获得与特定的标签名相匹配的元素选择器获得与特定的标签名相匹配的0个或多个元素的引用。例如，下面的
17、代码个或多个元素的引用。例如，下面的代码将页面中的所有二级标题的文本颜色设置将页面中的所有二级标题的文本颜色设置为红色。为红色。$(h2).css(color,red);第17页HTML+CSS+JavaScript网页设计第13章使用jQuery类选择器类选择器l类选择器获得与特定的类名相匹配的类选择器获得与特定的类名相匹配的0个或个或多个元素的引用。多个元素的引用。在爱情中，谁都以为在爱情中，谁都以为自己会是例外自己会是例外我们一直认为我们一直认为思念的人思念的人流过的泪流过的泪$(.Highlight).css(background-color,red);第18页HTML+CSS+Jav
18、aScript网页设计第13章使用jQuery分组和合并选择器分组和合并选择器l和和CSS一样，可以分组和合并选择器。下一样，可以分组和合并选择器。下面的分组选择器将修改页面中所有面的分组选择器将修改页面中所有h1和和h2元素的文本颜色为橙色：元素的文本颜色为橙色：$(h1,h2).css(color,orange);l通过使用合并选择器，可以找出被其他一通过使用合并选择器，可以找出被其他一些元素包含着的特定元素。例如，下面的些元素包含着的特定元素。例如，下面的jQuery只修改只修改MainContent元素中包含的元素中包含的二级标题，而其他的保持不变：二级标题，而其他的保持不变：$(#M
19、ainContent h2).css(color,red);第19页HTML+CSS+JavaScript网页设计第13章使用jQuery层级选择层级选择器器lancestor descendant：在指定祖先元素下匹：在指定祖先元素下匹配所有的后代元素，与配所有的后代元素，与CSS中的后代选择器对应中的后代选择器对应。lparent child：在给定的父元素下匹配所有：在给定的父元素下匹配所有的子元素，与的子元素，与CSS中的子选择器对应。中的子选择器对应。lprev+next：匹配所有紧接在：匹配所有紧接在prev元素后的元素后的next元素，与元素，与CSS中的相邻兄弟选择器对应。中的
20、相邻兄弟选择器对应。lprev siblings：匹配：匹配prev元素之后的所有元素之后的所有siblings元素。元素。第20页HTML+CSS+JavaScript网页设计第13章使用jQuery筛选器筛选器l在在jQuery中，可以使用筛选器进一步过滤中，可以使用筛选器进一步过滤选择器得到的结果集，从而可以找到特定选择器得到的结果集，从而可以找到特定的元素，如第一个元素、最后一个元素、的元素，如第一个元素、最后一个元素、所有奇数行元素、所有偶数行元素、所有所有奇数行元素、所有偶数行元素、所有的标题或者特定位置的项等。的标题或者特定位置的项等。第21页HTML+CSS+JavaScrip
21、t网页设计第13章使用jQuery筛选器筛选器第22页:first选择第一个匹配的元素选择第一个匹配的元素$(tr:first):last选择最后一个匹配的元素$(tr:last):odd选择匹配集中的奇数项元素$(tr:odd):even选择匹配元素中的偶数项元素$(tr:even):eq(index)从返回的结果集中选择位于指定索引上的元素$(li:eq(2):lt(index)从返回的结果集中选择所有小于指定索引的元素$(li:lt(2):gt(index)从返回的结果集中选择所有大于指定索引从返回的结果集中选择所有大于指定索引的元素的元素$(li:gt(2)HTML+CSS+JavaS
22、cript网页设计第13章使用jQuery应用应用CSSljQuery以几种不同的方式支持以几种不同的方式支持CSS。首先。首先，可以使用，可以使用css方法来检索特定的方法来检索特定的CSS值值(如某个项的颜色如某个项的颜色)，以及设置一组元素的一，以及设置一组元素的一个或多个个或多个CSS属性。其次，使用属性。其次，使用addClass、removeClass、toggleClass和和hasClass等方法可以修改或检查对元素应等方法可以修改或检查对元素应用的用的CSS类。类。第23页HTML+CSS+JavaScript网页设计第13章使用jQuerycss(name,value)l这
23、个方法用来设置某个匹配元素上的特定这个方法用来设置某个匹配元素上的特定的的CSS属性。属性。name是引用一个是引用一个CSS属性的属性的名称名称(如如border、color等等)，value定义了要定义了要应用的样式。例如，设置应用的样式。例如，设置h1元素的背景色元素的背景色为绿色：为绿色：l$(h1).css(background-color,green);第24页HTML+CSS+JavaScript网页设计第13章使用jQuerycss(name)l这个方法用于获取指定属性的这个方法用于获取指定属性的CSS值。下值。下面的示例将弹出对话框，内容是二级标题面的示例将弹出对话框，内容是
24、二级标题包含的包含的span元素的元素的font-style属性值。属性值。lalert($(h2 span).css(font-style);第25页HTML+CSS+JavaScript网页设计第13章使用jQuerycss(properties)l这是一个功能强大的方法，它可以用来同这是一个功能强大的方法，它可以用来同时设置匹配元素的多个属性，每个属性与时设置匹配元素的多个属性，每个属性与值之间用冒号分隔，多个属性值之间用冒号分隔，多个属性/值对之间用值对之间用逗号分隔，完整的属性集包含在一对花括逗号分隔，完整的属性集包含在一对花括号号()之间。例如，下面的示例将表中所有之间。例如，下面
25、的示例将表中所有单元格的颜色修改为红色，内边距设置为单元格的颜色修改为红色，内边距设置为10px，字体修改为，字体修改为Verdana。l$(#TableId td).css(color:red,font-family:Verdana,padding:10px);第26页HTML+CSS+JavaScript网页设计第13章使用jQueryaddClass、removeClass和和toggleClassladdClass和和removeClass方法分别用来在元素中添加和方法分别用来在元素中添加和删除类。而删除类。而toggleClass方法是对被选元素进行添加方法是对被选元素进行添加/删除
26、删除类的切换操作。和普通的类的切换操作。和普通的CSS一样，使用这些方法，比使一样，使用这些方法，比使用用css(properties)方法进行内联方法进行内联CSS赋值更好。这样就赋值更好。这样就更容易在一个集中的位置定义更容易在一个集中的位置定义CSS类，从而更易于维护和类，从而更易于维护和重用。下面的代码将为重用。下面的代码将为h2元素添加新的元素添加新的CSS类：类：$(h2).addClass(myClass);l如果希望再次删除类，则可以调用如果希望再次删除类，则可以调用removeClass方法，方法，如下所示：如下所示：$(h2).removeClass(myClass);第2
27、7页HTML+CSS+JavaScript网页设计第13章使用jQuery访问访问jQuery对象对象l通过选择器或筛选器得到的通过选择器或筛选器得到的jQuery对象是对象是一个集合，要访问该集合，除了使用索引一个集合，要访问该集合，除了使用索引值以外，还可以使用值以外，还可以使用jQuery定义的几个方定义的几个方法和属性。另外，法和属性。另外，jQuery还优化并扩展了还优化并扩展了很多筛选函数，这些函数作为很多筛选函数，这些函数作为jQuery对象对象的方法直接使用，这样就能够在选择器的的方法直接使用，这样就能够在选择器的基础上更加精确地控制对象。基础上更加精确地控制对象。第28页HT
28、ML+CSS+JavaScript网页设计第13章使用jQueryeach方法方法leach方法迭代方法迭代(或循环遍历或循环遍历)一个集合。当需要对一个集合。当需要对匹配集中的项应用某种行为，但是无法使用一个匹配集中的项应用某种行为，但是无法使用一个jQuery函数完成设置时，就可以使用函数完成设置时，就可以使用each方法，方法，把希望对每一项执行的函数作为参数传递给把希望对每一项执行的函数作为参数传递给each。例如，下面的。例如，下面的each示例通过循环遍历匹配集中示例通过循环遍历匹配集中的每一项，然后调用的每一项，然后调用alert，将每个单元格的内容，将每个单元格的内容显示出来。
29、显示出来。$(#TableId td).each(function()alert(this.innerHTML););第29页HTML+CSS+JavaScript网页设计第13章使用jQuerysize()和和lengthlsize()方法能够返回方法能够返回jQuery对象中元素的个数，对象中元素的个数，而而length 属性与属性与size()方法功能相同。例如，下方法功能相同。例如，下面的代码使用面的代码使用size()方法和方法和length属性返回值都为属性返回值都为2。文本块文本块1文本块文本块2 alert($(span).size();/返回值为返回值为2 alert($(s
30、pan).length);/返回值为返回值为2第30页HTML+CSS+JavaScript网页设计第13章使用jQueryget()方法方法lget()方法能够把方法能够把jQuery对象转换为对象转换为DOM中的元素集合。中的元素集合。例如，在下面示例中，使用例如，在下面示例中，使用$()函数获取所有函数获取所有span元素，元素，然后用然后用get()方法把该方法把该jQuery对象转换为对象转换为DOM 集合，再调集合，再调用用JavaScript数组方法数组方法reverse()把数组元素的位置颠倒把数组元素的位置颠倒过来。最后为数组中第一个元素设置字体为红色，最终效过来。最后为数组
31、中第一个元素设置字体为红色，最终效果是文本果是文本“文本块文本块2”显示为红色。显示为红色。文本块文本块1文本块文本块2var spans=$(span).get().reverse();/把当前把当前jQuery对象转换对象转换为为DOM对象并颠倒它们的位置对象并颠倒它们的位置spans0.style.color=red;/把当前把当前jQuery 对象设置为红色对象设置为红色第31页HTML+CSS+JavaScript网页设计第13章使用jQueryindex()方法方法lindex()方法用于获取方法用于获取jQuery 对象中指定元素的对象中指定元素的索引值，如果找到了匹配的元素，从
32、索引值，如果找到了匹配的元素，从0 开始返回开始返回；如果没有找到匹配的元素，则返回；如果没有找到匹配的元素，则返回1。l如果不给如果不给index()方法传递参数，那么返回值就是方法传递参数，那么返回值就是这个这个jQuery对象集合中第一个元素相对于其同辈对象集合中第一个元素相对于其同辈元素的位置；如果参数是一组元素的位置；如果参数是一组DOM元素或者元素或者jQuery对象，那么返回值就是传递的元素相对于对象，那么返回值就是传递的元素相对于原先集合的位置；如果参数是一个选择器，那么原先集合的位置；如果参数是一个选择器，那么返回值就是原先元素相对于选择器匹配元素中的返回值就是原先元素相对于
33、选择器匹配元素中的位置。位置。第32页HTML+CSS+JavaScript网页设计第13章使用jQueryjQuery事件处理事件处理ljQuery是为事件处理特别设计的。是为事件处理特别设计的。ljQuery事件处理方法是事件处理方法是jQuery中的核心函中的核心函数。事件处理程序指的是当数。事件处理程序指的是当HTML中发生某中发生某些事件时所调用的方法。些事件时所调用的方法。l使用使用$().on()和和$().off()绑定事件绑定事件第33页HTML+CSS+JavaScript网页设计第13章使用jQueryjQuery事件处理事件处理ljQuery有两个用于管理事件的主要方法
34、：有两个用于管理事件的主要方法：$().on()和和$().off()。$().on()用于将事件绑定到选择器返用于将事件绑定到选择器返回的匹配元素或匹配集，它接收两个参数：所需回的匹配元素或匹配集，它接收两个参数：所需监听的事件监听的事件(如如click)和一个当事件发生时须触发和一个当事件发生时须触发的函数；而的函数；而$().off()则用于将事件从元素中移除。则用于将事件从元素中移除。$(#TableId tr).on(mouseover,function()$(this).css(background-color,yellow).on(mouseout,function()$(thi
35、s).css(background-color,);第34页HTML+CSS+JavaScript网页设计第13章使用jQueryjQuery事件处理事件处理l$().on()还有一个可选的选择器参数用于为还有一个可选的选择器参数用于为事件绑定提供上下文环境。使用这个参数事件绑定提供上下文环境。使用这个参数能够将事件绑定于在页面创建时可能尚不能够将事件绑定于在页面创建时可能尚不存在的元素。例如，若要向所有将会存在存在的元素。例如，若要向所有将会存在于整个文档中的于整个文档中的元素绑定一个单击事件元素绑定一个单击事件，可按如下所示使用，可按如下所示使用$().on()：$(document).o
36、n(click,a,function()/code goes here);第35页HTML+CSS+JavaScript网页设计第13章使用jQuery jQuery其他事件方法其他事件方法l$().on()和和$().off()是在是在jQuery 1.7中被引入中被引入的。它们简化并取代了其他一些用于绑定的。它们简化并取代了其他一些用于绑定事件的方法。因此今后的开发中，更建议事件的方法。因此今后的开发中，更建议使用使用$().on()和和$().off()。但是其他事件方法。但是其他事件方法也可以使用也可以使用第36页HTML+CSS+JavaScript网页设计第13章使用jQuery
37、jQuery其他事件方法其他事件方法l事件特定方法，表事件特定方法，表13-3中的每个事件都对应一个事件方法，如中的每个事件都对应一个事件方法，如$().click()，其行为与使用标准的，其行为与使用标准的$().on()方法类似，即对文档中已经方法类似，即对文档中已经存在的元素的具体事件绑定一个函数。存在的元素的具体事件绑定一个函数。l$().bind()和和$().unbind()，其行为与使用，其行为与使用$().on()和和$().off()完全一致完全一致。l$().live()和和$().die()，这两个方法把事件委托交给了，这两个方法把事件委托交给了document，docu
38、ment向下去寻找符合条件的元素，不用等待向下去寻找符合条件的元素，不用等待document加载结加载结束也可以生效。束也可以生效。jquery1.9及其以上版本删除了此方法。及其以上版本删除了此方法。l$().delegate()和和$().undelegate()，更精确的小范围使用事件委托，更精确的小范围使用事件委托，性能优于性能优于$().live()和和$().die()。l$().one()方法，它能够匹配元素绑定一个仅能够执行一次的事件处理方法，它能够匹配元素绑定一个仅能够执行一次的事件处理函数。在每个对象上，这个事件处理函数只会被执行一次。其他规则函数。在每个对象上，这个事件处
39、理函数只会被执行一次。其他规则与与bind()函数相同。函数相同。第37页HTML+CSS+JavaScript网页设计第13章使用jQuery第38页主要内容主要内容13.1 jQuery概述概述13.2 jQuery语法基础语法基础13.3 jQuery文档处理文档处理13.4 jQuery动画与特效动画与特效13.5 本章小结本章小结13.6 思考和练习思考和练习HTML+CSS+JavaScript网页设计第13章使用jQuery13.3 jQuery文档处理文档处理l在第在第11章我们学习了使用章我们学习了使用DOM为元素节点为元素节点增加子元素或文本节点，但是增加子元素或文本节点，
40、但是DOM提供的提供的方法比较烦琐，需要先选中对象，再定义方法比较烦琐，需要先选中对象，再定义子节点，最后才能够使用子节点，最后才能够使用appendChild()方方法实现插入子元素或文本。法实现插入子元素或文本。jQuery提供的提供的文档处理方法要比文档处理方法要比DOM简单得多，且功能简单得多，且功能更为强大和灵活。更为强大和灵活。第39页HTML+CSS+JavaScript网页设计第13章使用jQuery第40页插入插入内容内容ljQuery把插入分为内部插入和外部插入两种操作。把插入分为内部插入和外部插入两种操作。l所谓内部插入，就是把内容直接插入到指定的元素内部。内部插入主所谓
41、内部插入，就是把内容直接插入到指定的元素内部。内部插入主要包含要包含4个方法。个方法。append(content)：append()方法与方法与DOM的的appendChild()方法功能类似，都是方法功能类似，都是在元素内部增加子元素或文本。在元素内部增加子元素或文本。prepend(content)：prepend()方法与方法与append()方法作用相同，都是把指定内容方法作用相同，都是把指定内容插入到插入到 jQuery 对象元素中，但是对象元素中，但是prepend()方法能够把插入的内容放置在最前面方法能够把插入的内容放置在最前面，而不是放置在最末尾。，而不是放置在最末尾。ap
42、pendTo(content)：把所有匹配的元素追加到另一个指定的元素或元素集合中：把所有匹配的元素追加到另一个指定的元素或元素集合中。可以将其理解为。可以将其理解为append()方法的反操作，使用这个方法是颠倒了常规的方法的反操作，使用这个方法是颠倒了常规的$(A).append(B)的操作，即不是把的操作，即不是把B追加到追加到A中，而是把中，而是把A追加到追加到B中。中。prependTo(content)：与：与appendTo方法对应，该方法能够把所有匹配的元素前方法对应，该方法能够把所有匹配的元素前置到另一个指定的元素或元素集合中。置到另一个指定的元素或元素集合中。$(p).ap
43、pend(赵智暄赵智暄);HTML+CSS+JavaScript网页设计第13章使用jQuery第41页插入插入内容内容l所谓外部插入，就是把内容插入到指定所谓外部插入，就是把内容插入到指定jQuery对对象相邻元素内。与内部插入操作基本类似，外部象相邻元素内。与内部插入操作基本类似，外部插入也包含插入也包含4个方法。个方法。after(content)：在每个匹配的元素之后插入内容。：在每个匹配的元素之后插入内容。before(content)：在每个匹配的元素之前插入内容。：在每个匹配的元素之前插入内容。insertAfter(content)：把所有匹配的元素插入到另一：把所有匹配的元素
44、插入到另一个指定的元素或元素集合的后面。个指定的元素或元素集合的后面。insertBefore(content)：把所有匹配的元素插入到另：把所有匹配的元素插入到另一个指定的元素或元素集合的前面。一个指定的元素或元素集合的前面。HTML+CSS+JavaScript网页设计第13章使用jQuery第42页嵌套嵌套结构结构l嵌套与插入操作有几分相似，虽然它们都嵌套与插入操作有几分相似，虽然它们都可以实现相同的操作目标，但是两者在概可以实现相同的操作目标，但是两者在概念上还是存在一些区别。嵌套重在结构的念上还是存在一些区别。嵌套重在结构的构建，而插入则侧重内容的显示。构建，而插入则侧重内容的显示。
45、jQuery定义了定义了3个嵌套结构的方法和个嵌套结构的方法和1个取消嵌套个取消嵌套的方法。的方法。HTML+CSS+JavaScript网页设计第13章使用jQuery第43页嵌套嵌套结构结构lwrap()：把所有匹配的元素分别用指定内容或元素包裹起来。这种包：把所有匹配的元素分别用指定内容或元素包裹起来。这种包装对于在文档中插入额外的结构化标记最有用，而且它不会破坏原始装对于在文档中插入额外的结构化标记最有用，而且它不会破坏原始文档的语义品质。参数可以是一下文档的语义品质。参数可以是一下3种：种：HTML代码代码(如如)、新元素、新元素(如如document.createElement(d
46、iv)和已和已存在的元素存在的元素(如如$(.div1)。lwrapAll()：把所有匹配的元素用指定内容或元素包裹起来。参数与：把所有匹配的元素用指定内容或元素包裹起来。参数与wrap()方法一样。方法一样。lwrapInner()：把每一个匹配的元素的子内容：把每一个匹配的元素的子内容(包括文本节点包括文本节点)用指定内用指定内容或元素包裹起来。参数与前面两个方法一样。容或元素包裹起来。参数与前面两个方法一样。lunwrap()：这个方法将移出元素的父元素。这能快速取消：这个方法将移出元素的父元素。这能快速取消wrap()方法方法的效果。匹配的元素以及他们的同辈元素会在的效果。匹配的元素以
47、及他们的同辈元素会在DOM结构上替换他们结构上替换他们的父元素。的父元素。HTML+CSS+JavaScript网页设计第13章使用jQuery第44页结构替换结构替换ljQuery提供了提供了replaceWith(content)和和replaceAll(selector)方法来实现方法来实现HTML结构替换。结构替换。lreplaceWith()能够将所有匹配的元素替换成指定的能够将所有匹配的元素替换成指定的HTML或或DOM元素。例如，对于下面元素。例如，对于下面3个个span元素，使用元素，使用replaceWith()把匹配的所有把匹配的所有span元素及其包含的文本都元素及其包含
48、的文本都替换为替换为“歌曲歌曲”。天堂天堂爱情买卖爱情买卖传奇传奇$(span).replaceWith(歌曲歌曲);HTML+CSS+JavaScript网页设计第13章使用jQuery第45页删除结构删除结构l删除结构有删除结构有3种方法：种方法：empty()、remove(expr)和和detach(expr)。使用使用empty()可以删除匹配元素包含的所有子节点。可以删除匹配元素包含的所有子节点。使用使用remove(expr)方法可以删除匹配的元素，或者方法可以删除匹配的元素，或者符合表达式的匹配元素。符合表达式的匹配元素。使用使用detach(expr)方法可以从方法可以从DO
49、M中删除所有匹配中删除所有匹配的元素。这个方法不会把匹配的元素从的元素。这个方法不会把匹配的元素从jQuery对象中对象中删除，因而可以在将来再使用这些匹配的元素。删除，因而可以在将来再使用这些匹配的元素。HTML+CSS+JavaScript网页设计第13章使用jQuery第46页复制结构复制结构l结构复制主要使用结构复制主要使用clone()方法。该方法用来克隆方法。该方法用来克隆匹配的匹配的DOM 元素并选中克隆的元素。例如，在元素并选中克隆的元素。例如，在下面示例中，先使用下面示例中，先使用clone()方法克隆方法克隆div元素，元素，然后再把它插入到然后再把它插入到 p元素内。元素
50、内。被复制的结构被复制的结构哈哈哈哈$(div).clone().appendTo(p);HTML+CSS+JavaScript网页设计第13章使用jQuery第47页复制结构复制结构lclone()方法其实是有一个布尔参数的，如果不指定参数方法其实是有一个布尔参数的，如果不指定参数则默认参数为则默认参数为false；如果指定了参数为；如果指定了参数为true，那么，那么clone(true)方法不仅能够克隆元素，而且还可以克隆元素方法不仅能够克隆元素，而且还可以克隆元素所定义的事件。例如，在上面示例中如果为所定义的事件。例如，在上面示例中如果为div元素定义元素定义一个一个onclick属性
