模仿jQuery each函数的链式调用


Posted in Javascript onJuly 22, 2009
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<title>Each Document</title> 
<script type="text/javascript"> 
(function(){ //创建一个自执行函数 
function _$(el){ //声明一个类 
this.elements = []; //用于保存DOM元素的引用 
for (var i = 0; i < el.length; i++) { 
var element = el[i]; 
if (typeof element == string ) { 
element = document.getElementById(element); 
} 
this.elements.push(element); 
} 
} _$.prototype = { 
each: function(fn){ 
for (var i = 0; i < this.elements.length; i++) { 
fn.call(this, this.elements[i]); //第二个参数是fn函数的参数 
} 
}, 
setStyle: function(prop, val){ 
var that = this; 
this.each(function(el){ //注意参数的设置 
el.style[prop] = val; 
}); 
return this; 
} 
} 
window.$ = function(){ 
return new _$(arguments); 
}; 
})(); 
window.onload = function(){ 
$("p", "p2").setStyle("color", "red"); 
} 
</script> 
</head> 
<body> 
<p id="p"> 
Hello world 
</p> 
<p id="p2"> 
Welcome. 
</p> 
</body> 
</html>
Javascript 相关文章推荐
javascript打开新窗口同时关闭旧窗口
Jan 16 Javascript
javascript的字符串按引用复制和传递,按值来比较介绍与应用
Dec 28 Javascript
JavaScript DOM 编程艺术(第2版)读书笔记(JavaScript的最佳实践)
Oct 01 Javascript
JQuery中的html()、text()、val()区别示例介绍
Sep 01 Javascript
jQuery中contents()方法用法实例
Jan 08 Javascript
JavaScript判断是否为数组的3种方法及效率比较
Apr 01 Javascript
javascript中new关键字详解
Dec 14 Javascript
js代码实现点击按钮出现60秒倒计时
Jan 28 Javascript
Bootstrap开发实战之第一次接触Bootstrap
Jun 02 Javascript
bootstrap多种样式进度条展示
Dec 20 Javascript
jQuery排序插件tableSorter使用方法
Feb 10 Javascript
JS中数组与对象的遍历方法实例小结
Aug 14 Javascript
js 代码集(学习js的朋友可以看下)
Jul 22 #Javascript
javascript Base类 包含基本的方法
Jul 22 #Javascript
javascript 表单规则集合对象
Jul 21 #Javascript
一个可以随意添加多个序列的tag函数
Jul 21 #Javascript
一个cssQuery对象 javascript脚本实现代码
Jul 21 #Javascript
js计算页面刷新的次数
Jul 20 #Javascript
[原创]IE view-source 无法查看看源码 JavaScript看网页源码
Jul 19 #Javascript
You might like
PHP+redis实现微博的推模型案例分析
2019/07/10 PHP
IE本地存储userdata的一个bug说明
2010/07/01 Javascript
Javascript延迟执行实现方法(setTimeout)
2010/12/30 Javascript
javascript for循环从入门到偏门(效率优化+奇特用法)
2012/08/01 Javascript
js遍历、动态的添加数据的小例子
2013/06/22 Javascript
jquery获取一组checkbox的值(实例代码)
2013/11/04 Javascript
jQuery Trim去除字符串首尾空字符的实现方法说明
2014/02/11 Javascript
jquery实现弹出层效果实例
2015/05/19 Javascript
轻松学习jQuery插件EasyUI EasyUI创建CRUD应用
2015/11/30 Javascript
JavaScript+Java实现HTML页面转为PDF文件保存的方法
2016/05/30 Javascript
BootStrap组件之进度条的基本用法
2017/01/19 Javascript
discuz表情的JS提取方法分析
2017/03/22 Javascript
jQuery返回定位插件详解
2017/05/15 jQuery
详解小程序缓存插件(mrc)
2018/08/17 Javascript
NodeJS模块与ES6模块系统语法及注意点详解
2019/01/04 NodeJs
jQuery实现的网站banner图片无缝轮播效果完整实例
2019/01/28 jQuery
JavaScript 预解析的4种实现方法解析
2019/09/03 Javascript
Python中__call__用法实例
2014/08/29 Python
python多重继承新算法C3介绍
2014/09/28 Python
python通过邮件服务器端口发送邮件的方法
2015/04/30 Python
Python cx_freeze打包工具处理问题思路及解决办法
2016/02/13 Python
用python写一个windows下的定时关机脚本(推荐)
2017/03/21 Python
Python爬虫实现全国失信被执行人名单查询功能示例
2018/05/03 Python
Python实现按逗号分隔列表的方法
2018/10/23 Python
python3实现指定目录下文件sha256及文件大小统计
2019/02/25 Python
Python3 itchat实现微信定时发送群消息的实例代码
2019/07/12 Python
基于python3.7利用Motor来异步读写Mongodb提高效率(推荐)
2020/04/29 Python
Python的collections模块真的很好用
2021/03/01 Python
CSS3属性box-sizing使用指南
2014/12/09 HTML / CSS
html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例
2014/05/08 HTML / CSS
Notino匈牙利:购买香水和化妆品
2019/04/12 全球购物
汽车检测与维修应届毕业生求职信
2013/10/19 职场文书
自我鉴定怎么写
2014/01/12 职场文书
办公室文员工作职责
2014/01/31 职场文书
中秋节礼品促销方案
2014/02/02 职场文书
护士感人事迹
2014/05/01 职场文书