在这里，我们就对我们的插件实现效果有了第一个要求，必须在 对于需要hover展现的元素 内部下面建立 ul 列表，且 className 必须为 nav 。（插件内部都是根据该条件来做文章）
下面就可以开始编写我们的插件了。保存为 jQuery.nav.js ，（符合上面所说的要求，默认已经导入）
;(function($){ $.extend({ //插件定义在全局方法上 "nav" : function (color){//传参，这里只是抛砖引玉，在您编写的时候，参数选项可以更加丰富，例如传入json对象等等 $('.nav').css({//对展开的下拉列表设置样式，此处在下面进行详细说明 "list-style" : "none", "margin" : 0, "padding" : 0, "display" : "none", "color":color//由用户控制hover时，展现出来列表的文字颜色 }); $('.nav').parent().hover(//这里用到了.nav的父节点（就是hover到的元素） //因为我们只能在插件要求的范围内进行设定，若是使用了外部的选择器，就违背了这个原则 function (){ $(this).find(".nav").stop().slideDown("normal");//注意我们在这里使用了jquery的动画方法 },function (){ $(this).find(".nav").stop().slideUp("normal");//注意stop()的使用，不然会有类似手风琴效果的出现，但那并不是我们需要的 }); } }); })(jQuery);
注意：这里使用css方法只是为了方便，在真实插件编写过程中，若存在如此大量的css样式编写时，推荐在外部定义css样式，例如可改写为：
插件依赖的css，需和插件一起导入html中
.hover{/*插件必须样式*/ list-style: none; margin:0; padding: 0; display: none; }
在插件内部修改。
$('.nav').addClass("hover");//将CSS与jQuery分离开来 $('.nav').css("color",color);//存在用户设置时启用，不存在就不用了（进行判断）
刚刚说的都是插件的js文件，最后要起到效果，别忘了页面的js中加上那么一句话（当前插件定义在全局方法上）
$(function (){ $.nav("#999");//调用插件实现的全局方法，并且设置其展现背景颜色为#999。 });
就这样，我们的全局插件就编写，而且调用完成了，在你的页面刷新看看，是不是已经有了效果呢？
但是，因为我们的方法定义在全局上，现在只要页面中出现了我们插件所规定的结构，就会存在hover展现效果，但是有时我们往往想要的不是这样，我们希望它在局部，在我指定的元素调用。所以我们需要对其进行一些改造，让其变成局部方法，其实也很简单：
;(function($){ $.fn.extend({//定义为局部方法 "nav" : function (color){ $(this).find('.nav').addClass('hover');//上面已经说过了,此时this指向调用该方法的元素 $(this).find('.nav').css("color",color);//在当前元素下，增加了一次find筛选，实现在对应的元素中执行。 $(this).find('.nav').parent().hover( function (){ $(this).find(".nav").stop().slideDown("normal"); },function (){ $(this).find(".nav").stop().slideUp("normal"); }); return this;//返回当前的对象 } }); })(jQuery);
我们去刷新一下浏览器。你会发现，咦，怎么没效果？ 当然因为原来的代码是直接在全局调用的，现在变成局部方法了，显然就不能这样做了，需要做一点改变：
我这里就不贴html代码了，但是希望您在实践时能把上面的html代码在其下复制几份，以达到思考其实现的效果
$(function (){//这里的eq(0)代表只对第一份起到效果，复制后的没有效果。 //（你可以把上面的find筛选删除之后再试试，您会发现，他又对余下的几份起效果了） $(".list").eq(0).nav("red");//调用局部方法 });
现在回过头再把我们写的插件代码对应上面写的 插件编写的要点 ，思考一下，我们还有哪些没有做到？就会发现，基本已经能对应上了。现在我们就完成了一个下拉菜单的插件。
其实编写插件并不难，最主要的是在我们编写插件的时候，一定要时刻注意这样的要点，每一个细节都遵循在大家实践过程中总结出来的最佳实现，才能自定义实现一个良好的插件。
代码首先是写个人看的，再然后才是给机器看的。
您可能感兴趣的文章: