zoukankan      html  css  js  c++  java
  • 封装简单的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);
    };

     

  • 相关阅读:
    Angular2与Angular1的区别
    JS的浅拷贝与深拷贝
    浅谈js的事件冒泡和事件捕获
    JS中的call、apply、bind方法
    WEB前端性能优化常见方法
    开放定址法——线性探测(Linear Probing)
    分离链接法(Separate Chaining)
    概观散列函数
    散列——动机引入
    AVL重平衡细节——插入
  • 原文地址:https://www.cnblogs.com/nifengs/p/5313540.html
Copyright © 2011-2022 走看看