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

原创 2007年10月04日 15:53:00

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

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

系列文章之一 用cocos2d-js和pomelo开发MMORPG传奇手游全栈教程的前言

用cocos2d-js和pomelo开发MMORPG传奇手游全栈教程的前言本人一人历时一年用cocos2d-js和pomelo从零开始开发MMORPG传奇手游《空空西游》,因新规无法上线,后工作投众...

系列文章之四 用shell结合node.js批量转换excel工具(2)

源代码发布在github上:https://github.com/linyouhappy/kongkongxiyou convertData.command就是excel转换成json工具。现在对...

系列文章之二 用cocos2d-js和pomelo开发MMORPG传奇手游-启动游戏(一)

运行游戏服务端和客户端先下载《空空西游》的源代码 https://github.com/linyouhappy/kongkongxiyou服务端源代码在lordofpomelo/game-serve...

系列文章之三 用cocos2d-js和pomelo开发MMORPG传奇手游的项目结构

源代码发布在github上:https://github.com/linyouhappy/kongkongxiyou 如图整个项目的文件结构如下: 共可分脚本模块和项目模块1.脚本模块在mac系统...

Hive分析窗口函数系列文章

Hive中提供了越来越多的分析函数,用于完成负责的统计分析。抽时间将所有的分析窗口函数理一遍,将陆续发布。 今天先看几个基础的,SUM、AVG、MIN、MAX。 用于实现分组内所有和连续累积的统计。 ...

C++系列文章 main函数(2007-04-24 15:33:04)

在开始学C++编程时,main函数是一个完整C++程序所必须有的。但在不同的书中,具体格式会有所不同,在nell dale的Programming In c++中是int main() ,在有些书中及...

[推荐][提供下载](Excel):常用函数公式及操作技巧系列文章【共十篇】

[推荐][提供下载](Excel): 常用函数公式及操作技巧系列文章【共十篇】 ——通过知识共享树立个人品牌。   Excel操作技巧与常用函数公式系作者收集整理所得,文章很长,全是实用的东东...

物联网技术入门——系列文章2

物联网技术入门——系列文章2上一篇博客主要谢了传感器节点(上一篇叫采集节点,我觉得在物联网中叫传感节点更合适)的电路设计,这一篇介绍传感器节点的软件设计。传感器节点的软件主要完成两项任务:感知和WiF...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)