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 页面内容搜索,类似于 Ctrl+F功能的实现代码
Aug 13 Javascript
js的表单操作 简单计算器
Dec 29 Javascript
Node.js实战 建立简单的Web服务器
Mar 08 Javascript
基于jquery ajax 用户无刷新登录方法详解
Apr 28 Javascript
解决js数据包含加号+通过ajax传到后台时出现连接错误
Aug 01 Javascript
jquery监听div内容的变化具体实现思路
Nov 04 Javascript
jQuery trigger()方法用法介绍
Jan 13 Javascript
Jquery实现select multiple左右添加和删除功能的简单实例
May 26 Javascript
详解js的事件代理(委托)
Dec 22 Javascript
详解vue表单验证组件 v-verify-plugin
Apr 19 Javascript
详解vue表单——小白速看
Apr 08 Javascript
vue里input根据value改变背景色的实例
Sep 29 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中MD5函数使用实例代码
2008/06/07 PHP
php时间计算相关问题小结
2016/05/09 PHP
PHP7新特性之抽象语法树(AST)带来的变化详解
2018/07/17 PHP
PHP模版引擎原理、定义与用法实例
2019/03/29 PHP
图片onload事件触发问题解决方法
2011/07/31 Javascript
jquery学习笔记 用jquery实现无刷新登录
2011/08/08 Javascript
jQuery function的正确书写方法
2013/08/02 Javascript
javascript实现通过表格绘制颜色填充矩形的方法
2015/04/21 Javascript
全面解析JavaScript中apply和call以及bind(推荐)
2016/06/15 Javascript
jQuery+CSS3实现四种应用广泛的导航条制作实例详解
2016/09/17 Javascript
浅谈angularjs module返回对象的坑(推荐)
2016/10/21 Javascript
深入理解javascript中的 “this”
2017/01/17 Javascript
Javascript中引用类型传递的知识点小结
2017/03/06 Javascript
js实现添加删除表格(两种方法)
2017/04/27 Javascript
bootstrap table单元格新增行并编辑
2017/05/19 Javascript
VuePress 快速踩坑小结
2019/02/14 Javascript
使用vue-router切换页面时,获取上一页url以及当前页面url的方法
2019/05/06 Javascript
简单了解TypeScript中如何继承 Error 类
2019/06/21 Javascript
ant-design-vue 实现表格内部字段验证功能
2019/12/16 Javascript
JavaScript获取时区实现过程解析
2020/09/24 Javascript
Django中模版的子目录与include标签的使用方法
2015/07/16 Python
Python Flask框架扩展操作示例
2019/05/03 Python
详解Django定时任务模块设计与实践
2019/07/24 Python
Python3批量移动指定文件到指定文件夹方法示例
2019/09/02 Python
Python大数据之从网页上爬取数据的方法详解
2019/11/16 Python
Python如何使用OS模块调用cmd
2020/02/27 Python
pycharm下配置pyqt5的教程(anaconda虚拟环境下+tensorflow)
2020/03/25 Python
python实现canny边缘检测
2020/09/14 Python
艺术应用与设计专业个人的自我评价
2013/11/19 职场文书
会计应聘求职信范文
2013/12/17 职场文书
市场营销专业毕业生求职信
2014/07/21 职场文书
教师师德考核自我评价
2014/09/13 职场文书
2014物价局民主生活会对照检查材料思想汇报
2014/09/24 职场文书
借名购房协议书范本
2014/10/06 职场文书
2014年个人业务工作总结
2014/11/17 职场文书
用python画城市轮播地图
2021/05/28 Python