推薦：如何深入理解JavaScript中的函數(shù)
概述 函數(shù)是進(jìn)行模塊化程序設(shè)計(jì)的基礎(chǔ)，編寫復(fù)雜的Ajax應(yīng)用程序，必須對(duì)函數(shù)有更深入的了解。JavaScript中的函數(shù)不同于其他的語(yǔ)言，每個(gè)函數(shù)都是作為一個(gè)對(duì)象被維護(hù)和運(yùn)行的。通過(guò)函數(shù)對(duì)象的性質(zhì)，可以很方便的將一個(gè)函數(shù)賦值給一個(gè)變量或者將函數(shù)作為參數(shù)傳

DOM技巧篇（DOM基礎(chǔ)知識(shí)）

講到這里，我們就要了解一下DOM的一些基礎(chǔ)知識(shí)了。

DOM（Document Object Model 文檔對(duì)象模型）是HTML和XML的應(yīng)用程序接口（API）。DOM將把整個(gè)頁(yè)面規(guī)劃成有節(jié)點(diǎn)層級(jí)構(gòu)成的文檔。HTML或XML頁(yè)面的每一個(gè)部分都是一個(gè)節(jié)點(diǎn)的衍生物。

光說(shuō)可能還不怎么好理解，那么來(lái)看看我們ajax標(biāo)簽導(dǎo)航的DOM結(jié)構(gòu)吧，如圖五(截取的FIXFOX中的DOM圖象)：

DOM通過(guò)創(chuàng)建樹(shù)來(lái)表示文檔，從而使開(kāi)發(fā)著對(duì)文檔的內(nèi)容和結(jié)構(gòu)具有空前的控制力。用DOM API可以輕松地刪除，添加和替換節(jié)點(diǎn)。

簡(jiǎn)單的了解了什么是DOM后（要想了解更多的Javascript DOM 編程知識(shí)，推薦大家看看《Javascript DOM 編程藝術(shù)》和《Javascript高級(jí)編程》這兩本書(shū)，還有到作者的網(wǎng)站去看看，也可以直接到W3C去查詢相關(guān)信息。），來(lái)看看我們這個(gè)程序里需要用到的DOM知識(shí)吧：document.getElementsByTagName()還有之前提到的(i)函數(shù)，它們都是做什么用的呢？

document.getElementById("DOMId")：它返回的是以ID為表示的節(jié)點(diǎn)，而大家都知道id在頁(yè)面中是唯一的，所以getElementById是在頁(yè)面中搜索DOM節(jié)點(diǎn)最直接的方法，很常用。不過(guò)它只能查尋單個(gè)的DOM節(jié)點(diǎn)，我們要查詢一組怎么辦呢？ 我們可以使用getElementsByTagName和getElementsByName。

從方法名字中的“Elements”我們也可以知道，這兩個(gè)方法返回的是一組元素(數(shù)組)

getElementsByTagName：（核心[XML]DOM）用來(lái)返回一個(gè)包含所有tagName(標(biāo)簽名)特性等于某個(gè)指定值的元素的NodeList。

getElementsByName：（HTML DOM）用來(lái)獲取所有name特性等于指定值的元素。但是這個(gè)方法在IE6和opera7.5中支持不是很好，會(huì)有錯(cuò)誤產(chǎn)生，所以（個(gè)人）建議一般不要用。

OK，在對(duì)使用DOM來(lái)查尋節(jié)點(diǎn)的知識(shí)有了了解后，我們?cè)賮?lái)看這段代碼：

/* ===========================================================
* 函數(shù)名稱：(i)
* 參數(shù)說(shuō)明：i - 目標(biāo)節(jié)點(diǎn)名稱
* 函數(shù)功能：獲取指定的目標(biāo)DOM節(jié)點(diǎn)
* 返 回 值：返回要搜索的目標(biāo)DOM節(jié)點(diǎn)
* 使用方法：("frmSearch")
============================================================ */
function (i){
if(!document.getElementById)return false;
if(typeof i==="string"){
if(document.getElementById && document.getElementById(i)) {
// W3C DOM
return document.getElementById(i);
}
else if (document.all && document.all(i)) {
// MSIE 4 DOM
return document.all(i);
}
else if (document.layers && document.layers[i]) {
// NN 4 DOM.. note: this won't find nested layers
return document.layers[i];
}
else {
return false;
}
}
else{return i;}
}

