大学课程《基于新信息技术的jQuery开发基础教程》PPT课件:第1章.pptx
- 文档编号:18591973
- 上传时间:2023-08-19
- 格式:PPTX
- 页数:54
- 大小:1.78MB
大学课程《基于新信息技术的jQuery开发基础教程》PPT课件:第1章.pptx
《大学课程《基于新信息技术的jQuery开发基础教程》PPT课件:第1章.pptx》由会员分享,可在线阅读,更多相关《大学课程《基于新信息技术的jQuery开发基础教程》PPT课件:第1章.pptx(54页珍藏版)》请在冰点文库上搜索。
单元1我的第一个jQuery程序,任务1搭建并测试jQuery开发环境,1.1jQuery简介1.2jQuery的优势1.3jQuery运行环境单元总结,1.1jQuery简介,对于客户端Web开发来说,JavaScript框架已经成为非常有用的必备组件,而jQuery是一个优秀的轻量级JavaScript库。
jQuery是由JohnResig于2006年1月创建的开源项目,堪称动态Web应用程序领域的编程利器,它能帮助Web开发者利用更少的代码完成更多的工作,从而有效减少错误数量。
jQuery将JavaScript编程量精简为寥寥数行代码,使JavaScript变得更直观,更富魅力。
jQuery还能够为一个或同时为多个元素设置样式,使得通过JavaScript操纵CSS变得分外轻松。
另外,jQuery创建了与W3C标准非常类似的跨浏览器事件API,并添加了一些原创的、非常有用的扩展,在很大程度上消除了IE浏览器和W3C标准在事件API中的不一致性,即解决了IE浏览器和其他浏览器之间的JavaScript代码不兼容问题。
1.2jQuery的优势,jQuery具有以下优势:
(1)轻量级。
jQuery运行库非常轻巧,只需要在页面中引用运行库.js文件就能使用,而运行库.js文件的大小不到30KB。
(2)强大的选择器。
jQuery允许开发者使用从CSS1到CSS3几乎所有的选择器,以及jQuery独创的高级而复杂的选择器。
另外,还可以加入插件使其支持XPath选择器,开发者甚至可以编写属于自己的选择器。
由于jQuery支持选择器这一特性,因此有一定CSS经验的开发人员可以很容易地切入到jQuery的学习中来。
(3)出色的DOM操作封装。
jQuery封装了大量常用的DOM操作,使开发者在编写DOM操作相关程序的时候得心应手。
利用jQuery能够轻松地完成各种原本非常复杂的操作,让JavaScript新手也能写出出色的程序。
(4)可靠的事件处理机制。
jQuery的事件处理机制吸收了JavaScript专家DeanEdwards编写的事件处理函数的精华,使得jQuery在处理事件绑定的时候相当可靠。
在预留退路(gracefuldegradation)、循序渐进以及非入侵式(Unobtrusive)编程思想方面,jQuery也做得非常不错。
(5)完善的Ajax。
jQuery将所有的Ajax操作封装到一个函数$.ajax()里,使得开发者处理Ajax的时候能够专心处理业务逻辑而无须关心复杂的浏览器兼容性和XMLHttpRequest对象的创建与使用问题。
(6)不污染顶级变量。
jQuery只建立一个名为jQuery的对象,其所有的函数方法都在这个对象之下。
其别名$也可以随时交出控制权,绝对不会污染其他的对象。
该特性使jQuery可以与其他JavaScript库共存,在项目中放心地引用而不需要考虑后期可能的冲突。
(7)出色的浏览器兼容性。
作为一个流行的JavaScript库,浏览器的兼容性是必须具备的条件之一。
jQuery能够在IE6.0+、FF2+、Safari2.0+和Opera9.0+下正常运行。
同时,jQuery修复了一些浏览器之间的差异,使开发者不必在开展项目前建立浏览器兼容库。
(8)链式操作方式。
jQuery中最有特色的莫过于它的链式操作方式,即对发生在同一个jQuery对象上的一组动作,可以直接连写而无须重复获取对象。
这一特点使jQuery的代码无比优雅与简洁。
比如下面的代码,JavaScript的功能为找到所有CSS类名(class=highlight)为highlight的tr元素,将类名修改为normal,代码行为为去掉表格行的高亮背景:
lettr=document.getElementsByTagName(tr);letlen=tr.length;for(leti=0;ilen;i+)if(tri.class=highlight)tri.class=normal;,代码数量虽然不是很多,但实现了所需要的功能。
如果采用jQuery来实现,则可以更加简捷,只需一行代码:
$(tr.highlight).removeClass(highlight).addClass(normal);,上面的代码采用链式操作方式完成了三个动作,执行的顺序是从左往右,依次完成操作:
找到class=highlight的所有tr元素;移除所有找到的元素的class中的highlight值(一个元素可能有多个class值);为所有找到的元素添加新的class值normal。
(9)隐式迭代。
上面的代码中,当用jQuery找到所有class=highlight的tr元素后,无须循环遍历每一个返回的元素。
相反,jQuery里的方法都被设计成自动操作对象集合,而不是单独的对象,这使得大量的循环结构变得不再必要,从而大幅地减少了代码量。
(10)行为层与结构层的分离。
开发者可以使用jQuery选择器选中元素,然后直接给元素添加事件。
这种将行为层与结构层完全分离的思想,可以使jQuery开发人员和HTML或其他页面开发人员各司其职,摆脱过去开发冲突或个人单干的开发模式。
同时,后期维护也非常方便,不需要在HTML代码中寻找某些函数和重复修改HTML代码。
(11)丰富的插件支持。
jQuery的易扩展性,吸引了来自全球的开发者来编写jQuery的扩展插件。
目前已经有超过几百种的官方插件支持,而且还不断有新插件面世。
(12)完善的文档。
jQuery的文档非常丰富,现阶段多为英文文档,中文文档相对较少。
很多热爱jQuery的团队都在努力完善jQuery的中文文档,例如jQuery的中文API,图灵教育翻译的LearningjQuery等。
(13)开源。
jQuery是一个开源的产品,任何人都可以自由地使用并提出改进意见。
1.3jQuery运行环境,1.jQuery版本目前,jQuery共有三个版本,在jQuery官网(https:
/,jQuery从1.X版本发展至现在的3.X版本,经历的版本数量不少于60个,每个版本下载时可以选择compressed(压缩)和uncompressed(未压缩)两种类型,如表1-2所示。
2.jQuery库文件下载本书选择的jQuery运行库版本为1.X的最终版本1.12.4。
我们可以到jQuery官网(https:
/
(1)打开jQuery官网(https:
/jQuery”按钮进入下载页面,如图1-1所示。
图1-1jQuery库文件下载步骤一,
(2)在下载页面中,首先看到的是jQuery最新版本(3.5.1)的下载链接,如图1-2所示。
图1-2jQuery库文件下载步骤二,(3)将页面拖动到最下方,可以看到PastReleases(过去版本),点击“jQueryCDN”超链接,进入过去版本CDN页面,如图1-3所示。
(4)在过去版本CDN页面中,可以看到“SeeallversionsofjQueryCore”(查看jQuery内核所有版本)链接,点击后可进入查看所有版本页面,如图1-4所示。
图1-3jQuery库文件下载步骤三,图1-4jQuery库文件下载步骤四,(5)在查看所有版本页面中,找到目标版本“jQueryCore1.12.4”,此处提供了两种下载类型,uncompressed为未压缩版,minified为压缩版(即compressed精简版),如图1-5所示。
图1-5jQuery库文件下载步骤五,(6)点击“uncompressed”超链接,可以打开官方提供的CDN,直接点击右侧的“复制”按钮将CDN代码复制到HTML页面中进行引用。
如果想要下载该版本jQuery库文件,则选择并复制src值的内容,粘贴到浏览器地址栏中打开,如图1-6所示。
图1-6jQuery库文件下载步骤六,(7)复制图1-6中src值的内容,粘贴到浏览器地址栏中,或者在浏览器地址栏中输入src值的内容,打开后可以查看jQuery1.12.4版本的源代码,如图1-7所示。
图1-7jQuery库文件下载步骤七,(8)在本地创建一个.js文件,命名为“jquery-1.12.4.js”,使用记事本打开文件,并将以上页面中的内容复制到文件中保存即可,如图1-8所示。
图1-8jQuery库文件下载步骤八,3.jQueryCDN如果不想在本地下载jQuery运行库文件,可以在CDN(内容分发网络)中引用。
通过遍布全球的服务器托管的jQuery运行库,CDN可以提供性能优势。
如果网页的访问者已经从同一个CDN下载了一份jQuery的副本,那么无须重新下载,可以免去下载jQuery库文件的时间。
以使用最广泛的1.11.3压缩版本为例,可以通过以下代码引用jQuery库文件:
4.jQuery版本选择jQuery版本从1.X至3.X,并不是版本越高越好,而应根据实际需求进行选择。
如果搭建的是电脑端Web网站,建议使用jQuery1.9jQuery1.11版本,因为这些版本支持IE8在当下电脑端兼容IE8还是有必要的。
同时,这些版本的API与更高版本的基本一致,且针对低版本的不足之处进行了修复。
目前很多知名网站选用的jQuery版本也集中在jQuery1.9jQuery1.11,如百度、CSDN、腾讯课堂、慕课网等。
如果搭建的是移动端Web网站,则需要选择jQuery3.X版本,只有在jQuery3.X版本中才加入了移动端的一些功能,低版本对移动端的支持不够优秀。
另外,不推荐的版本有jQuery1.7以下的版本及jQuery2.X版本。
jQuery1.7以下的版本与之后jQuery版本的API相差比较大,且性能不高;而jQuery2.X版本存在的周期较短,完全能被jQuery3.X版本替代。
1.获取运行库根据相关知识中“jQuery库文件下载”的描述,下载jQuery1.12.4运行库,并将其保存为“jquery-1.12.4.js”,或者在页面中引用百度提供的jQuery1.11.3运行库CDN:
2.创建项目在开发工具中创建一个新的项目,命名为“jQueryProject”,后面的内容中将其简称为项目。
3.将jQuery运行库引入项目在项目下创建一个文件夹,命名为“js”,将之前准备好的jquery-1.12.4.js文件放入js文件夹中,目录结构如图1-9所示。
图1-9引用jQuery库文件,4.在页面中引入jQuery在项目中创建一个页面,在页面代码的元素中引入js文件后,就能使用jQuery了,代码如下:
5.编写我的第一个jQuery程序引入jQuery运行库后,可在下方编写jQuery代码,代码如下:
如果jQuery运行库文件路径正确,则显示如图1-10所示页面。
图1-10jQuery加载成功页面,如果jQuery运行库文件路径错误,则显示如图1-11所示页面,浏览器会报出以下错误信息:
“$isnotdefined”($没有被定义)。
图1-11jQuery加载失败页面,6.jQuery代码说明上面的代码,在页面中放入一个h1元素,在页面中显示“jQuery加载失败!
”。
可在JavaScript代码中使用if语句判断jQuery元素是否存在。
如果jQuery元素存在,则证明jQuery运行库加载成功,使用jQuery获取页面中的h1元素,将元素内容修改为“jQuery加载成功!
”;如果jQuery元素不存在,则JavaScript会报错,不会执行下面的代码,页面上显示“jQuery加载失败!
”。
1)$(document).ready()在jQuery库中,可以通过本身自带的方法获取页面DOM元素的对象叫作jQuery对象。
上面的jQuery代码中,“$”(美元符号)是jQuery对象的简写形式,$(document)等价于jQuery(document),作用是在页面中找到document元素,ready()方法表示得到的元素加载完成后执行里面的方法。
上面代码的作用类似于原生JavaScript中的方法:
过它们之间还是有一些区别的,两种方法的对比如表1-3所示。
2)$(h1).text()$(h1)使用jQuery对象自带的方法选择页面中的h1元素,参数“h1”是选择器,下一单元中会详细讨论。
text()方法用于设置所获取元素的内容,相当于给DOM元素的value属性赋值。
单元总结,当使用原生JavaScript编写客户端应用程序代码时,某些任务会非常复杂和繁重,jQuery提供了一套简便的解决方案,可以替代JavaScript,从而更轻松地完成这些编程任务,有时甚至可以将很多行JavaScript代码精简为一两行jQuery代码。
本单元首先介绍了什么是jQuery及jQuery的优势,然后详细介绍了jQuery运行库的版本和各版本之间的区别,方便读者选择适合的运行库。
本单元还介绍了如何下载运行库、如何加载运行库以及如何开始使用jQuery。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 基于新信息技术的jQuery开发基础教程 大学 课程 基于 信息技术 jQuery 开发 基础教程 PPT 课件