封装简单的equery

/**
 * Created by wang on 2016/3/23.
 */

//绑定操作
function bindEvent(obj,events,fn){
    if (obj.addEventListener){//主流浏览器
        obj.addEventListener(events,fn,false)
    }else {
        obj.attachEvent('on'+events,fn);//针对ie
    }
}
//获取class 封装个方法
function getByClass(oParent,sClass){
    var arr = [];
    var elems = oParent.getElementsByTagName('*');
    for(var i=0;i<elems.length;i++){
        if(elems[i].className==sClass){
            arr.push( elems[i] );
        }
    }
    return arr;
}
//转数组方法
function toArray(elems){
    var arr=[];
    for(var i=0;i<elems.length;i++){
        arr.push(elems[i]);
    }
    return arr;
}
//获取样式
function getStyle(obj,attr){
    if(obj.currentStyle){
        return obj.currentStyle[attr];//ie
    }
    else{
        return getComputedStyle(obj,false)[attr];//标准
    }
}
//创建构造函数
function equery(varg){
    this.elements = [];  //选择元素的一个集合
    //判断传过来参数的类型
    switch (typeof varg){
        case 'function':
            //window.onload=varg;
            bindEvent(window,'load',varg);//选择绑定事件的形式,防止js中后者替换前者
            break;//jq中的所有的事件操作都是绑定的形式(操作不会覆盖)
        case 'string':
            switch (varg.charAt(0)){
                case '#'://id
                    this.elements.push(document.getElementById(varg.substring(1)));
                    break;
                case '.'://calss
                    this.elements = getByClass(document,varg.substring(1));
                    break;
                default://标签
                    this.elements = toArray(document.getElementsByTagName(varg));//类数组 要转成真正的数组
                    break;
            }
            break;
        case 'object':
        if(varg.constructor = Array){
            this.elements=varg;
        }else {
            this.elements.push(varg);
        }
            break;
    }
};
//对象的方法,写到构造函数的原型下面
//css方法
equery.prototype.css= function (attr,value) {

    if(arguments.length==2){//设置样式
        for(var i=0;i<this.elements.length;i++){
            this.elements[i].style[attr]=value;
        }
    }else if(arguments.length==1){//获取样式//只能获取到行间样式需要在封一个方法 getStyle
        if(typeof attr =='object'){//json的形式 设置样式
            for(var j in attr){
                for(var i=0;i<this.elements.length;i++){
                    this.elements[i].style[j] = attr[j];
                }
            }
        }else {
            return getStyle(this.elements[0],attr);
        }
    }
};
//html方法
equery.prototype.html= function (str) {
    if(str){//设置
        for(var i=0;i<this.elements.length;i++){
            this.elements[i].innerHTML=str;
        }
    }else {//获取
        return this.elements[0].innerHTML;
    }
    return this;
};
//click方法
equery.prototype.click = function(fn){
    //for(var i=0;i<this.elements.length;i++){
    //    bindEvent(this.elements[i],'click',fn)
    //}
    this.on('click',fn);
    return this;
}
//mouseover方法
equery.prototype.mouseover = function(fn){
    //for(var i=0;i<this.elements.length;i++){
    //    bindEvent(this.elements[i],'mouseover',fn)
    //}
    this.on('mouseover',fn);
    return this;
}
//on方法
equery.prototype.on = function(events,fn){
    for(var i=0;i<this.elements.length;i++){
        bindEvent(this.elements[i],events,fn)
    }
    return this;
}
//hide方法
equery.prototype.hide=function(){
    for(var i=0;i<this.elements.length;i++){
        this.elements[i].style.display='none'
    }
    return this;
}
//show方法
equery.prototype.show=function(){
    for(var i=0;i<this.elements.length;i++){
        this.elements[i].style.display='block'
    }
    return this;
}
//hover方法
equery.prototype.hover=function(fnOver,fnOut){
    this.on('mouseover',fnOver);
    this.on('mouseout',fnOut);
    return this;
}
//attr方法 与样式方法差不多
equery.prototype.attr = function(attr,value){

    //setAttribute
    //getAttribute

    if(arguments.length == 2){  //设置
        for(var i=0;i<this.elements.length;i++){
            //this.elements[i][attr] = value;
            this.elements[i].setAttribute(attr,value);
        }
    }
    else if(arguments.length == 1){ //获取
        return this.elements[0].getAttribute(attr);
    }
    return this;
};
//eq方法
equery.prototype.eq = function(num){
    return $(this.elements[num]);
};
//index方法
equery.prototype.index = function () {
    var elems = this.elements[0].parentNode.children;
    for(var i=0;i<elems.length;i++){
        if (elems[i]=this.elements[0]){
            return i;
        }
    }
    return this;
};
//find 方法
equery.prototype.find = function(sel){

    var arr = [];

    if( sel.charAt(0) == '.' ){  //class

        for(var i=0;i<this.elements.length;i++){

            arr = arr.concat(getByClass( this.elements[i] , sel.substring(1) ));
        }

    }
    else{   //tag
        for(var i=0;i<this.elements.length;i++){

            arr = arr.concat(toArray(this.elements[i].getElementsByTagName(sel)));
        }

    }

    return $(arr);

};

//创建对象
function $(varg){
    return new equery(varg);
};

 

posted @ 2016-03-23 22:51  名字不能缺  阅读(438)  评论(0编辑  收藏  举报