$.fn.xxx、$.fn.extend.xxx、$.xxx的区别

今天突然想起来一个小的知识点，虽然被提及的不多了，但是想拿来记录一下 - jq封装插件。

页面结构：

<style>
	 #box{
	      width:100px;
	      height:100px;
	      background: #eee;
	      display: none;
	  }
</style>

<div id="box"></div>

使用$.fn.xxx为dom添加方法：

$.fn.showBox = function (){
	this.show();
	return this;
}   
$.fn.setRed = function (){
	this.css({
		background:'red'
	})
	return this;
}   

这类似于给jq实例扩展了方法，jq的所有元素都可以调用到：

$('#box').showBox ().setRed();

因为方法里有返回this，所以可以实现链式调用。

而$.fn.extend相当于以对象的书写方式为jq实例扩展方法，与上面写法的意义相同。

$.fn.extend({
    showBox(){
        this.show();
        return this;
    },
    setRed(){
        this.css({
            background:'red'
        })
    }
})

最后$.xxx的意思是给jq添加静态方法：

$.staticFn = function (){
    console.log('jq的静态方法')
}

调用的时候，也只有jq这个类才可以调用：

$.staticFn();