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

深度学习导论 - 读李宏毅《1天搞懂深度学习》

先引用他人关于李宏毅教授关于深度学习导论的PPT,应该非常容易入门。 ”《1天搞懂深度学习》,300多页的ppt,台湾李宏毅教授写的,非常棒。不夸张地说,是我看过最系统,也最通俗易懂的,关于...
  • u010164190
  • u010164190
  • 2017年05月22日 23:44
  • 9095

[机器学习入门] 李宏毅机器学习笔记-1(Learning Map 课程导览图)

自1956年提出人工智能的概念,其一方面被认为是人类文明未来的发展方向,另一方面也被认为是难以企及的梦想。然而过去几年,随着GPU并行计算性能的强大和海量数据的收集,人工智能取得了爆发性增长。而增长的...
  • soulmeetliang
  • soulmeetliang
  • 2017年05月20日 23:46
  • 2993

《机器学习实战》笔记之九——树回归

第九章 树回归 CART算法回归与模型树树减枝算法python中GUI的使用 线性回归需要拟合所有的样本点(局部加权线性回归除外),当数据拥有众多特征并且特征之间关系十分复杂时,就不可能使用全...
  • u010454729
  • u010454729
  • 2015年10月06日 11:32
  • 2460

prototype_js 1_4版开发者手册(强烈推荐).mht

  • 2008年07月16日 09:11
  • 716KB
  • 下载

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

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

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

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

JS中的constructor与prototype(1)

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

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

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

学习总结--JS中__proto__和prototype的关系以及原型链的理解

最近博主在学习原型以及原型链的相关内容,把高级程序设计里第六章看完之后,感觉还是挺好理解的,于是有些飘飘然,仿佛得到了全世界但是最近的一道牛客面试题,让我半天摸不到头脑,于是深受打击的我开始痛定思痛,...
  • cmz392997520
  • cmz392997520
  • 2017年11月02日 16:26
  • 32

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

文章出处:http://www.ijavascript.cn/prototype/manual-notes-for-prototype-base.js-32.html 一看名字就...
  • gebizhihu
  • gebizhihu
  • 2012年04月26日 15:42
  • 275
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:prototype.js学习1
举报原因:
原因补充:

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