jQuery 插件

学习要点：

• 1.插件概述
• 2.验证插件
• 3.自动完成插件
• 4.自定义插件

一、插件概述
引入插件是需要一定步骤的，基本如下：
1.必须先引入 jquery.js 文件，而且在所有插件之前引入；
2.引入插件；
3.引入插件的周边，比如皮肤、中文包等。

二、验证插件
Validate.js 是 jQuery 比较优秀的表单验证插件之一。
这个插件有两个 js 文件，一个是主文件，一个是中文包文件。
验证插件包含的两个文件分别为：jquery.validate.js 和 jquery.validate.messages_zh.js。
HTML部分

<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>

<script src="jquery-1.11.3.min.js"></script>
<script src="jquery.validate.js"></script>
<script src="jquery.validate.messages_zh.js"></script>

// 验证
$("form").validate();

三．自动完成插件
引入的文件

<script src="jquery.autocomplete.js"></script>
<script src="jquery-migrate-1.2.1.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.autocomplete.css">

var user = ["zhang", "li", "wang", "zhao"];
$("form input[name=username]").autocomplete(user, {
    minChars : 0        // 双击显示所有的内容
});

四．自定义插件
我们开发一个局部或全局的导航菜单的插件
HTML部分—dome.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>
<script src="jquery-1.11.3.min.js"></script>

引入插件

<script src="jquery.nav.js"></script>

在这里调用插件

<script src="dome.js"></script>

jquery.nav.js 定义nav方法

$(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);

调用自定义插件的方法—-domo.js

$(".list").nav();