最新JavaScript语言与Ajax应用第07章 JavaScript库(共21张PPT课件).pptx

《最新JavaScript语言与Ajax应用第07章 JavaScript库(共21张PPT课件).pptx》由会员分享，可在线阅读，更多相关《最新JavaScript语言与Ajax应用第07章 JavaScript库(共21张PPT课件).pptx（21页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、主编(zhbin) 董宁 陈丹中国水利水电出版社第一页，共二十一页。第7章 JavaScript库 7.1 JavaScript库简介 7.2 JavaScript库的选择 7.3 利用(lyng)JavaScript库实现DOM操作2022年7月3日星期日JavaScript语言与Ajax应用(yngyng)（第二版）2第二页，共二十一页。7.1 JavaScript库简介(jin ji) 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.

2、us 7.1.7 ExtJS2022年7月3日星期日JavaScript语言(yyn)与Ajax应用（第二版）3第三页，共二十一页。7.1.1 DojoDojo（http:/ Dojo JavaScript中的变量命名同其他语言非常相似，这里要注意以下几点： 第一个字符必须是字母（大小写均可），下划线（_）或者美元符号（$）； 后续的字符可以是字母、数字、下划线或者美元符号； 变量名称不能是关键字或保留字； 不允许(ynx)出现中文变量名，且大小写敏感。 2022年7月3日星期日JavaScript语言与Ajax应用(yngyng)（第二版）5第五页，共二十一页。7.1.2 Prototype

3、Prototype（http:/prototypejs.org）是最早被广泛应用的JavaScript库之一，并且现在项目开发中用到的许多JavaScript技术(jsh)都是由它推广而来的。Prototype库被广泛认同和使用的一个原因是它让许多事情都大大简化了，包括对常用的获取DOM对象的window.document.getElementById方法的简化处理。例如： /获取id为elementId的DOM元素 $(elementId)2022年7月3日星期日JavaScript语言(yyn)与Ajax应用（第二版）6第六页，共二十一页。7.1.2 Prototype 在Prototyp

4、e库中$()函数不仅仅获取DOM元素，同时在返回的DOM元素上会被自动加上许多方法，因此对元素的操纵(cozng)能力将大大增加。 Prototype库的特点在于，它非常关注两个关键方面：操作DOM和应用上的便利措施，包括许多字符串函数和一个定制的枚举对象，用于扩展一个定制的散列对象以及内建的Array对象。在Web应用项目的开发中，尤其是大量使用Ajax技术的Web应用，Prototype库都是一个可靠的选择。2022年7月3日星期日JavaScript语言(yyn)与Ajax应用（第二版）7第七页，共二十一页。7.1.3 jQuery jQuery（http:/）是使用最灵活的JavaSc

5、ript库，与其它库相比，jQuery在设计上大量使用了方法链。jQuery库封装得很好，它的jQuery命名空间使其与其他的库一起使用时不会产生冲突。它也提供了一个$()函数，该函数也提供了对DOM元素获取的封装。如果和Prototype库一起使用，可以(ky)在jQuery中关闭$()函数，以免产生冲突。 jQuery库是一个简练并且功能强大的JavaScript库。如果需要为Web应用项目添加一些交互性，JQuery是一个优秀的解决方案。2022年7月3日星期日JavaScript语言与Ajax应用(yngyng)（第二版）8第八页，共二十一页。7.1.4 Yahoo!UI Librar

6、y（YUI） YUI（http:/ YUI库中使用了大量的命名空间。最顶层是一个YAHOO对象，所有(suyu)其它东西都是从这个对象延伸出来的。例如，如果需要通过id获得DOM元素对象，可以使用下面的语句： YAHOO.util.Dom.get(“elementID”);2022年7月3日星期日JavaScript语言与Ajax应用(yngyng)（第二版）9第九页，共二十一页。7.1.4 Yahoo!UI Library（YUI） YUI库主要(zhyo)专注于DOM工具，其dom命名空间和Anim命名空间就提供了DOM元素对象的获取与创建动画效果的方法。除此之外，YUI库还提供了很多界面

7、部件，界面部件能帮助我们快速的在应用程序中添加复杂功能。 YUI库主要专注于DOM工具，其dom命名空间和Anim命名空间就提供了DOM元素对象的获取与创建动画效果的方法。除此之外，YUI库还提供了很多界面部件，界面部件能帮助我们快速的在应用程序中添加复杂功能。2022年7月3日星期日JavaScript语言(yyn)与Ajax应用（第二版）10第十页，共二十一页。7.1.5 Mootools Mootools（http:/）最早叫做Moo.fx，是一个以Prototype为基础的效果库。利用Mootools库可以很方便的实现JavaScript动画效果，它不但(bdn)能给DOM元素设置动画

8、，而且还能一次设置多个DOM元素。2022年7月3日星期日JavaScript语言(yyn)与Ajax应用（第二版）11第十一页，共二十一页。7.1.6 Script.aculo.usScript.aculo.us（http:/script.aculo.us）是一个动画及界面部件库，它也是基于Prototype库构建的。目前Prototype库与Script.aculo.us库的联合使用比较(bjio)广泛。利用Script.aculo.us库，往往只需要几行代码便可以实现复杂的动态效果。2022年7月3日星期日JavaScript语言与Ajax应用(yngyng)（第二版）12第十二页，共二

