JQuery如何自定义插件——$.fn的使用

JQuery提供了很多多的插件，粗略一搜，发现还不能用很多来形容：

点了几个看了看，发现都相当精美，web开发需要的更多的是审美，而不是JS，只能说JS只是个基础吧。

 

 

简直是开发者的福音啊。但是，这么多插件有时候也并不是都满足我们的需求，比如，有时候我们仅仅需要一个轮船的发动机，现在我们却只有轮船，我们还需要把轮船拆开，或者有的时候我们需要的部件根本没有，这时候，我们就需要自己动手啦。

 

例如，我以前写过一个Tab控件，现在要把它做成插件，让我们来一起看下这个小Demo:

 

首先，写单独的JS文件：

 

// JavaScript Document


//$.fn 是扩展插件的方法

(function($){   //形成闭包，将作用域进行限定
		  
		  
		$.fn.miaovTab=function(){
			
			var This=this;
			$(this).find('input').click(function(){
			
				$(This).find('input').attr('class','');
				$(This).find('div').fadeOut();
				
				
				$(this).attr('class','active');
				$(This).find('div').eq($(this).index()).fadeIn();
				

			});
			

			
			};
		  
		  
		  
 })(jQuery);
	

然后，我们在页面中，加入如下代码：

<script type=text/javascript src=E:各类工程文件BS学习jqueryjqueryjquery-1.7.2.min.js> </script><script language=JavaScript type=text/javascript src=JS插件示例.js></script><script> $(function(){ $('#div1').miaovTab(); }); </script>