《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,
