网页特效设计基础第2章-初识jQuery.ppt

1、刘刚刘刚 主编主编新一代信息技术“十三五”系列规划教材 第第2 2章章 初识初识jQueryjQuery 随着互联网的快速发展，互联网上陆续涌现了一批优秀随着互联网的快速发展，互联网上陆续涌现了一批优秀的的 JavaScript 脚本库。这些脚本库让开发人员从复杂烦琐脚本库。这些脚本库让开发人员从复杂烦琐的的JavaScript 中解脱出来，将开发的重点从实现细节转向中解脱出来，将开发的重点从实现细节转向功能需求上，提高了项目开发的效率。其中，功能需求上，提高了项目开发的效率。其中，jQuery 是一是一个非常优秀的个非常优秀的 JavaScript 脚本库。本章我们将对脚本库。本章我们将对

2、jQuery 的特点以及如何下载与配置的特点以及如何下载与配置jQuery 进行介绍。进行介绍。2.1 jQuery 2.1 jQuery 概述概述 jQuery 是一套简洁、快速、灵活的是一套简洁、快速、灵活的 JavaScript 脚脚本库。它是由本库。它是由 John Resig 于于 2006 年创建的，它帮助人年创建的，它帮助人们简化了们简化了 JavaScript 代码。由于代码。由于 jQuery 简便易用，文简便易用，文档非常丰富，已被大量的开发人员所推崇，档非常丰富，已被大量的开发人员所推崇，jQuery 设计的设计的宗旨是宗旨是“write Less，Do More”，即倡

3、导写更少的代码，即倡导写更少的代码，做更多的事情。做更多的事情。使用使用 jQuery 可以极大地提高编写可以极大地提高编写 JavaScript 代码代码的效率，让书写出来的代码更加简洁、健壮。同时网络上的效率，让书写出来的代码更加简洁、健壮。同时网络上丰富的丰富的 jQuery 插件也让开发人员的工作变得更为轻松，插件也让开发人员的工作变得更为轻松，让项目的开发效率有了质的提升。让项目的开发效率有了质的提升。2.1.1 jQuery 2.1.1 jQuery 的应用的应用 jQuery jQuery 可以非常方便快捷地获取可以非常方便快捷地获取 DOM DOM 元素、可以动元素、可以动态地

4、修改页面样式、可以动态改变态地修改页面样式、可以动态改变 DOM DOM 内容、及时响应内容、及时响应用户的交互操作、为页面添加动态效果、统一用户的交互操作、为页面添加动态效果、统一 Ajax Ajax 操作、操作、简化常见的简化常见的 JavaScript JavaScript 任务。在任务。在 Web 2.0 Web 2.0 时代，时代，jQuery jQuery 还受到许多网站的青睐，例如海尔官网、京还受到许多网站的青睐，例如海尔官网、京东网上商城、去哪儿网等，许多网站都应用了东网上商城、去哪儿网等，许多网站都应用了 jQuery jQuery。1 1海尔官网应用的海尔官网应用的 jQu

5、ery jQuery 效果效果 海尔官网的一级导航分为海尔官网的一级导航分为 5 5 大类：智慧生活、个大类：智慧生活、个人与家用产品、商业解决方案、用户服务、购买，在一人与家用产品、商业解决方案、用户服务、购买，在一级导航上可以看到应用了级导航上可以看到应用了 jQuery jQuery 实现鼠标指针移入移实现鼠标指针移入移出的效果，鼠标指针移入悬浮到这些一级导航上面，可出的效果，鼠标指针移入悬浮到这些一级导航上面，可以看出显示相应的二级导航，鼠标指针离开一级导航，以看出显示相应的二级导航，鼠标指针离开一级导航，二级导航隐藏起来，以实现一级导航和二级导航的联动二级导航隐藏起来，以实现一级导航

6、和二级导航的联动效果，如图效果，如图 2-1 2-1 所示。所示。图图 2-1 海尔官网应用的海尔官网应用的 jQuery 效果效果2 2京东网上商城手风琴式导航应用的京东网上商城手风琴式导航应用的jQueryjQuery效果效果 京东网上商城上面有很多的产品类目，为了将这些产品京东网上商城上面有很多的产品类目，为了将这些产品类目以很清晰明了的方式展现给用户，电商网站上会采用手类目以很清晰明了的方式展现给用户，电商网站上会采用手风琴式导航的方式来展示所有产品类目。它是采用纵向导航风琴式导航的方式来展示所有产品类目。它是采用纵向导航的方式，首先列出产品的大类，然后根据鼠标指针悬浮的效的方式，首先

7、列出产品的大类，然后根据鼠标指针悬浮的效果显示出所有产品的小类，这也是果显示出所有产品的小类，这也是 jQuery jQuery 应用的一个经典应用的一个经典实现。如图实现。如图 2-2 2-2 所示，将鼠标指针移动到家用电器产品类所示，将鼠标指针移动到家用电器产品类目上，显示出所有家用电器的产品分类。目上，显示出所有家用电器的产品分类。图图 2-2 京东网上商城手风琴式导航应用的京东网上商城手风琴式导航应用的 jQuery 效果效果3 3去哪儿网应用的去哪儿网应用的 jQuery jQuery 效果效果 在去哪儿网的门票页面里，有一个以幻灯片轮播形在去哪儿网的门票页面里，有一个以幻灯片轮播形

8、式显示的广告图片，这也是很多网站会采用的一种设计式显示的广告图片，这也是很多网站会采用的一种设计方式，在有限的区域内展示多张广告信息，只能以幻灯方式，在有限的区域内展示多张广告信息，只能以幻灯片轮播的显示来展现。如图片轮播的显示来展现。如图 2-3 2-3 所示，这里就是应用所示，这里就是应用 jQueryjQuery的幻灯片轮播插件实现的。的幻灯片轮播插件实现的。图图 2-3 去哪儿网应用的去哪儿网应用的 jQuery 效果效果2.1.2 jQuery 2.1.2 jQuery 的特点的特点 jQuery jQuery 是一个简洁快速的是一个简洁快速的 JavaScript JavaScri

9、pt 脚本库，脚本库，它能让人们在网页上简单地操作文档、处理事件、运行它能让人们在网页上简单地操作文档、处理事件、运行动画效果或者添加异步交互。动画效果或者添加异步交互。jQuery jQuery 可以提高编程的可以提高编程的效率，它的主要特点如下。效率，它的主要特点如下。1 1代码精致小巧代码精致小巧2 2功能函数强大功能函数强大3 3跨浏览器跨浏览器4 4链式的语法风格链式的语法风格5 5对对 DOM DOM 对象封装对象封装6 6Ajax Ajax 操作完善操作完善7 7文档丰富文档丰富8 8开源开源9 9插件丰富插件丰富2.1.3 jQuery 2.1.3 jQuery 的版本的版本

10、2.1.4 jQuery 2.1.4 jQuery 版本的选择版本的选择 截至截至 2018 2018 年，年，jQuery jQuery 已经发布到了已经发布到了 3.3 3.3 版本，版本，由于由于 jQuery jQuery 各个大的版本各个大的版本 1.x 1.x、2.x2.x、3.x 3.x 对浏览器对浏览器版本的支持不同，读者可以按自己的需求选取合适的版本。版本的支持不同，读者可以按自己的需求选取合适的版本。1.x 1.x：兼容：兼容 IE 6 IE 6、IE 7IE 7、IE 8 IE 8 浏览器，使用最为浏览器，使用最为广泛，官方只做广泛，官方只做 BUG BUG 维护，功能不

