模仿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 克隆数组最简单的方法
Feb 12 Javascript
div+css布局的图片连续滚动js实现代码
May 04 Javascript
js日期联动示例
May 02 Javascript
jQuery 删除或是清空某个HTML元素示例
Aug 04 Javascript
jQuery事件用法实例汇总
Aug 29 Javascript
微信小程序 122100版本更新问题解决方案
Dec 22 Javascript
用Vue-cli搭建的项目中引入css报错的原因分析
Jul 20 Javascript
用node-webkit把web应用打包成桌面应用(windows环境)
Feb 01 Javascript
Bootstrap fileinput 上传新文件移除时触发服务器同步删除的配置
Oct 08 Javascript
JS实现数组去重及数组内对象去重功能示例
Feb 02 Javascript
jquery 回调操作实例分析【回调成功与回调失败的情况】
Sep 27 jQuery
原生js+css调节音量滑块
Jan 15 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日期控制类实例
2014/12/09 PHP
使用PHPStorm+XDebug搭建单步调试环境
2017/11/19 PHP
laravel获取不到session的三种解决办法【推荐】
2018/09/16 PHP
PHP工厂模式、单例模式与注册树模式实例详解
2019/06/03 PHP
laravel 修改.htaccess文件 重定向public的解决方法
2019/10/12 PHP
解决FireFox下[使用event很麻烦]的问题
2006/11/26 Javascript
Javascript创建Silverlight Plugin以及自定义nonSilverlight和lowSilverlight样式
2010/06/28 Javascript
jquery多行滚动/向左或向上滚动/响应鼠标实现思路及代码
2013/01/23 Javascript
ExtJS4给Combobox设置列表中的默认值示例
2014/05/02 Javascript
JQuery中DOM实现事件移除的方法
2015/06/13 Javascript
JavaScript操作URL的相关内容集锦
2015/10/29 Javascript
基于javascript实现泡泡大冒险网页版小游戏
2016/03/23 Javascript
如何通过js实现图片预览功能【附实例代码】
2016/03/30 Javascript
JavaScript装饰器函数(Decorator)实例详解
2017/03/30 Javascript
微信小程序实现自动定位功能
2018/10/31 Javascript
微信小程序使用setData修改数组中单个对象的方法分析
2018/12/30 Javascript
vue-router命名路由和编程式路由传参讲解
2019/01/19 Javascript
vue缓存的keepalive页面刷新数据的方法
2019/04/23 Javascript
分享一个vue项目“脚手架”项目的实现步骤
2019/05/26 Javascript
jQuery列表动态增加和删除的实现方法
2020/11/05 jQuery
vue.js页面加载执行created,mounted的先后顺序说明
2020/11/07 Javascript
Python中time模块和datetime模块的用法示例
2016/02/28 Python
Django中使用Celery的教程详解
2018/08/24 Python
python opencv摄像头的简单应用
2019/06/06 Python
Django中自定义查询对象的具体使用
2019/10/13 Python
python查找特定名称文件并按序号、文件名分行打印输出的方法
2020/04/24 Python
Python datetime 如何处理时区信息
2020/09/02 Python
微软加拿大官方网站:Microsoft Canada
2019/04/28 全球购物
Sperry澳大利亚官网:源自美国帆船鞋创始品牌
2019/07/29 全球购物
为什么要有struct关键字
2012/05/08 面试题
Java如何获得ResultSet的总行数
2016/09/03 面试题
党的群众路线教育实践活动个人整改措施材料
2014/11/04 职场文书
政协委员个人总结
2015/03/03 职场文书
2015年化验室工作总结
2015/04/23 职场文书
Python 流媒体播放器的实现(基于VLC)
2021/04/28 Python
Tomcat执行startup.bat出现闪退的原因及解决办法
2022/04/20 Servers