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()这个函数我们就不再分析它的源码了，毕竟我们的目的在于应用。