Prototype框架笔记一

近段时间看了李刚出版的《基于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里面去了
 后半部分是以一个字符串作参数传入,其结果是将"H","e","l"等字母分别输出。

(3)、使用$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方法遍历该对象的每个元素.
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值