JavaScript语言与Ajax应用第07章 JavaScript库.ppt

1、JavaScript语言和Ajax应用程序(版本2)，总编tuning chendan China water conservancy and水电出版社，第7章JavaScript库，7.1 JavaScript库简介7.2选择JavaScript库使用7.3 JavaScript库操作DOM，2020ui library(yui)7 . 1 . 5 mootools 7 . 1 . 6 script . aculo . us 7 . 1 . 7 ext js，2020年7月7日星期二，JavaScript语言和Ajax应用程序(第二版)如果在页面上只添加少许动画效果，则使用Dojo属于大材质

2、。2020年7月7日星期二，JavaScript语言和Ajax应用程序(版本2)、4，7 . 1 . 1 . 1 Dojo和JavaScript的变量名称与其他语言非常相似。第一个字符必须是字母(可以是大小写)、下划线(_)或美元符号($)，下一个字符可以是字母、数字、下划线或美元符号。变量名不能是关键字或保留字。中文变量名是不允许的，对大小写敏感。2020年7月7日星期二，JavaScript语言和Ajax应用程序(版本2)、5，7.1.2 prototype和prototype(3358 protoypej . org)是最先使用的JavaScript库之一，并且通过当前用于开发项目的许多

3、JavaScript技术Prototype库被广泛接受和使用的一个原因是它大大简化了许多工作，包括简化导入DOM对象常用的window.document.getElementById方法。例如，导入id为elementId的DOM元素$ (elementid)，2020年7月7日星期二，JavaScript语言和Ajax应用程序(版本2)、6，7.1.2 Prototype、PrototypePrototype库的特点是它侧重于DOM操作和应用程序便利的两个关键方面：多个字符串函数和自定义散列对象，以及扩展内置Array对象的自定义枚举对象。开发web应用程序项目，特别是对于使用大量Ajax技

4、术的web应用程序，Prototype库是可靠的选择。2020年7月7日星期二，与使用最灵活的JavaScript库的其他库相比，JavaScript语言和Ajax应用程序(版本2)、7 . 7 . 1 . 3 jQuery和jQuery()在设计上使用了很多方法链。jQuery库的JQuery命名空间封装得很好，以便与其它库一起使用，因此不会发生冲突。它还提供了$()函数，该函数还提供了用于导入DOM元素的包。与Prototype库一起使用时，可以通过在jQuery中关闭$()函数来避免冲突。JQuery库是一个简洁而强大的JavaScript库。如果需要向web应用程序项目添加一些交互，则

