模仿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 相关文章推荐
使用JQuery和s3captche实现一个水果名字的验证
Aug 14 Javascript
获取css样式表内样式的js函数currentStyle(IE),defaultView(FF)
Feb 14 Javascript
javascript (用setTimeout而非setInterval)
Dec 28 Javascript
javascript中数组中求最大值示例代码
Dec 18 Javascript
sso跨域写cookie的一段js脚本(推荐)
May 25 Javascript
javascript 数组的定义和数组的长度
Jun 07 Javascript
jquery模拟多级复选框效果的简单实例
Jun 08 Javascript
javascript时间戳和日期字符串相互转换代码(超简单)
Jun 22 Javascript
jquery点击展示与隐藏更多内容
Dec 03 Javascript
谈谈Vue.js——vue-resource全攻略
Jan 16 Javascript
JavaScript关联数组用法分析【概念、定义、遍历】
Mar 15 Javascript
Vuex 快速入门(简单易懂)
Sep 20 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数据的三种方法
2008/06/05 PHP
PHP 程序授权验证开发思路
2009/07/09 PHP
php 操作excel文件的方法小结
2009/12/31 PHP
领悟php接口中interface存在的意义
2013/06/27 PHP
yii2.0实现创建简单widgets示例
2016/07/18 PHP
js各种验证文本框输入格式(正则表达式)
2010/10/22 Javascript
jquery load()在firefox(火狐)下显示不正常的解决方法
2011/04/05 Javascript
javascript中打印当前的时间实现思路及代码
2013/12/18 Javascript
jQuery的缓存机制浅析
2014/06/07 Javascript
Javascript学习笔记之 对象篇(三) : hasOwnProperty
2014/06/24 Javascript
js中window.open打开一个新的页面
2014/08/10 Javascript
js实现九宫格图片半透明渐显特效的方法
2015/02/16 Javascript
js实现模拟银行卡账号输入显示效果
2015/11/18 Javascript
JS函数的几种定义方式分析
2015/12/17 Javascript
js+html5实现canvas绘制网页时钟的方法
2016/05/21 Javascript
JavaScript 是什么意思
2016/09/22 Javascript
微信小程序 绘图之饼图实现
2016/10/24 Javascript
利用select实现年月日三级联动的日期选择效果【推荐】
2016/12/13 Javascript
快速入门Vue
2016/12/19 Javascript
脚本div实现拖放功能(两种)
2017/02/13 Javascript
深入理解vue-router之keep-alive
2017/08/31 Javascript
微信小程序wx.getImageInfo()如何获取图片信息
2018/01/26 Javascript
Angular使用过滤器uppercase/lowercase实现字母大小写转换功能示例
2018/03/27 Javascript
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
2018/04/17 jQuery
微信小程序登录态和检验注册过没的app.js写法
2019/05/22 Javascript
javascript随机变色实例代码
2019/10/15 Javascript
[01:00:54]TI4正赛第二日开场
2014/07/20 DOTA
python原始套接字编程示例分享
2014/02/21 Python
Windows10+anacond+GPU+pytorch安装详细过程
2020/03/24 Python
python自定义函数def的应用详解
2020/06/03 Python
考核评语大全
2014/04/29 职场文书
小学教师暑期培训方案
2014/08/28 职场文书
2016年共产党员公开承诺书
2016/03/24 职场文书
学生会2016感恩节活动小结
2016/04/01 职场文书
Spring mvc是如何实现与数据库的前后端的连接操作的?
2021/06/30 Java/Android
MySQL修炼之联结与集合浅析
2021/10/05 MySQL