分享jQuery插件的学习笔记_jquery

一． 插件概述

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

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

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

• 1、必须先引入 jquery.js 文件，而且在所有插件之前引入；
• 2、引入插件；
• 3、引入插件的周边，比如皮肤、中文包等。
  

比如最常用到的表单验证插件： validate ，除了最基本的插件文件 jquery.validate.min.js 之外，还有着 messages_zh.js 等等各国的语言包可以供你使用。

如何使用该插件在这里就不进行描述了，可以去看看慕课网上的视频 jQuery插件——Validation Plugin ，里面详细的描述了这个插件的各种配置项，以及扩展。

触类旁通，一个优秀的插件，详细的说明文档必不可少，详细的看说明文档能，并且在本地进行测试能让你快速的入门各种插件的使用。

还有各种各样的别人编写好的插件可以供你使用：比如管理cookie的插件–cookie等等。

插件可以去jQuery官网的插件模块进行查找 The jQuery Plugin Registry

二. 自定义插件

前面我们使用了别人提供好的插件，使用起来非常的方便。如果市面上找不到自己满意的插件，并且想自己封装一个插件提供给别人使用。那么就需要自己编写一个 jQuery 插件了。

1、插件种类

按照功能分类，插件的形式可以分为一下三类：

• 封装对象方法的插件；（也就是基于某个 DOM 元素的 jQuery 对象，局部性，使用最多）
• 封装全局函数的插件；（全局性的封装）
• 选择器插件。(类似与.find()，例如： color(red) 来选择所有的红色元素之类)

2、插件的基本要点

主要用以以解决各种因为插件导致的冲突、错误等问题，包括如下：

• 插件名推荐使用 jQuery.[插件名].js，以免和其他 js 文件或者其他库相冲突（可以使用alert( $.[插件名] )验证是否存在该全局方法）；
• 局部对象附加 jQuery.fn 对象上，全局函数附加在 jQuery对象本身上（可以使用alert( $(selector).[插件名] )验证是否存在该局部方法）；
• 插件内部，this 指向是当前的局部对象（通过选择器获取的jQuery对象）；
• 可以通过 this.each 来遍历所有元素；
• 所有的方法或插件，必须用分号结尾，避免出现问题（为了更稳妥，可在插件头部先加上一个分号）；
• 插件应该返回的是 jQuery 对象，以保证可链式操作；
• 避免插件内部使用$，如果要使用，使用闭包把传递 jQuery 进去，使插件内部继续使用$作为jQuery的别名。
  

3、编写一个插件

假设我们的插件需求是：实现一个下拉菜单，在移入该元素时，把对应的下拉列表展现出来，移出时收回。并且可以设置其展开时的文字颜色。

根据惯例，我们在编写插件时，可以对于html结构有所约束。现在假设我们的页面上有如下HTML结构：

在这里，我们就对我们的插件实现效果有了第一个要求，必须在 对于需要hover展现的元素 内部下面建立 ul 列表，且 className 必须为 nav 。（插件内部都是根据该条件来做文章）

下面就可以开始编写我们的插件了。保存为 jQuery.nav.js ，（符合上面所说的要求，默认已经导入）

注意：这里使用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中加上那么一句话（当前插件定义在全局方法上）

就这样，我们的全局插件就编写，而且调用完成了，在你的页面刷新看看，是不是已经有了效果呢？

但是，因为我们的方法定义在全局上，现在只要页面中出现了我们插件所规定的结构，就会存在hover展现效果，但是有时我们往往想要的不是这样，我们希望它在局部，在我指定的元素调用。所以我们需要对其进行一些改造，让其变成局部方法，其实也很简单：

我们去刷新一下浏览器。你会发现，咦，怎么没效果？ 当然因为原来的代码是直接在全局调用的，现在变成局部方法了，显然就不能这样做了，需要做一点改变：

我这里就不贴html代码了，但是希望您在实践时能把上面的html代码在其下复制几份，以达到思考其实现的效果

现在回过头再把我们写的插件代码对应上面写的 插件编写的要点 ，思考一下，我们还有哪些没有做到？就会发现，基本已经能对应上了。现在我们就完成了一个下拉菜单的插件。

其实编写插件并不难，最主要的是在我们编写插件的时候，一定要时刻注意这样的要点，每一个细节都遵循在大家实践过程中总结出来的最佳实现，才能自定义实现一个良好的插件。

代码首先是写个人看的，再然后才是给机器看的。