prototype框架中美元符号$用法分析


Posted in Javascript onJanuary 22, 2016

本文实例讲述了prototype框架中美元符号$用法。分享给大家供大家参考,具体如下:

prototype是实现面向对象的一个重要工具,是javascript的一个不错的框架。
用jquery的人都知道,jquery中也有$美元符号,prototype中呢,也有$,他们有什么区别呢。

1、prototype中$()的用法

prototype写法 $("test") 或者 $$("#test"), 他相当于js中document.getElementById("test");
jqueryp写法 $("#test") ,他也相当于js中document.getElementById("test");

2、prototype中的$$()用法

jquery写法 $("div") 他相当于document.getElementsByTagName('div')
如果prototype也想简单取得页面中所有div元素,就不能这样写了。
prototype写法  $("div") 他相当于document.getElementById("div")
prototype写法  $$("div") 他相当于document.getElementsByTagName('div')
prototype写法 $$("input[value=tank]") 取得页面中输入框值为tank的标签,其实和jquery差不多,只不过多了一个$符号而已

3、prototype中的$A()用法

$A 主要是用来将可当作数组使用的任意集合(如 NodeList、许多 DOM 方法返回的 HTMLCollection 或函数对象的 arguments 属性)转换为一个真正的 Array 对象。下面四种方法都可以隐藏页面中的div标签

$A($$('div')).each(Element.hide); 
$A($$('div')).map(Element.extend).invoke("hide"); 
//从思想上来看,下面二种写法,我在用jquery时,也经常用 
$A($$('div')).each(function(name,index){ 
 name.style.display='none'; 
 alert(name.innerHTML); 
 }) 
 $A($$('div')).each(function(name,index){ 
 $(name).hide(); 
})

如果例子中出现TypeError: element.style is undefined { message="element.style is undefined",  more...},请把你的prototype的版本升一下级

4、prototype中的$F()用法

个人觉得$F的用法,被设计出来是为了更方便的取表单数据,不过它比较单一,因为他只能通过ID来取

<input name="name" value="tank" id="name">
$F("name")  正确的

<input name="name" value="tank"  >
$F("name")  不正确的,TypeError: element is null { message="element is null", more...}

5、prototype中的$H()用法

当你传入一下对像作为函数的参数时,$H将输入对像一个prototype的专有hash对像。$H感觉像是转换器,启到一个改变形势的作用

$H({name:'tank',sex:1,height:'170cm'}).toArray()
[["name", "tank"], ["sex", 1], ["height", "170cm"]]
$H({name:'tank',sex:1,height:'170cm'}).toQueryString()
"name=tank&sex=1&height=170cm"

6、prototype中的$R()用法

$R函数和原始的构造函数具有完全相同的参数:start 和 end 分别表示下限值和上限值(两个参数的类型必须一致),exclusive 表示是否排除上限值(参数 end)。默认不排除上限值。

$R的实例描述了一系列遵循某种规则变化的值,如数字、 文本或其它在语义上支持相邻值推导的类型

能过例子,来说明,最容易让人记住了

$A($R("a","z",true)).join(',') //加了参数true 
"a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y" 
$A($R("a","z")).join(',') //没有加 
"a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z"

$R根据规则推测了一个$R对像,$A将这个对像转换成了数组,用,号将数组转换成字符串.

$R(0, 10).each(function(value){ 
 alert(value*value); 
}); 
//结果和上面的一样的,但是each解释的对像是不一样的。 
$A($R(0, 10)).each(function(value){ 
 alert(value*value); 
});

如果报这样的错误 ,TypeError: value.succ is not a function { message="value.succ is not a function", more...},请升级

7、prototype中的$w()用法

$w将以空格是为分隔符的字符串,转换成数组,根php的explode(" ",$string);功能是一样的,针对性比较强。

$w("aa bb").join(',')

如果报这样的错误 ,ReferenceError: $w is not defined { message="$w is not defined",  more...},请升级

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
js 定时器setTimeout无法调用局部变量的解决办法
Nov 28 Javascript
javascript中加号(+)操作符的一些神奇作用
Jun 06 Javascript
javascript制作幻灯片(360度全景图片)
Jul 28 Javascript
js表单提交和submit提交的区别实例分析
Dec 10 Javascript
AngularJS使用ngMessages进行表单验证
Dec 27 Javascript
javascript 用函数实现继承详解
May 28 Javascript
jQuery实现下拉菜单(内容为时间)的实时更新及图表的随动更新的方法
Jul 07 Javascript
前端框架Vue.js构建大型应用浅析
Sep 12 Javascript
微信小程序 template模板详解及实例
Feb 21 Javascript
vue实现动态数据绑定
Apr 28 Javascript
JS库之Waypoints的用法详解
Sep 13 Javascript
浅谈Node.js 子进程与应用场景
Jan 24 Javascript
详解javascript传统方法实现异步校验
Jan 22 #Javascript
jquery.validate提示错误信息位置方法
Jan 22 #Javascript
jQuery ajax时间差导致的变量赋值问题分析
Jan 22 #Javascript
jQuery简单获取键盘事件的方法
Jan 22 #Javascript
基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标
Jan 22 #Javascript
CSS或者JS实现鼠标悬停显示另一元素
Jan 22 #Javascript
鼠标悬停小图标显示大图标
Jan 22 #Javascript
You might like
使用sockets:从新闻组中获取文章(二)
2006/10/09 PHP
Draggable Elements 元素拖拽功能实现代码
2011/03/30 Javascript
面向对象的Javascript之一(初识Javascript)
2012/01/20 Javascript
jQuery点击自身以外地方关闭弹出层的简单实例
2013/12/24 Javascript
jQuery使用hide方法隐藏指定元素class样式用法实例
2015/03/30 Javascript
javascript中new关键字详解
2015/12/14 Javascript
AngularJS 作用域详解及示例代码
2016/08/17 Javascript
Angularjs为ng-click事件传递参数
2017/06/15 Javascript
jQuery事件_动力节点Java学院整理
2017/07/05 jQuery
jQuery实现的文字逐行向上间歇滚动效果示例
2017/09/06 jQuery
微信小程序之选项卡的实现方法
2017/09/29 Javascript
Vim快速合并行及vim 将文件所有行合并到一行
2017/11/27 Javascript
vue-cli 使用vue-bus来全局控制的实例讲解
2018/09/15 Javascript
如何优雅的在一台vps(云主机)上面部署vue+mongodb+express项目
2019/01/20 Javascript
详细分析Node.js 模块系统
2020/06/28 Javascript
[05:03]显微镜下的DOTA2第十期——Ti3豪之超神幽鬼
2014/06/23 DOTA
python通过urllib2获取带有中文参数url内容的方法
2015/03/13 Python
低版本中Python除法运算小技巧
2015/04/05 Python
对于Python装饰器使用的一些建议
2015/06/03 Python
Python实现二叉搜索树
2016/02/03 Python
Django自定义manage命令实例代码
2018/02/11 Python
pycharm打开命令行或Terminal的方法
2019/01/16 Python
python 通过类中一个方法获取另一个方法变量的实例
2019/01/22 Python
Django之无名分组和有名分组的实现
2019/04/16 Python
python和mysql交互操作实例详解【基于pymysql库】
2019/06/04 Python
浅谈Pytorch中的torch.gather函数的含义
2019/08/18 Python
Python图像处理库PIL的ImageFilter模块使用介绍
2020/02/26 Python
pycharm实现在虚拟环境中引入别人的项目
2020/03/09 Python
python 通过文件夹导入包的操作
2020/06/01 Python
如何通过python检查文件是否被占用
2020/12/18 Python
2014大学生职业生涯规划书最新范文
2014/09/13 职场文书
单位作风建设自查报告
2014/10/23 职场文书
2014年度个人总结范文
2015/03/09 职场文书
Python WSGI 规范简介
2021/04/11 Python
JavaScript嵌入百度地图API的最详细方法
2021/04/16 Javascript
MySQL通过binlog恢复数据
2021/05/27 MySQL