這個(gè)函數(shù)主要是來(lái)查找指定的DOM節(jié)點(diǎn)的，主要是通過(guò)document.getElementById()方法，但是我們又看到了document.all()和document.layers[]方法，這個(gè)就是瀏覽器大戰(zhàn)時(shí)期（各個(gè)瀏覽器對(duì)DOM標(biāo)準(zhǔn)支持不程度不同），各大瀏覽器提供商制定的各自的DOM支持規(guī)范而造成的，我們的CSS HACKS其實(shí)也是由于這個(gè)原因才會(huì)出現(xiàn)的。扯遠(yuǎn)了，document.all()是IE瀏覽器（IE5以上版本）中特有的查詢節(jié)點(diǎn)的方法，而document.layers[i]則是其他瀏覽器（主要是NetScape的）的瀏覽器特有的。我們通過(guò)(i)函數(shù)來(lái)統(tǒng)一調(diào)用，從而解決了瀏覽器兼容的問(wèn)題。

而下面這里的代碼：

// DOM節(jié)點(diǎn)（tabs）不存在或者瀏覽器不支持getElementsByTagName()函數(shù)不執(zhí)行
if(!tabs || !document.getElementsByTagName) return false;

這里if(!tabs || !document.getElementsByTagName) return false;這么寫是很有必要的，這里是一種預(yù)留退路的思想（在《Javascript DOM 編程藝術(shù)》一書(shū)一直灌輸?shù)乃枷耄�，這么寫在不支持getElementsByTagName()方法時(shí)我們的函數(shù)就不會(huì)執(zhí)行，在不tabs(("news")和("sports")),不存在的時(shí)候（可能是我們把參數(shù)名寫錯(cuò)了），函數(shù)也不執(zhí)行了，從而避免了彈出或顯示腳本錯(cuò)誤的信息。下面我們還將看到這一思想的體現(xiàn)，不過(guò)我們還是先來(lái)看看緊接的代碼：

var theList = tabs.getElementsByTagName("li"); // 搜尋導(dǎo)航標(biāo)簽(ID為tabs)里的所有l(wèi)i標(biāo)簽
var theLink = tabs.getElementsByTagName("a"); // 搜尋導(dǎo)航標(biāo)簽(ID為tabs)里的所有a標(biāo)簽

為什么要找出所有的li和a標(biāo)簽?zāi)�？呵呵，這個(gè)是由于我這里采取的設(shè)置樣式的結(jié)構(gòu)決定的（其實(shí)我也老是覺(jué)得不怎么好，不過(guò)這個(gè)思維個(gè)人比較好理解--頭疼醫(yī)頭，腳疼醫(yī)腳的方法）。看看我們上邊的CSS樣式，大家看到了，我們是用改變標(biāo)簽菜單（li）的樣式來(lái)實(shí)現(xiàn)特別顯示當(dāng)前標(biāo)簽的。那么我這里就自然要獲取所有的li標(biāo)簽，然后給他添加onclick來(lái)調(diào)用ajaxInject(ListName,tabId,tarObj,URL)，從而改變標(biāo)簽的樣式�？纯次襾�(lái)實(shí)現(xiàn)這個(gè)功能的代碼吧：