11、再新增，对于早期建维护，功能不再新增，对于早期建设的项目或者要求对设的项目或者要求对 IE 6 IE 6、IE 7IE 7、IE 8 IE 8 浏览器支持的浏览器支持的话，可以选择话，可以选择 1.x 1.x 这个版本。这个版本。2.x2.x：不兼容：不兼容 IE 6 IE 6、IE 7IE 7、IE 8 IE 8 浏览器，浏览器，2.x 2.x 版本版本系列发布的比较少，使用的人也少，官方只做系列发布的比较少，使用的人也少，官方只做 BUG BUG 维护，维护，功能不再新增。如果不考虑兼容低版本功能不再新增。如果不考虑兼容低版本 IE 6 IE 6、IE 7IE 7、IE IE 8 8 的浏

12、览器可以使用的浏览器可以使用 2.x 2.x。3.x 3.x：不兼容：不兼容 IE 6 IE 6、IE 7IE 7、IE 8 IE 8 浏览器，只支持最浏览器，只支持最新的浏览器，很多老的新的浏览器，很多老的 jQuery jQuery 插件不支持这个版本，目插件不支持这个版本，目前该版本是官方主要更新维护的版本。前该版本是官方主要更新维护的版本。2.2 jQuery 2.2 jQuery 下载与配置下载与配置2.2.1 2.2.1 下载下载 jQuery jQuery jQuery jQuery 是一个开源的脚本库，可以从它的官方网是一个开源的脚本库，可以从它的官方网站中下载。站中下载。（1

13、 1）进入）进入 jQuery jQuery 官方网站的首页，如图官方网站的首页，如图 2-4 2-4 所示。所示。图图 2-4 jQuery 官方网站的首页官方网站的首页（2 2）在）在 jQuery jQuery 官方网站的首页中，可以下载所需要官方网站的首页中，可以下载所需要的的 jQuery jQuery 库，本书使用库，本书使用 jQuery 3.3.1 jQuery 3.3.1 版本。单击版本。单击网站首页的网站首页的“Download jQuery”“Download jQuery”按钮，页面跳转，之按钮，页面跳转，之后单击后单击“Download the compressed“

14、Download the compressed，production production jQuery 3.3.1”jQuery 3.3.1”超链接，选择超链接，选择“另存为另存为”，将弹出图，将弹出图 2-5 2-5 所示的对话框。所示的对话框。（3 3）单击）单击“保存保存”按钮，将按钮，将 jQuery jQuery 库下载到本地计库下载到本地计算机上。下载后的文件名为算机上。下载后的文件名为 jquery-3.3.1.min.js jquery-3.3.1.min.js。图图 2-5 下载下载 jquery 3.3.1.min.js2.2.2 2.2.2 配置配置 jQuery jQ

15、uery 将将 jQuery jQuery 库下载到本地计算机后，还需要在项目中配库下载到本地计算机后，还需要在项目中配置置 jQuery jQuery 库。即将下载后的文件放置到项目指定的文件夹库。即将下载后的文件放置到项目指定的文件夹中，通常放在中，通常放在 js js 文件夹中，然后在需要应用文件夹中，然后在需要应用 jQuery jQuery 的页的页面中使用下面的语句，将其引用到文件中。面中使用下面的语句，将其引用到文件中。script language=javascript src=js/jquery-3.3.1.min.js 或者或者script src=js/jquery-3.

16、3.1.min.js type=text/javascript2.2.3 2.2.3 我的第一个我的第一个 jQuery jQuery 脚本脚本【例【例 2-1 2-1】应用应用 jQuery jQuery 弹出一个提示对话框（实例弹出一个提示对话框（实例位置：源码位置：源码 第第 2 2 章章2-12-1）。）。（1 1）创建一个名称为）创建一个名称为 js js 的文件夹，并将的文件夹，并将 jquery-jquery-3.3.1.min.js 3.3.1.min.js 复制到该文件夹中。复制到该文件夹中。（2 2）创建一个名称为）创建一个名称为 index.html index.html

