模仿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 相关文章推荐
最佳的addEvent事件绑定是怎样诞生的
Oct 24 Javascript
判断多个input type=file是否有已经选择好文件的代码
May 23 Javascript
Package.js  现代化的JavaScript项目make工具
May 23 Javascript
script标签属性type与language使用选择
Dec 02 Javascript
Web跨浏览器进程通信(Web跨域)
Apr 17 Javascript
js判断是否按下了Shift键的方法
Jan 27 Javascript
老生常谈ES6中的类
Jul 31 Javascript
vue-scroller记录滚动位置的示例代码
Jan 17 Javascript
node puppeteer(headless chrome)实现网站登录
May 09 Javascript
vue-cli2.x项目优化之引入本地静态库文件的方法
Jun 19 Javascript
微信小程序中上传图片并进行压缩的实现代码
Aug 28 Javascript
vue 根据选择的月份动态展示日期对应的星期几
Feb 06 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
我的论坛源代码(八)
2006/10/09 PHP
基于mysql的论坛(5)
2006/10/09 PHP
PHP使用ODBC连接数据库的方法
2015/07/18 PHP
详解WordPress开发中的get_post与get_posts函数使用
2016/01/04 PHP
PHP魔术方法使用方法汇总
2016/02/14 PHP
TP(thinkPHP)框架多层控制器和多级控制器的使用示例
2018/06/13 PHP
flash 得到自身url参数的代码
2009/11/15 Javascript
javascript jq 弹出层实例
2013/08/25 Javascript
jqgrid 编辑添加功能详细解析
2013/11/08 Javascript
AngularJS入门教程之Hello World!
2014/12/06 Javascript
JQuery给select添加/删除节点的实现代码
2016/04/26 Javascript
ionic js 复选框 与普通的 HTML 复选框到底有没区别
2016/06/06 Javascript
Bootstrap按钮功能之查询按钮和重置按钮
2016/10/26 Javascript
javascript删除html标签函数cIsHTML
2017/01/09 Javascript
详解AngularJS 模块化
2017/06/14 Javascript
checkbox:click事件触发span元素内容改变的方法
2017/09/11 Javascript
react-router v4如何使用history控制路由跳转详解
2018/01/09 Javascript
基于jQuery ztree实现表格风格的树状结构
2018/08/31 jQuery
js实现简单商品筛选功能
2021/02/02 Javascript
[06:45]DOTA2-DPC中国联赛 正赛 Magma vs LBZS 选手采访
2021/03/11 DOTA
python使用opencv进行人脸识别
2017/04/07 Python
Python 爬虫图片简单实现
2017/06/01 Python
pytorch: Parameter 的数据结构实例
2019/12/31 Python
详解Canvas 跨域脱坑实践
2018/11/07 HTML / CSS
iHerb中文官网:维生素、保健品和健康产品
2018/11/01 全球购物
英国医生在线预约:Top Doctors
2019/10/30 全球购物
澳大利亚手袋、珠宝和在线时尚精品店:The Way
2019/12/21 全球购物
美国最大最全的亚洲购物网站:美国亚米网(Yamibuy)
2020/05/05 全球购物
怎样声明接口
2014/09/19 面试题
node中使用shell脚本的方法步骤
2021/03/23 Javascript
教师群众路线教育实践活动学习笔记
2014/11/05 职场文书
2014年教师思想工作总结
2014/12/03 职场文书
大学生求职自荐信
2015/03/24 职场文书
《小蝌蚪找妈妈》教学反思
2016/02/23 职场文书
go语言中切片与内存复制 memcpy 的实现操作
2021/04/27 Golang
如何使用PostgreSQL进行中文全文检索
2021/05/27 PostgreSQL