for(var j=0;j<theList.length;j++){
var theTab = theList[j];
if(theTab.parentNode!=tabs) continue;

var theA = theLink[j];
// 屏蔽掉a標(biāo)簽?zāi)�認(rèn)的處理（打開(kāi)新鏈接）事件
theA.onclick = function(){
return false;
}

// 為導(dǎo)航TAB菜單（li）設(shè)置onclick處理方法（函數(shù)）
theTab.onclick = function(){
var theClass = this.className;
if(theClass!="current" && theClass!="first"){
var objId = this.getAttribute("id").split("-")[1]; // 當(dāng)前選中標(biāo)簽(li)在菜單（ul）中的索引值
var tarObj = this.getAttribute("id").split("-")[0]; // 要顯示信息的目標(biāo)DOM節(jié)點(diǎn)ID值
var theURL = tarObj + "/" + tarObj + objId + ".htm"; // 要異步加載的URL地址
ajaxInject((tarObj),objId,tarObj,theURL);
return false;
}
}
}

我們通過(guò)使用一個(gè)for循環(huán)來(lái)遍歷所有的li和a標(biāo)簽（由于它們個(gè)數(shù)相同，所以索引的值相同），然后分別為它們?cè)O(shè)置onclick事件。先看我們給a標(biāo)簽添加的事件的代碼：

var theA = theLink[j];
// 屏蔽掉a標(biāo)簽?zāi)�認(rèn)的處理（打開(kāi)新鏈接）事件
theA.onclick = function(){
return false;
}

一個(gè)簡(jiǎn)單的return false,可別小看它哦，有幾個(gè)作用哦，首先a標(biāo)簽是嵌套在li標(biāo)簽里的，我們點(diǎn)li時(shí)就一定會(huì)出發(fā)a標(biāo)簽的默認(rèn)行為，打開(kāi)鏈接的頁(yè)面。而我們ajax標(biāo)簽導(dǎo)航就是希望不刷（打開(kāi)）新頁(yè)面，在指定的DOM節(jié)點(diǎn)顯示信息。當(dāng)然就不能讓a標(biāo)簽的默認(rèn)行為啟動(dòng)了，而簡(jiǎn)單的一個(gè)return false;就解決了這個(gè)問(wèn)題。哦，這里還有個(gè)問(wèn)題就是DOM事件的冒泡的順序，詳細(xì)的介紹大家可以在《Javascript高級(jí)編程》一書(shū)中查到。

那有些朋友會(huì)問(wèn)，為什么要在里面加個(gè)a標(biāo)簽?zāi)�？反正你是改變的是li的樣式，點(diǎn)了li，改變li的樣式，然后刷新指定DOM節(jié)點(diǎn)的信息不就完成了ajax標(biāo)簽導(dǎo)航的功能（效果）了嗎？

是啊，不過(guò)我在這里要提的就是剛才提到的一個(gè)預(yù)留退路的思想，如果想上面說(shuō)的那樣做了，當(dāng)然是沒(méi)有什么問(wèn)題，但前提是用戶的瀏覽器支持javascript腳本，或者說(shuō)用戶打開(kāi)了執(zhí)行腳本的權(quán)限。一旦用戶的瀏覽器不支持javascript或者出于安全原因關(guān)閉了腳本執(zhí)行功能。這個(gè)時(shí)候，當(dāng)用戶點(diǎn)li時(shí)是沒(méi)有任何反映的。而我這里的處理就考慮到了當(dāng)javascript執(zhí)行不了的情況，這時(shí)候，用戶點(diǎn)鏈接就可以打開(kāi)我們?cè)�本要用ajax加載的內(nèi)容了。

其實(shí)這里還有各個(gè)比較簡(jiǎn)單的方法來(lái)達(dá)成我提到的相同的效果，就是對(duì)li使用onmouseover事件，想想為什么？因?yàn)橹灰�鼠�?biāo)劃過(guò)時(shí)，就觸發(fā)了ajaxInject((tarObj),objId,tarObj,theURL);改變了標(biāo)簽的樣式，刷新了內(nèi)容。當(dāng)點(diǎn)擊鏈接時(shí)，就可以彈出頁(yè)面了�，F(xiàn)在網(wǎng)易和雅虎中國(guó)就是這么處理的。其實(shí)我這么做主要是處于個(gè)人習(xí)慣，比較喜歡用onclick，還有就是這里有個(gè)分隔線的效果，看上去比網(wǎng)易的只用一個(gè)背景圖片酷，當(dāng)然我的效果是學(xué)的雅虎（不是雅虎中國(guó)）的。不過(guò)雅虎的標(biāo)簽樣式的處理方式要比我現(xiàn)在的更巧妙，下次有時(shí)間再跟大家分析下雅虎的標(biāo)簽導(dǎo)航效果。

