Ajax学习笔记(二)_H5之家 - 中国HTML5教程资源分享第一站

二、prototype库详解

1、prototype库的使用

//导入下载好的prototype.js文件

//在自己的js中直接使用Prototype对象

document.writeln("Prototype库的版本是："+Prototype.Version+"<br/>");

document.writeln("我的库的版本是："+zpc.version+"<br/>"+"我的年龄："+zpc.age+"<br/>");

document.writeln("客户端是否为Chrome："+Prototype.Browser.WebKit+"<br/>");

alert(Prototype.K("测试字符串"));

</script>

2、使用$()函数和$$()函数访问文档中的HTML元素

$(String tagName)函数：直接获得id为tagName的HTML元素

$(String tagName1,String tagName2):获得id为tagName1、tagName2的HTML元素数组

$$()的参数是一个或多个合法的CSS选择器

3、$A()函数用于将一个参数转换成数组，如果传入的参数不是一个集合，而是一个普通变量，$A()函数将返回一个空数组，而不是只有一个元素的数组。

$F()函数用于获取表单控件的值，比如input、textArea、select等元素。

$()函数是获取HTML元素本身，而$F()函数用于获取表单控件的值，而不是表单域本身。

可以这样说：$()函数返回的是一个HTML元素对象，而$F()函数返回的只是一个字符串值。

使用这两个函数时都应该让HTML元素的id属性和name属性保持一致(保证IE)

4、$H()函数：将js对象转换成Hash对象，Hash类是Prototype库提供的一个类，类似于Java语言里的Map数据结构

5、使用Try.these()函数允许传入一些列的函数作为参数，它将依次调用传入的一系列函数，找到第一个能成功返回值的函数，并将该函数的返回值作为Try.these()函数的返回值。如果这一系列函数都没有返回值，Try.these()将会返回undefined

Try.these()的参数只能是函数引用

6、Prototype的json支持为Date、Object、Array、Hash、Number类增加了toJSON()方法，用于将这些对象转换成一个JSON格式的字符串

此外，Prototype还为String类增加了如下三个与JSON相关的方法：

isJSON():该方法判断指定字符串是否为合法的JSON字符串

evalJSON([sanitize=false]):将指定的字符串转换成json对象

toJSON()：用于将字符串转换成JSON字符串

例程：<body><script type="text/javascript"> var date=new Date(); document.writeln("日期是："+date.toLocaleString()+"<br/>"); document.writeln("日期对应的JSON字符串为："+date.toJSON()+"<br/>"); var p={ name:"zpc", age:25 }; //将对象转换成JSON字符串 document.writeln("普通对象的JSON字符串为："+Object.toJSON(p)+"<br/>"); var books=["周鹏程","鸟鹏"]; //document.writeln("数组的JSON字符串为："+books.toJSON()+"<br/>"); var hash=$H({name:'周鹏程',age:34}); document.writeln("Hash对象的JSON字符串为："+hash.toJSON()+"<br/>"); //document.writeln("数值的JSON字符串为："+(45).toJSON()+"<br/>"); var str='{"name":"zpc","gender":"male"}'; //将一个json格式的字符串转换成JSON对象 var zpc=str.evalJSON(); document.writeln("zpc对象的名字："+zpc.name+"<br/>"); document.writeln("zpc对象的性别："+zpc.gender+"<br/>");</script></body>

7、使用Element对象：该类提供了一些方法简化HTML元素的操作

8、使用ObjectRange对象：一个ObjectRange对象代表一个范围

例程：<body><script type="text/javascript" src="prototype-1.6.0.3.js"></script> <script type="text/javascript"> //直接用new创建一个ObjectRange对象 var range=new ObjectRange(2,9,true);//true表示不包含9 range.each(function(ele,index){ document.writeln("索引"+index+"处的值："+ele+"<br/>") }); //使用$R()函数创建一个ObjectRange对象 var ra=$R('a','g'); document.writeln($A(ra)); alert(ra.include('b'));</script></body>

9、使用Form.Element操作表单控件

Form.Element专门用于操作表单控件，使用它可以激活表单控件，可以判断某个表单控件是否为空，可以清空系列表单控件

10、使用Form操作表单。注意：Form.Element是操作指定表单控件，而Form是操作指定表单(或者表单内的全部控件)

11、使用Hash对象

Hash对象是一种类似于Java中Map的数据结构，它是一个Key-Value对的集合。Hash对象的每个Item是包含两个元素的数组，前一个是Key后一个是Value

借助$H函数可以将一个普通的对象转换为Hash对象，再借助Hash对象的方法可以方便的访问该对象的全部属性和属性值

12、使用Event来简化事件编程

<body> <table border="1"> <tr><td><div><input id="ok" type="button" value="click me"/></div>table的Inner</td></tr> </table> <div id="d">e</div> <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript"> Event.observe("ok","click",function(event){ document.writeln("是否为左击事件："+event.isLeftClick()); document.writeln("事件源："+event.element().value); document.writeln("最近的td元素："+event.findElement("td").innerHTML); }); $("d").innerHTML="<h2>哈哈<h2>"; </script></body>//上面的代码不在使用原始的事件模型，而是使用基于Event提供的事件简化，这种简化消除了事件模型的浏览器差异。

13、使用Template

有时我们要生成多个字串，这些字串中有大量重复内容，只有少量关键部分发生变化，这时就可以借助Template对象了