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 相关文章推荐
DEFER怎么用?
Jul 01 Javascript
仅IE不支持setTimeout/setInterval函数的第三个以上参数
May 25 Javascript
解决JS浮点数运算出现Bug的方法
Mar 12 Javascript
js使用html()或text()方法获取设置p标签的显示的值
Aug 01 Javascript
JavaScript中消除闭包的一般方法介绍
Mar 16 Javascript
JavaScript使用RegExp进行正则匹配的方法
Jul 11 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(二)之数据支持json字符串、list集合
Aug 11 Javascript
JavaScript 链式结构序列化详解
Sep 30 Javascript
浅谈angularjs module返回对象的坑(推荐)
Oct 21 Javascript
Mobile Web开发基础之四--处理手机设备的横竖屏问题
Aug 11 Javascript
jQuery 实现鼠标画框并对框内数据选中的实例代码
Aug 29 jQuery
JavaScript基础进阶之数组方法总结(推荐)
Sep 04 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
curl实现站外采集的方法和技巧
2014/01/31 PHP
利用PHPStorm如何开发Laravel应用详解
2017/08/30 PHP
基于jQuery的可以控制左右滚动及自动滚动效果的代码
2010/07/25 Javascript
js中prototype用法详细介绍
2013/11/14 Javascript
JS实现仿中关村论坛评分后弹出提示效果的方法
2015/02/23 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐)
2016/06/23 Javascript
jquery常用的12个小功能
2016/07/22 Javascript
JS实现根据密码长度显示安全条功能
2017/03/08 Javascript
JS实现的汉字与Unicode码相互转化功能分析
2018/05/25 Javascript
angular2路由之routerLinkActive指令【推荐】
2018/05/30 Javascript
Jquery和CSS实现选择框重置按钮功能
2018/11/08 jQuery
浅谈vue中关于checkbox数据绑定v-model指令的个人理解
2018/11/14 Javascript
Vue中的组件及路由使用实例代码详解
2019/05/22 Javascript
JS造成内存泄漏的几种情况实例分析
2020/03/02 Javascript
Python 多线程Threading初学教程
2017/08/22 Python
python requests 使用快速入门
2017/08/31 Python
python利用插值法对折线进行平滑曲线处理
2018/12/25 Python
由Python编写的MySQL管理工具代码实例
2019/04/09 Python
解决python flask中config配置管理的问题
2019/07/26 Python
对django layer弹窗组件的使用详解
2019/08/31 Python
python线程安全及多进程多线程实现方法详解
2019/09/27 Python
Django 设置多环境配置文件载入问题
2020/02/25 Python
如何用Python绘制3D柱形图
2020/09/16 Python
Halston Heritage官网:简洁的日装,稍显奢华的晚装
2018/11/20 全球购物
澳大利亚实惠时尚女装商店:Katies
2019/06/16 全球购物
英国电子产品购物网站:Tech in the basket
2019/11/08 全球购物
什么是事务?事务有哪些性质?
2012/03/11 面试题
客户代表实习人员自我鉴定
2013/09/27 职场文书
服装电子商务创业计划书
2014/01/30 职场文书
农村门前三包责任书
2014/07/25 职场文书
二婚主持词
2015/06/30 职场文书
主婚人致辞精选
2015/07/28 职场文书
2020年元旦祝福语录,总有适合你的
2019/12/31 职场文书
详解Java实践之适配器模式
2021/06/18 Java/Android
Js类的构建与继承案例详解
2021/09/15 Javascript
TaiShan 200服务器安装Ubuntu 18.04的图文教程
2022/06/28 Servers