17、 的文件，在该文件的文件，在该文件的的标记中引用标记中引用 jQuery jQuery 库文件，关键代码如下：库文件，关键代码如下：script language=javascript src=js/jquery-3.3.1.min.js（3 3）编写）编写 jQuery jQuery 代码，实现在页面载入完毕后，弹代码，实现在页面载入完毕后，弹出一个提示对话框，具体代码如下：出一个提示对话框，具体代码如下：$(document).ready(function()$(document).ready(function()alert(alert(我的第一个我的第一个jQueryjQuery脚本！脚

18、本！););););实际上，上面的代码还可以更简单，也就是将实际上，上面的代码还可以更简单，也就是将$(document).ready$(document).ready 用用“$”“$”符号代替，替换后的代码符号代替，替换后的代码如下：如下：$(function()$(function()alert(alert(我的第一个我的第一个jQueryjQuery脚本！脚本！););););运行运行 index.html index.html，将弹出图，将弹出图 2-6 2-6 所示的对话框。所示的对话框。图图 2-6 弹出的提示对话框弹出的提示对话框 熟悉熟悉 JavaScript JavaScri

19、pt 的读者知道，要实现例的读者知道，要实现例 2-1 2-1 的的效果，还可以通过下面的代码实现：效果，还可以通过下面的代码实现：window.onload=function()window.onload=function()alert(alert(我的第一个我的第一个jQueryjQuery脚本！脚本！););2.3 jQuery 2.3 jQuery 对象和对象和 DOM DOM 对象对象2.3.1 jQuery 2.3.1 jQuery 对象和对象和 DOM DOM 对象简介对象简介1 1DOM DOM 对象对象 DOM DOM 是是 Document Object Model Doc

20、ument Object Model，即文档对象模，即文档对象模型的缩写。型的缩写。DOM DOM 是以层次结构组织的节点或信息片段的是以层次结构组织的节点或信息片段的集合，每一份集合，每一份 DOM DOM 都可以表示成一棵树。都可以表示成一棵树。下面构建一个基本的网页，网页代码如下：下面构建一个基本的网页，网页代码如下：DOM DOM对象对象 人邮图书人邮图书 jQueryjQuery基础开发教程基础开发教程 网页的初始化效果如图网页的初始化效果如图 2-7 2-7 所示。所示。图图 2-7 一个非常基本的网页一个非常基本的网页 可以把上面的可以把上面的 HTML HTML 结构描述为一棵

21、结构描述为一棵 DOM DOM 树，如树，如图图 2-8 2-8 所示。所示。图图 2-8 把网页元素表示为把网页元素表示为 DOM 树树 在这棵在这棵 DOM DOM 树中，树中，、节点都是节点都是 DOM DOM 元素元素的节点，可以使用的节点，可以使用 JavaScript JavaScript 中的中的 getElementById getElementById或或 getElementsByTagName getElementsByTagName 来获取，得到的元素就是来获取，得到的元素就是 DOM DOM 对象。对象。DOM DOM 对象可以使用对象可以使用 JavaScript

22、JavaScript 中的方法。中的方法。例如：例如：var domObject=document.getElementById(id);var domObject=document.getElementById(id);var html=domObject.innerHTML;var html=domObject.innerHTML;2 2jQuery jQuery 对象对象 jQuery jQuery 对象就是通过对象就是通过 jQuery jQuery 包装包装 DOM DOM 对象后对象后产生的对象。产生的对象。jQuery jQuery 对象是独有的，可以使用对象是独有的，可以使用

