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 常用代码技巧大收集
Feb 25 Javascript
javascript获取url上某个参数的方法
Nov 08 Javascript
js实现键盘Enter键提交表单的方法
May 27 Javascript
JavaScript中用getDate()方法返回指定日期的教程
Jun 09 Javascript
CSS中position属性之fixed实现div居中
Dec 14 Javascript
JavaScript如何实现跨域请求
Aug 05 Javascript
利用Angularjs和原生JS分别实现动态效果的输入框
Sep 01 Javascript
jQuery实现当拉动滚动条到底部加载数据的方法分析
Jan 24 jQuery
vue中的mvvm模式讲解
Jan 31 Javascript
对TypeScript库进行单元测试的方法
Jul 18 Javascript
layui前端时间戳转化实例
Nov 15 Javascript
解决vue下载后台传过来的乱码流的问题
Dec 05 Vue.js
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函数代码
2013/08/29 PHP
PHP实现批量生成App各种尺寸Logo
2015/03/19 PHP
php中JSON的使用方法
2015/04/30 PHP
PHP判断手机是IOS还是Android
2015/12/09 PHP
PHP PDOStatement::fetchAll讲解
2019/01/31 PHP
用脚本调用样式的几种方法
2006/12/09 Javascript
通过判断JavaScript的版本实现执行不同的代码
2010/05/11 Javascript
javascript拓展DOM操作 prependChild insertAfert
2010/11/17 Javascript
浅谈node.js中async异步编程
2015/10/22 Javascript
灵活使用数组制作图片切换js实现
2016/07/28 Javascript
JS实现六位字符密码输入器功能
2016/08/19 Javascript
Vue中computed与methods的区别详解
2018/03/24 Javascript
浅谈Vue服务端渲染框架Nuxt的那些事
2018/12/21 Javascript
vue data变量相互赋值后被实时同步的解决步骤
2020/08/05 Javascript
Javascript实现打鼓效果
2021/01/29 Javascript
介绍Python的Django框架中的静态资源管理器django-pipeline
2015/04/25 Python
python中for循环输出列表索引与对应的值方法
2018/11/07 Python
Python使用sqlite3模块内置数据库
2020/05/07 Python
python中的时区问题
2021/01/14 Python
python 对xml解析的示例
2021/02/27 Python
CSS3轻松实现圆角效果
2017/11/09 HTML / CSS
web页面录屏实现
2019/02/12 HTML / CSS
Zadig&Voltaire官网:法国时装品牌
2018/01/05 全球购物
Sneaker Studio波兰:购买运动鞋
2018/04/28 全球购物
说说你所熟悉或听说过的j2ee中的几种常用模式?及对设计模式的一些看法
2012/05/24 面试题
挂职思想汇报
2013/12/31 职场文书
浪费资源的建议书
2014/03/12 职场文书
债务追讨授权委托书范本
2014/10/16 职场文书
校园新闻稿范文
2015/07/18 职场文书
小学班级管理心得体会
2016/01/07 职场文书
九年级历史教学反思
2016/02/19 职场文书
2016年中学端午节主题活动总结
2016/04/01 职场文书
求职自荐信该如何书写?
2019/06/24 职场文书
暑假开始了,你的暑假学习计划写好了吗?
2019/07/04 职场文书
涨工资申请书应该怎么写?
2019/07/08 职场文书
如何使用python包中的sched事件调度器
2022/04/30 Python