JavaScript+jQuery前端开发基础教程（第2版）（微课版）第7章.pptx

JavaScript+jQuery前端开发基础教程微课版

第7章jQuery简介本章主要内容：了解jQueryjQuery资源使用jQuery

7.1了解jQueryjQuery是一个免费、开源的轻量级JavaScript库，其设计宗旨是“WriteLess,DoMore”，即提倡用更少的代码，做更多的事。jQuery最初由JohnResig开发，于2006年1月在纽约的BarCamp会议上发布。现在，jQuery已发展为一个开源项目。jQueryUI以jQuery为基础，提供用于构建Web图形界面的UI组件。jQueryMobile则以jQuery为基础，用移动平台专用组件对其进行了扩展，用于移动应用开发。

7.1.1jQuery主要功能jQuery主要提供下列功能。选取和操作HTML元素：jQuery提供了丰富、高效的选择器，可准确选取HTML文档中的一个或多个元素，并可操作HTML元素的外观和行为。操作CSS：直接使用JavaScript操作页面中的CSS样式表会受限于浏览器的兼容性，jQuery很好地解决了浏览器兼容问题。标准化HTML事件处理：jQuery提供了丰富的页面事件处理方法，不仅解决了浏览器兼容问题，而且使事件处理更加简单。支持网页特效和动画：jQuery提供了丰富的页面特效，通过简单地调用内置的动画函数，即可实现高级动画特效。简化了HTMLDOM操作：jQuery降低了JavaScript操作DOM的复杂性，只需极少的代码即可完成复杂的DOM操作。简单的AJAX操作：开发人员只需简单地调用函数即可完成AJAX请求，获得服务器端的响应，而无须考虑客户端和服务器之间的通信细节。

7.1.2jQuery主要特点1．简洁jQuery库非常小，未压缩的库（3.7.1版）只有287KB。2．功能强大传统的JavaScript脚本编程方式需要开发人员具备良好的程序设计功底，并熟练掌握HTML、CSS和DOM等各种Web开发技术。JavaScript脚本在客户端浏览器中解释执行，在大型Web应用中调试和维护JavaScript脚本往往会耗费开发人员的大量精力。jQuery改变了传统的JavaScript编程方式。使用jQuery提供的函数，即可快速实现各种功能，代码更加简洁、结构清晰。

3．兼容各种浏览器本书前面的章节回避了JavaScript的浏览器兼容问题，原因是目前的各种浏览器对JavaScript的支持越来越全面。而使用jQuery不需要考虑浏览器兼容问题。jQuery具有良好的浏览器兼容能力，支持各种主流浏览器：Chrome、Edge、Firefox、Safari和Opera等。

7.2jQuery资源jQuery主页提供各种相关资源

7.2.1下载jQueryjQuery库有3种类型。uncompressed：未压缩版，包含各种注释、空白和换行符等，适用于开发阶段。compressed：压缩版，删除了各种注释、空白和换行符等，适用于Web应用发布。slim：瘦身版，不包含ajax和effects模块。jQuery库是一个单独的js代码文件。

7.2.2查看jQuery文档在jQuery主页中单击“APIDocumentation”按钮，可进入jQuery文档中心

7.2.3jQuery学习中心在jQuery主页右侧的资源列表中单击“jQueryLearningCenter”链接，可进入jQuery学习中心页面

7.2.4中文学习资源菜鸟教程提供了在线的中文jQuery学习资源

7.3使用jQuery要使用jQuery库，需要在HTML文档中将其引入。引入后，即可在脚本中调用jQuery库提供的各种函数。

7.3.1引入jQuery在HTML文档中使用script标记来引入jQuery。有两种引入jQuery库的方法：引用本地jQuery库引用CDN上的jQuery库。

1．引入本地jQuery库可将jQuery库下载到本地，放在和HTML文档相同的文件夹或子文件夹中，也可放在本地Web服务器中。对初学者而言，建议将jQuery库下载到本地，放在和HTML文档相同的文件夹中。然后，在HTML文档中使用下面的语句将其引入。script?src=jquery-3.7.1.min.js/scriptjquery-3.7.1.min.js是下载到本地的jQuery库文件名，该名称包含了版本号，“min”表示是压缩版的库文件。

2．引入CDN上的jQuery库CDN（ContentDeliveryNetwork，内容分发网络）是互联网中提供文本、图片、脚本、应用程序或其他资源的网络服务器。通常，CDN只提供各类资源的稳定版本。两个常用CDN中的jQuery查询地