9、十一页。7.1.7 ExtJSExtJS（http:/）是一个界面部件库，它可以说是现有的JavaScript库中最优雅和灵活的一个。ExtJS刚出现时叫做YUI.Ext，因为当时它是专门用于YUI库的增强包。但是在其1.0版发布时经过一次改写，从此ExtJS库可以搭配YUI库、jQuery库和Prototype库使用。到了现在的最新版本(bnbn)中，ExtJS库又增加了一个独立版本，不再依赖其它库。2022年7月3日星期日JavaScript语言(yyn)与Ajax应用（第二版）13第十三页，共二十一页。7.1.7 ExtJSExtJS库特别适合用来建立界面复杂的Web应用，因为ExtJS

10、库包含了大量(dling)的界面部件，并且在使用上也并不复杂。2022年7月3日星期日JavaScript语言(yyn)与Ajax应用（第二版）14第十四页，共二十一页。7.2 JavaScript库的选择(xunz) 我们在开发一个Web应用项目时，面对那么多的JavaScript库，到底应该如何选择呢？实际上JavaScript库的选择完全取决于项目需求。JavaScript库一般可以被划分为3大类：DOM辅助、应用程序辅助和界面部件。首先应该从这3个方面来考察Web应用项目，缩小选择的范围。 如果只是给Web应用项目增加一些交互性，比如简单的滑动效果，那么选择的库应该专注于DOM辅助，和

11、一些基本的动画效果。例如Mootools或者jQuery都很合适。 如果Web应用项目需要操纵数据(shj)集和建立复杂的用户界面，那么结合使用Prototype和ExtJS是比较好的方案。2022年7月3日星期日JavaScript语言与Ajax应用（第二版）15第十五页，共二十一页。7.2 JavaScript库的选择(xunz) 考察一个JavaScript库的时候，需要(xyo)充分实验，并且还要看一下源代码，只有对库的结构很好的理解后，才能发挥出它的威力，而且理解库的结构之后，可以更好的选择库。 JavaScript库的这个开发领域已经十分成熟，我们在做Web应用开发时可以选择一个现

12、有的JavaScript库。每次都重新进行JavaScript库的开发是不必要的。上述介绍的JavaScript库应用都很广泛，也就是说有大量的项目在使用它们。使用这些JavaScript库可以节省很多时间，无论是跨浏览器的兼容性，还是测试、维护都能体现出使用JavaScript库的优越性。每个JavaScript库都有各自的特点，选择合适的工具能让我们的Web应用开发事半功倍。2022年7月3日星期日JavaScript语言与Ajax应用（第二版）16第十六页，共二十一页。7.3 利用JavaScript库实现(shxin)DOM操作 7.3.1 jQuery 7.3.2 ExtJS2022

13、年7月3日星期日JavaScript语言与Ajax应用(yngyng)（第二版）17第十七页，共二十一页。7.3.1 jQuery jQuery库结合了CSS和XPath选择符的特点，让我们可以在DOM中快捷而轻松的获取元素或元素集合。在jQuery库中，无论我们使用哪种类型的选择符，都要使用函数$()。$()函数简化(jinhu)了JavaScript获取DOM元素的复杂性，消除了使用for循环获取一组DOM元素的需求。放到$()函数参数中的任何元素都将自动执行循环遍历，并且会被保存到一个jQuery对象中。可以在$()函数中使用的参数几乎被有什么限制。2022年7月3日星期日JavaScr

14、ipt语言与Ajax应用(yngyng)（第二版）18第十八页，共二十一页。7.3.2 ExtJS在ExtJS库中，提供了DomQuery组件，专门用于获取页面上的DOM元素。DomQuery在ExtJS库中以单例的形式出现，其作用就是通过CSS选择符选取目标节点元素，如果找不到目标节点元素就返回null值。使用ExtJS库时，通常可以(ky)通过Ext.get()或Ext.fly()方法获取页面上的元素，但如果我们想一次性获得多个页面上的元素就必须使用DomQuery组件中的select()或query()方法。2022年7月3日星期日JavaScript语言与Ajax应用(yngyng)（

15、第二版）19第十九页，共二十一页。 本章(bn zhn)小结 本章主要说明了什么是JavaScript库，并且重点介绍了现在使用比较广泛的一些JavaScript库。通过本章，希望读者能够了解每一个JavaScript库的特点与应用场合，并能够在Web应用开发中选择合适的JavaScript库来使用。 本章最后重点讲解了两个典型的JavaScript库jQuery与ExtJS在DOM元素的选择操作上上提供的便捷方法。在对jQuery与ExtJS选择DOM元素的举例说明中由于只涉及到DOM元素的选择而不涉及DOM元素的操作，所以不能直观的看到jQuery与ExtJS库在Web页面(y min)中发挥的作用。还后续章节中将以此为基础逐步介绍jQuery与ExtJS库的使用。2022年7月3日星期日JavaScript语言与Ajax应用（第二版）20第二十页，共二十一页。内容(nirng)总结JavaScript语言与Ajax应用（第二版）。后续的字符可以是字母、数字、下划线或者美元符号。最顶层(dn cn)是一个YAHOO对象，所有其它东西都是从这个对象延伸出来的。ExtJS刚出现时叫做YUI.Ext，因为当时它是专门用于YUI库的增强包。JavaScript库一般可以被划分为3大类：DOM辅助、应用程序辅助和界面部件。20第二十一页，共二十一页。