自己也能封装jquery,写自己的jquery

//现在大大多项目都是用jquery开发的,Jquery 很好用,不妨自己写一下自己的jquery ,了解Jquery内部实现的原理。 //和上篇随笔一样,采用面向对象的方法封装自己的js库.

1.和jquery 一样,jquery $()方法里面.能传四种不同的参数如:

  $("")一个字符串

     字符串的形式有三种情况:$("#id"),$(".class"),$("p"); 

     $(function(){}),函数,

    只有一情况,就是window.onload

      $(this),对象

function XQuery(vArg){

  this.elements = [];//用来保存选中的数组。

  switch(typeof vArg){    case "function":       bindEvent(window,"load",vArg);     break;   case "string":     switch(vArg.charAt(0)){     case "#"://id选择器

      var obj = document.getElementById(vArg.substring(1));       this.elements.push(obj);     break;     case"."://类选择器       this.elements = getElementsByClassName(document,vArg.substring(1));     break;     default://标签选择器       this.elements = document.getElementsByTagName(vArg);     break;   }   break;   case "object":     this.elements.push(vArg);   break;   }

}

 

//写一个类似Jquery的$方法

function $(vArg){

  return new xQuery(vArg);

}

 

//下面来通过原型的方法给xQuery对象添加各种方法:

xQuery.prototype = {

  click : function(fn){

    var i = 0;

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

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

    }

    i = null;//通过js的作用域我们知道,这时候i还有值的,i = this.elements.length;,所以我们需要手动释放i;

    //为了实现jquery的链式操作,我们需要返回当前对象

    return this;

  },

   hover :  function(fnOver,fnOut){

    var i =0 ;

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

      if(fnOver){         bindEvent(this.elements[i],"mouseover",fnOver);       }       if(fnOut){         bindEvent(this.elements[i],"mouseout",fnOut);       }     }

    return this;   },

  css : function(attr,value){

     if(arguments.length == 2){//传两个参数的时候,设置样式     

      for(var i = 0;i < this.elements.length;i++){         this.elements[i].style[attr] = value;          }

     }      else{ //传进来一个参数.又分两种情况,一种是字符串,一种是json的形式         if(typeof attr == "string"){           return getStyle(this.elements[0],attr)         }         else{//以json的形式传进来的           for(var i = 0;i < this.elements.length;i++){             for(var a in attr){               this.elements[i].style[a] = attr[a];             }           }           return this;         }      }   },   extend : function(name,fn){ //xQuery 插件扩展     xQuery.prototype[name] = fn;   },//....好了就写这么多,其它的方法的实现都差不多, };

//传统的js页面只能有一个window.onload = function(){};

//要想要多个的话得用事件绑定的方式.

function bindEvent(obj, ev, fn){   if(obj.addEventListener){     obj.addEventListener(ev, function(e){       if(!fn.call(obj)){//当方法具有返回值的时候.         e.cancelBubble = true;//阻止冒泡        e.preventDefault();//阻止默认事件       }     }, false);   }   else{//低版本的IE用的是attchEvent;     obj.attachEvent(‘on‘+ev, function(){     if(!fn.call(obj)){       event.cancelBubble = true;//阻止冒泡       return false;    //阻止默认事件      }     })   } }

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

//总结:xQuery 只是实现了一很小部分的JQuery功能,以此勉励自己在用别人的框架的同时,要明白基原理,不能做傻瓜式开发.

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。