5、JQuery是一个优秀的解决方案。2020年7月7日星期二，JavaScript语言和Ajax应用程序(第二版)，8，7.1.4 Yahoo！UI Library(YUI)、YUI(YUI库使用了很多命名空间)。顶部是YAHOO对象，所有其他对象都从该对象延伸。例如，需要通过id获取DOM元素对象时，Yahoo . util . DOM . get( elementID )；2020年7月7日星期二，JavaScript语言和Ajax应用程序(第二版)，9，7.1.4 Yahoo！Yui (UI Library(Yui)，YUI库侧重于DOM工具，提供了通过DOM命名空间和Anim命名空间导入

6、DOM元素对象来创建动画效果的方法。此外，YUI库还提供了许多界面部件，可以帮助您快速向应用程序添加复杂的功能。YUI库侧重于DOM工具，DOM和Anim命名空间提供了通过DOM元素对象获取和创建动画效果的方法。此外，YUI库还提供了许多界面部件，可以帮助您快速向应用程序添加复杂的功能。、2020年7月7日星期二，JavaScript语言和Ajax应用程序(版本2)、10、10、7.1.5 Mootools和Mootools()是基于Prototype的效果库。使用Mootools库可以轻松实现JavaScript动画效果，设置DOM元素的动画，以及一次设置多个DOM元素。2020年7月7日星

7、期二，JavaScript语言和Ajax应用程序(版本11，7.1.6 script.aculo.us，script . aculo . us(http:/script . aculo . us)具有propt目前，Prototype库与Script.aculo.us库一起广泛使用。使用Script.aculo.us库通常只需要几行代码即可实现复杂的动态效果。2020年7月7日星期二，JavaScript语言和Ajax应用程序(版本2)、12、7.1.7 ExtJS、ExtJS()是现有JavaScript库中最优雅、最灵活的界面组件库。ExtJS是YUI .这是第一次以Ext的名字出现，因为

8、当时是YUI库专用的增强包。但是，版本1.0发行后，ExtJS资源库可以与YUI资源库、jQuery资源库和Prototype资源库一起使用。最新版本会将其他独立版本添加到ExtJS库，从而不再依赖其他库。2020年7月7日星期二，JavaScript语言和Ajax应用程序(版本2)、13、7.1.7 ExtJS、ExtJS库特别适合创建接口复杂的web应用程序，因为ExtJS库包含许多接口组件，使用起来并不复杂。2020年7月7日星期二，选择JavaScript语言和Ajax应用程序(版本2)、14、7.2 JavaScript库，开发web应用程序项目时，如何选择大量JavaScript库

9、？实际上，JavaScript库的选择完全取决于项目要求。JavaScript库通常可分为三个主要类别：DOM辅助、应用程序支持和接口部件。首先，必须从这三个方面检查web应用程序，缩小选择范围。将某些交互性(如简单的幻灯片效果)添加到web应用程序时，选择的库应侧重于DOM支持和一些基本动画效果。例如，Mootools或jQuery是有效的。如果需要在web应用程序中操作数据集和设置复杂的用户界面，请考虑将Prototype与ExtJS结合使用。2020年7月7日星期二，在浏览JavaScript语言和Ajax应用程序(版本2)、15、7.2 JavaScript库选择、JavaScript

10、库时，查看充分的实验和源代码，了解库的结构后才能发挥其威力，了解库的结构后才能做出更好的选择。JavaScript库在开发领域非常成熟，在开发web应用程序的过程中，您可以选择现有的JavaScript库。每次重新开发JavaScript库都是不必要的。上述JavaScript库广泛使用。也就是说，很多项目都在使用它。使用这些JavaScript库可以节省大量时间来反映使用JavaScript库的优点，而不管浏览器之间的兼容性、测试、维护如何。每个JavaScript库都具有独特的功能，可以选择相应的工具以更有效地执行web应用程序开发任务。2020年7月7日星期二，使用JavaScript语

11、言和Ajax应用程序(版本2)，16，7.3 JavaScript库处理DOM，7.3.1 jQuery 7.3.2 ExtJS，2020年7月7日星期二，JavaScript无论JQuery库中使用哪种类型的选择器，请使用函数$()。$()函数简化了从JavaScript获取DOM元素的复杂性，从而消除了使用for循环获取DOM元素组的需要。$()函数参数中放置的所有元素都会自动执行循环导航，并存储在jQuery对象中。$()函数可以使用的参数几乎有什么限制，2020年7月7日星期二，提供了DomQuery组件以从JavaScript语言和Ajax应用程序(版本2)、18、7.3.2 Ext

12、JS和ExtJS库中导入页面的DOM元素。作为单个实例出现在ExtJS库中的DomQuery通过CSS选择器选择目标节点元素，如果找不到目标节点元素，则返回null值。使用ExtJS库时，通常可以通过Ext.get()或Ext.fly()方法获取页面上的元素，但是，要一次获取多个页面上的元素，必须在DomQuery组件中使用select()或Query()方法。2020年7月7日星期二，JavaScript语言和Ajax应用程序(版本2)，19，本章摘要，本章主要介绍什么是JavaScript库，并重点介绍一些当前使用范围更广的JavaScript库。本章允许读者了解每个JavaScript库的特征和应用程序，并选择适合开发web应用程序的JavaScript库来使用。本章重点介绍两个常