模仿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 相关文章推荐
JavaScript 申明函数的三种方法 每个函数就是一个对象(一)
Dec 04 Javascript
jQueryUI的Dialog的简单封装
Jun 07 Javascript
javascript实现日历控件(年月日关闭按钮)
Dec 12 Javascript
jquery中交替点击事件的实现代码
Feb 14 Javascript
JavaScript中判断页面关闭、页面刷新的实现代码
Aug 27 Javascript
基于vue实现分页/翻页组件paginator示例
Mar 09 Javascript
Cookies 和 Session的详解及区别
Apr 21 Javascript
详解vue跨组件通信的几种方法
Jun 15 Javascript
JS计算距当前时间的时间差实例
Dec 29 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【圆形情况】
Dec 13 Javascript
细说webpack6 Babel的使用详解
Sep 26 Javascript
用JS创建一个录屏功能
Nov 11 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 中文字符入库或显示乱码问题的解决方法
2010/04/12 PHP
解析PHP中ob_start()函数的用法
2013/06/24 PHP
ThinkPHP之R方法实例详解
2014/06/20 PHP
PHP文件缓存类示例分享
2015/01/30 PHP
PHP中header用法小结
2016/05/23 PHP
Zend Framework入门教程之Zend_View组件用法示例
2016/12/09 PHP
PHP实现生成模糊图片的方法示例
2017/12/21 PHP
PHP 的Opcache加速的使用方法
2017/12/29 PHP
有趣的JavaScript数组长度问题代码说明
2011/01/20 Javascript
遨游,飞飞,IE,空中网 浏览器无提示关闭方法
2011/07/11 Javascript
ajax不执行success回调而是执行了error回调
2012/12/10 Javascript
js实现运动logo图片效果及运动元素对象sportBox使用方法
2012/12/25 Javascript
Lab.js初次使用笔记
2015/02/28 Javascript
浅谈javascript的分号的使用
2015/05/12 Javascript
javascript中setAttribute()函数使用方法及兼容性
2015/07/19 Javascript
asp知识整理笔记3(问答模式)
2015/09/27 Javascript
jQuery控制控件文本的长度的操作方法
2016/12/05 Javascript
JS实现经典的中国地区三级联动下拉菜单功能实例【测试可用】
2017/06/06 Javascript
jQuery中each和js中forEach的区别分析
2019/02/27 jQuery
微信小程序template模版的使用方法
2019/04/13 Javascript
[03:51]吞吞映像 每周精彩击杀top10第二弹
2014/06/25 DOTA
[01:44]剑指西雅图 展望TI之CIS战队专访
2014/06/25 DOTA
[03:43]TI9战队采访——PSG.LGD
2019/08/22 DOTA
Python中死锁的形成示例及死锁情况的防止
2016/06/14 Python
Python序列操作之进阶篇
2016/12/08 Python
Python3.4实现从HTTP代理网站批量获取代理并筛选的方法示例
2017/09/26 Python
libreoffice python 操作word及excel文档的方法
2019/07/04 Python
使用Matplotlib绘制不同颜色的带箭头的线实例
2020/04/17 Python
澳大利亚礼品卡商店:Gift Card Store
2019/06/24 全球购物
智能电子应届生求职信
2013/11/10 职场文书
英语专业应届生求职信范文
2013/11/15 职场文书
2014年社区卫生工作总结
2014/12/18 职场文书
功夫熊猫观后感
2015/06/10 职场文书
护士工作心得体会
2016/01/25 职场文书
八年级语文教学反思
2016/03/03 职场文书
浅谈Golang 嵌套 interface 的赋值问题
2021/04/29 Golang