jQuery中的插件机制

我们在很多地方都用过插件，插件能让我们操作某个东西变得异常方便，jQuery也不例外，为了扩展jQuery库函数，jQuery提供了两种方式：

• jQuery.extend(object)：扩展jQuery对象本身，主要是用来扩展jQuery全局函数，调用时直接$.函数名(参数)

来看一下例子：

<script>
	$.extend({
		min: function(a,b){
			return a < b ? a : b;
		},	//注意每个方法之间要用英文逗号隔开
		max: function(a,b){
			return a > b ? a : b;
		}
	});
	
	var min = $.min(5,7);
	console.log(min);
	var max = $.max(5,7);
	console.log(max);
</script>

但为了避免自己定义的函数或者变量与外部冲突，对jQuery函数的扩展一般写在自执行匿名函数中：

<script>
	(function($){
		$.min = function(a,b){ //此处不一样，上面是min : function(){}
			return a < b ? a : b;
		},
		$.max = function(a,b){
			return a > b ? a : b;
		}
	})(jQuery);//传入jQuery对象
	
	var min = $.min(5,7);
	console.log(min);
	var max = $.max(5,7);
	console.log(max);
</script>

---

• jQuery.fn.extend(object)：扩展jQuery元素集，主要用于扩展jQuery插件，调用时需要先创建jQuery对象，然后才能调用相应的函数$("").函数名([参数])

同样来看个例子：

<input type="checkbox" name="hobby" value="1" checked="checked"/>足球
<input type="checkbox" name="hobby" value="2"/>篮球
<input type="checkbox" name="hobby" value="3" checked="checked"/>乒乓球

<script>
	$.fn.extend({
		//该扩展函数用来获取被选中选项的value值
		values: function(){
			var result = "";
			this.each(function(){//此处this指代jQuery对象
				if(this.checked){
					result = result + ","+ this.value;//获取到被选中选项的value值
				}
			});
			if(result != ""){//因为上面给每个选中选项的value值前加了一个逗号，
				result = result.substr(1);//去掉最前面的那个逗号
			}
			return result;
		}
	});
	
	//调用扩展函数
	var result =  $("[name='hobby']").values();
	console.log(result);
</script>

同样它的自执行匿名函数的写法为：

<script>
	(function($){
		$.fn.values = function(){//此处与上面不一样，上面为 values : funciton(){}
			var result = "";
			this.each(function(){
				if(this.checked){
					result = result + ","+ this.value;
				}
			});
			if(result != ""){
				result = result.substr(1);
			}
			return result;
		}
	})(jQuery); //传入jQuery对象
</script>