23、jQuery jQuery 里的方法。例如：里的方法。例如：$(#test).html();/$(#test).html();/获取获取idid为为testtest的元素内的的元素内的htmlhtml代码代码 这段代码等同于：这段代码等同于：document.getElementById(test).innerHTML;document.getElementById(test).innerHTML;虽然虽然 jQuery jQuery 对象是包装对象是包装 DOM DOM 对象后产生的，但对象后产生的，但是是 jQuery jQuery 无法使用无法使用 DOM DOM 对象的任何方法，同理对

24、象的任何方法，同理 DOM DOM 对象也不能使用对象也不能使用 jQuery jQuery 里面的方法。例如：里面的方法。例如：$(#test).innerHTML$(#test).innerHTML、document.document.getElementById(test).html()getElementById(test).html()等的写法都是等的写法都是错误的。错误的。2.3.2 jQuery2.3.2 jQuery对象和对象和DOMDOM对象的相互转换对象的相互转换1 1jQuery jQuery 对象转换成对象转换成 DOM DOM 对象对象 jQuery jQuery 提

25、供了两种转换方式将一个提供了两种转换方式将一个 jQuery jQuery 对象转对象转换成换成 DOM DOM 对象，即对象，即indexindex和和 get(index)get(index)。（1 1）jQuery jQuery 对象是一个类似数组的对象，可以通过对象是一个类似数组的对象，可以通过indexindex的方法得到相应的的方法得到相应的 DOM DOM 对象。例如：对象。例如：var$mr=$(#mr);/jQueryvar$mr=$(#mr);/jQuery对象对象var mr=$mr0;/DOMvar mr=$mr0;/DOM对象对象alert(mr.value);/al

26、ert(mr.value);/获取获取DOMDOM元素的元素的valuevalue的值并弹出的值并弹出（2 2）jQuery jQuery 本身也提供本身也提供 get(index)get(index)方法，可以得到方法，可以得到相应的相应的 DOM DOM 对象。例如：对象。例如：var$mr=$(#mr);/jQueryvar$mr=$(#mr);/jQuery对象对象var mr=$mr.get(0);/DOMvar mr=$mr.get(0);/DOM对象对象alert(mr.value);/alert(mr.value);/获取获取DOMDOM元素的元素的valuevalue的值并弹

27、出的值并弹出2 2DOM DOM 对象转换成对象转换成 jQuery jQuery 对象对象 对于一个对于一个 DOM DOM 对象，只需要用对象，只需要用$()$()把它包装起来，就把它包装起来，就可以得到一个可以得到一个 jQuery jQuery 对象，即对象，即$(DOM$(DOM 对象对象)。例如：。例如：var mr=document.getElementById(mr);/DOMvar mr=document.getElementById(mr);/DOM对象对象var$mr=$(mr);/jQueryvar$mr=$(mr);/jQuery对象对象alert($(mr).val

28、();/alert($(mr).val();/获取文本框的值并弹出获取文本框的值并弹出 转换后，转换后，DOM DOM 对象就可以任意使用对象就可以任意使用 jQuery jQuery 中的方法中的方法了。了。通过以上方法，可以任意实现通过以上方法，可以任意实现 DOM DOM 对象和对象和 jQuery jQuery 对象之间的转换。需要再次强调的是，对象之间的转换。需要再次强调的是，DOM DOM 对象才能使用对象才能使用 DOM DOM 中的方法，而中的方法，而 jQuery jQuery 对象是不可以使用对象是不可以使用 DOM DOM 中的中的方法的。方法的。【例【例 2-2 2-2

29、】DOM DOM 对象转换为对象转换为 jQuery jQuery 对象（实例位置：对象（实例位置：源码源码 第第 2 2 章章2-22-2）。）。（1 1）创建一个名称为）创建一个名称为 js js 的文件夹，并将的文件夹，并将 jquery-jquery-3.3.1.min.js 3.3.1.min.js 复制到该文件夹中。复制到该文件夹中。（2 2）创建一个名称为）创建一个名称为 index.html index.html 的文件，在该文件的文件，在该文件的的标记中引用标记中引用 jQuery jQuery 库文件，关键代码如下：库文件，关键代码如下：script language=ja

30、vascript src=js/jquery-3.3.1.min.js（3 3）编写）编写 jQuery jQuery 代码，实现在页面载入完毕后，首代码，实现在页面载入完毕后，首先使用先使用 DOM DOM 对象的方法弹出对象的方法弹出 p p 节点的内容，之后将节点的内容，之后将DOM DOM 对象转换为对象转换为 jQuery jQuery 对象，同样再弹出对象，同样再弹出 p p 节点的节点的内容。具体代码如下：内容。具体代码如下：$(document).ready(function()$(document).ready(function()var domObj=document.ge

31、tElementById(testp);var domObj=document.getElementById(testp);alert(alert(使用使用DOMDOM方法获取方法获取p p节点的内容：节点的内容：+domObj.innerHTML);+domObj.innerHTML);var$jqueryObj=$(domObj);var$jqueryObj=$(domObj);alert(alert(使用使用jQueryjQuery方法获取方法获取p p节点的内容：节点的内容：+$jqueryObj.html();+$jqueryObj.html();)运行运行 index.html i

32、ndex.html，将弹出图，将弹出图 2-9 2-9 所示的提示对所示的提示对话框。话框。图图 2-9 弹出的提示对话框弹出的提示对话框【例【例 2-3 2-3】jQuery jQuery 对象转换为对象转换为 DOM DOM 对象（实例位置：对象（实例位置：源码源码 第第 2 2 章章2-32-3）。）。（1 1）创建一个名称为）创建一个名称为 js js 的文件夹，并将的文件夹，并将 jquery-jquery-3.3.1.min.js 3.3.1.min.js 复制到该文件夹中。复制到该文件夹中。（2 2）创建一个名称为）创建一个名称为 index.html index.html 的文

33、件，在该文件的文件，在该文件的的标记中引用标记中引用 jQuery jQuery 库文件，关键代码如下：库文件，关键代码如下：script language=javascript src=js/jquery-3.3.1.min.js（3 3）编写）编写 jQuery jQuery 代码，实现在页面载入完毕后，首代码，实现在页面载入完毕后，首先获取两个先获取两个 jQuery jQuery 对象，使用对象，使用 jQuery jQuery 对象的方法对象的方法分别弹出两个分别弹出两个 p p 节点的内容，之后分别使用节点的内容，之后分别使用indexindex和和 get(index)get(i

34、ndex)的方法将的方法将 jQuery jQuery 对象转换为对象转换为 DOM DOM 对象，对象，同样再弹出两次同样再弹出两次 p p 节点的内容。具体代码如下：节点的内容。具体代码如下：$(document).ready(function()$(document).ready(function()var$jQueryObj=$(#testp);var$jQueryObj=$(#testp);alert(alert(使用使用jQueryjQuery方法获取第一个方法获取第一个p p节点的内容：节点的内容：+$jQueryObj.html();+$jQueryObj.html();var

35、$jQueryObj1=$(#testp1);var$jQueryObj1=$(#testp1);alert(alert(使用使用jQueryjQuery方法获取第二个方法获取第二个p p节点的内容：节点的内容：+$jQueryObj1.html();+$jQueryObj1.html();var domObj=$jQueryObj0;var domObj=$jQueryObj0;alert(alert(使用使用DOMDOM方法获取第一个方法获取第一个p p节点的内容：节点的内容：+domObj.innerHTML);+domObj.innerHTML);var domObj1=$jQuery

36、Obj1.get(0);var domObj1=$jQueryObj1.get(0);alert(alert(使用使用DOMDOM方法获取第二个方法获取第二个p p节点的内容：节点的内容：+domObj1.innerHTML);+domObj1.innerHTML);)运行运行 index.html index.html，将弹出图，将弹出图 2-10 2-10 所示的提示对所示的提示对话框。话框。图图 2-10 弹出的提示对话框弹出的提示对话框2.4 2.4 解决解决 jQuery jQuery 和其他库的冲突和其他库的冲突 在使用在使用 jQuery jQuery 开发的时候，还可能会用到其

37、他的开发的时候，还可能会用到其他的 JavaScript JavaScript 库，例如，库，例如，PrototypePrototype、MooTools MooTools 等。但等。但多库共存时可能会发生冲突，若发生冲突，可以通过以多库共存时可能会发生冲突，若发生冲突，可以通过以下方案进行解决。下方案进行解决。2.4.1 jQuery 2.4.1 jQuery 库在其他库之前导入库在其他库之前导入 jQuery jQuery 库在其他库之前导入，可以直接使用库在其他库之前导入，可以直接使用 jQuery jQuery(callback)(callback)方法。方法。如果如果 jQuery

38、jQuery 库在其他库之前导入，可以直接使用库在其他库之前导入，可以直接使用“jQuery”“jQuery”来做一些来做一些 jQuery jQuery 的工作，而使用的工作，而使用$()$()方法作为方法作为其他库的快捷方式。例如：其他库的快捷方式。例如：jQueryjQuery库在其他库之前导入库在其他库之前导入 !-jQuery-script src=js/jquery.js type=text/javascript!-prototype-script src=js/prototype.js type=text/javascript prototype prototype jQuery

39、jQuery（将被绑定（将被绑定clickclick事件）事件）jQuery(function()/jQuery(function()/在这里直接使用在这里直接使用jQueryjQuery代替代替$符号符号 jQuery(p).click(function()jQuery(p).click(function()alert(jQuery(this).html();/alert(jQuery(this).html();/获取获取p p节点的内容节点的内容 ););););$(prototypepp).style.display=none;/$(prototypepp).style.display=

40、none;/使用使用prototype prototype 2.4.2 jQuery 2.4.2 jQuery 库在其他库之后导入库在其他库之后导入 jQuery jQuery库在其他库之后导入，使用库在其他库之后导入，使用jQuery.noConflick()jQuery.noConflick()方法将变量方法将变量$的控制权让给其他库。的控制权让给其他库。具体有以下几种方式。具体有以下几种方式。（1 1）使用）使用 jQuery.noConflick()jQuery.noConflick()方法之后，将方法之后，将 jQuery()jQuery()函函数作为数作为 jQuery jQuer

41、y 对象的制造工厂。对象的制造工厂。jQuery jQuery库在其他库之后导入库在其他库之后导入 !-prototype-script src=js/prototype.js type=text/javascript!-jQuery-script src=js/jquery.js type=text/javascript prototype prototype jQueryjQuery（将被绑定（将被绑定clickclick事件）事件）jQuery.noConflict();/jQuery.noConflict();/将变量将变量$的控制权交给的控制权交给prototype.js proto

42、type.js jQuery(function()/jQuery(function()/使用使用jQuery jQuery jQuery(p).click(function()jQuery(p).click(function()alert(jQuery(this).text();alert(jQuery(this).text();)$(prototypepp).style.display=none;/$(prototypepp).style.display=none;/使用使用prototype prototype （2 2）自定义一个快捷方式，例如，）自定义一个快捷方式，例如，$jq$jq、

43、$j$j、$m$m 等。等。var$m=jQuery.noConflict();/var$m=jQuery.noConflict();/自定义一个快捷方式自定义一个快捷方式$m(function()/$m(function()/利用自定义的快捷方式利用自定义的快捷方式$m$m$m(p).click(function()$m(p).click(function()alert($m(this).text();alert($m(this).text();)$(prototypepp).style.display=none;/$(prototypepp).style.display=none;/使用使

44、用prototypeprototype（3 3）如果不想给）如果不想给 jQuery jQuery 自定义名称，又想使用自定义名称，又想使用$，同时又，同时又不想与其他库相冲突，那么可以尝试使用以下两种方法：不想与其他库相冲突，那么可以尝试使用以下两种方法：jQuery.noConflict();/jQuery.noConflict();/将变量的控制权交给将变量的控制权交给prototype.js prototype.js jQuery(function($)/jQuery(function($)/使用使用jQueryjQuery，设定页面加载时执行的函数，设定页面加载时执行的函数$(p).

45、click(function()/$(p).click(function()/在函数内部可以继续使用在函数内部可以继续使用$()$()方法方法 alert($(this).text();alert($(this).text();)$(prototypepp).style.display=none;/$(prototypepp).style.display=none;/使用使用prototypeprototype或者：或者：jQuery.noConflict();jQuery.noConflict();/将变量将变量$的控制权交给的控制权交给prototype.js prototype.js (

46、function($)(function($)/定义匿名函数并设置形参为定义匿名函数并设置形参为$(function()$(function()/匿名函数内部的匿名函数内部的$都是都是jQuery jQuery$(p).click(function()$(p).click(function()/继续使用继续使用$()$()方法方法 alert(jQuery(this).text();alert(jQuery(this).text();)(jQuery)(jQuery)$(prototypepp).style.display=none;/$(prototypepp).style.display=

47、none;/使用使用prototypeprototype2.5 jQuery 2.5 jQuery 插件简介插件简介 jQuery jQuery 具有强大的扩展能力，允许开发人员使用具有强大的扩展能力，允许开发人员使用或是创建自己的或是创建自己的 jQuery jQuery 插件来扩展插件来扩展jQuery jQuery 的功能，的功能，这些插件可以帮助开发人员提高开发效率，节约项目成这些插件可以帮助开发人员提高开发效率，节约项目成本。而且一些比较著名的插件也受到了开发人员的追捧，本。而且一些比较著名的插件也受到了开发人员的追捧，插件又将插件又将 jQuery jQuery 的功能提升到一个新

48、的层次。的功能提升到一个新的层次。2.5.1 2.5.1 插件的使用插件的使用 使用使用 jQuery jQuery 插件比较简单，首先将要使用的插件插件比较简单，首先将要使用的插件下载到本地计算机中，然后按照下面的步骤操作，就可下载到本地计算机中，然后按照下面的步骤操作，就可以使用插件实现想要的效果了。以使用插件实现想要的效果了。（1 1）把下载的插件包含到）把下载的插件包含到标记内，并确保它位标记内，并确保它位于主于主 jQuery jQuery 源文件之后。源文件之后。（2 2）包含一个自定义的）包含一个自定义的 JavaScript JavaScript 文件，并在其中文件，并在其中使

49、用插件创建或扩展的方法。使用插件创建或扩展的方法。2.5.2 2.5.2 流行的插件流行的插件 在在 jQuery jQuery 官方网站中，有一个官方网站中，有一个“Plugins”“Plugins”（插（插件）超级链接，单击该超级链接，将进入到件）超级链接，单击该超级链接，将进入到 jQuery jQuery 的的插件分类列表页面，如图插件分类列表页面，如图 2-11 2-11 所示。所示。图图 2-11 jQuery 的插件分类列表页面的插件分类列表页面1 1jCarousel jCarousel 插件插件 jQuery jQuery 的的 jCarousel jCarousel 插件可

50、以实现如图插件可以实现如图 2-12 2-12 所示的图片传送带效果。单击左、右两侧的箭头可以向所示的图片传送带效果。单击左、右两侧的箭头可以向左或向右翻看图片。当到达第一张图片时，左侧的箭头左或向右翻看图片。当到达第一张图片时，左侧的箭头将变为不可用状态；当到达最后一张图片时，右侧的箭将变为不可用状态；当到达最后一张图片时，右侧的箭头变为不可用状态。头变为不可用状态。图图 2-12 jCarousel 插件实现的图片传送带效果插件实现的图片传送带效果2 2EasySlide EasySlide 插件插件 使用使用jQueryjQuery的的EasySlideEasySlide插插件可以实现图