您的位置：首页 > Web前端 > JavaScript

prototype.js轻量级WEB开发的首选ajax框架（一）

2006-10-18 10:35 267 查看

prototype.js 是Sam Stephenson写的一个Javascript的小框架（实际上是一个函数库），该框架首页是：http://prototype.conio.net/

下面的内容来源自http://www.sergiopereira.com/articles/prototype.js.html，本人学习的同时作个笔记，与读者分享一下经验心得。

吕的部落格：www.Lvjiyong.Com

这次介绍几个相类的函数：$()、$F()、$A、$H、$R。

$() 相当于document.getElementById() ，其中间的参数可以是一个ID或多个ID。

示例：

<HTML>
<HEAD>
<TITLE> Test Page </TITLE>
<script src="prototype-1.4.0.js"></script>
<script>
function test1()
{
var d = $('myDiv');
alert(d.innerHTML);
}
function test2()
{
var divs = $('myDiv','myOtherDiv');
for(i=0; i<divs.length; i++)
{
alert(divs[i].innerHTML);
}
}
</script>
</HEAD>
<BODY>
<div id="myDiv">
<p>吕的部落格欢迎您，我是内容一ID为myDiv</p>
</div>
<div id="myOtherDiv">
<p>吕的部落格欢迎您，我是内容二ID为myOtherDiv</p>
</div>
<input type="button" value="取得myDiv的HTML代码" onclick="test1();"><br>
<input type="button" value="取得myDiv与myOtherDiv的HTML代码" onclick="test2();"><br>
</BODY>
</HTML>

哈哈哈，我是内容一ID为myDiv

呵呵呵我是内容二标题为myOtherDiv

知道怎么用了吧就是使用$('控件ID')取得该ID对应的对象。不懂？无话说了去看看Javascript比较基本的东西吧

好了下面说说$F()这个函数，它实际是是$()的特别版本而已，$()返回具有ID的对象，而$F()只是返回具有ID的对象的值（注意首先这个对像要有value这个属性，返回的也只是一个值而不是对像）该函数主要应用于取得输入框内的值。

示例：

<script>
function test3()
{
alert( $F('userName') );
}

</script>

<input type="text" id="userName" value="www.Lvjiyong.Com">
<input type="button" value="取得userName的值" onclick="test3();">

userName:

$A()的用法就更有特殊性，主要应用于具有NodeLists 属性的对象．使用$A('对象ID')返回的是一组Array对象，哈哈哈，这回又是对象了，还是看一下实际应用的例子吧：

<script>

function showOptions(){
var someNodeList = $('lstEmployees').getElementsByTagName('option');
var nodes = $A(someNodeList);

nodes.each(function(node){
alert(node.nodeName + ': ' + node.innerHTML);
});
}
</script>

<select id="lstEmployees" size="3" >
<option value="1">Lvjiyong.com</option>
<option value="2">www.Lvjiyong.Com</option>
<option value="3">吕的部落格</option>
</select>

<input type="button" value="显示options" onclick="showOptions();" >

Lvjiyong.com
www.Lvjiyong.Com
吕的部落格

$H()是一个对象转化为Hash对象，我还没实际用过，看样子主要可能还是用于将对象转为参数方便传送（.NET序列化简单明了版？），我们看看示例吧：

<script>
function testHash()
{
//let's create the object创建对象
var a = {
first: 10,
second: 20,
third: 30
};

//now transform it into a hash转为Hash
var h = $H(a);
alert(h.toQueryString()); //转为字符串，哈哈哈可以使用Ajax方式把这个对象的属性传到后台了displays: first=10&second=20&third=30
}

</script>

下面说一下今天最后要说的最后一个函数：$R()

The $R() function is simply a short hand to writing new ObjectRange(lowerBound, upperBound, excludeBounds). 哈这绝对是个很有意思的函数：指定上下限即交回你有序的Range

示例：

<script>
function demoDollar_R(){
var range = $R(10, 20, false);
range.each(function(value, index){
alert(value);
});
}

</script>

<input type="button" value="$R的例子" onclick="demoDollar_R();" >

码字真累，好久没有这样边修改边翻译边码字了．先到这儿．

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航