【学习拾遗】Jquery（四）--自写插件

　　前面博客也说过Jquery官网提供的插件，但是有时候我们需要自定义一些功能，免不了要自己写写jquery插件，这里来说一下jquery插件。

一）、格式

    1、通过$.extend()来扩展Jquery

　　　　格式：

　　　　　$.extend({
　　　　　　　函数名:function(参数){
　　　　　　　　　函数体
　　　　　　　}
　　　　　})

　　　　实例：

　　　　　$.extend({
　　　　　　　sayHello:function(name){
　　　　　　　　alert("hello:"+(name?name:"world"));
　　　　　　　}
　　　　　})
　　　　$.sayHello("leilei");
　　　　$.sayHello();

    2、通过$.fn向jQuery添加新方法,实际上是在jquery的原型上面增加一个函数

　　　　格式：

　　　　(function(){
　　　　　　$.fn.myfunction=function(){
　　　　　　　　　函数体
　　　　　　}
　　　　})(jQuery)

　　　　实例：

　　　　(function(){
　　　　　　$.fn.myfunction=function(options){
　　　　　　　　//默认设置
　　　　　　　　var defaults={
　　　　　　　　　　　'color':'red',
　　　　　　　　　　　'fontSize':'12px'
　　　　　　　　};
　　　　　　　　//复写默认设置
　　　　　　　　var settings=$.extend(defaults,options);

　　　　　　　　//函数体，支持链式操作
　　　　　　　　return this.css({
　　　　　　　　　　　'color':settings.color,
　　　　　　　　　　　'fontSize':settings.fontSize
　　　　　　　　　　　　});
　　　　　　　　}

　　　　})(jQuery)

    3、通过$.fun=function(){}定义全局插件

　　　　$.say=function(name){
　　　　　　alert("hello"+name)
　　　　}

二）、实例驱动

　　通过两个实例，来实践一下自定义jquery插件。

    实例１、美化样式标签字体样式插件

    JS：

(function($){
	
	//定义一个Beautifier对象工厂
	var Beautifier=function(ele,options){
		this.$element=ele;		
		this.defaults={
			color:"red",
			fontsize:"12px",
			textdecoration:"none"
		}
		this.opts=$.extend({},this.defaults,options);
	};
	
	//为该对象的原型添加一个beautiful方法
	Beautifier.prototype={
		beautiful:function(){
			return this.$element.css({
					color:this.opts.color,
					fontSize:this.opts.fontsize,
					textDecoration:this.opts.textdecoration
			});
		}
	};
	
	$.fn.beautiful=function(opts){		
		var beautifier=new Beautifier(this,opts);
		console.log(this)
		return beautifier.beautiful();
		
	}
	
})(jQuery)

　　前台调用：

　　　　$(function(){
　　　　　　$("#test1").beautiful();
　　　　})

　　实例2、Table样式（两种方式实现）

　　a、面向对象实现

(function($,window,document){
	
	var MyTable=function(options){
		this.defaults={
			evenRowClass:"evenRow",
			oddRowClass:"oddRow",
			activeClass:"activeRow"		
		};		
		this.opts=$.extend({},this.defaults,options);		
	}
	
	MyTable.prototype={
		rowColor:function(ele){			
			var $thisTable=$(ele);
			var myTable1=this;
			$thisTable.find("tr:even").addClass(this.opts.evenRowClass).end().find("tr:odd").addClass(this.opts.oddRowClass).end()
			$thisTable.find("tr").bind("mouseover mouseout",function(){
				$(this).toggleClass(myTable1.opts.activeClass).css("cursor","hand")
			})
					
		}
	}	
	$.fn.myTable=function(options){
		var mytable=new MyTable(options);		
		mytable.rowColor(this);
		
	}	
})(jQuery,window,document)

　　b、非面向对象实现

(function($){
	
	$.fn.tableUI=function(options){
		
		var defaults={
			evenRowClass:"evenRow",
			oddRowClass:"oddRow",
			activeClass:"activeRow"			
		}		
		var pts=$.extend({},defaults,options);		
		
		this.each(function(){
			var $thisTable=$(this);
			return $thisTable.find("tr:even").addClass(pts.evenRowClass).end().find("tr:odd").addClass(pts.oddRowClass).end().find("tr").bind("mouseenter mouseleave",function(){
				$(this).toggleClass(pts.activeClass)
			})	
		})		
	}
	
})(jQuery)

PS：个人理解其实Jquery插件有两大要点：1、通过$.extend复写默认的设置；2、通过jquery选择器选择元素进行设置

实现效果就不再这里截图了，自己可以实践一下，主要的目的是在于如何自己开发一个Jquery插件。

三）、小结

　　自定义Jquery插件，个人认为还是如下：

　　1、通过$.extend复写默认的设置

　　2、通过jquery选择元素进行设置

　　3、如果有支持链式操作，在jquery插件的中加上return即可