prototype.js的系列文章——$()函數

 關於prototype.js的說明和下載：http://blog.csdn.net/fuwaer/archive/2007/10/04/1811081.aspx

使用說明

$()函數的功能是獲取元素對象，功能上和document.getElementById()一樣，可以將$()理解爲對於document.getElementById()函數的簡化，經常使用javascript編程的人都知道，document.getElementById()得使用頻率是很高的，這麼長的代碼如果能使用$()代替，多好啊！例如，代碼段1和代碼段2的意思是相同的。

代碼段1：

var div = document.getElementById("mydiv");
div.innerHTML = "hello world!";

代碼段2：

var div = $("mydiv");
div.innerHTML = "hello world!";

顯然，代碼段2中使用了prototype.js提供的工具函數$()來獲得指定id的元素對象，當然，這需要在適當的地方引入prototype.js文件，即需要有

<script src=prototype.js></script>

怎麼樣，是不是很簡單？如果你覺得$()的使用能夠簡化你的輸入就能使你滿足了的話，下面的文章可能會讓你欣喜若狂的，因爲，$()的功能遠不止簡化輸入，它還有更多神奇的功能，相信瞭解了這些，你一定會愛上它的。

爲了說明$()的神奇功能，讓我們先來看個例子，我們仍拿上面的代碼段1和代碼段2來做示例，這次，我們分別爲這兩個代碼段增加一下代碼，分別得到下面的代碼段3和代碼段4，它們的功能仍將是一樣的。

代碼段3：

var div = document.getElementById("mydiv");
div.innerHTML = "hello world!";
div.style.display = "";

代碼段4：

var div = $("mydiv");
div.update("hello world!");
div.show();

你肯定發現它們的不同之處了，代碼段3是我們通常習慣使用的方式，即通過documnet.getElementById()獲得元素對象後，可以通過設置對象的style.display屬性來顯示或隱藏元素對象；而在代碼段4中，我們使用了更簡潔的一個show()函數來實現相同的功能，你肯定會問了，這樣行嗎，我第一次使用的時候，我也是這樣問的，那是因爲我把$()完全等同於document.getElementById()了，後來我才發現我錯了，$()獲得的元素對象同document.getElementById()獲得的元素對象並不一樣！$()返回的元素對象比document.getElementById()返回的對象要大得多，$()在返回元素對象的時候，已經爲元素對象附加了大量的功能函數，注意，並不是僅僅附加了show()，update()這樣一兩個函數，而是很多的函數，這些附加上來的函數都是非常非常有用的，下面給出部分附加上來的函數的函數名，具體每個函數的意思和用法，如果有時間的話，我會一一補上的，這裏只給個列表，你可以自己試用一下，大體上就能知道每個函數是用來做什麼了的。

addClassName(className)，ancestors()，childOf(ancestor)，classNames()，cleanWhitespace()，descendantOf()，descendants()，down(expression,index)，empty()，getDimensions()，getElementsByClassName(className)，getElementsBySelector(expression1[,expression2[,expression3]])，getHeight()，getStyle(cssProperty)，hasClassName(className)，hide()，immediateDescendants()，inspect()，makeClipping()，makePositioned()，match(selector)，next(expression,index)，nextSiblings()，observe(name,oberver,useCapture)，previous(expression,index)，previousSiblings()，remove()，removeClassName(className)，replace(html)，scrollTo()，setStyle(cssPropertyHash)，show()，siblings()，stopObserving(name,observer,useCapture)，toggle()，toggleClassName(className)，undoClipping()，undoPositioned()，up(expression,index)，update(html)，visible()

這麼多的附加功能函數的確讓人眼花繚亂，沒什麼好辦法，要想了解，只能一個一個的來做下試驗。另外，還有一點值得說明，那就是，所有這些擴展出來的功能函數，都返回元素對象本身，這樣就能夠讓我們將若干個功能函數的調用串聯的寫在一起而使代碼更加緊湊，例如，上面的代碼段4可以改寫爲下面的代碼段5：

代碼段5：

$("mydiv").update("hello world!").show();

 

源碼分析

function $(element) 
{
  if (arguments.length > 1) 
  {
    for (var i = 0, elements = [], length = arguments.length; i < length; i++)
      elements.push($(arguments[i]));
    return elements;
  }
  if (Object.isString(element))
    element = document.getElementById(element);
  return Element.extend(element);
}

這段代碼並不難理解，$()支持參數個數可變和類型可變，輸入參數可以是1個或多個元素對象id，也可以是一個或多個元素對象本身。return Element.extend(element) 這個語句對element = document.getElementById(element);
所得到的元素對象進行了擴展，即附加了上面我們提到的那些功能函數，對於Element.extend()這個函數我們就不再分析它的源碼了，畢竟我們的目的在於應用。