第14章 Prototype.pptVIP

第14章 Prototype.js框架介绍 随着Ajax技术的不断发展，应用的不断深入，逐渐涌现出了一批JavaScript开发框架。这些框架有些关注于JavaScript开发的底层支持，提供兼容性的封装，提供一些便捷有效的方法等等；有些则提供了更高层面的功能，例如UI、动画效果等等。使用这些框架可以极大的简化JavaScript的开发工作，加快项目进程。其中作为JavaScript的基本开发框架，Prototype.js要最具知名度。 14.1 Prototype.js常用方法介绍 Prototype.js其实更像一个大类库，提供了大量方便JavaScript和Ajax开发的方法。熟悉这些方法可以极大的加快项目的开发进程。本节将结合实例，向读者介绍Prototype.js中最常用的一些方法。 14.1.1 使用$方法代替document.getElementById Prototype.js最具代表性的方法之一，就是$方法。$方法最直接的作用就是代替document.getElementById使用。在JavaScript程序中，经常需要根据元素id来取得对元素的引用，而document.getElementById的书写过于冗长，这时，就可以使用Prototype.js提供的$方法来代替。例如，要取得页面上一个id为“containter”的div元素，可以使用如下代码。 var divElement = $(‘containter’); //返回id为”id”的元素对象 14.1.2 使用$$方法获得元素引用 $$方法同样用于获得元素的引用，与$不同的是，它接受一个css选择器作为参数，将所有符合该选择器的元素作为数组返回。 $$(“div”); $$(#content); $$(“li.first”) 14.1.3 根据css类名取得元素集合 Prototype.js给document对象新增了一个getElementsByClassName的方法，通过指定一个css类名为参数，来获取当前页面中所有应用了该css类样式的元素集合。 14.1.4 使用Try.these尝试运行多个函数 Prototype.js提供了Try.these方法来尝试执行多个函数，其接受一个或者多个函数作为参数，并返回第一个成功运行的函数的返回值，其语法如下所示。 Try.these(func1[,func2[,func3…]]); function getXmlNodeValue(xmlNode){ return Try.these( function() {return xmlNode.text;}, function() {return xmlNode.textContent;} ); } 14.1.5 使用$F方法来获得表单元素的值 Prototype.js提供了$F方法来获得表单元素的值，其接受一个字符串参数，表示需要取值的表单元素的id值，并返回该表单元素的值。 14.1.6 数组迭代的简化方法 Prototype.js对Array对象的原型进行了扩展，为其增加了一个名为each的方法来完成对数组的迭代，其语法如下所示。 array.each(function(arrayItem,arrayIndex) { //do something.. }); 14.1.7 设置元素的样式 使用$方法获得的元素，Prototype.js会为其加上一些使用的方法，其中就包括setStyle方法。setStyle方法可以用来设置元素的CSS样式，其接受一个对象作为参数，对象的每一个属性对应一个CSS样式属性，对象的属性名就是CSS样式的属性名，属性值就是CSS样式的属性值。 var div = $(“divId”); div.setStyle({ cssFloat:”left”, opacity:0.5 }); 14.1.8 切换元素的隐现状态 通过$方法获得的元素，可以使用hide方法来隐藏该元素，也可以使用show方法来显示隐藏的元素，还可以使用toggle方法来切换当前元素的隐现状态。 14.1.9 序列化表单值 在Ajax应用程序中，经常会使用XMLHttpRequest来提交数据而不是使用传统的表单，但是仍然会以表单为单位来组织界面。Prototype.js提供了serialize方法来完成对表单值得序列化。使用$方法获取的表单元素，Prototype.js会对其扩展，增加serialize方法来完成对其表单项的序列化输出。 14.1.10 转换HTML标签 在一些Ajax程序中，例如留言本程序，经常需要对用户输入的值进行HTML编码处理，以防止输入的内容中包含HTML标签而破坏应用程序。Prototype.j