模仿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代码
Nov 10 Javascript
判断滚动条到底部的JS代码
Nov 04 Javascript
jQuery自适应轮播图插件Swiper用法示例
Aug 24 Javascript
jQuery.datatables.js插件用法及api实例详解
Oct 28 Javascript
Three.js实现浏览器变动时进行自适应的方法
Sep 26 Javascript
在ES5与ES6环境下处理函数默认参数的实现方法
May 13 Javascript
利用jqgrid实现上移下移单元格功能
Nov 07 Javascript
webpack配置proxyTable时pathRewrite无效的解决方法
Dec 13 Javascript
详解vue 兼容IE报错解决方案
Dec 29 Javascript
jsonp跨域获取百度联想词的方法分析
May 13 Javascript
layui对工具条进行选择性的显示方法
Sep 19 Javascript
浅谈vue中使用编辑器vue-quill-editor踩过的坑
Aug 03 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导出MySQL数据到Excel文件(fputcsv)
2011/07/03 PHP
php读取csv文件后,uft8 bom导致在页面上显示出现问题的解决方法
2013/08/10 PHP
PHP中绘制图像的一些函数总结
2014/11/19 PHP
如何使用php实现评委评分器
2015/07/31 PHP
Laravel接收前端ajax传来的数据的实例代码
2017/07/20 PHP
php实现微信企业号支付个人的方法详解
2017/07/26 PHP
Laravel6.0.4中将添加计划任务事件的方法步骤
2019/10/15 PHP
laravel框架模型中非静态方法也能静态调用的原理分析
2019/11/23 PHP
Jquery对select的增、删、改、查操作
2015/02/06 Javascript
JavaScript用select实现日期控件
2015/07/17 Javascript
概述jQuery的元素筛选
2016/11/23 Javascript
Angular的$http的ajax的请求操作(推荐)
2017/01/10 Javascript
Angular.js中定时器循环的3种方法总结
2017/04/27 Javascript
jQuery手风琴的简单制作
2017/05/12 jQuery
cocos creator Touch事件应用(触控选择多个子节点的实例)
2017/09/10 Javascript
使用Vue开发动态刷新Echarts组件的教程详解
2018/03/22 Javascript
javascript系统时间设置操作示例
2019/06/17 Javascript
微信小程序获取用户绑定手机号方法示例
2019/07/21 Javascript
js实现简单掷骰子小游戏
2019/10/24 Javascript
基于JS实现table导出Excel并保留样式
2020/05/19 Javascript
[02:25]DOTA2英雄基础教程 熊战士
2014/01/03 DOTA
[07:52]2014DOTA2 TI逗比武士游V社解说背后的故事
2014/07/10 DOTA
Python参数解析模块sys、getopt、argparse使用与对比分析
2019/04/02 Python
python pandas cumsum求累计次数的用法
2019/07/29 Python
Python利用逻辑回归分类实现模板
2020/02/15 Python
使用python无账号无限制获取企查查信息的实例代码
2020/04/17 Python
Python3如何使用range函数替代xrange函数
2020/10/05 Python
CSS3 优势以及网页设计师如何使用CSS3技术
2009/07/29 HTML / CSS
斯洛伐克最大的婴儿食品和用品网上商店:Feedo.sk
2020/12/21 全球购物
应届生法律顾问求职信
2013/11/19 职场文书
初三化学教学反思
2014/01/23 职场文书
致垒球运动员加油稿
2014/02/16 职场文书
售后服务承诺书范文
2014/03/26 职场文书
暑期培训班策划方案
2014/08/26 职场文书
考试作弊检讨书1000字(5篇)
2014/10/19 职场文书
社区志愿者服务心得体会
2016/01/22 职场文书