第一百七十六节，jQuery，插件

jQuery，插件

 

学习要点：

　　1.插件概述

　　2.验证插件

　　3.自动完成插件

　　4.自定义插件

 

插件(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代码

<form>
    <p>用 户 名：<input type="text"/>
        *</p>
    <p>电子邮件：<input type="text" name="email"/> *</p>
    <p>网 址：<input type="text" name="url"/></p>
    <p><input type="submit" value="提交"/></p>
</form>

第一步，引入jquery.js 文件

第二步，引入jquery.validate.js验证插件

第三步，引入jquery.validate.messages_zh.js 验证插件中文语言包，因为原本是英文的

第四步，写自己的js文件加载验证

//获取表单，执行表单验证插件
    $('form').validate(); //执行表单验证插件方法

执行表单验证插件方法后

 

class="required"验证表单指定元素不能为空

只要在表单元素里不能为空的元素上加上class="required"，提交表单时插件就会自动检测class="required"的表单值不能为空

minlength="2"验证表单指定元素值不能小于两位

只要在表单元素里值不能小于两位的元素上加上属性minlength="2"，属性值就是要检测的长度，设置后会自动检测

class="email"验证邮箱地址的合法性

只要在表单电子邮件元素加上class="email"，就会自动检测电子邮件的合法性

class="url"验证输入网址的元素，网址的合法性，网址还必须包含http

只要在表单输入网址的元素加上class="url",就会自动检测网址的合法性

加上了各种验证属性后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>

 

 

注意：本章就简单的了解插件的使用，并不针对某个功能的插件进行详细讲解。比如验 证插件 validate.js，它类似与 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

extend()方法，用jQuery的extend()方法，extend()给jQuery拓展一个全局方法，接受一个参数，参数是一个对象

//自定义插件
//;防止上面其他文件的代码缺少符号出错
;(function ($) {  //自我执行函数
    //全局封装，用于全局也就是整个页面
    //全局封装，用jQuery的extend()方法，extend()给jQuery拓展一个全局方法，接受一个参数，参数是一个对象
    //对象里以键值对方式传值，第一个属性名称也就是要拓展方法名称，第二个参数是函数，函数里就是执行代码
    $.extend({
        'nav': function (color) {  //还可以接受参数来操作
            $('.nav').css({
                'list-style': 'none',
                'margin': 0,
                'padding': 0,
                'display': 'none',
                'color': color
            });
            $('.nav').parent().hover(function () {
                $(this).find('.nav').slideDown('normal');
            }, function () {
                $(this).find('.nav').stop().slideUp('normal');
            });
            return this
        }
    });
})(jQuery); //将jQuery传进去

前台调用

$.nav('#ffec1c');

注意：全局方法是用于全局的，也就是整个页面，是在$上使用的，如：$.nav('#ffec1c');

 

 

 

 

封装局部插件方法jquery.nav.js

fn.extend()方法，用jQuery的fn.extend()方法，fn.extend()给jQuery拓展一个局部方法，接受一个参数，参数是一个对象

//自定义插件
//;防止上面其他文件的代码缺少符号出错
;(function ($) {  //自我执行函数
    //局部封装，用于局部，如$('.list li').eq(0).nav();
    //局部封装，用jQuery的fn.extend()方法，fn.extend()给jQuery拓展一个局部方法，接受一个参数，参数是一个对象
    //对象里以键值对方式传值，第一个属性名称也就是要拓展方法名称，第二个参数是函数，函数里就是执行代码
    $.fn.extend({
        'nav': function () {  //还可以接受参数来操作
            $(this).find('.nav').css({   //注意是局部的，所以要用this，this代表连缀前面指定的元素本身
                'list-style': 'none',
                'margin': 0,
                'padding': 0,
                'display': 'none'
            });
            $(this).hover(function () {
                $(this).find('.nav').slideDown('normal');
            }, function () {
                $(this).find('.nav').stop().slideUp('normal');
            });
            return this;
        }
    });
})(jQuery); //将jQuery传进去

前台调用

$('.list li').eq(0).nav();

注意：局部方法是用于某一个指定元素的，在指定元素上使用，如：$('.list li').eq(0).nav();

局部方法里的this代表连缀前面指定的元素本身，如上列this代表，class为list 下面的li 第一个