《javascript语言与ajax应用第07章javascript库》由会员分享,可在线阅读,更多相关《javascript语言与ajax应用第07章javascript库(20页珍藏版)》请在金锄头文库上搜索。
1、JavaScript语言与Ajax应用(第二版),主编 董宁 陈丹 中国水利水电出版社,第7章 JavaScript库,7.1 JavaScript库简介 7.2 JavaScript库的选择 7.3 利用JavaScript库实现DOM操作,2019年2月21日星期四,JavaScript语言与Ajax应用(第二版),2,7.1 JavaScript库简介,7.1.1 Dojo 7.1.2 Prototype 7.1.3 jQuery 7.1.4 Yahoo!UI Library(YUI) 7.1.5 Mootools 7.1.6 Script.aculo.us 7.1.7 ExtJS,20
2、19年2月21日星期四,JavaScript语言与Ajax应用(第二版),3,7.1.1 Dojo,Dojo(http:/ Dojo库的目标是建立一个平台,让人们在上面构建类似于桌面程序的Web应用。如果只是在页面中添加一点动画效果,用Dojo就属于大材小用了。,2019年2月21日星期四,JavaScript语言与Ajax应用(第二版),4,7.1.1 Dojo,JavaScript中的变量命名同其他语言非常相似,这里要注意以下几点: 第一个字符必须是字母(大小写均可),下划线(_)或者美元符号($); 后续的字符可以是字母、数字、下划线或者美元符号; 变量名称不能是关键字或保留字; 不允许
3、出现中文变量名,且大小写敏感。,2019年2月21日星期四,JavaScript语言与Ajax应用(第二版),5,7.1.2 Prototype,Prototype(http:/prototypejs.org)是最早被广泛应用的JavaScript库之一,并且现在项目开发中用到的许多JavaScript技术都是由它推广而来的。 Prototype库被广泛认同和使用的一个原因是它让许多事情都大大简化了,包括对常用的获取DOM对象的window.document.getElementById方法的简化处理。例如: /获取id为elementId的DOM元素 $(elementId),2019年2月
4、21日星期四,JavaScript语言与Ajax应用(第二版),6,7.1.2 Prototype,在Prototype库中$()函数不仅仅获取DOM元素,同时在返回的DOM元素上会被自动加上许多方法,因此对元素的操纵能力将大大增加。 Prototype库的特点在于,它非常关注两个关键方面:操作DOM和应用上的便利措施,包括许多字符串函数和一个定制的枚举对象,用于扩展一个定制的散列对象以及内建的Array对象。在Web应用项目的开发中,尤其是大量使用Ajax技术的Web应用,Prototype库都是一个可靠的选择。,2019年2月21日星期四,JavaScript语言与Ajax应用(第二版),
5、7,7.1.3 jQuery,jQuery(http:/)是使用最灵活的JavaScript库,与其它库相比,jQuery在设计上大量使用了方法链。jQuery库封装得很好,它的jQuery命名空间使其与其他的库一起使用时不会产生冲突。它也提供了一个$()函数,该函数也提供了对DOM元素获取的封装。如果和Prototype库一起使用,可以在jQuery中关闭$()函数,以免产生冲突。 jQuery库是一个简练并且功能强大的JavaScript库。如果需要为Web应用项目添加一些交互性,JQuery是一个优秀的解决方案。,2019年2月21日星期四,JavaScript语言与Ajax应用(第二版
6、),8,7.1.4 Yahoo!UI Library(YUI),YUI(http:/ YUI库中使用了大量的命名空间。最顶层是一个YAHOO对象,所有其它东西都是从这个对象延伸出来的。例如,如果需要通过id获得DOM元素对象,可以使用下面的语句: YAHOO.util.Dom.get(“elementID”);,2019年2月21日星期四,JavaScript语言与Ajax应用(第二版),9,7.1.4 Yahoo!UI Library(YUI),YUI库主要专注于DOM工具,其dom命名空间和Anim命名空间就提供了DOM元素对象的获取与创建动画效果的方法。除此之外,YUI库还提供了很多界面
7、部件,界面部件能帮助我们快速的在应用程序中添加复杂功能。 YUI库主要专注于DOM工具,其dom命名空间和Anim命名空间就提供了DOM元素对象的获取与创建动画效果的方法。除此之外,YUI库还提供了很多界面部件,界面部件能帮助我们快速的在应用程序中添加复杂功能。,2019年2月21日星期四,JavaScript语言与Ajax应用(第二版),10,7.1.5 Mootools,Mootools(http:/)最早叫做Moo.fx,是一个以Prototype为基础的效果库。利用Mootools库可以很方便的实现JavaScript动画效果,它不但能给DOM元素设置动画,而且还能一次设置多个DOM元
8、素。,2019年2月21日星期四,JavaScript语言与Ajax应用(第二版),11,7.1.6 Script.aculo.us,Script.aculo.us(http:/script.aculo.us)是一个动画及界面部件库,它也是基于Prototype库构建的。目前Prototype库与Script.aculo.us库的联合使用比较广泛。利用Script.aculo.us库,往往只需要几行代码便可以实现复杂的动态效果。,2019年2月21日星期四,JavaScript语言与Ajax应用(第二版),12,7.1.7 ExtJS,ExtJS(http:/)是一个界面部件库,它可以说是现有
9、的JavaScript库中最优雅和灵活的一个。ExtJS刚出现时叫做YUI.Ext,因为当时它是专门用于YUI库的增强包。但是在其1.0版发布时经过一次改写,从此ExtJS库可以搭配YUI库、jQuery库和Prototype库使用。到了现在的最新版本中,ExtJS库又增加了一个独立版本,不再依赖其它库。,2019年2月21日星期四,JavaScript语言与Ajax应用(第二版),13,7.1.7 ExtJS,ExtJS库特别适合用来建立界面复杂的Web应用,因为ExtJS库包含了大量的界面部件,并且在使用上也并不复杂。,2019年2月21日星期四,JavaScript语言与Ajax应用(第
10、二版),14,7.2 JavaScript库的选择,我们在开发一个Web应用项目时,面对那么多的JavaScript库,到底应该如何选择呢?实际上JavaScript库的选择完全取决于项目需求。JavaScript库一般可以被划分为3大类:DOM辅助、应用程序辅助和界面部件。首先应该从这3个方面来考察Web应用项目,缩小选择的范围。 如果只是给Web应用项目增加一些交互性,比如简单的滑动效果,那么选择的库应该专注于DOM辅助,和一些基本的动画效果。例如Mootools或者jQuery都很合适。 如果Web应用项目需要操纵数据集和建立复杂的用户界面,那么结合使用Prototype和ExtJS是比
11、较好的方案。,2019年2月21日星期四,JavaScript语言与Ajax应用(第二版),15,7.2 JavaScript库的选择,考察一个JavaScript库的时候,需要充分实验,并且还要看一下源代码,只有对库的结构很好的理解后,才能发挥出它的威力,而且理解库的结构之后,可以更好的选择库。 JavaScript库的这个开发领域已经十分成熟,我们在做Web应用开发时可以选择一个现有的JavaScript库。每次都重新进行JavaScript库的开发是不必要的。上述介绍的JavaScript库应用都很广泛,也就是说有大量的项目在使用它们。使用这些JavaScript库可以节省很多时间,无论
12、是跨浏览器的兼容性,还是测试、维护都能体现出使用JavaScript库的优越性。每个JavaScript库都有各自的特点,选择合适的工具能让我们的Web应用开发事半功倍。,2019年2月21日星期四,JavaScript语言与Ajax应用(第二版),16,7.3 利用JavaScript库实现DOM操作,7.3.1 jQuery 7.3.2 ExtJS,2019年2月21日星期四,JavaScript语言与Ajax应用(第二版),17,7.3.1 jQuery,jQuery库结合了CSS和XPath选择符的特点,让我们可以在DOM中快捷而轻松的获取元素或元素集合。 在jQuery库中,无论我们
13、使用哪种类型的选择符,都要使用函数$()。$()函数简化了JavaScript获取DOM元素的复杂性,消除了使用for循环获取一组DOM元素的需求。放到$()函数参数中的任何元素都将自动执行循环遍历,并且会被保存到一个jQuery对象中。可以在$()函数中使用的参数几乎被有什么限制。,2019年2月21日星期四,JavaScript语言与Ajax应用(第二版),18,7.3.2 ExtJS,在ExtJS库中,提供了DomQuery组件,专门用于获取页面上的DOM元素。 DomQuery在ExtJS库中以单例的形式出现,其作用就是通过CSS选择符选取目标节点元素,如果找不到目标节点元素就返回nu
14、ll值。 使用ExtJS库时,通常可以通过Ext.get()或Ext.fly()方法获取页面上的元素,但如果我们想一次性获得多个页面上的元素就必须使用DomQuery组件中的select()或query()方法。,2019年2月21日星期四,JavaScript语言与Ajax应用(第二版),19,本章小结,本章主要说明了什么是JavaScript库,并且重点介绍了现在使用比较广泛的一些JavaScript库。通过本章,希望读者能够了解每一个JavaScript库的特点与应用场合,并能够在Web应用开发中选择合适的JavaScript库来使用。 本章最后重点讲解了两个典型的JavaScript库jQuery与ExtJS在DOM元素的选择操作上上提供的便捷方法。在对jQuery与ExtJS选择DOM元素的举例说明中由于只涉及到DOM元素的选择而不涉及DOM元素的操作,所以不能直观的看到jQuery与ExtJS库在Web页面中发挥的作用。还后续章节中将以此为基础逐步介绍jQuery与ExtJS库的使用。,2019年2月21日星期四,JavaScript语言与Ajax应用(第二版),20,