• 自己封装jquery的一些方法 链式调用模式



    function getIndex(ele){

    var parent=ele.parentNode;
    var brothers=parent.children;

    for(var i=0,len=brothers.length;i<len;i++){

    if(ele==brothers[i]){

    return i;

    }

    }

    }

    function falseArrToTrue(arr){

    return Array.prototype.slice.call(arr);
    }


    function getElementsByClassName(obj,name){

    var obj = obj || window.document;
    var els=obj.getElementsByTagName("*");
    var arr=[];

    for(var i=0,len=els.length;i<len;i++){

    if(els[i].className==name){

    arr.push(els[i]);
    }

    }

    return arr;
    }

    function addEvent(obj,type,fn){

    if(obj.attachEvent){

    obj.attachEvent("on"+type,function(event){

    if(false==fn.call(obj)){

    var event=event || window.event;
    event.cancelBubble=true;
    return false;

    }

    });
    }

    else if(obj.addEventListener){

    obj.addEventListener(type,function(event){

    if(false==fn()){

    event.preventDefault();
    event.cancelBubble=true;

    }

    },false);

    }

    }

    function getStyle(obj,style){

    return window.getComputedStyle ? window.getComputedStyle(obj,null)[style]:obj.currentStyle[style];

    }

    function Vjquery(arg){

    this.elements=[];

    switch(typeof arg){

    case "string":

    switch(arg.charAt(0)){

    case "#":
    var el=document.getElementById(arg.substring(1));
    this.elements.push(el);
    break;
    case ".":
    this.elements=getElementsByClassName(document,arg.substring(1));
    break;
    default:

    this.elements=document.getElementsByTagName(arg);

    }
    break;

    case "function":

    addEvent(window,"load",arg);
    break;


    case "object":
    this.elements.push(arg);
    break;

    }

    }


    Vjquery.prototype={


    extend:function(key,value){


    Vjquery.prototype[key]=value;

    },


    eq:function(n){


    return $(this.elements[n]);


    },

    each:function(fn){


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

    fn(i,this.elements[i]);

    },

    find:function(arg){

    var res=[];
    for(var i=0,len=this.elements.length;i<len;i++){

    switch(arg.charAt(0)){

    case "." :


    var arr=getElementsByClassName(this.elements[i],arg.substring(1));
    res=res.concat(arr);

    var vqueryObj=new Vjquery();
    vqueryObj.elements=res;
    return vqueryObj;
    break;

    default :

    var arr=falseArrToTrue(this.elements[i].getElementsByTagName(arg));
    res=res.concat(arr);

    var vqueryObj=new Vjquery();
    vqueryObj.elements=res;
    return vqueryObj;

    }

    }

    },

    index:function(){

    return getIndex(this.elements.slice(-1)[0]);

    },

    click:function(fn){

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

    addEvent(this.elements[i],"click",fn);

    }

    return this;

    },

    size:function(){

    return this.elements.length;
    },


    bind:function(type,fn){

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


    addEvent(this.elements[i],type,fn);


    }

    return this;

    },


    show:function(){

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

    if(this.elements[i].nodeType==1){

    this.elements[i].style.display="block";

    }

    }

    return this;
    },


    hide:function(){

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

    if(this.elements[i].nodeType==1){

    this.elements[i].style.display="none";

    }

    }

    return this;

    },

    toggle:function(f1,f2){

    var _arguments=arguments;
    var length=_arguments.length;
    var index=0;

    console.log(index);

    this.click(function(){

    _arguments[index]();
    index=(++index)%length;

    });

    return this;

    },

    hover:function(overfn,outfn){

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

    if(this.elements[i].nodeType==1){

    addEvent(this.elements[i],"mouseover",overfn);
    addEvent(this.elements[i],"mouseout",outfn);

    }

    }

    return this;

    },

    css:function(name,value){ //参数有可能是json

    if(typeof name=="string"){

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

    if(this.elements[i].nodeType==1){

    if(arguments.length==2){

    this.elements[i].style[name]=value;
    }

    else if(arguments.length==1){

    return getStyle(this.elements[0],name);
    }

    }
    }

    }

    else if(typeof name=="object"){


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


    for(var key in name ){

    this.elements[i].style[key]=name[key];

    }

    }

    }

    return this;

    },

    attr:function(arg){


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

    if(this.elements[i].nodeType==1){

    if(arguments.length==2){

    this.elements[i].setAttribute([arguments[0]],arguments[1]);
    }

    else if(arguments.length==1){

    this.elements[i].getAttribute([arguments[0]]);
    }

    }

    }

    return this;


    }

    }

    function $(str){

    return new Vjquery(str);
    }

  • 相关阅读:
    sl学习
    xc笔记
    1_2_3_4_5 Html-Css
    linux服务器架设--学习笔记
    注解学习
    关于ruby gem源更新安装问题
    css3:2D与3D变形
    css3关键帧动画以及兼容性策略
    css3背景,蒙版,倒影以及过度
    阴影边框以及渐变
  • 原文地址:https://www.cnblogs.com/liveoutfun/p/9679478.html
Copyright © 2020-2023  润新知