jQuery学习笔记之十五-------插件

一 插件概述

二．验证插件

Validate.js 是 jQuery 比较优秀的表单验证插件之一。这个插件有两个 js 文件，一个是主
文件，一个是中文包文件。使用的时候，可以使用 min 版本；在这里，为了教学，我们未
压缩版本。
验证插件包含的两个文件分别为：jquery.validate.js 和 jquery.validate.messages_zh.js。
//HTML 内容
<script type="text/javascript" src="jquery.validate.js"></script>
<script type="text/javascript" src="jquery.validate.messages_zh.js"></script>
<form>
<p>用 户 名：<input type="text" class="required" name="username" minlength="2" />
*</p>
<p>电子邮件：<input type="text" class="required email" name="email" /> *</p>
<p>网
址：<input type="text" class="url" name="url" /></p>
<p><input type="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 内容
<script type="text/javascript" src="jquery.autocomplete.js"></script>
<script type="text/javascript" src="jquery-migrate-1.2.1.js"></script>
<link rel="stylesheet" href="jquery.autocomplete.css" type="text/css" />
//jQuery 代码
var user = ['about', 'family', 'but', 'black'];
$('form input[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 部分
<ul class="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');
});
return this;
}
});
})(jQuery);