封装jquery的一些事件,比如获取元素、添加样式.......


 

//绑定事件
function bindEvent(obj, ev, fn) {
    if ( obj.attachEvent ) {
        //添加事件
        obj.attachEvent( 'on' + ev, fn );
        fn.call(obj);
    }else {
        //添加事件监听
        obj.addEventListener( ev, fn, false );
    }
}

//获取所有style样式
function getStyle(obj,attr){
    if(obj.crrentStyle){
        return obj.currentStyle[attr];
    }else{
        return getComputedStyle(obj,false)[attr];
    }
}

//获取元素
function getByClass(CName,id){
    var obj =null;
    if(arguments.length==2){
        obj=document.getElementById('id');
    }else{
        obj=document;
    }

    var allNode=obj.getElementsByTagName("*");
    var aNode =[];
    for (var i = 0; i <allNode.length; i++) {
        if (allNode[i].className == CName) {
            aNode.push(allNode[i]);
        }
    }
    return aNode;
}

//选择器
function JqFn(arg){
    //当前元素
    this.elements = [];
    switch(typeof arg){
        //方法
        case 'function':
            // window.onload = arg;
            bindEvent(window,'load',arg);
            break;
        //字符串
        case 'string':
            switch(arg.charAt(0)){
                //id选择器
                case '#':
                    var obj = document.getElementById(arg.substring(1));
                    this.elements.push(obj);
                    break;
                //class选择器
                case '.':
                    this.elements=getByClass(arg.substring(1));
                    break;
                //元素选择器
                default:
                    this.elements=document.getElementsByTagName(arg);
                    break;
            }
            break;
        //对象
        case 'object':
            break;
    }
}

//点击事件
JqFn.prototype.click=function(fn){
    for(var i=0;i<this.elements.length;i++){
        // this.elements[i].onclink = fn;
        bindEvent(this.elements[i],'click',fn);
    }
};

//css样式
JqFn.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(typeof arguments[0]=='object'){
            for(var i=0;i<this.elements.length;i++){
                for(var key in arguments[0]){
                    this.elements[i].style[key]=arguments[0][key];
                }
            }
        }else{
            return getStyle(this.elements[0],attr);
        }
    }
    return this;
};

//eq方法
JqFn.prototype.eq=function(index){
    var aNode =[];
    aNode = this.elements[index];
    this.elements=[];
    this.elements.push(aNode);
    return this;
};

//innerHTML
JqFn.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;
};

//index索引
JqFn.prototype.index=function(tag){
    var allstrings=this.elements[0].parentNode.children;
    var aNode=[];
    if(tag){
        for(var i=0;i<allstrings.length;i++){
            if(allstrings[i].tagName.ToLowercase()==tag){
                aNode.push(allstrings[i]);
            }
        }
    }else{
        aNode = allstrings;
    }
    for(var i=0;i<aNode.length;i++){
        if(aNode[i]=elements[0]){
            return i;
        }
    }
    return -1;
};

//val
JqFn.prototype.val = function (str) {
    if (str) {
        for (var i = 0; i < this.elements.length; i++) {
            this.elements[i].value = str;
        }
    } else {
        return this.elements[0].value;
    }
    return this;
};

// oLink.href
JqFn.prototype.attr = function (name, value) {
    if (arguments.length == 2) {
        for (var i = 0; i < this.elements.length; i++) {
            this.elements[i][name] = value;
        }
    } else {
        if (typeof arguments[0] == "object") {
            for (var i = 0; i < this.elements.length; i++) {
                for (var key in arguments[0]) {
                    this.elements[i][key] = arguments[0][key];
                }
            }
        } else {
            return this.elements[0][name];
        }
    }
    return this;
};


//show
JqFn.prototype.show=function(){
    for(var i=0;i<this.elements.length;i++){
        this.elements[i].style.display="block";
    }
};
//hide
JqFn.prototype.hide=function(){
    for(var i=0;i<this.elements.length;i++){
        this.elements[i].style.display="none";
    }
};


//$符号
function $(arg){
    return new JqFn(arg);
}

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM