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.ui.dialog 增加“在当前鼠标位置打开”的功能
Nov 24 Javascript
JavaScript中setAttribute用法介绍
Jul 20 Javascript
javascript表单处理具体实现代码(表单、链接、按钮)
May 07 Javascript
jQuery的图片轮播插件PgwSlideshow使用详解
Aug 11 Javascript
深入浅析JavaScript中的3DES
Aug 24 Javascript
基于AGS JS开发自定义贴图图层
Mar 31 Javascript
angularjs $http实现form表单提交示例
Jun 09 Javascript
Vue组件选项props实例详解
Aug 18 Javascript
vue.js计算属性computed用法实例分析
Jul 06 Javascript
Angular刷新当前页面的实现方法
Nov 21 Javascript
vue-cli3 karma单元测试的实现
Jan 18 Javascript
Jquery使用each函数实现遍历及数组处理
Jul 14 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 冒泡排序 二分查找 顺序查找 二维数组排序算法函数的详解
2013/06/25 PHP
浅析php插件 HTMLPurifier HTML解析器
2013/07/01 PHP
ThinkPHP 3.2 版本升级了哪些内容
2015/03/05 PHP
PHP中static关键字以及与self关键字的区别
2015/07/01 PHP
解析arp病毒背后利用的Javascript技术附解密方法
2007/08/06 Javascript
JavaScript获取/更改文本框的值的实例代码
2013/08/02 Javascript
JS和jquery获取各种屏幕的宽度和高度的代码
2013/08/02 Javascript
JQuery给元素绑定click事件多次执行的解决方法
2014/05/29 Javascript
表单验证插件Validation应用的实例讲解
2015/10/10 Javascript
解决bootstrap导航栏navbar在IE8上存在缺陷的方法
2016/07/01 Javascript
js获取页面引用的css样式表中的属性值方法(推荐)
2016/08/19 Javascript
轻松掌握JavaScript中介者模式
2016/08/26 Javascript
JavaScript中访问id对象 属性的方式访问属性(实例代码)
2016/10/28 Javascript
详解Vue2.0之去掉组件click事件的native修饰
2017/04/20 Javascript
vue 封装自定义组件之tabal列表编辑单元格组件实例代码
2017/09/07 Javascript
Angular动画实现的2种方式以及添加购物车动画实例代码
2018/08/09 Javascript
vuejs2.0运用原生js实现简单拖拽元素功能
2020/08/21 Javascript
教你如何用Node实现API的转发(某音乐)
2019/09/20 Javascript
JS实现普通轮播图特效
2020/01/01 Javascript
Python操作Mysql实例代码教程在线版(查询手册)
2013/02/18 Python
Python爬虫运用正则表达式的方法和优缺点
2019/08/25 Python
python使用pip安装SciPy、SymPy、matplotlib教程
2019/11/20 Python
PyCharm中Matplotlib绘图不能显示UI效果的问题解决
2020/03/12 Python
python中random.randint和random.randrange的区别详解
2020/09/20 Python
详解修改Anaconda中的Jupyter Notebook默认工作路径的三种方式
2021/01/24 Python
波兰最大的儿童服装连锁店之一:5.10.15.
2018/02/11 全球购物
波兰最大的度假胜地和城市公寓租赁运营商:Sun & Snow
2018/10/18 全球购物
.net软件工程师面试题
2015/03/31 面试题
Java基础面试题
2014/07/19 面试题
小学标准化建设汇报材料
2014/08/16 职场文书
综治工作心得体会
2014/09/11 职场文书
党员民主生活会对照检查材料思想汇报
2014/09/28 职场文书
关于拾金不昧的感谢信
2015/01/21 职场文书
2016八一建军节慰问信
2015/11/30 职场文书
导游词之湖北武当山
2019/09/23 职场文书
CSS布局之浮动(float)和定位(position)属性的区别
2021/09/25 HTML / CSS