Prototype系列(1)初探prototype.js
來源:程序員人生 發(fā)布時間:2014-04-28 11:44:33 閱讀次數(shù):3117次
prototype.js 是什么?
萬一你沒有使用過大名鼎鼎的prototype.js,那么讓我來告訴你,prototype.js是由Sam Stephenson寫的一個javascript類庫。這個構(gòu)思奇妙,而且兼容標(biāo)準(zhǔn)的類庫,能幫助你輕松建立有高度互動的web2.0特性的富客戶端頁面。
如果你最近嘗試使用它,你大概了解到文檔并不是作者的一個強項。和在我以前使用這個類庫的不少開發(fā)者一樣,一開始,我不得不一頭扎進閱讀prototype.js的源代碼和實驗它的功能中。我想,在我學(xué)習(xí)完它之后,把我學(xué)到的東西分享給大家是件不錯的事。
同時,在本文中,我也將提供一個關(guān)于這個類庫提供的objects,classes,functions,extensions這對東東的非官方參考
在閱讀這個文檔時,熟悉Ruby的開發(fā)者將會注意到Ruby的一些內(nèi)建類和本類庫擴展實現(xiàn)之間非常相似。
相關(guān)文章 Advanced JavaScript guide.
一些實用的函數(shù)
這個類庫帶有很多預(yù)定義的對象和實用函數(shù),這些東東的目的顯然是把你從一些重復(fù)的打字中解放出來 。
使用$()方法
$() 方法是在DOM中使用過于頻繁的 document.getElementById() 方法的一個便利的簡寫,就像這個DOM方法一樣,這個方法返回參數(shù)傳入的id的那個元素。
比起DOM中的方法,這個更勝一籌。你可以傳入多個id作為參數(shù)然后 $() 返回一個帶有所有要求的元素的一個 Array 對象。
<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>
另外一個好處是,這個函數(shù)能傳入用string表示的對象ID,也可以傳入對象本身,這樣,在建立其它能傳兩種類型的參數(shù)的函數(shù)時非常有用。
$F()函數(shù)是另一個大收歡迎的"快捷鍵",它能用于返回任何表單輸入控件的值,比如text box,drop-down list。這個方法也能用元素id或元素本身做為參數(shù)。