当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 模仿jQuery each函数的链式调用

Javascript
JavaScript Tween算法及缓动效果
强制设为首页的JS代码
IE8浏览器Cookie的处理
JavaScript入门教程(1):什么是JS
JavaScript入门教程(2):JS基础知识
JavaScript入门教程(3):面向对象
JavaScript入门教程(4):浏览器对象
JavaScript入门教程(5):Screen屏幕对象
JavaScript入门教程(6):Window窗口对象
JavaScript入门教程(7):History历史对象
JavaScript入门教程(8):Location地址对象
JavaScript入门教程(9):Document文档对象
JavaScript入门教程(10):认识其他对象
JavaScript入门教程(11):事件处理
JavaScript入门教程(12):对象化编程
JavaScript入门教程(13):Cookies
JavaScript库开发规则
JavaScript教程:网页时间问题
如何将渐进增强应用到javascript脚本
简述JavaScript的scope机理

Javascript 中的 模仿jQuery each函数的链式调用


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-12   浏览: 452 ::
收藏到网摘: n/a

模仿jQuery each函数的链式调用实现代码。
复制代码 代码如下:

<!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>