JQuery如何自定义插件――$.fn的使用_html-js-css

概述JQuery提供了很多多的插件，粗略一搜，发现还不能用很多来形容：点了几个看了看，发现都相当精美，web开发需要的更多的是审美，而不是JS，只能说JS只是个基础吧。简直是开发者的福音啊。但是，这么多插件有时候也并不是都满足我们的需求，比如，有时候我们仅仅需要一个轮船的发动机，现在我们却只有轮

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

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

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

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

首先，写单独的Js文件：

// JavaScript document<span style="@R_404_6004@:#FF0000;"><strong>//$.fn 是扩大插件的方法</strong></span>(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);

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

<!DOCTYPE HTML PUBliC "-//W3C//DTD xhtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-Transitional.dtd"><HTML xmlns="http://www.w3.org/1999/xhtml"><head><Meta http-equiv="Content-Type" content="text/HTML; charset=utf⑻" /><Title>JQ插件示例</Title><style> #div1 div{wIDth:200px; height:200px; border:1px #000000 solID; display:none;position:absolute;} .active{background:red}</style></head><script type="text/JavaScript" src="E:各类工程文件BS学习jqueryjqueryjquery⑴.7.2.min.Js"></script><script language="JavaScript" type="text/JavaScript" src="Js插件示例.Js"></script><script> $(function(){ $('#div1').miaovTab(); });</script><body> <div ID="div1"> <input class="active" type="button" value="1"/> <input type="button" value="2"/> <input type="button" value="3"/> <div style="display:block">11111</div> <div>22222</div> <div>33333</div> </div> </body></HTML>

当我们在阅读器中查看时，可以点击3个按钮，做出Tab的切换效果。

Now,练习过制作插件，当下次遇到不适合的插件时，我们可以手写或将部份源码从Demo中拿出来，然后用这些代码制作成自己的轻量级插件。

PS：附上1个非常漂亮的Jquery插件库：http://www.jq22.com/

总结

以上是内存溢出为你收集整理的JQuery如何自定义插件――$.fn的使用全部内容，希望文章能够帮你解决JQuery如何自定义插件――$.fn的使用所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1020082.html