插件(Plugin)也成为 jQuery 扩展(Extension),是一种遵循一定规范的应用程序接口编写出来的程序。目前 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的别名。
;(function($){//这里将$符作为匿名函数的形参 /*在此处编写代码,可使用$作为jQuery的缩写别名*/ })(jQuery);//这里将jQuery作为实参传递给匿名函数了
3、编写一个插件
假设我们的插件需求是:实现一个下拉菜单,在移入该元素时,把对应的下拉列表展现出来,移出时收回。并且可以设置其展开时的文字颜色。
根据惯例,我们在编写插件时,可以对于html结构有所约束。现在假设我们的页面上有如下HTML结构:
<ul> <li>导航列表1 <ul> <li>导航列表1</li> <li>导航列表2</li> <li>导航列表3</li> <li>导航列表4</li> <li>导航列表5</li> <li>导航列表6</li> </ul> </li> <li>导航列表2 <ul> <li>导航列表1</li> <li>导航列表2</li> <li>导航列表3</li> <li>导航列表4</li> <li>导航列表5</li> <li>导航列表6</li> </ul> </li> </ul> <!-- 默认已经引入jquery -->