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 相关文章推荐
用showModalDialog弹出页面后,提交表单总是弹出一个新窗口
Jul 18 Javascript
js获取height和width的方法说明
Jan 06 Javascript
JS中三目运算符和if else的区别分析与示例
Nov 21 Javascript
Javascript模块化编程详解
Dec 01 Javascript
深入理解React中es6创建组件this的方法
Aug 29 Javascript
HTML Table 空白单元格补全的简单实现
Oct 13 Javascript
AngularJS中的缓存使用
Jan 11 Javascript
node.js与C语言 实现遍历文件夹下最大的文件,并输出路径,大小
Jan 20 Javascript
基于vue的fullpage.js单页滚动插件
Mar 20 Javascript
使用jQuery ajaxupload插件实现无刷新上传文件
Apr 23 jQuery
karma+webpack搭建vue单元测试环境的方法示例
May 24 Javascript
vue实力踩坑之push当前页无效
Apr 10 Vue.js
详解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
php实现简单的MVC框架实例
2015/09/23 PHP
Yii多表联合查询操作详解
2016/06/02 PHP
javascript 面向对象全新理练之数据的封装
2009/12/03 Javascript
Javascript 实现TreeView CheckBox全选效果
2010/01/11 Javascript
Javascript 判断Flash是否加载完成的代码
2010/04/12 Javascript
关于URL中的特殊符号使用介绍
2011/11/03 Javascript
js实现对ajax请求面向对象的封装
2016/01/08 Javascript
Javascript 字符串模板的简单实现
2016/02/13 Javascript
详解AngularJS控制器的使用
2016/03/09 Javascript
底部悬浮通栏可以关闭广告位的实现方法
2016/06/01 Javascript
JavaScript中的 attribute 和 jQuery中的 attr 方法浅析
2017/01/04 Javascript
微信小程序tabBar底部导航中文注解api详解
2017/08/16 Javascript
原生JS实现移动端web轮播图详解(结合Tween算法造轮子)
2017/09/10 Javascript
js实现会跳动的日历效果(完整实例)
2017/10/18 Javascript
BootStrap TreeView使用实例详解
2017/11/01 Javascript
详解Vue2.0配置mint-ui踩过的那些坑
2018/04/23 Javascript
使用Python编写类UNIX系统的命令行工具的教程
2015/04/15 Python
python merge、concat合并数据集的实例讲解
2018/04/12 Python
python实现数据分析与建模
2019/07/11 Python
python爬虫之遍历单个域名
2019/11/20 Python
css3背景_动力节点Java学院整理
2017/07/11 HTML / CSS
Harman Audio官方商店:购买JBL、Harman Kardon、Infinity和AKG
2019/12/05 全球购物
Servlet如何得到服务器的信息
2015/12/22 面试题
机关门卫制度
2014/02/01 职场文书
你的创业计划书怎样才能打动风投
2014/02/06 职场文书
出纳员岗位责任制
2014/02/11 职场文书
餐厅经理岗位职责和岗位目标
2014/02/13 职场文书
经济职业学院毕业生自荐书
2014/03/17 职场文书
作文评语大全
2014/04/23 职场文书
体育专业自荐书
2014/05/29 职场文书
2014年乡镇工作总结
2014/11/21 职场文书
2014年为民办实事工作总结
2014/12/20 职场文书
工厂采购员岗位职责
2015/04/07 职场文书
靠谱的活动总结
2019/04/16 职场文书
详细了解java监听器和过滤器
2021/07/09 Java/Android
MySQL数据库 任意ip连接方法
2022/05/20 MySQL