jquery在拓展方面,提供了两个很强大的方法:jquery.extend和jquery.fn.extend。
接下来我们来深究一下这兄弟俩的具体区别。
其实从字面上我们就可以看出,一个是对jquery的extend,一个是对jquery.fn的extend。
这么说可能有点笼统,但是很方便理解。
我们一步步来看。
首先,理解jquery是什么
我们知道,在使用jquery的过程中,我们可以jquery(“#a”)或者$(“.c”)来获取dom中的元素。
我们来看一下jquery源码中的定义(构造函数):
// Define a local copy of jQuery
jQuery = function( selector, context ) {
// The jQuery object is actually just the init constructor 'enhanced'
// Need init if jQuery is called (just allow error to be thrown if not included)
return new jQuery.fn.init( selector, context );
}
我们看到一个很熟悉的字眼new,那我们也就知道了,jquery其实可以看作是一个类,$是他的简写方式。
那么jquery.extend也就很好理解了,是对这个jquery类的拓展,举个例子:
$.extend({
tip : function (msg) {
alert("My tips is" + msg);
}
});
那我们该怎么使用呢?我们要这么用:$.tip(“hello world”);
看到这里,我想,聪明的你应该大体有些明白的赶脚了~~
其次,理解jquery.fn是什么
同样,我们还是先来看一下jquery的源码中的定义:
jQuery.fn = jQuery.prototype = {
//省略中间部分
};
这下就一目了然了,原来jquery.fn就是jquery的原型对象呀~~
那jquery.fn.extend不就是对jquery原型对象的拓展么~
那也就是对$(“#a”)这样的拓展咯~
所以,我们再来个例子:
$.fn.extend({
tip : function (msg) {
alert("My tips is" + msg);
}
});
这个该怎么用呢?我想聪明的你肯定猜到了:$(“#a”).tip(“hello world”);
如果这时候再$.tip(“hello world”);这么用,肯定就要报错啦~
总结一下:一般只有很特殊的方法如 .ajax(); .trim();等才会对jquery类去拓展。通常我们去写的插件,都是对jquery原型对象的拓展。