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 相关文章推荐
javascript 数组的方法集合
Jun 05 Javascript
jquery统计复选框选中示例
Nov 05 Javascript
IE的事件传递-event.cancelBubble示例介绍
Jan 12 Javascript
jquery使用slideDown实现模块缓慢拉出效果的方法
Mar 27 Javascript
jQuery实现内容定时切换效果完整实例
Apr 06 Javascript
jQuery zTree树插件简单使用教程
Jan 10 Javascript
jQuery居中元素scrollleft计算方法示例
Jan 16 Javascript
纯js实现隔行变色效果
Nov 29 Javascript
javascript事件监听与事件委托实例详解
Aug 16 Javascript
微信小程序关键字变色实现代码实例
Dec 13 Javascript
《javascript设计模式》学习笔记七:Javascript面向对象程序设计组合模式详解
Apr 08 Javascript
Node.js API详解之 readline模块用法详解
May 22 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
Discuz! 5.0.0论坛程序中加入一段js代码,让会员点击下载附件前自动弹出提示窗口
2007/04/18 PHP
php实现批量下载百度云盘文件例子分享
2014/04/10 PHP
PHP中使用OpenSSL生成证书及加密解密
2017/02/05 PHP
PHP基于ORM方式操作MySQL数据库实例
2017/06/21 PHP
Javascript实例教程(19) 使用HoTMetal(3)
2006/12/23 Javascript
js同时按下两个方向键
2007/12/01 Javascript
jQuery 动画弹出窗体支持多种展现方式
2010/04/29 Javascript
JS动态添加option和删除option(附实例代码)
2013/04/01 Javascript
javascript计算当月剩余天数(天数计算器)示例代码
2014/01/09 Javascript
javascript异步编程的4种方法
2014/02/19 Javascript
浅谈js的setInterval事件
2014/12/05 Javascript
jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法
2015/08/07 Javascript
javascript生成img标签的3种实现方法(对象、方法、html)
2015/12/25 Javascript
JavaScript驾驭网页-获取网页元素
2016/03/24 Javascript
漂亮! js实现颜色渐变效果
2016/08/12 Javascript
three.js实现围绕某物体旋转
2017/01/25 Javascript
JS中将多个逗号替换为一个逗号的实现代码
2017/06/23 Javascript
对vue中v-on绑定自定事件的实例讲解
2018/09/06 Javascript
Vue的状态管理vuex使用方法详解
2020/02/05 Javascript
安装多个版本的TensorFlow的方法步骤
2020/04/21 Python
Python读写锁实现实现代码解析
2020/11/28 Python
意大利高端时尚买手店:Stefania Mode
2018/03/01 全球购物
正宗的日本零食和糖果订阅盒:Bokksu
2019/11/21 全球购物
光声世纪笔试题目
2012/08/25 面试题
统计学专业毕业生的自我评价分享
2013/11/28 职场文书
应届毕业生求职信
2013/11/30 职场文书
参观考察邀请函范文
2014/01/29 职场文书
商业街策划方案
2014/05/31 职场文书
政工例会汇报材料
2014/08/26 职场文书
乱丢垃圾袋检讨书
2014/10/08 职场文书
商业计划书范文
2019/04/24 职场文书
Pytorch数据读取之Dataset和DataLoader知识总结
2021/05/23 Python
使用javascript解析二维码的三种方式
2021/11/11 Javascript
angular异步验证器防抖实例详解
2022/03/31 Javascript
Java 深入探究讲解简单工厂模式
2022/04/07 Java/Android
vue @click.native 绑定原生点击事件
2022/04/22 Vue.js