20151213Jquery学习笔记--插件

插件(Plugin)也成为 jQuery 扩展(Extension)，是一种遵循一定规范的应用程序接口编 写出来的程序。目前 jQuery 插件已超过几千种，由来自世界各地的开发者共同编写、验证 和完善。而对于 jQuery 开发者而言，直接使用这些插件将快速稳定架构系统，节约项目成 本

一．插件概述 

插件是以 jQuery 的核心代码为基础，编写出复合一定规范的应用程序。也就是说，插 件也是 jQuery 代码，通过 js 文件引入的方式植入即可。

插件的种类很多，主要大致可以分为：UI 类、表单及验证类、输入类、特效类、Ajax 类、滑动类、图形图像类、导航类、综合工具类、动画类等等。

引入插件是需要一定步骤的，基本如下： 

1.必须先引入 jquery.js 文件，而且在所有插件之前引入；

2.引入插件；

3.引入插件的周边，比如皮肤、中文包等。

二．验证插件 

Validate.js 是 jQuery 比较优秀的表单验证插件之一。这个插件有两个 js 文件，一个是主 文件，一个是中文包文件。使用的时候，可以使用 min 版本；在这里，为了教学，我们未 压缩版本

验证插件包含的两个文件分别为：jquery.validate.js 和 jquery.validate.messages_zh.js。 

//HTML 内容 

<scripttype="text/javascript"src="jquery.validate.js"></script> 
<scripttype="text/javascript"src="jquery.validate.messages_zh.js"></script>
 <form> 
<p>用 户 名：<inputtype="text"class="required"name="username"minlength="2"/>
 *</p> 
<p>电子邮件：<inputtype="text"class="requiredemail"name="email"/>
*</p> 
<p>网 址：<inputtype="text"class="url"name="url"/></p>
 <p><inputtype="submit"value="提交"/></p> 
</form>

　　//jQuery 代码 

$(function(){
 $('form').validate(); 
});

　　只要通过 form 元素的 jQuery 对象调用 validate()方法，就可以实现“必填”、 “不能小于 两位”、 “电子邮件不正确”、“网址不正确”等验证效果。除了 js 端的 validate()方法调用， 表单处也需要相应设置才能最终得到验证效果。 

1.必填项：在表单设置 class="required"；

2.不得小于两位：在表单设置 minlength="2"；

3.电子邮件：在表单中设置 class="email";

4.网址：在表单中设置 class="url"。

注意：本章就简单的了解插件的使用，并不针对某个功能的插件进行详细讲解。比如验 证插件 validate.js，它类似与 jQuery 一样，同样具有各种操作方法和功能，需要进行类似手 册一样的查询和讲解。所以，我们会在项目中再去详细讲解使用到的插件。

三．自动完成插件 

所谓自动完成，就是当用户输入部分字符的时候，智能的搜索出包含字符的全部内容。 比如：输入 a，把匹配的内容列表展示出来。 

//HTML 内容 

<scripttype="text/javascript"src="jquery.autocomplete.js"></script> 
<scripttype="text/javascript"src="jquery-migrate-1.2.1.js"></script>
 <linkrel="stylesheet"href="jquery.autocomplete.css"type="text/css"/>

　　//jQuery 代码 

varuser=['about','family', 'but', 'black']; 
$('forminput[name=username]').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 部分 

<ulclass="list"> 
  <li>导航列表 
    <ul class="nav"> 
      <li>导航列表 1</li> 
      <li>导航列表 1</li> 
      <li>导航列表 1</li> 
      <li>导航列表 1</li> 
      <li>导航列表 1</li> 
      <li>导航列表 1</li> 
   </ul> 
  </li> 
  <li>导航列表 
    <ul class="nav"> 
     <li>导航列表 2</li>
     <li>导航列表 2</li>
     <li>导航列表 2</li> 
     <li>导航列表 2</li>
     <li>导航列表 2</li>
     <li>导航列表 2</li>
    </ul>
   </li>
 </ul>

　　

//jquery.nav.js 部分 ;
(function($){
 $.fn.extend({
 'nav':function(color){
 $(this).find('.nav').css({
    listStyle:'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');
 });
returnthis;
}
}); 
})(jQuery);

　　此教程来源于北风网