电脑技术吧

会员投稿 会员登录 会员注册 网站公告:
搜索: 您现在的位置主页 > 网站开发 > javascript > JS技巧 > 正文

JS技巧:prototype.js的系列文章——$()函数

作者:admin    文章来源:互联网 电脑技术吧     点击数:    更新时间:2011-09-25
收藏】 【挑错】 【推荐】 【打印

关于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!"; copyright dedecms

代码段2:

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

dedecms.com

显然,代码段2中使用了prototype.js提供的工具函数$()来获得指定id的元素对象,当然,这需要在适当的地方引入prototype.js文件,即需要有

copyright dedecms

怎么样,是不是很简单?如果你觉得$()的使用能够简化你的输入就能使你满足了的话,下面的文章可能会让你欣喜若狂的,因为,$()的功能远不止简化输入,它还有更多神奇的功能,相信了解了这些,你一定会爱上它的。 织梦好,好织梦

为了说明$()的神奇功能,让我们先来看个例子,我们仍拿上面的代码段1和代码段2来做示例,这次,我们分别为这两个代码段增加一下代码,分别得到下面的代码段3和代码段4,它们的功能仍将是一样的。

本文来自织梦

代码段3:

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

内容来自dedecms

代码段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()这样一两个函数,而是很多的函数,这些附加上来的函数都是非常 非常有用的,下面给出部分附加上来的函数的函数名,具体每个函数的意思和用法,如果有时间的话,我会一一补上的,这里只给个列表,你可以自己试用一下,大 体上就能知道每个函数是用来做什么了的。 dedecms.com

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()

Tags:js实例 js基础  
责任编辑:admin
发表评论 请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名:密码:新注册匿名
评论总数: [ 查看全部 ] 网友评论
关于我们 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 在线帮助