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 相关文章推荐
查找iframe里元素的方法可传参
Sep 11 Javascript
jQuery focus和blur事件的应用详解
Jan 26 Javascript
纯js代码实现简单计算器
Dec 02 Javascript
BootStrap iCheck插件全选与获取value值的解决方法
Aug 24 Javascript
jquery精度计算代码 jquery指定精确小数位
Feb 06 Javascript
JS实现颜色动态淡化效果
Mar 06 Javascript
jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
Mar 21 jQuery
JS异步文件上传(兼容IE8+)
Apr 02 Javascript
create-react-app使用antd按需加载的样式无效问题的解决
Feb 26 Javascript
微信小程序服务器日期格式化问题
Jan 07 Javascript
JavaScript判断数据类型有几种方法及区别介绍
Sep 02 Javascript
JavaScript展开运算符和剩余运算符的区别详解
Feb 18 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
VFP与其他应用程序的集成
2006/10/09 PHP
php设计模式 Builder(建造者模式)
2011/06/26 PHP
php define的第二个参数使用方法
2013/11/04 PHP
kohana框架上传文件验证规则写法示例
2014/07/14 PHP
PHP中使用Imagick实现各种图片效果实例
2015/01/21 PHP
php实现源代码加密的方法
2015/07/11 PHP
微信小程序 消息推送php服务器验证实例详解
2017/03/30 PHP
TP5框架请求响应参数实例分析
2019/10/17 PHP
采用CSS和JS,刚好我最近有个站点要用到下拉菜单!
2006/06/26 Javascript
Jquery上传插件 uploadify v3.1使用说明
2012/06/18 Javascript
js获取form的方法
2015/05/06 Javascript
jquery实现Ctrl+Enter提交表单的方法
2015/07/21 Javascript
鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例
2016/12/26 Javascript
js获取浏览器和屏幕的各种宽度高度
2017/02/22 Javascript
原生js轮播特效
2017/05/18 Javascript
jQuery Pagination分页插件_动力节点Java学院整理
2017/07/17 jQuery
一个Js文件函数中调用另一个Js文件函数的方法演示
2017/08/14 Javascript
不得不看之JavaScript构造函数及new运算符
2017/08/21 Javascript
详解Node.js中的Async和Await函数
2018/02/22 Javascript
React-router4路由监听的实现
2018/08/07 Javascript
nodejs中方法和模块用法示例
2018/12/24 NodeJs
JS替换字符串中指定位置的字符(多种方法)
2020/05/28 Javascript
[59:15]EG vs LGD 2018国际邀请赛淘汰赛BO3 第一场 8.26
2018/08/29 DOTA
Python类的专用方法实例分析
2015/01/09 Python
使用Python写个小监控
2016/01/27 Python
详解Python之数据序列化(json、pickle、shelve)
2017/03/30 Python
python获取本机所有IP地址的方法
2018/12/26 Python
Django实现简单网页弹出警告代码
2019/11/15 Python
Python双链表原理与实现方法详解
2020/02/22 Python
基于opencv的selenium滑动验证码的实现
2020/07/24 Python
Python爬取数据并实现可视化代码解析
2020/08/12 Python
css3 border-image使用说明
2010/06/23 HTML / CSS
Internet主要有哪些网络群组成
2015/12/24 面试题
异地恋情人节寄语
2015/02/28 职场文书
奖金申请报告模板
2015/05/15 职场文书
详解python的异常捕获
2022/03/03 Python