模仿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 相关文章推荐
教你如何解密js/vbs/vbscript加密的编码异处理小结
Jun 25 Javascript
用JavaScript编写COM组件的步骤
Mar 17 Javascript
关于textarea提交的内容无法换行的解决办法
Apr 09 Javascript
javascript 获取图片尺寸及放大图片
Sep 04 Javascript
jquery1.10给新增元素绑定事件的方法
Mar 06 Javascript
jQuery中选择器的基础使用教程
May 23 Javascript
js中DOM三级列表(代码分享)
Mar 20 Javascript
详解为生产环境编译Angular2应用的方法
Dec 10 Javascript
jquery实现的放大镜效果示例
Feb 24 jQuery
react-native 实现购物车滑动删除效果的示例代码
Jan 15 Javascript
如何封装Vue Element的table表格组件
Feb 06 Vue.js
使用JS前端技术实现静态图片局部流动效果
Aug 05 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/01/02 PHP
PHP  Yii清理缓存的实现方法
2016/11/10 PHP
php实现多维数组排序的方法示例
2017/03/23 PHP
javascript 时间比较实现代码
2009/10/28 Javascript
javascript的渐进增强与平稳退化浅谈
2013/11/12 Javascript
完美解决IE低版本不支持call与apply的问题
2013/12/05 Javascript
js取float型小数点后两位数的方法
2014/01/18 Javascript
简介JavaScript中substring()方法的使用
2015/06/06 Javascript
Backbone.js 0.9.2 源码注释中文翻译版
2015/06/25 Javascript
JavaScript动态生成二维码图片
2016/04/20 Javascript
完美JQuery图片切换效果的简单实现
2016/07/21 Javascript
在Web项目中引入Jquery插件报错的完美解决方案(图解)
2016/09/19 Javascript
详解Vue组件之作用域插槽
2018/11/22 Javascript
细说Vue组件的服务器端渲染的过程
2019/05/30 Javascript
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
2019/06/18 jQuery
解决layer 动态加载select 失效的问题
2019/09/18 Javascript
详解Vue的mixin策略
2020/11/19 Vue.js
[01:11]steam端dota2实名认证操作流程视频
2021/03/11 DOTA
Django组件之cookie与session的使用方法
2019/01/10 Python
python实现批量视频分帧、保存视频帧
2019/05/31 Python
Python 分发包中添加额外文件的方法
2019/08/16 Python
基于Python实现人脸自动戴口罩系统
2020/02/06 Python
Django 如何使用日期时间选择器规范用户的时间输入示例代码详解
2020/05/22 Python
利用CSS3的transition属性实现滑动效果
2015/08/05 HTML / CSS
日本最大的购物网站:日本乐天市场(Rakuten Ichiba)
2020/11/04 全球购物
英文简历中的自我评价
2013/10/06 职场文书
农民入党思想汇报
2014/01/03 职场文书
颁奖典礼主持词
2014/03/25 职场文书
元旦联欢会策划方案
2014/06/11 职场文书
纪念九一八事变演讲稿1000字
2014/09/14 职场文书
工作年限证明模板
2014/11/01 职场文书
2015庆祝七一建党节94周年活动总结
2015/03/20 职场文书
幼儿园小班开学寄语
2015/05/27 职场文书
浅谈由position属性引申的css进阶讨论
2021/05/25 HTML / CSS
十大最帅动漫男主 碓冰拓海上榜,第一是《灌篮高手》男主角
2022/03/18 日漫
使用 CSS 构建强大且酷炫的粒子动画效果
2022/08/14 HTML / CSS