MooTools 1.2 JavaScript庫介紹
MooTools 1.2是個強大的輕量級的JavaScript庫,專門為減輕Web中交互性JavaScript開發(fā)。在某種程度上,你可以認為MooTools是CSS的擴展。例如,CSS可以讓你在鼠標移上去時發(fā)生改變。JavaScript允許你接觸更多的時間(點擊事件、鼠標懸停事件、鍵盤事件……),MooTools讓這一切變得非常容易。
另外,MooTools還有各種各樣的非常好的擴展,可以讓你不只是改變一個元素的屬性,還可以讓你有”morph“(變形)或者”tween“(補間動畫)屬性,讓你有能力去創(chuàng)建動畫效果,就像你在我的導航菜單上看到的一樣(Fdream注:原作者的,我的首頁也有)。
這只是一個例子,MooTools可以讓你做更多的事情。在接下來的30天里,我們將深入MooTools庫,探索從數(shù)組(Array)和函數(shù)(Function)到Fx.Slide,以及其他捆綁插件的每一個東西。
引用MooTools 1.2
首先,下載并引用MooTools 1.2核心庫。
下載MooTools 1.2核心庫
把MooTools 1.2核心庫上傳到你的服務器或者工作區(qū)
在你的HTML文檔頭部head標記之內(nèi)鏈接MooTools 1.2核心庫
參考代碼:
代碼如下:
<script src="mootools-1.2-core.js” type="text/javascript"></script>
(Fdream注:現(xiàn)在MooTools 1.2下載下來后,默認的后綴名是”.txt“,請更改后綴為”.js“。)
在Head標簽之內(nèi)添加Script標簽
現(xiàn)在,你已經(jīng)在你的頁面中應用了了MooTools了,你還需要一個地方來寫你的代碼。這里有兩種選擇:
1. 把下面的代碼寫在你的head標簽之內(nèi),你的代碼寫在script標記之內(nèi):
參考代碼:
代碼如下:
<script type="text/javascript">
//Mootools code goes here
</script>
2. 在外部建立一個JavaScript文件,然后在頁面頭部鏈接此文件:
參考代碼:
代碼如下:
<script src="myJavaScriptFile.js" type="text/javascript"></script>
在這里,你可以使用任何一種方式。我通常把domready事件中調(diào)用的方法放在script標記之間,而我的函數(shù)放在外部文件中。
把代碼放在domready中
MooTools的方法必須在domready事件中調(diào)用。
參考代碼:
代碼如下:
window.addEvent('domready', function() {
exampleFunction();
});
(Fdream注:不完全是這樣,但是可以保證你的JavaScript代碼盡可能少地出錯。順便說一下domready事件:當頁面的HTML代碼(不包括圖片、flash等等,只是代碼)下載完成時,此時會觸發(fā)domready事件。這樣可以在頁面完全下載完成(包括圖片、flash等都下載完成)之前執(zhí)行你的腳本,從而避免因為一張大圖要下很長時間而導致腳本不能執(zhí)行,從而出現(xiàn)異常。)
把代碼放在一個函數(shù)中
你仍然可以在domready之外創(chuàng)建你的函數(shù),然后在domready中調(diào)用它:
參考代碼:
新聞熱點
疑難解答
圖片精選