模仿jquery框架源码 -成熟---选择器

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .red {
            color: red;
        }
    </style>
</head>
<body>
    <div class="red">1</div>
    <div>2</div>
    <div>3</div>
</body>
    <script language="javascript" type="text/javascript">
        var $ = jQuery = function( selector, context ){    //定义类
            return new jQuery.fn.init(selector, context);    //返回选择器的实例
            
        }
        //jQuery类的原型对象
        jQuery.fn = jQuery.prototype = {    
            init : function(selector, context){                //定义选择器构造器
            
                selector = selector || document;    //设置默认值为document
                context = context || document;         //设置默认值为document
                
                if( selector.nodeType ) {        //如果选择符为节点对象
                    this[0] = selector;            //把参数节点传递给实例对象的数组
                    this.length = 1;            //并设置实例对象的length属性,定义包含的元素个数
                    this.context = selector;    //设置实例的属性,返回选择范围
                    return this;        //返回当前实例
                }
                
                if( typeof selector === "string" ) {    //如果选择符是字符串
                    var e = context.getElementsByTagName(selector);
                    //获取指定名称的元素
                    
                    for( var i = 0; i < e.length; i++ ){//遍历元素集合,并把所有元素填入到当前实例数组中
                        this[i] = e[i];
                    }
                    this.length = e.length; //设置实例的length属性,即定义包含的元素个数
                
                    this.context = context; //设置实例的属性,返回选择范围
                    return this; //返回当前实例
                } else {
                    this.length = 0; //否则,设置实例的length属性值为0
                    this.context = context;
                    return this; //返回当前实例
                }
            },
            jquery: "1.3.2",     //原型属性
            size: function() {    //原型方法
                return this.length;
            }
        }
        jQuery.fn.init.prototype = jQuery.fn;    //使用jQuery的原型对象覆盖init的原型对象
        alert( $("div").size() );    //返回3
    </script>
</html>

 

posted on 2015-07-16 11:53  yhdsir  阅读(756)  评论(0编辑  收藏  举报

导航