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

Posted 2022-04-23 wuqilang

什么叫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相当于实例对象，实例对象去调用方法。