Prototype 学习 工具函数学习($方法)


Posted in Javascript onJuly 12, 2009

$
$$
$A
$F
$H
$R
$w
Try.these
document.getElementsByClassName
$方法——被成为瑞士军刀(Swiss Army knife)
If provided with a string, returns the element in the document with matching ID; otherwise returns the passed element. Takes in an arbitrary number of arguments. All elements returned by the function are extended with Prototype DOM extensions.

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,则判断传进来的参数是否为String,如果传进来的是String,则调用getElementById方法取得相应的对象,最后让返回的对象继承Element的所有方法,这样返回的对象将可以直接调用Element对象里面定义的各种方法。例如

// Note quite OOP-like... 
Element.hide('itemId'); 
// A cleaner feel, thanks to guaranted extension 
$('itemId').hide();

如果长度大于1,则递归调用$方法(elements.push($(arguments[i]));)就是说传进来的参数可以是多维数组:
$(['A','B',['C','D',['E','F']]]),当然了返回的也是对象数组了。
如果长度等于0,返回undefined,即直接调用alert($())
详细看一下Object.isString方法:
function isString(object) { 
return getClass(object) === "String"; 
} //=====> getClass() 
function getClass(object) { 
return Object.prototype.toString.call(object) 
.match(/^\[object\s(.*)\]$/)[1]; 
}

主要是通过Object对象的内部方法getClass来确定返回的对象是什么类型,在getClass中调用了Object的toString方法,然后通过正则表达式取出表示具体对象的字符串

Object.prototype.toString.call("2222") 返回"[object String]" 取得"String"

Object.prototype.toString.call(2222) 返回"[object Number]" 取得"Number"

Object.prototype.toString.call(/^$/) 返回"[object RegExp]" 取得"RegExp"

这里为什么要用Object的toString方法呢,因为如果直接调用"2222".toString()将返回"2222",也就是说从Object继承而来的对象,重写了toStirng方法,所以这里要调用Object的toString才行。

Javascript 相关文章推荐
js调用flash的效果代码
Apr 26 Javascript
js showModalDialog参数的使用详解
Jan 07 Javascript
js用闭包遍历树状数组的方法
Mar 19 Javascript
深入分析JQuery和JavaScript的异同
Oct 23 Javascript
JavaScript转换二进制编码为ASCII码的方法
Apr 16 Javascript
JavaScript实现Fly Bird小游戏
Dec 15 Javascript
在 Angular2 中实现自定义校验指令(确认密码)的方法
Jan 23 Javascript
详解vue服务端渲染(SSR)初探
Jun 19 Javascript
vue组件jsx语法的具体使用
May 21 Javascript
解决layui中onchange失效以及form动态渲染失效的问题
Sep 27 Javascript
vue+elementUI动态增加表单项并添加验证的代码详解
Dec 17 Vue.js
Javascript中async与await的捕捉错误详解
Mar 03 Javascript
Prototype 学习 Prototype对象
Jul 12 #Javascript
javascript 动态加载 css 方法总结
Jul 11 #Javascript
checkbox 复选框不能为空
Jul 11 #Javascript
javascript 页面只自动刷新一次
Jul 10 #Javascript
javascript div 遮罩层封锁整个页面
Jul 10 #Javascript
JQuery 实现的页面滚动时浮动窗口控件
Jul 10 #Javascript
javascript 读取xml,写入xml 实现代码
Jul 10 #Javascript
You might like
浅析PHP原理之变量分离/引用(Variables Separation)
2013/08/09 PHP
对PHP新手的一些建议(PHP学习经验总结)
2014/08/20 PHP
自己写的php curl库实现整站克隆功能
2015/02/12 PHP
100行PHP代码实现socks5代理服务器
2016/04/28 PHP
php封装的图片(缩略图)处理类完整实例
2016/10/19 PHP
轻松创建nodejs服务器(9):实现非阻塞操作
2014/12/18 NodeJs
超级简单实现JavaScript MVC 样式框架
2015/03/24 Javascript
纯javascript代码实现计算器功能(三种方法)
2015/09/07 Javascript
详解JavaScript中的构造器Constructor模式
2016/01/14 Javascript
AngularJS directive返回对象属性详解
2016/03/28 Javascript
深入浅析JavaScript函数前面的加号和叹号
2016/07/09 Javascript
实例解析js中try、catch、finally的执行规则
2017/02/24 Javascript
微信小程序 数据遍历的实现
2017/04/05 Javascript
BootStrap点击保存后实现模态框自动关闭的思路(模态框)
2017/09/26 Javascript
基于vue中解决v-for使用报红并出现警告的问题
2018/03/03 Javascript
JS和Canvas实现图片的预览压缩和上传功能
2018/03/30 Javascript
JS实现的简单下拉框联动功能示例
2018/05/11 Javascript
jQuery中的类名选择器(.class)用法简单示例
2018/05/14 jQuery
解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题
2018/09/27 Javascript
微信小程序实现左右列表联动
2020/05/19 Javascript
Javascript数组方法reduce的妙用之处分享
2019/06/10 Javascript
Flutter部件内部状态管理小结之实现Vue的v-model功能
2019/06/11 Javascript
微信小程序实现列表的横向滑动方式
2020/07/15 Javascript
[49:27]2018DOTA2亚洲邀请赛 4.4 淘汰赛 TNC vs VG 第一场
2018/04/05 DOTA
python实现百度关键词排名查询
2014/03/30 Python
Python面向对象之静态属性、类方法与静态方法分析
2018/08/24 Python
Python简单I/O操作示例
2019/03/18 Python
python字符串查找函数的用法详解
2019/07/08 Python
手机使用python操作图片文件(pydroid3)过程详解
2019/09/25 Python
Python必须了解的35个关键词
2020/07/16 Python
Omio波兰:全欧洲低价大巴、火车和航班搜索和比价
2018/02/16 全球购物
中专毕业生个人职业生涯规划
2014/02/19 职场文书
导游词之鲁迅祖居
2019/10/17 职场文书
python树莓派通过队列实现进程交互的程序分析
2021/07/04 Python
海贼王十大潜力果实,路飞仅排第十,第一可毁世界(震震果实)
2022/03/18 日漫
OpenCV实现常见的四种图像几何变换
2022/04/01 Python