只要我们学习了jQuery，大家就会知道jQuery为开发插件提拱了两个方法，分别是：·
jQuery.fn.extend();
jQuery.extend();
那么为什么有两种扩展插件的方法呢？这两种方法又是怎么回事呢？下面就给大家简单的说明：
jQuery.fn
想要知道jQuery.fn.extend();那就得知道jQuery.fn是什么，请看下面代码
jQuery.fn = jQuery.prototype = {
init: function( selector, context ) {
}
};
原来 jQuery.fn = jQuery.prototype.其实jQuery便是一个封装得非常好的类，比如我们用 语句 $(“#btn1″) 会生成一个 jQuery类的实例。
jQuery.fn.extend(object);
对jQuery.prototype进得扩展，就是为jQuery类添加原型方法。jQuery类的实例可以使用jQuery原型的方法。
比如我们要开发一个插件，鼠标滑过改变li标签的背景颜色可以这么做：
<body>
<ul>
<li>兄弟多个1</li>
<li>兄弟多个2</li>
<li>兄弟多个3</li>
<li>兄弟多个4</li>
<li>兄弟多个5</li>
<li>兄弟多个6</li>
<li>兄弟多个7</li>
</ul>
</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
$.fn.extend({
fnOver : function(){
this.mouseenter(function(){
$(this).css( "background-color","pink" );
})
return this; //不返回的话链式调用fnOut()的时候报错；
},
fnOut : function(){
//this指向方法的调用者
this.mouseleave(function(){
//指向dom元素 当前操作的dom元素
$(this).css( "background-color","" );
})
}
})
$("li").fnOver().fnOut();
</script>
$("li")为一个jQuery实例，当它调用成员方法 fnOver后，便实现了扩展。
jQuery.fn.extend()的调用把方法扩展到了对象的prototype上，所以实例化一个jQuery对象的时候，它就具有了这些方法。其实可以理解为下面的表达式：
$.fn.extend(tooltip) = $.prototype.extend(tooltip) = $.fn.tooltip
jQuery.extend()
jQuery.extend()的调用并不会把方法扩展到对象的实例上，引用它的方法也需要通过jQuery类来实现，如$.ajax()。
我们用jQuery.extend()开发一个插件，还是以鼠标滑过改变li标签的背景颜色为例：
$.extend( {
fnOver : function($list){
$list.mouseover(function(){
$(this).css( "background-color","pink" );
})
return this;
},
fnOut : function($list){
$list.mouseout(function(){
$(this).css( "background-color","" );
})
}
} )
$.fnOver( $("li") ).fnOut( $("li") );
为jQuery类添加类方法，可以理解为添加静态方法，
总结一下：
jQuery是一个JavaScript类，如$("ul") 生成一个 jQuery类的实例。
jQuery为开发插件提拱了两个方法：jQuery.fn.extend()和jQuery.extend()。
jQuery.extend()：是为jQuery类添加类方法（静态方法），需要通过jQuery类来调用（直接使用 $.ajax() 调用）；
jQuery.fn.extend()是为jQuery类添加原型方法（实例方法），所有jQuery实例都可以直接调用（需要使用 $().xxx 调用）。
就上面的知识点来说是面试官最喜欢问的问题；希望能对大家有所帮助；最后告诉大家一个学习前端的企鹅群：829568767；也可以去千锋免费公开课 学习。
网友评论