插件(Plugin)也成为 jQuery 扩大(Extension)，是一种遵照肯定范例的运用顺序接口编写出来的顺序。如今 jQuery 插件已凌驾几千种，由来自世界各地的开发者配合编写、考证和完美。而关于jQuery开发者而言，直接运用这些插件将疾速稳固架构体系，勤俭项目本钱。
一． 插件概述
插件是以 jQuery 的中心代码为基础，编写出复合肯定范例的运用顺序。也就是说，插件也是 jQuery 代码，经由过程 js 文件引入的体式格局植入即可。
插件的品种许多，重要大抵能够分为：UI 类、表单及考证类、输入类、殊效类、Ajax类、滑动类、图形图像类、导航类、综合东西类、动画类等等。
引入插件是须要肯定步骤的，基础以下：
必需先引入 jquery.js 文件，而且在一切插件之前引入；
引入插件；
引入插件的周边，比方皮肤、中文包等。
比方最常用到的表单考证插件：validate，除了最基础的插件文件jquery.validate.min.js以外，另有着messages_zh.js等等列国的语言包能够供你运用。
怎样运用该插件在这里就不举行形貌了，能够去看看慕课网上的视频jQuery插件——Validation Plugin，内里细致的形貌了这个插件的种种设置项，以及扩大。
举一反三，一个优异的插件，细致的申明文档必不可少，细致的看申明文档能，而且在当地举行测试能让你疾速的入门种种插件的运用。
另有林林总总的他人编写好的插件能够供你运用：比方治理cookie的插件–cookie等等。
插件能够去jQuery官网的插件模块举行查找The jQuery Plugin Registry
二. 自定义插件
前面我们运用了他人供应好的插件，运用起来异常的轻易。假如市面上找不到本身惬意的插件，而且想本身封装一个插件供应给他人运用。那末就须要本身编写一个 jQuery 插件了。
插件品种
依据功用分类，插件的情势能够分为一下三类：
封装对象要领的插件；（也就是基于某个 DOM 元素的 jQuery 对象，部分性，运用最多）
封装全局函数的插件；（全局性的封装）
挑选器插件。(相似与.find()，比方：
color(red)来挑选一切的赤色元素之类)
插件的基础要点
重要用以以处理种种由于插件致使的争执、毛病等题目，包含以下：
插件名引荐运用 jQuery.[插件名].js，以防止和其他 js 文件或许其他库相争执（能够运用alert(
$.[插件名])考证是不是存在该全局要领）；部分对象附加 jQuery.fn 对象上，全局函数附加在 jQuery对象本身上（能够运用alert(
$(selector).[插件名])考证是不是存在该部分要领）；插件内部，this 指向是当前的部分对象（经由过程挑选器猎取的jQuery对象）；
能够经由过程 this.each 来遍历一切元素；
一切的要领或插件，必需用分号末端，防止涌现题目（为了更稳妥，可在插件头部先加上一个分号）；
插件应当返回的是 jQuery 对象，以保证可链式操纵；
防止插件内部运用$，假如要运用，运用闭包把通报 jQuery 进去，使插件内部继承运用$作为jQuery的别号。
;(function($){//这里将$符作为匿名函数的形参
/*在此处编写代码，可运用$作为jQuery的缩写别号*/
})(jQuery);//这里将jQuery作为实参通报给匿名函数了编写一个插件
假定我们的插件需求是：完成一个下拉菜单，在移入该元素时，把对应的下拉列表展示出来，移出时收回。而且能够设置其睁开时的笔墨色彩。
依据通例，我们在编写插件时，能够关于html构造有所束缚。如今假定我们的页面上有以下HTML构造：
<ul class="list">
<li>导航列表1
<ul class="nav">
<li>导航列表1</li>
<li>导航列表2</li>
<li>导航列表3</li>
<li>导航列表4</li>
<li>导航列表5</li>
<li>导航列表6</li>
</ul>
</li>
<li>导航列表2
<ul class="nav">
<li>导航列表1</li>
<li>导航列表2</li>
<li>导航列表3</li>
<li>导航列表4</li>
<li>导航列表5</li>
<li>导航列表6</li>
</ul>
</li>
</ul>
<!-- 默许已引入jquery -->在这里，我们就对我们的插件完成结果有了第一个请求，必需在关于须要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");//挪用部分要领
});如今回过甚再把我们写的插件代码对应上面写的插件编写的要点，思索一下，我们另有哪些没有做到？就会发明，基础已能对应上了。如今我们就完成了一个下拉菜单的插件。
实在编写插件并不难，最重要的是在我们编写插件的时候，肯定要时候注重如许的要点，每个细节都遵照在人人实践过程当中总结出来的最好完成，才自定义完成一个优越的插件。
代码首先是写个人看的，再然后才是给机械看的。
