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 相关文章推荐
Jquery css函数用法(判断标签是否拥有某属性)
May 28 Javascript
jQuery获得内容和属性方法及示例
Dec 02 Javascript
javascript实现页面内关键词高亮显示代码
Apr 03 Javascript
Javascript 多物体运动的实现
Dec 24 Javascript
Javascript中With语句用法实例
May 14 Javascript
基于JavaScript实现移动端TAB触屏切换效果
Oct 20 Javascript
前端程序员必须知道的高性能Javascript知识
Aug 24 Javascript
Node.js 8 中的重要新特性
Jun 28 Javascript
详解Angular如何正确的操作DOM
Jul 06 Javascript
js指定日期增加指定月份的实现方法
Dec 19 Javascript
JavaScript禁止右击保存图片,禁止拖拽图片的实现代码
Apr 28 Javascript
vue实现列表拖拽排序的示例代码
Apr 08 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 裁剪图片成固定大小代码方法
2009/09/09 PHP
学习php分页代码实例
2013/10/24 PHP
php实现把url转换迅雷thunder资源下载地址的方法
2014/11/07 PHP
浅谈json_encode用法
2015/03/05 PHP
PHP精确计算功能示例
2016/11/29 PHP
tp5(thinkPHP5)框架数据库Db增删改查常见操作总结
2019/01/10 PHP
TNC vs RR BO3 第一场 2.14
2021/03/10 DOTA
js 实现无缝滚动 兼容IE和FF
2009/07/15 Javascript
JQuery困惑—包装集 DOM节点
2009/10/16 Javascript
Javascript中的Array数组对象详谈
2014/03/03 Javascript
查询json的数据结构的8种方式简介
2014/03/10 Javascript
JavaScript定义变量和变量优先级问题探讨
2014/10/11 Javascript
JavaScript 实现打印,打印预览,打印设置
2014/12/30 Javascript
DOM基础教程之事件类型
2015/01/20 Javascript
jQuery判断指定id的对象是否存在的方法
2015/05/22 Javascript
谈谈Jquery中的children find 的区别有哪些
2015/10/19 Javascript
jquery判断类型是不是number类型的实例代码
2016/10/07 Javascript
Jquery Easyui选项卡组件Tab使用详解(10)
2016/12/18 Javascript
尝试自己动手用react来写一个分页组件(小结)
2018/02/09 Javascript
详解webpack-dev-server的简单使用
2018/04/02 Javascript
简单实现vue中的依赖收集与响应的方法
2019/02/18 Javascript
nodejs的安装使用与npm的介绍
2019/09/11 NodeJs
微信小程序防止多次点击跳转和防止表单组件输入内容多次验证功能(函数防抖)
2019/09/19 Javascript
Vue data的数据响应式到底是如何实现的
2020/02/11 Javascript
Javascript查看大图功能代码实现
2020/05/07 Javascript
[41:21]夜魇凡尔赛茶话会 第三期02:看图识人
2021/03/11 DOTA
详解Python3中yield生成器的用法
2015/08/20 Python
详解Python多线程Selenium跨浏览器测试
2017/04/01 Python
使用Python进行AES加密和解密的示例代码
2018/02/02 Python
Python3.5.3下配置opencv3.2.0的操作方法
2018/04/02 Python
python中通过pip安装库文件时出现“EnvironmentError: [WinError 5] 拒绝访问”的问题及解决方案
2020/08/11 Python
pycharm配置python 设置pip安装源为豆瓣源
2021/02/05 Python
测控技术与通信工程毕业生自荐信范文
2013/12/28 职场文书
解除劳动合同协议书范本2014
2014/09/25 职场文书
先进个人申报材料
2014/12/30 职场文书
个人党性分析总结
2015/03/05 职场文书