手把手教你写jQuery2

上一篇我们写到了要用到事件兼容属性的写法，可见我们的Vquery 功能太弱，所以首先呢，我们给它添加几个

功能， 1 事件监听的兼容写法， 2 ，获取css 属性的兼容写法！ 3， 我们可爱的万能运动框架也给他集成进去！

 

 

// 获取属性的兼容写法！
VQuery.prototype.getStyle = function (obj, attr){  
    if(obj.currentStyle)    {  
        return obj.currentStyle[attr]; //for ie 
   }else{  
       return getComputedStyle(obj, false)[attr];  // for ff
   }  
}  

// 添加事件的方法
VQuery.prototype.myAddEvent = function (element, eventName, fn) {
    // 判断当前浏览器是否支持 addEventListener 方法
    if (element.addEventListener) { 
    // 浏览器支持此种方式，可以根据方法名找到方法声明，方法声明会转换为true
      element.addEventListener(eventName, fn);  // 第三个参数 默认是false
    } else if (element.attachEvent) {
      element.attachEvent('on' + eventName, fn);
    } else {
      // 相当于 element.onclick = fn;
      element['on' + eventName] = fn;
    }
};

VQuery.prototype.click  = function(fn){
    // 给元素添加事件处理函数，这里我们要用到一个兼容性的写法！ 

}


// 万能移动框架也给他拿过来！
VQuery.prototype.Move = function (obj,json,fn){  
   //停止上一次定时器  
   clearInterval(obj.timer); //关闭前一个定时器，解决对同个对象同时调用多个Move()时，定时器叠加问题。使用obj.timer给每个调用Move()的对象赋予各自的定时器，防止多个对象同时调用Move()时，同用一个定时器，而导致相关干扰问题。 
   //保存每一个物体运动的定时器  
   obj.timer = setInterval(function(){  
       //判断同时运动标志  
       var bStop = true;  
       for(var attr in json){    
           //取当前值    
           var iCur = 0;  //创建一个变量，用于存储 attr属性每时每刻的值
           if(attr == 'opacity'){  
            //针对在FF中opacity属性值为浮点数值问题，将属性值 四舍五入、转换成浮点型。乘以100，使opacity属性值与IE统一为百分数
               iCur = Math.round(parseFloat(getStyle(obj, attr))*100);  
           }else{  
               iCur = parseInt(getStyle(obj,attr)); //将除opacity外的属性(width/fontSize/MarginLeft等)的初始值 转换为整型 
           }  
           //计算速度  
           var iSpeed = (json[attr] - iCur) / 8;  //创建 递减的速度speed变量。实现属性值的变速改变
           iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);  //取整，解决浏览器忽略小于1px的数值 导致运动结束时，离目标值Itarget少几个像素的问题
           //检测同时到达标志  
           if(iCur != json[attr]){  
               bStop = false;  
           }     
           //更改属性，获取动画效果  
           if(attr=='opacity'){  
               iCur += iSpeed  
               obj.style.filter='alpha(opacity:' + iCur + ')';  
               obj.style.opacity=iCur / 100;  
           }  
           else{  
               obj.style[attr]=iCur+iSpeed+'px';  
           }  
       }  
       //检测停止  
       if(bStop){  
           clearInterval(obj.timer);  
           if(fn) fn();  
       }  
   },30)  
}

 

这样一来，我们的框架就稍微有点丰满了，现在还不能用，我们继续完整我们的点击事件！

 

我们测试看看

我去，测试的竟让发现没反应，我们去看看到底咋回事！

 

丫的，写错了， 我是菜鸟，可以原谅

 

这样就好了，可是上面我们还是要改正下，改正万能的添加事件的代码

 

我们再测试下！

 

测试没有任何问题， 很好，简单的点击事件就搞定了，但是你会发现

JQuery 用的是$ 符号，还没有new 所以我们要包装下！

 

里面上添加这句话，我们再修改测试下！

测试仍然没有问题，到此，我们就模拟出了，jQuery 的 click 函数，是不是很开心！

不要着急，我们先歇一歇，下次继续模拟jQuery ！