模仿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+XMLHttpRequest+asp.net无刷新读取数据库数据
Aug 09 Javascript
jQuery 表单验证扩展代码(一)
Oct 11 Javascript
javascript 节点排序 2
Jan 31 Javascript
jQuery实现checkbox全选的方法
Jun 10 Javascript
14款经典网页图片和文字特效的jQuery插件-前端开发必备
Aug 25 Javascript
js实现网页图片延时加载 提升网页打开速度
Jan 26 Javascript
深入理解js中this的用法
May 28 Javascript
JS百度地图搜索悬浮窗功能
Jan 12 Javascript
jQuery实现Table表格隔行变色及高亮显示当前选择行效果示例
Feb 14 Javascript
JavaScript中Object值合并方法详解
Dec 22 Javascript
Vue2.x Todo之自定义指令实现自动聚焦的方法
Jan 08 Javascript
Vue中computed及watch区别实例解析
Aug 01 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
Destoon旺旺无法正常显示,点击提示“会员名不存在”的解决办法
2014/06/21 PHP
微信支付开发交易通知实例
2016/07/12 PHP
Linux下快速搭建php开发环境
2017/03/13 PHP
CentOS系统中PHP安装扩展的方式汇总
2017/04/09 PHP
jQuery表格插件datatables用法总结
2014/09/05 Javascript
JavaScript使用Prototype实现面向对象的方法
2015/04/14 Javascript
javascript新闻跑马灯实例代码
2020/07/29 Javascript
总结JavaScript三种数据存储方式之间的区别
2016/05/03 Javascript
JS修改地址栏参数实例代码
2016/06/14 Javascript
jQuery属性选择器用法示例
2016/09/09 Javascript
javascript特殊文本输入框网页特效
2016/09/13 Javascript
JS验证不重复验证码
2017/02/10 Javascript
JavaScript操作文件_动力节点Java学院整理
2017/06/30 Javascript
在vue 中使用 less的教程详解
2018/09/26 Javascript
jQuery实现简单弹幕效果
2019/11/28 jQuery
Javascript Web Worker使用过程解析
2020/03/16 Javascript
vue页面更新patch的实现示例
2020/03/25 Javascript
JavaScript常用工具函数大全
2020/05/06 Javascript
vue如何在项目中调用腾讯云的滑动验证码
2020/07/15 Javascript
[02:49]2014DOTA2电竞也是体育项目! 势要把荣誉带回中国!
2014/07/20 DOTA
python实现俄罗斯方块
2018/06/26 Python
Python tkinter label 更新方法
2018/10/11 Python
Python eval的常见错误封装及利用原理详解
2019/03/26 Python
Django框架模板的使用方法示例
2019/05/25 Python
详解Anaconda安装tensorflow报错问题解决方法
2020/11/01 Python
CSS3 实现图形下落动画效果
2020/11/13 HTML / CSS
html5 canvas实现跟随鼠标旋转的箭头
2016/03/11 HTML / CSS
在线购买澳大利亚设计师手拿包和奢华晚装手袋:Olga Berg
2019/03/20 全球购物
俄罗斯大型在线书店:Читай-город
2019/10/10 全球购物
请用用Java代码写一个堆栈
2012/01/26 面试题
如何客观的进行自我评价
2013/12/17 职场文书
如何写一份好的自荐信
2014/01/02 职场文书
中级会计职业生涯规划书
2014/03/01 职场文书
go语言求任意类型切片的长度操作
2021/04/26 Golang
关于maven依赖 ${xxx.version}报错问题
2022/01/18 Java/Android
Vue操作Storage本地化存储
2022/04/29 Vue.js