仿写jquery

1、html部分

<div id ="div1">
    <div class="aa">
        <div class="sdd"></div>
        <div class="ddd"></div>
    </div>
<div>           

2、script 部分

// 1.类（class）选择器的辅助函数；
    function findClass(obj,className){
        if(obj.getElementsByClassName(className)){
            return obj.getElementsByClassName(className);
        }else{
            var name = obj.getElementsByTagName("*");
            var reg = new RegExp("\\b"+className+"\\b");
            var classArr = [];
            for(var i=0; i<name.length; i++){
                if(reg.test(name[i].className)){
                    classArr.push(name[i]);
                }
            }
            return classArr;
        }
    }
//2.选择器函数；
    function selectEls(arg){
        var reg = /^\s+|\s+$/g/    //去掉前后之间的空格；
        arg = arg.replace(reg,"");
        var reg = /\s+/g;
        arg = arg.replace(reg,"");
        var stArr = arg.split(" ");
        var childs = [];
        var parents = [document];
        for(var i=0; i<stArr.length; i++){
            childs= [];
            for(var j=0; j<parents.length; j++){
                if(/^#/.test(stArr[i])){  // id选择器；
                    var idName = stArr[i].substring(1);
                    var els = document.getElementById(idName);
                    if(els!=null){
                        if(childs.indexof(els)==-1){
                            childs.push(els);   
                        }   
                    }   
                }else if(/^\./.test(stArr[i])){ // 类选择器（class）
                    var className = stArr[i].substring(1);
                    var classArr = findClass(parents[j],className);
                    for(var k=0; k<classArr.length; k++){
                        childs.push(classArr[k]); 
                    }            
                }else{  // 标签选择器；
                    var tagName = parents[j].getElementsByTagName(stArr[i]);
                    for(var k=0; k<tagName.length; k++){
                        childs.push(tagName[k]);    
                    }
                }
            }
            parents = childs;
        }
        return parents;
    }
//3、 jquery 中的写入的东西有三种； 有这三种创建一个函数；
    // 3.1:  $("div");  3.2: $(function(){}); 3.3: $(document.body)

    // 当传入的是方法时的 辅助函数；
    function ready(arg){
        if(window.addEventListener){  // 非 IE 浏览器；
            doucment.addEventListener("DOMContentLoad",arg,false);
        }else{  // IE
            var oS = doucment.createElement("script");
            oS.defer = true;
            oS.onreadystatechange = function(){
                if(oS.readyState == "complete"){
                    arg();
                } 
            }
            var oH = document.getElementsByTagName("head")[0];
            oH.appendChild(oS);
        }
    }

    function Jq(arg){
        this.elements = [];
        if(typeof arg ==  "function"){  // 方法
            ready(arg);
        }else if(typeof arg =="string"){  // 选择器
            this.elements = selectEls(arg); 
        }else{     // 其他
            this.elements.push(arg);
        }
    }
// 4、添加 eq 方法；
    Jq.prototype.eq = function (index){
        return new Jq(this.elements[index]);
    }


    // 5.1 添加事件的辅助函数；
        function addEvent(eventName,obj,fn){
            function CallFn(e){
                var ev = e||window.event;
                fn.call(obj,ev);
            }
            if(obj.addEventListener){ // 非 IE 浏览器；
                 obj.addEventListener(eventName,CallFn,false);
            }else{  // IE 浏览器
                 obj.attachEvent("on"+eventName,CallFn);
            }
        }

// 5、添加 click 事件
    Jq.prototype.click = function(fn){
        for(var i=0; i<this.elements.length; i++){
            addEvent("click",this.elements[i],fn);  
        }
    }
// 6、添加 on 事件；
    Jq.prototype.onn = function(eventName,fn){
         var eventArr = eventName.split(" ");
         for(var i=0; i<this.elments.length; i++){
             for(var j=0; j<eventArr.length; j++){
                addEvent(eventArr[j],this.elements[i],fn);
            } 
         }
    }

    // 7.1 辅助css arguments=1；样式的函数，即获取属性；
            function getStyle（obj,styleName）{
                if（window.getComputedStyle）{  // 非 IE 浏览器；
                    return getComputedStyle(obj,null)[styleName];
                }else{  // IE 浏览器
                    return obj.currentStyle(styleName)
                }
            }

   // 7.2  设置 css 属性；
           function setStyle(obj,styleName,styleValue){
                var pxArr = ["width","height","left","top"];
                var values = styleValue;
                for(var i =0; i<pxArr.lenght; i++){
                    if(pxArr[i]==styleName){
                        if(typeof styleValue == "number"){
                            values = styleValue+"px";
                        }else{
                            values = styleValue
                        }
                    }
                }
                obj.style[styleName] = values;
            }

// 7、添加 css 样式；
    Jq.prototype.css = function(){
        if(arguments.length ==1){
            if(typeof arguments[0]=="string"){
                return getStyle(this.elements[0],arguments[0]); 
            }else{
                for(var i =0; i<this.elements.length; i++){
                    for(var keys in arguments[0]){
                        setStyle(this.elements[i],keys,arguments[0][keys]) ;
                    }
                }
            }
        }else if(arguments.length ==2){
            for(var i=0; i<this.elements.length; i++){
                setStyle(this.elements[i],arguments[0],arguments[1]);
            }
        }
    }
// 8、以 $ 开头的引用；
    function $(arg){
        return new Jq(arg);
    }

// 检验：
      var str = " .aa  div " ;
    $(function(){
        $(sty).eq(1).css({
            width:"400px",
            height:"400px",
            background:"green" 
        })
    })