Prototype系列(1)初探prototype.js
发布时间：2018-08-29 06:25:33 所属栏目：创业 来源：站长网
导读：prototype.js 是什么? 万一你没有行使过台甫鼎鼎的prototype.js，那么让我来汇报你，prototype.js是由Sam Stephenson写的一个javascript类库。这个构想奇奥，并且兼容尺度的类库，能辅佐你轻松成立有高度互动的web2.0特征的富客户端页面。 假如你最近实利用
|
prototype.js 是什么? 万一你没有行使过台甫鼎鼎的prototype.js，那么让我来汇报你，prototype.js是由Sam Stephenson写的一个javascript类库。这个构想奇奥，并且兼容尺度的类库，能辅佐你轻松成立有高度互动的web2.0特征的富客户端页面。 假如你最近实行行使它，你或许相识到文档并不是作者的一个刚强。和在我早年行使这个类库的不少开拓者一样，一开始，我不得纷歧头扎进阅读prototype.js的源代码和尝试它的成果中。我想，在我进修完它之后，把我学到的对象分享给各人是件不错的事。 同时，在本文中，我也将提供一个关于这个类库提供的objects,classes,functions,extensions这对东东的非官方参考 在阅读这个文档时，认识Ruby的开拓者将会留意到Ruby的一些内建类和本类库扩展实现之间很是相似。 相干文章 Advanced JavaScript guide. 一些适用的函数 这个类库带有许多预界说的工具和适用函数，这些东东的目标显然是把你从一些一再的打字中解放出来 。 行使$()要领 $() 要领是在DOM中行使过于频仍的 document.getElementById() 要领的一个便利的简写，就像这个DOM要领一样，这个要领返回参数传入的id的谁人元素。 比起DOM中的要领，这个更胜一筹。你可以传入多个id作为参数然后 $() 返回一个带有全部要求的元素的一个 Array 工具。 Copy to Clipboard  引用的内容：[www.veryhuo.com]
<HTML> <HEAD> <TITLE> Test Page </TITLE> <script src="prototype-1.3.1.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，也可以传入工具自己，这样，在成立其余能传两种范例的参数的函数时很是有效。 行使$F()函数 $F()函数是另一个大收接待的"快捷键"，它能用于返回任何表单输入控件的值，好比text box,drop-down list。这个要领也能用元素id或元素自己做为参数。 Copy to Clipboard 引用的内容：[www.veryhuo.com]
<script> function test3() { alert( $F('userName') ); } </script> <input type="text" id="userName" value="Joe Doe"><br> <input type="button" value=Test3 onclick="test3();"><br> 行使$A()函数 $A()函数能把它吸取到的单个的参数转换成一个Array工具。 这个要领，团结被本类库扩展了的Array类，能利便的把任何的可列举列表转换成或拷贝到一个Array工具。一个保举的用法就是把DOM Node Lists转换成一个平凡的Array工具，从而更有服从的举办遍历，请看下面的例子。 Copy to Clipboard 引用的内容：[www.veryhuo.com]
<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();" > 行使 $H()函数 $H()函数把一些工具转换成一个可列举的和连系数组相同的Hash工具。 Copy to Clipboard 引用的内容：[www.veryhuo.com]
<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> 行使$R()函数 $R()是new ObjectRange(lowBound,upperBound,excludeBounds)的缩写。 跳到ObjectRange 类文档可以看到一个关于此类的完备描写. 此时，我们照旧先来看一个例子以展示这个缩写能取代哪些要领吧。其余相干的一些常识可以在Enumerable 工具文档中找到。 Copy to Clipboard 引用的内容：[www.veryhuo.com]
<script> function demoDollar_R(){ var range = $R(10, 20, false); range.each(function(value, index){ alert(value); }); } </script> <input type="button" value="Sample Count" onclick="demoDollar_R();" > 行使Try.these()函数 Try.these() 要领使得实现当你想挪用差异的要领直到个中的一个乐成正常的这种需求变得很是轻易， 他把一系列的要领作为参数而且按次序的一个一个的执行这些要领直到个中的一个乐成执行，返回乐成执行的谁人要领的返回值。 在下面的例子中， xmlNode.text在一些赏识器中好用，可是xmlNode.textContent在另一些赏识器中正常事变。 行使Try.these()要领我们可以获得正常事变的谁人要领的返回值。 Copy to Clipboard 引用的内容：[www.veryhuo.com]
<script> function getXmlNodeValue(xmlNode){ return Try.these( function() Unknown macro: {return xmlNode.text;} , function() {return xmlNode.textContent ); } </script> （编辑：湖南网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
站长推荐
热点阅读