封装自己的jQuery库xQuery

//现在大大多项目都是用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功能,以此勉励自己在用别人的框架的同时,要明白基原理,不能做傻瓜式开发.