插件(Plugin)也成为jQuery扩展(Extension)，是一种遵循一定规范的应用程序接口编写出来的程序。目前jQuery插件已超过几千种，由来自世界各地的开发者共同编写、验证和完善。而对于jQuery开发者而言，直接使用这些插件将快速稳定架构系统，节约项目成本。
插件概述
插件是以jQuery的核心代码为基础，编写出复合一定规范的应用程序。也就是说，插件也是jQuery代码，通过js文件引入的方式植入即可。
插件的种类很多，主要大致可以分为：UI类、表单及验证类、输入类、特效类、Ajax类、滑动类、图形图像类、导航类、综合工具类、动画类等等。
引入插件是需要一定步骤的，基本如下：
1.必须先引入jquery.js文件，而且在所有插件之前引入
2.引入插件
3.引入插件的周边，比如皮肤、中文包等
验证插件
validate.js是jQuery比较优秀的表单验证插件之一。这个插件有两个js文件，一个是主文件，一个是中文包文件。使用的时候，可以使用min版本；在这里，为了教学，我们未用压缩版本。
起初，插件.html为：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>插件</title> <script type="text/javascript" src="demo.js"></script> </head> <body> <form action="123.html"> <p>用户 名：<input type="text" name="user" /></p> <p>电子邮件：<input type="text" name="email" /></p> <p>网 址：<input type="text" name="url" /></p> <p><input type="submit" value="提交" /></p> </form> </body> </html>
引入表单验证插件validate.js的步骤：
1.引入jQuery文件：
<script type="text/javascript" src="jquery-1.12.3.js"></script>
2.引入validate.js文件或者中文包文件(即提示文字为中文)
<script type="text/javascript" src="jquery.validate.js"></script>
或
<script type="text/javascript" src="jquery.validate.js"></script> <script type="text/javascript" src="jquery.validate.messages_zh.js"></script>
插件.html即为：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>插件</title> <script type="text/javascript" src="jquery-1.12.3.js"></script> <script type="text/javascript" src="jquery.validate.js"></script>
<script type="text/javascript" src="jquery.validate.messages_zh.js"></script> <script type="text/javascript" src="demo.js"></script> </head> <body> <form action="123.html"> <p>用户 名：<input type="text" name="user" />(*)</p> <p>电子邮件：<input type="text" name="email" />(*)</p> <p>网 址：<input type="text" name="url" /></p> <p><input type="submit" value="提交" /></p> </form> </body> </html>
3.加载validate：(jQuery代码)
$(function () { $('form').validate(); });
4.只要通过form元素的jQuery对象调用validate()方法，就可以实现“必填” 、 “不能小于两位” 、 “电子邮件不正确” 、 “网址不正确”等验证效果。除了js端的validate()方法调用，表单处也需要相应设置才能最终得到验证效果。
(1)必填项：在表单设置class="required"
<p>用户 名：<input type="text" class="required" name="user" />(*)</p> <p>电子邮件：<input type="text" class="required" name="email" />(*)</p>
(2)不得小于两位：在表单设置minlength="2"
<p>用户 名：<input type="text" class="required" minlength="2" name="user" />(*)</p>
(3)电子邮件：在表单中设置class="email"
<p>电子邮件：<input type="text" class="required email" name="email" />(*)</p>
(4)网址：在表单中设置class="url"
<p>网 址：<input type="text" class="url" name="url" /></p>
网址还必须以http://开头。
注意：本章就简单的了解插件的使用，并不针对某个功能的插件进行详细讲解。比如验证插件validate.js，它类似于jQuery一样，同样具有各种操作方法和功能，需要进行类似手册一样的查询和讲解。所以，我们会在项目中再去详细讲解使用到的插件。
自动完成插件
所谓自动完成，就是当用户输入部分字符的时候，智能的搜索出包含字符的全部内容。比如：输入a，把匹配的内容列表展示出来。
引入自动完成插件jquery.autocomplete.js和向下兼容插件jquery-migrate-1.2.1.js：
<script type="text/javascript" src="jquery.autocomplete.js"></script> <script type="text/javascript" src="jquery-migrate-1.2.1.js"></script>
记得还要引入自动完成插件样式：
<link rel="stylesheet" type="text/css" href="jquery.autocomplete.css" />
jQuery代码：
var user = ["about", "auto", "but", "black"]; $("form input[name=user]").autocomplete(user, { minChars:0 //双击显示全部数据 });
注意：这个自动完成插件使用的jQuery版本较老，用了一些已被新版本的jQuery废弃删除的方法，这样必须要向下兼容才能有效。所以，去查找插件的时候，要注意一下它使用的版本。
自定义插件
前面我们使用了别人提供好的插件，使用起来非常的方便。如果市面上找不到自己满意的插件，并且想自己封装一个插件提供给别人使用，那么就需要自己编写一个jQuery插件了。
按照功能分类，插件的形式可以分为以下三类：
1.封装对象方法的插件(也就是基于某个DOM元素的jQuery对象，局部性)
2.封装全局函数的插件(全局性的封装)
3.选择器插件(类似与.find())
经过日积月累的插件开发，开发者逐步约定了一些基本要点，以解决各种因为插件导致的冲突、错误等问题，包括如下：
1.插件名推荐使用jquery.[插件名].js，以免和其他js文件或者其他库相冲突
2.局部对象附加jquery.fn对象上，全局函数附加在jquery上
3.插件内部，this指向的是当前的局部对象
4.可以通过this.each来遍历所有元素
5.所有的方法或插件，必须用分号结尾，避免出现问题
6.插件应该返回的是jQuery对象，以保证可链式连缀
7.避免插件内部使用$，如果要使用，请传递jQuery进去
按照以上的要点，我们开发一个局部或全局的导航菜单的插件。只要导航的<li>标签内部嵌入要下拉的<ul>，并且class为nav，即可完成下拉菜单。
导航菜单插件.html：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>插件</title> <script type="text/javascript" src="jquery-1.12.3.js"></script> <script type="text/javascript" src="demo.js"></script> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <ul class="list"> <li>导航列表 <ul class="nav"> <li>子导航列表1</li> <li>子导航列表2</li> <li>子导航列表3</li> <li>子导航列表4</li> <li>子导航列表5</li> <li>子导航列表6</li> </ul> </li> <li>导航列表 <ul class="nav"> <li>子导航列表1</li> <li>子导航列表2</li> <li>子导航列表3</li> <li>子导航列表4</li> <li>子导航列表5</li> <li>子导航列表6</li> </ul> </li> <li>导航列表 <ul class="nav"> <li>子导航列表1</li> <li>子导航列表2</li> <li>子导航列表3</li> <li>子导航列表4</li> <li>子导航列表5</li> <li>子导航列表6</li> </ul> </li> <li>导航列表 <ul class="nav"> <li>子导航列表1</li> <li>子导航列表2</li> <li>子导航列表3</li> <li>子导航列表4</li> <li>子导航列表5</li> <li>子导航列表6</li> </ul> </li> <li>导航列表 <ul class="nav"> <li>子导航列表1</li> <li>子导航列表2</li> <li>子导航列表3</li> <li>子导航列表4</li> <li>子导航列表5</li> <li>子导航列表6</li> </ul> </li> </ul> </body> </html>
导航菜单插件.css：
.list { list-style: none; margin: 0; padding: 0; font-size: 13px; color: #fff; width: 500px; margin: 50px auto; } .list li { float: left; width: 100px; height: 30px; line-height: 30px; text-align: center; background: #333; cursor: pointer; }
jQuery代码：
$(function() { alert($.nav); //undefined });
发现返回undefined，所以可以遵守基本要点——①插件名推荐使用jquery.[插件名].js，以免和其他js文件或者其他库相冲突——来给插件名取名为jquery.nav.js。
先在demo.js中写入jQuery代码，然后再移植到我们的插件中
jQuery代码：
$(function() { $(".nav").css({ "list-style":"none", "margin":0, "padding":0, "display":"none" }); $(".nav").parent().hover(function() { $(this).find(".nav").slideDown("normal"); }, function() { $(this).find(".nav").stop().slideUp("normal"); }); });
遵循基本要点：
⑤所有的方法或插件，必须用分号结尾，避免出现问题
⑦避免插件内部使用$，如果要使用，请传递jQuery进去
;(function() { //前面加一个;，可以和前面所使用插件代码分离 jQuery.xxx() //避免插件内部使用$，如果要使用可以直接使用jQuery }); //所有的方法或插件，必须用分号结尾，避免出现问题
或传递jQuery进去：
;(function($) { //用$接收 $.xxx()... })(jQuery); //传递jQuery进去
遵循基本要点②——局部对象附加jquery.fn对象上，全局函数附加在jquery上
(1)全局函数：
jquery.nav.js代码：
;(function($) { //全局函数 $.extend({ "nav":function(color) { $(".nav").css({ "list-style":"none", "margin":0, "padding":0, "display":"none" }); $(".nav").parent().hover(function() { $(this).find(".nav").slideDown("normal"); }, function() { $(this).find(".nav").stop().slideUp("normal"); }); } }); })(jQuery);
导航菜单插件.html引入自定义插件：
<script type="text/javascript" src="jquery.nav.js"></script>
jQuery代码：
$(function() { $.nav(); });
(2)局部函数
导航菜单插件.html：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>插件</title> <script type="text/javascript" src="jquery-1.12.3.js"></script> <script type="text/javascript" src="jquery.nav.js"></script> <script type="text/javascript" src="demo.js"></script> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <ul class="list"> <li>导航列表 <ul class="nav"> <li>子导航列表1</li> <li>子导航列表2</li> <li>子导航列表3</li> <li>子导航列表4</li> <li>子导航列表5</li> <li>子导航列表6</li> </ul> </li> <li>导航列表 <ul class="nav"> <li>子导航列表1</li> <li>子导航列表2</li> <li>子导航列表3</li> <li>子导航列表4</li> <li>子导航列表5</li> <li>子导航列表6</li> </ul> </li> <li>导航列表 <ul class="nav"> <li>子导航列表1</li> <li>子导航列表2</li> <li>子导航列表3</li> <li>子导航列表4</li> <li>子导航列表5</li> <li>子导航列表6</li> </ul> </li> <li>导航列表 <ul class="nav"> <li>子导航列表1</li> <li>子导航列表2</li> <li>子导航列表3</li> <li>子导航列表4</li> <li>子导航列表5</li> <li>子导航列表6</li> </ul> </li> <li>导航列表 <ul class="nav"> <li>子导航列表1</li> <li>子导航列表2</li> <li>子导航列表3</li> <li>子导航列表4</li> <li>子导航列表5</li> <li>子导航列表6</li> </ul> </li> </ul> <p>1</p><p>1</p><p>1</p> <ul class="list"> <li>导航列表 <ul class="nav"> <li>子导航列表1</li> <li>子导航列表2</li> <li>子导航列表3</li> <li>子导航列表4</li> <li>子导航列表5</li> <li>子导航列表6</li> </ul> </li> <li>导航列表 <ul class="nav"> <li>子导航列表1</li> <li>子导航列表2</li> <li>子导航列表3</li> <li>子导航列表4</li> <li>子导航列表5</li> <li>子导航列表6</li> </ul> </li> </ul> </body> </html>
jQuery代码：
$(function() { $(".list").eq(0).nav(); });
以上代码只是想让第一个<ul>执行，第二个<ul>不执行，发现两个都可以执行相同的效果，这是在插件中使用了全局函数的缘故。现在将jquery.nav.js代码修改为：
;(function($) { //局部函数 $.fn.extend({ "nav":function(color) { $(this).find(".nav").css({ "list-style":"none", "margin":0, "padding":0, "display":"none" }); $(this).find(".nav").parent().hover(function() { $(this).find(".nav").slideDown("normal"); }, function() { $(this).find(".nav").stop().slideUp("normal"); }); } }); })(jQuery);
此时才算达到效果。
当然了，还可以进行传参，jquery.nav.js代码：
;(function($) { //局部函数 $.fn.extend({ "nav":function(color) { $(this).find(".nav").css({ "list-style":"none", "margin":0, "padding":0, "display":"none", "color":color }); $(this).find(".nav").parent().hover(function() { $(this).find(".nav").slideDown("normal"); }, function() { $(this).find(".nav").stop().slideUp("normal"); }); } }); })(jQuery);
jQuery代码：
$(function() { $(".list").eq(0).nav("orange"); });
遵守基本要点⑥——插件应该返回的是jQuery对象，以保证可链式连缀。
jquery.nav.js代码：
;(function($) { //局部函数 $.fn.extend({ "nav":function(color) { $(this).find(".nav").css({ "list-style":"none", "margin":0, "padding":0, "display":"none", "color":color }); $(this).find(".nav").parent().hover(function() { $(this).find(".nav").slideDown("normal"); }, function() { $(this).find(".nav").stop().slideUp("normal"); }); return this; } }); })(jQuery);
jQuery代码：
$(function() { alert($(".list").eq(0).nav("orange")); //[object Object] });
补充：关于this
html(部分)代码：
<input type="button" />
jQuery代码：
$("input").click(function() {
//普通情况下，this表示原生的DOM
alert(this); //[object HTMLInputElement]
$(this).val("按钮");
});
而jquery.nav.js代码又可写为：
;(function($) { //局部函数 $.fn.extend({ "nav":function(color) { //这里是插件的方法 //在插件里的this，经过了一些封装处理，this就是表示jQuery对象 //而不需要再次使用$()包装 //alert(this); //[object Object] this.find(".nav").css({ "list-style":"none", "margin":0, "padding":0, "display":"none", "color":color }); this.find(".nav").parent().hover(function() { //这里是普通的匿名函数 //alert(this); //this指代this.find(".nav").parent()元素 [object HTMLLIElement] $(this).find(".nav").slideDown("normal"); }, function() { $(this).find(".nav").stop().slideUp("normal"); }); return this; } }); })(jQuery);