prototype.js学习1

原创 2007年09月16日 18:02:00

一些实用的函数

1 使用$()方法

$() 方法是在DOM中使用过于频繁的 document.getElementById() 方法的一个便利的简写,就像这个DOM方法一样,这个方法返回参数传入的id的那个元素。

比起DOM中的方法,这个更胜一筹。你可以传入多个id作为参数然后 $() 返回一个带有所有要求的元素的一个 Array 对象。

<HTML>
<HEAD>
<TITLE> Test Page </TITLE>
<script src="prototype.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>This is a paragraph</p>
</div>
<div id="myOtherDiv">
<p>This is another paragraph</p>
</div>
<input type="button" value=Test1 onclick="test1();"><br>
<input type="button" value=Test2 onclick="test2();"><br>
</BODY>
</HTML>

另外一个好处是,这个函数能传入用string表示的对象ID,也可以传入对象本身,这样,在建立其它能传两种类型的参数的函数时非常有用。

注意:

当ie调用$F()函数时,该函数不仅可以根据id属性访问,还可以根据name属性访问,如果html元素的id属性和name属性不一致,可能会导致错误.

2 使用$F()函数

$F()函数是另一个大收欢迎的“快捷键”,它能用于返回任何表单输入控件的值,比如text box,drop-down list。这个方法也能用元素id或元素本身做为参数。

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

</script>
<input type="text" id="userName" value="Joe Doe"><br>
<input type="button" value=Test3 onclick="test3();"><br>

3 使用$A()函数

$A()函数能把它接收到的单个的参数转换成一个Array对象。

这个方法,结合被本类库扩展了的Array类,能方便的把任何的可枚举列表转换成或拷贝到一个Array对象。一个推荐的用法就是把DOM Node Lists转换成一个普通的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="10" >
<option value="5">Buchanan, Steven</option>
<option value="8">Callahan, Laura</option>
<option value="1">Davolio, Nancy</option>
</select>
<input type="button" value="Show the options" onclick="showOptions();" >
4 使用 $H() 函数

$H()函数把一些对象转换成一个可枚举的和联合数组类似的Hash对象。

<script>
function testHash()
{
//let's create the object
var a = {
first: 
10,
second: 
20,
third: 
30
}
;
//now transform it into a hash
var h = $H(a);
alert(h.toQueryString()); 
//displays: first=10&second=20&third=30
}

</script>
5 使用$R()函数

$R()是new ObjectRange(lowBound,upperBound,excludeBounds)的缩写。

跳到ObjectRange 类文档可以看到一个关于此类的完整描述. 此时,我们还是先来看一个例子以展示这个缩写能代替哪些方法吧。其它相关的一些知识可以在Enumerable 对象文档中找到。

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

</script>
<input type="button" value="Sample Count" onclick="demoDollar_R();" >
6 使用Try.these()函数

Try.these() 方法使得实现当你想调用不同的方法直到其中的一个成功正常的这种需求变得非常容易, 他把一系列的方法作为参数并且按顺序的一个一个的执行这些方法直到其中的一个成功执行,返回成功执行的那个方法的返回值。

在下面的例子中, xmlNode.text在一些浏览器中好用,但是xmlNode.textContent在另一些浏览器中正常工作。 使用Try.these()方法我们可以得到正常工作的那个方法的返回值。

 

<script>
function getXmlNodeValue(xmlNode)
{
    
return Try.these(
        function() 
{return xmlNode.text;},
        function() 
{return xmlNode.textContent;)
        );
}

</script> 

注意:一定要有return

相关文章推荐

JS中的constructor与prototype(1)

在学习JS的面向对象过程中,一直对constructor与prototype感到很迷惑,看了一些博客与书籍,觉得自己弄明白了,现在记录如下: 我们都知道,在JS中有一个function的东西。一般人...

优秀的Javascript库[No.1]——JS中的prototype

JS中的phototype是JS中比较难理解的一个部分   本文基于下面几个知识点:   1 原型法设计模式 在.Net中可以使用clone()来实现原型法 原型法的主要思想是,现在有1个...

js高级篇1之prototype原型对象的应用

起由 最近在做一个项目,里面大量地使用 javascript 作为页面的动态生成脚本, 使用 json 与服务器进行通信. 在读之前遗留的代码时, 经常会弄不清楚, 作用域, this关键字在当前c...

Prototype使用学习手册指南之base.js

文章出处:http://www.ijavascript.cn/prototype/manual-notes-for-prototype-base.js-32.html 一看名字就...

从 prototype.js 深入学习 javascript 的面向对象特性

从 prototype.js 深入学习 javascript 的面向对象特性 js是一门很强大的语言,灵活,方便。 目前我接触到的语言当中,从语法角度上讲,只有 Ruby 比它更爽。 不过我接触的...

Spring源码学习(1) Singleton 和 prototype

singleton作用域:当把一个Bean定义设置为singleton作用域是,Spring IoC容器中只会存在一个共享的Bean实例,并且所有对Bean的 请求,只要id与该Bean定义相匹配,...

JS学习之道:JS中的prototype

JS中的phototype是JS中比较难理解的一个部分   本文基于下面几个知识点:   1 原型法设计模式 在.Net中可以使用clone()来实现原型法 原型法...

prototype.js开发手册

  • 2011年03月18日 10:05
  • 266KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:prototype.js学习1
举报原因:
原因补充:

(最多只允许输入30个字)