封装$函数

封装类JQuery。

        
        function $(selector){
            var jq = new JQuery(selector);
            return jq;
        }

        function JQuery(selector){//定义类
            this.elements = [];

判断类型，如果传的是字符串，判断是否为'#' '. '和标签选择器，如果是的话就将其push到elements的数组里。

            if(typeof selector == 'string'){
                var str = selector.substr(1);
                if(selector.indexOf('#') != -1){
                    this.elements.push(document.getElementById(str));
                }else if(selector.indexOf('.') != -1){
                    if(document.getElementsByClassName){
                        this.elements = document.getElementsByClassName(str);
                    }else{
                        // var result = [];
                        var nodes = document.getElementsByTagName('*');
                        for(var i=0; i<nodes.length; i++){
                            if(nodes[i].className == str){
                                this.elements.push(nodes[i]);
                            }
                        }
                        // return result;
                    }
                }
            }

如果是函数就是文档就绪函数， window.onload = selector，在crome里用addEventListener('load', selector, false);，ie里用 window.attachEvent('onload', selector);，

else if(typeof selector == 'function'){
                // window.onload = selector;
                if(window.addEventListener){
                    window.addEventListener('load', selector, false);
                }else if(window.attachEvent){
                    window.attachEvent('onload', selector);//document.readyState
                }
            }
如果调用的是类下的方法on 就直接给元素添加事件就可以

        this.on = function(eventtype, handler){
            for(var i=0; i<this.elements.length; i++){
                this.elements[i].addEventListener(eventtype, handler, false);
            }
            return this;
        };

如果调用的是css方法，有两种形式，
一种是this.css({
background:'red'
})
第二种直接为this.css('background','red'),所以我们要判断第二个参数是否为undefine，来判断是哪种格式

            this.css = function(prop1, prop2){
                if(prop2 == undefined){
                    //这时prop1是一个对象
                    // {
                    //  background : '#0f0',
                    //  border : '1px solid #000'
                    // }    
                    for(var p in prop1){
                        for(var i=0; i<this.elements.length; i++){
                            this.elements[i].style[p] = prop1[p];
                        }
                    }
                }else if(prop2 != undefined){
                    for(var i=0; i<this.elements.length; i++){
                        this.elements[i].style[prop1] = prop2;
                    }
                }
                return this;
            };
        } 

有个很重要的一点，为了保持链式操作 在每个方法后面返回this