模仿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 相关文章推荐
childNodes.length与children.length的区别
May 14 Javascript
js行号显示的文本框实现效果(兼容多种浏览器 )
Oct 23 Javascript
基于JavaScript实现简单的随机抽奖小程序
Jan 05 Javascript
js HTML5上传示例代码完整版
Oct 10 Javascript
Bootstrap中datetimepicker使用小结
Dec 28 Javascript
详解在Vue中通过自定义指令获取dom元素
Mar 04 Javascript
vue2.0 与 bootstrap datetimepicker的结合使用实例
May 22 Javascript
深入浅出webpack教程系列_安装与基本打包用法和命令参数详解
Sep 10 Javascript
使用Vue构建可重用的分页组件
Mar 26 Javascript
NUXT SSR初级入门笔记(小结)
Dec 16 Javascript
vue点击按钮实现简单页面的切换
Sep 08 Javascript
Vue ECharts实现机舱座位选择展示功能
May 15 Vue.js
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
为了这两部电子管收音机,买了6套全新电子管和10粒刻度盘灯泡
2021/03/02 无线电
destoon实现会员商铺中指定会员或会员组投放广告的方法
2014/08/21 PHP
PHP 抽象方法与抽象类abstract关键字介绍及应用
2014/10/16 PHP
ThinkPHP自动完成中使用函数与回调方法实例
2014/11/29 PHP
Yii配置与使用memcached缓存的方法
2016/07/13 PHP
Laravel框架模板继承操作示例
2018/06/11 PHP
DEFER怎么用?
2006/07/01 Javascript
JQuery里选择超链接的实现代码
2011/05/22 Javascript
JQuery onload、ready概念介绍及使用方法
2013/04/27 Javascript
js+HTML5实现canvas多种颜色渐变效果的方法
2015/06/05 Javascript
JS实现简单的图书馆享元模式实例
2015/06/30 Javascript
分步解析JavaScript实现tab选项卡自动切换功能
2016/01/25 Javascript
关于JS中match() 和 exec() 返回值和属性的测试
2016/03/21 Javascript
javascript和jQuery实现网页实时聊天的ajax长轮询
2016/07/20 Javascript
AngularJS控制器controller给模型数据赋初始值的方法
2017/01/04 Javascript
Angular中使用$watch监听object属性值的变化(详解)
2017/04/24 Javascript
JS库之Highlight.js的用法详解
2017/09/13 Javascript
Vue中v-for的数据分组实例
2018/03/07 Javascript
使用Vue.js开发微信小程序开源框架mpvue解析
2018/03/20 Javascript
如何为你的JavaScript代码日志着色详解
2019/04/08 Javascript
[01:06]DOTA2隆重推出2016冬季勇士令状 内含上海特级锦标赛互动指南
2016/02/17 DOTA
python 获取本机ip地址的两个方法
2013/02/25 Python
Python类属性的延迟计算
2016/10/22 Python
pandas中的DataFrame按指定顺序输出所有列的方法
2018/04/10 Python
python使用多进程的实例详解
2018/09/19 Python
Python Matplotlib 基于networkx画关系网络图
2019/07/10 Python
基于sklearn实现Bagging算法(python)
2019/07/11 Python
Python学习笔记之列表和成员运算符及列表相关方法详解
2019/08/22 Python
pytorch中nn.Conv1d的用法详解
2019/12/31 Python
白酒市场营销方案
2014/02/25 职场文书
刊首寄语大全
2014/04/11 职场文书
会计专业求职信
2014/08/10 职场文书
历史博物馆观后感
2015/06/05 职场文书
Python基础之赋值,浅拷贝,深拷贝的区别
2021/04/30 Python
python字符串常规操作大全
2021/05/02 Python
实现GO语言对数组切片去重
2022/04/20 Golang