﻿<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/"><channel><title>BlogJava-小秋的家-文章分类-JAVASCRIPT</title><link>http://www.blogjava.net/mycolby/category/30454.html</link><description>home</description><language>zh-cn</language><lastBuildDate>Fri, 28 Mar 2008 08:54:37 GMT</lastBuildDate><pubDate>Fri, 28 Mar 2008 08:54:37 GMT</pubDate><ttl>60</ttl><item><title>prototype教程(一)</title><link>http://www.blogjava.net/mycolby/articles/189281.html</link><dc:creator>棋剑小秋</dc:creator><author>棋剑小秋</author><pubDate>Fri, 28 Mar 2008 07:27:00 GMT</pubDate><guid>http://www.blogjava.net/mycolby/articles/189281.html</guid><wfw:comment>http://www.blogjava.net/mycolby/comments/189281.html</wfw:comment><comments>http://www.blogjava.net/mycolby/articles/189281.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/mycolby/comments/commentRss/189281.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/mycolby/services/trackbacks/189281.html</trackback:ping><description><![CDATA[<p>2.1 <span style="font-family: 宋体">使用</span>$()<span style="font-family: 宋体">方法</span></p>
<p>$() <span style="font-family: 宋体">方法是在</span> DOM <span style="font-family: 宋体">中使用过于频繁的</span> document.getElementById() <span style="font-family: 宋体">方法的一个便利的简写，就像这个</span> DOM <span style="font-family: 宋体">方法一样，这个方法返回参数传入的</span> id <span style="font-family: 宋体">的那个元素。比起</span> DOM <span style="font-family: 宋体">中的方法，这个更胜一筹。你可以传入多个</span> id <span style="font-family: 宋体">作为参数然后</span> $() <span style="font-family: 宋体">返回一个带有所有要求的元素的一个</span> Array <span style="font-family: 宋体">对象。</span></p>
<p style="background: #eeeeee; text-align: left" align="left"><span style="font-size: 9pt; font-family: 'Courier New'">&lt;<span style="color: blue">HTML</span>&gt; <br />
&lt;<span style="color: blue">HEAD</span>&gt; <br />
&lt;<span style="color: blue">TITLE</span>&gt;&nbsp;Test&nbsp;Page&nbsp;&lt;<span style="color: olive">/</span><span style="color: blue">TITLE</span>&gt; <br />
&lt;<span style="color: blue">script</span><span style="color: olive">&nbsp;src=</span><span style="color: fuchsia">"prototype1.4.js"</span>&gt;&lt;<span style="color: olive">/</span><span style="color: blue">script</span>&gt; <br />
&lt;<span style="color: blue">script</span>&gt;&nbsp; <br />
<span style="color: blue">function</span>&nbsp;test1(){ &nbsp;&nbsp;&nbsp;&nbsp; <br />
&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: blue">var</span>&nbsp;d=$(<span style="color: fuchsia">'myDiv'</span>); &nbsp;&nbsp;&nbsp;&nbsp; <br />
&nbsp;&nbsp;&nbsp;&nbsp;alert(d.innerHTML); <br />
&nbsp;&nbsp;&nbsp;&nbsp; <br />
&nbsp;&nbsp;&nbsp;&nbsp; <br />
} <br />
<span style="color: blue">function</span>&nbsp;test2(){ <br />
&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: blue">var</span>&nbsp;divs=$(<span style="color: fuchsia">'myDiv'</span>,<span style="color: fuchsia">'myOtherDiv'</span>); <br />
&nbsp;&nbsp;&nbsp;&nbsp;for(i=0;i&lt;<span style="color: olive">divs.length;i++){ <br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(divs[i].innerHTML); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <br />
&nbsp;&nbsp;&nbsp;&nbsp;} <br />
}&lt;/</span><span style="color: blue">script</span><span style="color: olive">&gt; <br />
&lt;/</span><span style="color: blue">HEAD</span><span style="color: olive">&gt;&nbsp; <br />
&lt;</span><span style="color: blue">BODY</span><span style="color: olive">&gt;&nbsp; <br />
&lt;</span><span style="color: blue">div</span><span style="color: olive">&nbsp;id=</span><span style="color: fuchsia">"myDiv"</span><span style="color: olive">&gt;&nbsp; <br />
&lt;p&gt;This&nbsp;is&nbsp;a&nbsp;paragraph&lt;/p&gt;&nbsp; <br />
&lt;/</span><span style="color: blue">div</span><span style="color: olive">&gt;&nbsp; <br />
&lt;</span><span style="color: blue">div</span><span style="color: olive">&nbsp;id=</span><span style="color: fuchsia">"myOtherDiv"</span><span style="color: olive">&gt;&nbsp; <br />
&lt;p&gt;This&nbsp;is&nbsp;another&nbsp;paragraph&lt;/p&gt;&nbsp; <br />
&lt;/</span><span style="color: blue">div</span><span style="color: olive">&gt;&nbsp; <br />
&lt;</span><span style="color: blue">input</span><span style="color: olive">&nbsp;type=</span><span style="color: fuchsia">"button"</span><span style="color: olive">&nbsp;value=Test1&nbsp;onclick=</span><span style="color: fuchsia">"test1();"</span><span style="color: olive">&gt;&lt;br&gt;&nbsp;&lt;</span><span style="color: blue">input</span><span style="color: olive">&nbsp;type=</span><span style="color: fuchsia">"button"</span><span style="color: olive">&nbsp;value=Test2&nbsp;onclick=</span><span style="color: fuchsia">"test2();"</span><span style="color: olive">&gt;&lt;br&gt; <br />
&lt;/</span><span style="color: blue">BODY</span><span style="color: olive">&gt;&nbsp; <br />
&lt;/</span><span style="color: blue">HTML</span><span style="color: olive">&gt;</span></span></p>
<p><span style="font-family: 宋体">另外一个好处是，这个函数能传入用</span> string <span style="font-family: 宋体">表示的对象</span> ID<span style="font-family: 宋体">，也可以传入对象本身，这样，在建立其它能传两种类型的参数的函数时非常有用。</span></p>
<p>2..2<span style="font-family: 宋体">使用</span>$F()<span style="font-family: 宋体">函数</span></p>
<p>$F()<span style="font-family: 宋体">函数是另一个大收欢迎的&#8220;快捷键&#8221;，它能用于返回任何表单输入控件的值，比如</span> text box,drop-down list<span style="font-family: 宋体">。这个方法也能用元素</span> id <span style="font-family: 宋体">或元素本身做为参数。</span></p>
<p style="background: #eeeeee; text-align: left" align="left"><span style="font-size: 9pt; font-family: 'Courier New'">&lt;<span style="color: blue">script</span>&gt; <br />
<span style="color: blue">function</span>&nbsp;test3(){ <br />
&nbsp;&nbsp;&nbsp;&nbsp;alert($F(<span style="color: fuchsia">'userName'</span>));&nbsp;&nbsp;&nbsp;&nbsp; <br />
} <br />
&lt;<span style="color: olive">/</span><span style="color: blue">script</span>&gt; <br />
&lt;<span style="color: olive">inputtype=</span><span style="color: fuchsia">"text"</span><span style="color: olive">id=</span><span style="color: fuchsia">"userName"</span><span style="color: olive">value=</span><span style="color: fuchsia">"Joe&nbsp;Doe"</span>&gt;&lt;<span style="color: olive">br</span>&gt; <br />
&lt;<span style="color: olive">inputtype=</span><span style="color: fuchsia">"button"</span><span style="color: olive">value=Test3onclick=</span><span style="color: fuchsia">"test3();"</span>&gt;&lt;<span style="color: olive">br</span>&gt;<br />
</span></p>
<p><br />
2.3 <span style="font-family: 宋体">使用</span>$A()<span style="font-family: 宋体">函数</span></p>
<p>$A()<span style="font-family: 宋体">函数能把它接收到的单个的参数转换成一个</span> Array <span style="font-family: 宋体">对象。</span></p>
<p><span style="font-family: 宋体">这个方法，结合被本类库扩展了的</span> Array <span style="font-family: 宋体">类，能方便的把任何的可枚举列表转换成或拷贝到一个</span> Array <span style="font-family: 宋体">对象。一个推荐的用法就是把</span> DOM Node Lists <span style="font-family: 宋体">转换成一个普通的</span> Array <span style="font-family: 宋体">对象，从而更有效率的进行遍历，请看下面的例子。</span></p>
<p style="background: #eeeeee; text-align: left" align="left"><span style="font-size: 9pt; font-family: 'Courier New'">&lt;<span style="color: blue">script</span>&gt;</span></p>
<p style="background: #eeeeee; text-align: left" align="left"><span style="font-size: 9pt; color: blue; font-family: 'Courier New'">function</span><span style="font-size: 9pt; font-family: 'Courier New'">&nbsp;showOptions(){ <br />
&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: blue">var</span>&nbsp;someNodeList=$(<span style="color: fuchsia">'lstEmployees'</span>).getElementsByTagName(<span style="color: fuchsia">'option'</span>); <br />
&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: blue">var</span>&nbsp;nodes=$A(someNodeList); <br />
&nbsp;&nbsp;&nbsp;&nbsp;nodes.each(<span style="color: blue">function</span>&nbsp;(node){ <br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(node.nodeName+<span style="color: fuchsia">':&nbsp;'</span>+node.innerHTML); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <br />
&nbsp;&nbsp;&nbsp;&nbsp;});&nbsp;&nbsp;&nbsp;&nbsp; <br />
}</span></p>
<p style="background: #eeeeee; text-align: left" align="left"><span style="font-size: 9pt; font-family: 'Courier New'">&lt;<span style="color: olive">/</span><span style="color: blue">script</span>&gt; <br />
&lt;<span style="color: olive">selectid=</span><span style="color: fuchsia">"lstEmployees" </span><span style="color: olive">size=</span><span style="color: fuchsia">"10"</span>&gt; <br />
&nbsp;&lt;<span style="color: olive">optionvalue=</span><span style="color: fuchsia">"5"</span>&gt;Buchanan,Steven&lt;<span style="color: olive">/option</span>&gt; <br />
&nbsp;&lt;<span style="color: olive">optionvalue=</span><span style="color: fuchsia">"8"</span>&gt;Callahan,Laura&lt;<span style="color: olive">/option</span>&gt; <br />
&nbsp;&lt;<span style="color: olive">optionvalue=</span><span style="color: fuchsia">"1"</span>&gt;Davolio,Nancy&lt;<span style="color: olive">/option</span>&gt; <br />
&lt;<span style="color: olive">/</span><span style="color: blue">select</span>&gt; <br />
&lt;<span style="color: olive">inputtype=</span><span style="color: fuchsia">"button"</span><span style="color: olive">value=</span><span style="color: fuchsia">"Show&nbsp;the&nbsp;options"</span><span style="color: olive">onclick=</span><span style="color: fuchsia">"showOptions();"</span>&gt;</span></p>
<br />
<p>2.4 <span style="font-family: 宋体">使用</span>$H() <span style="font-family: 宋体">函数</span></p>
<p>$H()<span style="font-family: 宋体">函数把一些对象转换成一个可枚举的和联合数组类似的</span> Hash <span style="font-family: 宋体">对象。</span></p>
<p style="background: #eeeeee; text-align: left" align="left"><span style="font-size: 9pt; font-family: 'Courier New'">&lt;script&gt; <br />
<span style="color: blue">function</span>&nbsp;testHash() <br />
{ &nbsp; </span></p>
<p style="background: #eeeeee; text-indent: 21pt; text-align: left" align="left"><span style="font-size: 9pt; color: green; font-family: 'Courier New'">//let's&nbsp;create&nbsp;the&nbsp;object&nbsp; </span><span style="font-size: 9pt; font-family: 'Courier New'"><br />
&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: blue">var</span>&nbsp;a={ <br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;first:10,second:20,third:30 <br />
&nbsp;&nbsp;&nbsp;&nbsp;}; <br />
&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: green">//now&nbsp;transform&nbsp;it&nbsp;into&nbsp;a&nbsp;hash&nbsp; </span></span></p>
<p style="background: #eeeeee; text-indent: 21pt; text-align: left" align="left"><span style="font-size: 9pt; color: blue; font-family: 'Courier New'">var</span><span style="font-size: 9pt; font-family: 'Courier New'">&nbsp;h=$H(a); &nbsp;&nbsp;&nbsp;&nbsp; <br />
&nbsp;&nbsp;&nbsp;&nbsp;alert(h.toQueryString()); <br />
&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: green">//displays:&nbsp;first=10&amp;second=20&amp;third=30&nbsp; </span><br />
&nbsp;&nbsp;&nbsp;&nbsp; <br />
} <br />
&lt;/script&gt;</span></p>
<br />
<p>2.5 <span style="font-family: 宋体">使用</span>$R()<span style="font-family: 宋体">函数</span></p>
<p>$R()<span style="font-family: 宋体">是</span> new ObjectRange(lowBound,upperBound,excludeBounds)<span style="font-family: 宋体">的缩写。</span></p>
<p><span style="font-family: 宋体">跳到</span>ObjectRange <span style="font-family: 宋体">类文档可以看到一个关于此类的完整描述</span>. <span style="font-family: 宋体">此时，我们还是先来看一个例子以展示这个缩写能代替哪些方法吧。其它相关的一些知识可</span> <span style="font-family: 宋体">以在</span>Enumerable <span style="font-family: 宋体">对象文档中找到。</span></p>
<p style="background: #eeeeee; text-align: left" align="left"><span style="font-size: 9pt; font-family: 'Courier New'">&lt;script&gt; <br />
<span style="color: blue">function</span>&nbsp;demoDollar_R(){ <br />
&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: blue">var</span>&nbsp;range=$R(10,20,<span style="color: blue">false</span>); <br />
&nbsp;&nbsp;&nbsp;&nbsp;range.each(<span style="color: blue">function</span>&nbsp;(value,index){ <br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(value);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <br />
&nbsp;&nbsp;&nbsp;&nbsp;});&nbsp;&nbsp;&nbsp;&nbsp; <br />
} <br />
&lt;/script&gt;</span></p>
<p style="background: #eeeeee; text-align: left" align="left"><span style="font-size: 9pt; font-family: 'Courier New'">&lt;<span style="color: blue">input</span><span style="color: olive">&nbsp;type=</span><span style="color: fuchsia">"button"</span><span style="color: olive">&nbsp;value=</span><span style="color: fuchsia">"Sample&nbsp;Count"</span><span style="color: olive">&nbsp;onclick=</span><span style="color: fuchsia">"demoDollar_R();"</span>&nbsp;&gt;</span></p>
<br />
<p>2.6 <span style="font-family: 宋体">使用</span>Try.these()<span style="font-family: 宋体">函数</span></p>
<p>Try.these() <span style="font-family: 宋体">方法使得实现当你想调用不同的方法直到其中的一个成功正常的这种需求变得非常容易，</span> <span style="font-family: 宋体">他把一系列的方法作为参数并且按顺序的一</span></p>
<p><span style="font-family: 宋体">个一个的执行这些方法直到其中的一个成功执行，返回成功执行的那个方法的返回值。</span></p>
<p><span style="font-family: 宋体">在下面的例子中，</span> xmlNode.text<span style="font-family: 宋体">在一些浏览器中好用，但是</span>xmlNode.textContent<span style="font-family: 宋体">在另一些浏览器中正常工作。</span> <span style="font-family: 宋体">使用</span> Try.these()</p>
<p><span style="font-family: 宋体">方法我们可以得到正常工作的那个方法的返回值。</span></p>
<p style="background: #eeeeee; text-align: left" align="left"><span style="font-size: 9pt; font-family: 'Courier New'">&lt;script&gt; <br />
<span style="color: blue">function</span>&nbsp;getXmlNodeValue(xmlNode){ <br />
&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: blue">return</span>&nbsp;Try.these(<span style="color: blue">function</span>&nbsp;(){ <br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: blue">return</span>&nbsp;xmlNode.text; <br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <br />
&nbsp;&nbsp;&nbsp;&nbsp;},<span style="color: blue">function</span>&nbsp;(){ <br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: blue">return</span>&nbsp;xmlNode.textContent; <br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;)); <br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <br />
&nbsp;&nbsp;&nbsp;&nbsp;} <br />
&lt;/script&gt;</span></p>
<img src ="http://www.blogjava.net/mycolby/aggbug/189281.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/mycolby/" target="_blank">棋剑小秋</a> 2008-03-28 15:27 <a href="http://www.blogjava.net/mycolby/articles/189281.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item></channel></rss>