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经典效果集锦
Jul 06 Javascript
javascript获取xml节点的最大值(实现代码)
Dec 11 Javascript
Js+Jq获取URL参数的集中方法示例代码
May 20 Javascript
JavaScript数据类型详解
Apr 01 Javascript
在JavaScript中用getMinutes()方法返回指定的分时刻
Jun 10 Javascript
jQuery div拖拽用法实例
Jan 14 Javascript
利用fecha进行JS日期处理
Nov 21 Javascript
详解Angular 4.x NgIf 的用法
May 22 Javascript
mac上配置Android环境变量的方法
Jul 08 Javascript
JS中Promise函数then的奥秘探究
Jul 30 Javascript
JavaScript原型对象、构造函数和实例对象功能与用法详解
Aug 04 Javascript
vue2路由基本用法实例分析
Mar 06 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
phpfans留言版用到的数据操作类和分页类
2007/01/04 PHP
2017年最好用的9个php开发工具推荐(超好用)
2017/10/23 PHP
PHP7 echo和print语句实例用法
2019/02/15 PHP
Laravel5.5+ 使用API Resources快速输出自定义JSON方法详解
2020/04/06 PHP
4种Windows系统下Laravel框架的开发环境安装及部署方法详解
2020/04/06 PHP
读jQuery之十 事件模块概述
2011/06/27 Javascript
基于JQuery实现的类似购物商城的购物车
2011/12/06 Javascript
jQuery Ajax提交表单查询获得数据实例代码
2012/09/19 Javascript
event.currentTarget与event.target的区别介绍
2012/12/31 Javascript
jQuery动画效果-slideUp slideDown上下滑动示例代码
2013/08/28 Javascript
JavaScript设计模式之策略模式实例
2014/10/10 Javascript
node.js中的fs.readlink方法使用说明
2014/12/17 Javascript
Jsonp post 跨域方案
2015/07/06 Javascript
一篇文章掌握RequireJS常用知识
2016/01/26 Javascript
判断横屏竖屏(三种)
2017/02/13 Javascript
js实现ATM机存取款功能
2020/10/27 Javascript
layui表格数据重载
2019/07/27 Javascript
vue.js页面加载执行created,mounted的先后顺序说明
2020/11/07 Javascript
基于Python实现文件大小输出
2016/01/11 Python
正确理解python中的关键字“with”与上下文管理器
2017/04/21 Python
PyQt5组件读取参数的实例
2019/06/25 Python
Python实现word2Vec model过程解析
2019/12/16 Python
python 使用raw socket进行TCP SYN扫描实例
2020/05/05 Python
Python grpc超时机制代码示例
2020/09/14 Python
CSS去掉A标签(链接)虚线框的方法
2014/04/01 HTML / CSS
纽约现代艺术博物馆商店:MoMA STORE(室内家具和杂货商品)
2016/08/02 全球购物
精选鞋类、服装和配饰的全球领先目的地:Bodega
2021/02/27 全球购物
Expedia瑞典官网:预订度假屋、酒店、汽车租赁、机票等
2021/01/23 全球购物
初三班主任寄语大全
2014/04/04 职场文书
就业协议书的作用
2014/04/11 职场文书
大学生村官个人对照检查材料(群众路线)
2014/09/26 职场文书
暑期社会实践证明书
2014/11/17 职场文书
先进个人材料怎么写
2014/12/30 职场文书
发布会邀请函
2015/01/31 职场文书
Vue项目中如何封装axios(统一管理http请求)
2021/05/02 Vue.js
Python 如何实现文件自动去重
2021/06/02 Python