又扯遠(yuǎn)了，OK，接下來(lái)我們就是要改變樣式和ajax刷新內(nèi)容了。不過(guò)在這個(gè)之前，看看我做了什么準(zhǔn)備。

<ul class="tabs" id="news">
<li class="first" id="news-0"><a href="news/news0.htm">網(wǎng)站重構(gòu)</a><span></span></li>
<li id="news-1"><a href="news/news1.htm">CSS布局實(shí)錄</a><span></span></li>
<li id="news-2"><a href="news/news2.htm">海嘯的地盤</a><span></span></li>
<li id="news-3"><a href="news/news3.htm">Ajax高級(jí)編程</a><span></span></li>
</ul>

var objId = this.getAttribute("id").split("-")[1]; // 當(dāng)前選中標(biāo)簽(li)在菜單（ul）中的索引值
var tarObj = this.getAttribute("id").split("-")[0]; // 要顯示信息的目標(biāo)DOM節(jié)點(diǎn)ID值
var theURL = tarObj + "/" + tarObj + objId + ".htm"; // 要異步加載的URL地址

看看我文章前面部分羅列的東西，現(xiàn)在就在這里有了回應(yīng)了

id="news" - news就是我們的導(dǎo)航標(biāo)簽的ID；
id="news-0" - news-0 通過(guò)”-“分開(kāi)，我們就分別可以得到news(導(dǎo)航標(biāo)簽ID)，0（標(biāo)簽[li]在導(dǎo)航標(biāo)簽中的索引值）

好現(xiàn)在就要改變標(biāo)簽的樣式了

/* ===========================================================
* 函數(shù)名稱：ajaxInject(ListName,tabId,tarObj,URL)
* 參數(shù)說(shuō)明：ListName - 標(biāo)簽菜單DOM節(jié)點(diǎn)ID
* tabId - 選中的標(biāo)簽（在ListName中的）索引值
* tarObj - 要顯示返回信息的目標(biāo)DOM節(jié)點(diǎn)ID值
* URL - 要異步處理的URL地址
* 函數(shù)功能：設(shè)置當(dāng)前選中標(biāo)簽（li）的樣式，
* 將返回信息寫到指定DOM節(jié)點(diǎn)中。
* 返 回 值：無(wú)
* 使用方法：ajaxInject((tarObj),objId,tarObj,theURL);
============================================================ */
function ajaxInject(ListName,tabId,tarObj,URL){
if(!ListName || !document.getElementsByTagName) return false;
var Tabs = ListName;
var theLi = Tabs.getElementsByTagName("li");
for(var i=0;i<theLi.length;i++){
// 設(shè)置當(dāng)前選中標(biāo)簽的樣式
if(i==tabId){
if(i==0){
theLi[tabId].className = "first"; // 當(dāng)選中第一項(xiàng)的樣式
}
else{//
theLi[tabId].className = "current"; // 選中其他項(xiàng)的樣式
}
var msgBox = tarObj+"Cnt";
var loadstatustext="<div class='loading'><img src='img/loading.gif' alt='正在加載內(nèi)容, 請(qǐng)稍候...' />正在加載內(nèi)容, 請(qǐng)稍候...</div>";
(msgBox).innerHTML = loadstatustext; // 加載信息時(shí)的提示信息
var para = "?d=" + Math.random(); // URL后的參數(shù)，接Math.random()（一個(gè)隨機(jī)數(shù)）,目的是處理ajax的緩存問(wèn)題
var myAjax = ajaxUpdater(msgBox,"get",URL,para);
}
else{// 設(shè)置其他標(biāo)簽的樣式
theLi[i].className = "";
if(tabId!=0){
theLi[tabId-1].className = "off"; // 當(dāng)不是第一項(xiàng)時(shí)，隱藏選中項(xiàng)的前一項(xiàng)的分隔標(biāo)簽
}
}
}
}

