码迷,mamicode.com
首页 > Web开发 > 详细

模仿jquery框架源码---网络

时间:2015-07-16 13:35:05      阅读:116      评论:0      收藏:0      [点我收藏+]

标签:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Untitled Page</title>
</head>
<body>
<div id="d">divvv</div>
<div id="fsd">fdsf</div>
</body>
</html>
<script type="text/javascript">
//实现自己的MyQuery框架
var MyQuery = function(selector){
    if ( window == this ) return new MyQuery(selector);
    //这里只实现dom类型的简单查找,嘿嘿
    var doms = document.getElementsByTagName(selector);
    var arr = [];
    for(var i=0; i<doms .length; i++){
        arr.push(doms.item(i));
    }
    return this.setArray(arr);
}
MyQuery.prototype.setArray = function( arr ) {
        this.length = 0;
        [].push.apply( this, arr );
        return this;
}
MyQuery.fn = MyQuery.prototype;
var $ = MyQuery;
//插件扩展 1)each
MyQuery.fn.each = function(method){
    for(var i=0,l=this.length; i<l; i++){
        method.call(this[i],i);
    }
}
//插件扩展 2)show
MyQuery.fn.show = function(){
    this.each(function(i){
        <!-- alert("第 "+i+" 个div : id= "+this.id+" : 内容:"+this.innerHTML); -->
console.log("第 "+i+" 个div : id= "+this.id+" : 内容:"+this.innerHTML);
    });
}
//debugger
$("div").show();
//第 0 个div : id= d : 内容:divvv
//第 1 个div : id= fsd : 内容:fdsf
</script>

模仿jquery框架源码---网络

标签:

原文地址:http://www.cnblogs.com/yhdsir/p/4650819.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!