|
|
一，回顧
首先先來回顧下DOM和事件。
1，DOM
DOM在JavaScript中是應(yīng)用最廣泛的，大部分Web開發(fā)的編程語言都提供了相關(guān)的實現(xiàn)。給了開發(fā)者一個統(tǒng)一的接口。
看下面的例子:
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執(zhí)行]
等待頁面所有內(nèi)容加載完畢后，通過getElementsByTagName()方法獲取頁面中的li元素，然后循環(huán)改變li元素顏色為紅色。
再看第二個DOM例子，例子將把第二個li元素從頁面中刪除。
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執(zhí)行]
現(xiàn)獲取到li元素的父節(jié)點ul元素，然后使用removeChild() 方法刪除ul元素下 指定的li元素。
當(dāng)然也可以直接使用 parentNode來直接獲取li元素的父節(jié)點。代碼如下：
復(fù)制代碼 代碼如下:
window.onload = function(){
//給Dom元素添加顏色
var li = document.getElementsByTagName("li");
for(var i=0;i<li.length;i++){
li[i].style.color = "red";
}
//刪除第二個li元素
//var ul = document.getElementsByTagName("ul")[0]; //索引從0開始
//ul.removeChild( li[1] ); //索引從0開始
li[1].parentNode.removeChild( li[1] ); //索引從0開始，直接使用parentNode來獲取li元素的父節(jié)點
}
2，事件
事件是黏合應(yīng)用程序中所有用戶交互的膠水。DOM和事件的是JavaScript中的黃金搭檔（呵呵，來句廣告詞），它們決定著現(xiàn)代Web應(yīng)用程序形態(tài)的根本所在。
看下面的例子：
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執(zhí)行]
本例中，獲取的li元素后，然后循環(huán)給元素添加事件，添加了onmouseover和onmouseout事件。當(dāng)滑入時，改變顏色，滑出時，恢復(fù)顏色。
事件是復(fù)雜多變的，上例是一個最簡單的例子，所以基本上沒遇到問題。在以后，我們將遇到 比如 事件冒泡，事件傳遞 ，取消事件等問題。
3，DOM和事件
在DOM和事件交互的基礎(chǔ)上產(chǎn)生了DHTML，它的實質(zhì)就是JavaScript事件和DOM元素上CSS屬性之間的交互。DHTML存在的意思就是組合這兩個技術(shù)，然后做它的事情。
二，簡單的面向?qū)ο箝_發(fā)
我們先來感受一下JavaScript面向?qū)ο笫窃趺匆粋€寫法。下面代碼展示了學(xué)校中的課程名和老師的信息。
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執(zhí)行]
最終結(jié)果會輸出“李老師 是教 英語 的。”
在此例子的基礎(chǔ)上，我們再定義個函數(shù)，用來輸出所有的課程信息。代碼如下所示：
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執(zhí)行]
最終結(jié)果會輸出： 
本例中， 數(shù)組的值都調(diào)用了 display()方法。
改進如下：
在
復(fù)制代碼 代碼如下:
AllLecture.prototype.display=function(){
var str = "";
for(var i=0;i<this.lec.length;i++){
str += this.lec[i] + "/n";
}
return str;
}
中的this.lec[i] 處，統(tǒng)一調(diào)用display()方法。然后去掉數(shù)組的值調(diào)用display()。修改后的代碼如下：
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執(zhí)行]
同樣也可以輸出跟上例一樣的結(jié)果。
這是一個簡單的面向?qū)ο箝_發(fā)的例子，隨著JavaScript逐漸被程序員所接受，設(shè)計良好的面向?qū)ο蟠a也日益普及。在后面的筆記中，你將會看到更多的面向?qū)ο蟪绦虼a。
三，小結(jié)
本章回顧了DOM和事件，然后通過例子簡單的講解了面向?qū)ο蟮拈_發(fā)。
JavaScript技術(shù)：JavaScript 中級筆記 第一章，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。