這里又跟前面的

id="newsCnt" - newsCnt就是我們要寫入信息的目標(biāo)DOM節(jié)點(diǎn)；
class="first" - first當(dāng)前(第一個(gè))標(biāo)簽的樣式；

對(duì)應(yīng)起來(lái)了。

for(var i=0;i<theLi.length;i++){
// 設(shè)置當(dāng)前選中標(biāo)簽的樣式
if(i==tabId){
if(i==0){
theLi[tabId].className = "first"; // 當(dāng)選中第一項(xiàng)的樣式
}
else{
theLi[tabId].className = "current"; // 選中其他項(xiàng)的樣式
}
}
else{// 設(shè)置其他標(biāo)簽的樣式
theLi[i].className = "";
if(tabId!=0){
theLi[tabId-1].className = "off"; // 當(dāng)不是第一項(xiàng)時(shí)，隱藏選中項(xiàng)的前一項(xiàng)的分隔標(biāo)簽
}
}
}

上面這段代碼就是具體改變樣式的，i==tabId比較當(dāng)前標(biāo)簽的索引值（作用就是確認(rèn)是否是選中的標(biāo)簽），相等了就給標(biāo)簽設(shè)置樣式了。i==0表明第一項(xiàng)被選種（由于我的第一項(xiàng)的背景特殊的）給它加上“first”樣式，其余項(xiàng)被選中則加上“current”樣式。

接這就是處理分隔錢的樣式了，跟設(shè)置背景大同小意，這里要說(shuō)的是我們?cè)趯慍SS的時(shí)候要把li（選中和失去焦點(diǎn)）的樣式設(shè)置好。還是我之前提到的，YAHOO的做得很好，我記得網(wǎng)上也有關(guān)于滑動(dòng)門技術(shù)CSS寫法的介紹，大家可以看看是怎么來(lái)設(shè)置樣式的，還有這里給大家推薦個(gè)小軟件《CSS Tab Designer 2》。

恩，現(xiàn)在要刷新指定DOM節(jié)點(diǎn)的內(nèi)容了，用一個(gè)簡(jiǎn)單的var myAjax = ajaxUpdater(msgBox,"get",URL,para);就解決問(wèn)題了。不過(guò)我們看看在把信息寫到指定DOM節(jié)點(diǎn)前，我做了什么：

var msgBox = tarObj+"Cnt";
var loadstatustext="<div class='loading'><img src='img/loading.gif' alt='正在加載內(nèi)容, 請(qǐng)稍候...' />正在加載內(nèi)容, 請(qǐng)稍候...</div>";
(msgBox).innerHTML = loadstatustext; // 加載信息時(shí)的提示信息

這里做了一個(gè)提示的處理，因?yàn)閍jax是異步的加載，在獲取很長(zhǎng)（信息量很大）的內(nèi)容時(shí)，會(huì)有一個(gè)延時(shí)，如果在這個(gè)期間不給任何提示信息的話，我們要刷新的DOM節(jié)點(diǎn)會(huì)出現(xiàn)白白的一片，這個(gè)當(dāng)然是不美觀的。所以在這之前，我們給用戶一個(gè)提示信息，說(shuō)明正在加載信息會(huì)顯得更人性化些。當(dāng)然，大家知道的網(wǎng)易的處理會(huì)更好些，做一個(gè)延遲的window.setTimeout效果。

分享：解讀JavaScript中類的實(shí)現(xiàn)
在JavaScript中可以使用function關(guān)鍵字來(lái)定義一個(gè)“類”，如何為類添加成員。在函數(shù)內(nèi)通過(guò)this指針引用的變量或者方法都會(huì)成為類的成員，例如： function class1(){ var s=abc; this.p1=s; this.method1=function(){ alert(this is a test method); } } v