模仿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的开源工具PACKER2.0.2
Nov 04 Javascript
javascript 兼容FF的onmouseenter和onmouseleave的代码
Jul 19 Javascript
JS和jquery获取各种屏幕的宽度和高度的代码
Aug 02 Javascript
jquery 页面滚动到指定DIV实现代码
Sep 25 Javascript
js jquery分别实现动态的文件上传操作按钮的添加和删除
Jan 13 Javascript
JS烟花背景效果实现方法
Mar 03 Javascript
原生js实现无限循环轮播图效果
Jan 20 Javascript
Vue中使用ElementUI使用第三方图标库iconfont的示例
Oct 11 Javascript
Vue Cli3 创建项目的方法步骤
Oct 15 Javascript
Vue3.0结合bootstrap创建多页面应用
May 28 Javascript
JS实现动态倒计时功能(天数、时、分、秒)
Dec 12 Javascript
一篇文章了解正则表达式的替换技巧
Feb 24 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制作unicode解码工具(unicode编码转换器)代码分享
2013/12/24 PHP
PHP中的类型提示(type hinting)功能介绍
2015/07/01 PHP
CI框架表单验证实例详解
2016/11/21 PHP
PHP基于堆栈实现的高级计算器功能示例
2017/09/15 PHP
JS简单的轮播的图片滚动实例
2013/06/17 Javascript
javascript的回调函数应用示例
2014/02/20 Javascript
Node.js中的事件驱动编程详解
2014/08/16 Javascript
JavaScript之AOP编程实例
2015/07/17 Javascript
JS动态插入并立即执行回调函数的方法
2016/04/21 Javascript
解析javascript图片懒加载与预加载的分析总结
2016/10/27 Javascript
ES6深入理解之“let”能替代”var“吗?
2017/06/28 Javascript
vue中的scope使用详解
2017/10/29 Javascript
vue中使用refs定位dom出现undefined的解决方法
2017/12/21 Javascript
nodejs实现连接mongodb数据库的方法示例
2018/03/15 NodeJs
详解如何使用babel进行es6文件的编译
2018/05/29 Javascript
微信小程序实现的一键复制功能示例
2019/04/24 Javascript
深入理解 TypeScript Reflect Metadata
2019/12/12 Javascript
node.js中path路径模块的使用方法实例分析
2020/02/13 Javascript
[01:03:27]Optic vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python双精度浮点数运算并分行显示操作示例
2017/07/21 Python
Python反射用法实例简析
2017/12/22 Python
快速解决安装python没有scripts文件夹的问题
2018/04/03 Python
详解使用PyInstaller将Pygame库编写的小游戏程序打包为exe文件
2019/08/23 Python
Python3将数据保存为txt文件的方法
2019/09/12 Python
python多进程并行代码实例
2019/09/30 Python
Django如何在不停机的情况下创建索引
2020/08/02 Python
python模块内置属性概念及实例
2021/02/18 Python
美国购买肉、鸭、家禽、鹅肝和熟食网站:D’Artagnan
2018/11/13 全球购物
Mountain Hardwear官网:攀岩服装和户外装备
2019/09/26 全球购物
普天C++笔试题
2016/03/20 面试题
电大毕业生自我鉴定
2013/11/10 职场文书
2014年计算机专业个人自我评价
2014/01/19 职场文书
房地产资料员岗位职责
2014/07/02 职场文书
2016年元旦主持词
2015/07/06 职场文书
银行大堂经理培训心得体会
2016/01/09 职场文书
《艾尔登法环》1.03.3补丁上线 碎星伤害调整
2022/04/06 其他游戏