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 相关文章推荐
jQuery 打造动态下滑菜单实现说明
Apr 15 Javascript
Prototype的Class.create函数解析
Sep 22 Javascript
String.prototype实现的一些javascript函数介绍
Nov 22 Javascript
通过隐藏iframe实现文件下载的js方法介绍
Feb 26 Javascript
js实现div闪烁原理及实现代码
Jun 24 Javascript
JavaScript判断变量是否为空的自定义函数分享
Jan 31 Javascript
jQuery实现对无序列表的排序功能(附demo源码下载)
Jun 25 Javascript
深入理解Angular4订阅(Subscribe)与取消
Nov 22 Javascript
改变vue请求过来的数据中的某一项值的方法(详解)
Mar 08 Javascript
VUE+Element UI实现简单的表格行内编辑效果的示例的代码
Oct 31 Javascript
浅谈KOA2 Restful方式路由初探
Mar 14 Javascript
jquery绑定事件 bind和on的用法与区别分析
May 22 jQuery
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中Session的概念
2006/10/09 PHP
解析php中array_merge与array+array的区别
2013/06/21 PHP
PHP编写RESTful接口的方法
2016/02/21 PHP
php强制下载文件函数
2016/08/24 PHP
PHP中-&gt;和=&gt;的含义及使用示例解析
2020/08/06 PHP
javascript实现面向对象类的功能书写技巧
2010/03/07 Javascript
纯js网页画板(Graphics)类简介及实现代码
2012/12/24 Javascript
js 剪切板的用法(clipboardData.setData)与js match函数介绍
2013/11/19 Javascript
jQuery插件开发详细教程
2014/06/06 Javascript
JavaScript实现自动变换表格边框颜色
2015/05/08 Javascript
Jsonp post 跨域方案
2015/07/06 Javascript
JavaScript正则表达式的分组匹配详解
2016/02/13 Javascript
js方法数据验证的简单实例
2016/09/17 Javascript
layer实现弹窗提交信息
2016/12/12 Javascript
Bootstrap源码解读按钮(5)
2016/12/23 Javascript
浅谈Vue3 Composition API如何替换Vue Mixins
2020/04/29 Javascript
vue利用全局导航守卫作登录后跳转到未登录前指定页面的实例代码
2020/05/19 Javascript
Node.js 中如何收集和解析命令行参数
2021/01/08 Javascript
Python中的pprint折腾记
2015/01/21 Python
python同时给两个收件人发送邮件的方法
2015/04/30 Python
Python根据指定日期计算后n天,前n天是哪一天的方法
2018/05/29 Python
python 随机打乱 图片和对应的标签方法
2018/12/14 Python
Python应用领域和就业形势分析总结
2019/05/14 Python
在tensorflow中设置保存checkpoint的最大数量实例
2020/01/21 Python
在pycharm中使用matplotlib.pyplot 绘图时报错的解决
2020/06/01 Python
python time.strptime格式化实例详解
2021/02/03 Python
HTML5安全介绍之内容安全策略(CSP)简介
2012/07/10 HTML / CSS
总结html5自定义属性有哪些
2020/04/01 HTML / CSS
初中音乐教学反思
2014/01/12 职场文书
简历中自我评价怎么写
2014/02/12 职场文书
学习保证书怎么写
2015/02/26 职场文书
2015年检察院个人工作总结
2015/05/20 职场文书
三八节祝酒词
2015/08/11 职场文书
党风廉洁教育心得体会
2016/01/20 职场文书
关于食品安全的演讲稿范文(三篇)
2019/10/21 职场文书
Springboot-cli 开发脚手架,权限认证,附demo演示
2022/04/28 Java/Android