jQuery的核心对象、原型对象、静态方法、动态方法

什么叫jQuery的核心对象?

  $    $===jQuery

什么叫jQuery的原型对象?

  $.fn    $.fn===$.prototype

什么叫静态方法?

  在构造函树上定义的方法,静态方法通过构造函数去调用。例如:Math.random()

什么叫动态方法?

  动态方法也叫实例方法,在原型对象上添加的方法叫动态方法,通过实例对象去调用。例如:arr.slice()

jQuery的静态方法和动态方法?

  给jQuery扩展插件的时候,有两种方式,一种是$.extend()的方式,一种是$.fn的方式,$.extend()扩展的是静态方法,$.fn扩展的是动态方法。

  jQuery的静态方法用核心对象去调用,也就是用$去调用,jQuery的动态方法用原型对象去调用,也就是用$.fn去调用。

  现在给jQuery扩展一个获取随机色的方法:

    (function($){
      $.extend({
        randomColor:function(){
          var col="rgba(";
          for(var i=0;i<3;i++){
            col+=Math.floor(Math.random()*256)+",";
          }
          col+=Math.random().toFixed(2)+")";
          return col;
        }
      });
    })($);
  这就是扩展了一个静态方法,使用时用$去调用。比如给div设置随机色,$("div").css("backgroundColor",$.randomColor);
 
  现在给jQuery扩展一个获取/设置背景色的方法:
    (function($){
      $.fn.bgc=function(color){
        if(!color) return this.css("backgroundColor");
        this.css("backgroundColor",color);
        return this;
      }
    })($);
  这就是扩展了一个动态方法,使用时用jQ对象去调用。比如设置div的背景色,$("div").bgc("red");这就是$.fn的方式,bgc()就是这个fn函数。

   

  也就是说,使用$.extend()是给jQuery添加了静态方法,使用时用$调用,使用$.fn是给JQuery添加了动态方法,使用时用$.fn调用

$叫核心对象,$.fn叫原型对象。

  typeof $--------->function

  typeof $.fn--------->object

  $相当于类,由类直接调用方法,$.fn相当于实例对象,实例对象去调用方法。

猜你喜欢

转载自www.cnblogs.com/wuqilang/p/11206630.html