Prototype框架笔记一

rachelmarf

浏览: 2356 次
性别:
来自: 成都

最近访客更多访客>>

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

2009-01 ( 2)
更多存档...

博客分类：

Prototype

prototype 框架出版 IE F#

近段时间看了李刚出版的《基于j2ee的Ajax宝典》，个人感觉此书很不错。下面是我的个人摘要吧，以供以后学习用。

一、Prototype的下载安装
   直接下载prototype.js文件，然后在jsp文件中加入<script type="text/javascript" src="./js/prototype.js"></script>代码即可，不需要对环境变量进行重新配置。

二、prototype的基本函数
（1）、 $()函数
   该函数的主要目的是为了减少getElementById方法的使用而提供的一种简化的访问方式。语法格式如下：
　　$(String tagName)：直接获取名为tagName的HTML元素。
　　$(String tagName1,String tagName2)：获取名为tagName1,tagName2的HTML元素数组。
　　如：

       <script type="text/javascript">
		function clickHandler(){
			$("out").innerHTML="使用prototype.js";
		}
	</script>

它的意思是把页面中<div id="out"></div>中写入相应的数据。
值得注意的是：Internet Explorer浏览器中是取name的数型，而其他类型的浏览器是取id标签的页面元素。而且，如果页面中存在两个名为out的页面元素，那么代码将只对第一个发生作用。

（2）、使用$A()函数
　　$A()函数是把单个参数转换成Array对象。
如：

<script type="text/javascript">
		function clickHandler(){
			var fileList=$("menubar").getElementsByTagName("div");
			
			var fileArray=$A(fileList);
			
			for(var i=0;i<fileArray.length;i++){
				alert(fileArray[i].innerHTML);
			}
			
			var str="hello world!";
			var strArray=$A(str);
			for(var i=0;i<strArray.length;i++){
				alert(strArray[i]);
			}	
		}
	</script>

　这段代码中，前半部分的作用将<div id="menubar"></div>中的div标签读取出来，并将他们存储到fileArray里面去了
　后半部分是以一个字符串作参数传入，其结果是将＂Ｈ＂，＂ｅ＂，＂ｌ＂等字母分别输出。

（３）、使用$F()函数
　　$F()函数用于获取表单输入控件的值，比如说text,textArea和Select元素等。这些方法也能用元素id或远树本身作为参数。
　　

	<script type="text/javascript">
		function show(){
			$("show").innerHTML=$F("text1")+"<br>"+$F("text2")+"<br>"+$F("text3");
		}
	</script>
  </head>
  
  <body>	
	<form action="" name="form1" id="form1">
		<input type="text" id="text1"/>
	</form>
	<form action="" name="form2" id="form2">
		<input type="text" id="text2"/><br>
		<textarea cols="40" rows="2" id="text3">
		</textarea>
	</form>
	<div id="show"></div>
	<input type="button" onClick="show()" value="显示"/>
  </body>

注：$F()函数和$()函数有一点是相同的，当在IE中使用$F()函数时，该函数不仅可以根据HTML元素的id属性访问，还可以根据HTML元素的name属性访问。如果HTML元素的id属性和name属性不同，则可能会导致错误。

（4）$H()函数
$H()函数用于将一些对象转换成Hash对象，Hash对象是prototype.js的一个自定义对象，它类似于java语言中的Map数据结构，由一系列的key-value对组成。inspect()是Hash对象提供的一个方法，用于将该Hash对象的key和value全部输出。

（5）$R()函数
$R()函数是用于构造一个objectRange对象，objectRange对象也是Prototype.js的一个自定义类，该类包含了一些简单的方法，可以很方面得枚举该对象里的元素。$R()函数是new OjectRange(lowBound,upperBound,excludeBounds)的缩写形式。

			var range=$R(10,20,false);
			range.each(function(value,index){
				$("out").innerHTML+=value+"<br>";
			})

上面的代码使用$R()函数构造了一个从10到20的OnjectRange对象,再使用each方法遍历该对象的每个元素.

分享到：

Prototype框架笔记二(自定义对象和类)

2009-01-03 15:31
浏览 1103
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论