自定义Jquery插件

插件是以 jQuery 的核心代码为基础，编写出复合一定规范的应用程序。
                慕客网各种jQuery插件介绍：jQuery插件——Validation Plugin
                jQuery官网的插件：The jQuery Plugin Registry

按照功能可以分类为三种

  1. 封装对象方法的插件；(也就是基于某个DOM元素的JQuery对象，局部性，实用性最多)

  2. 封装全局函数的插件；（全局性的封装）

  3. 选择器插件。（类似与find()，例如 color(red)来选择所有的红色元素之类)

插件的基本要点

主要用以以解决各种因为插件导致的冲突、错误等问题

  1. 插件名推荐使用 jQuery.[插件名].js，以免和其他 js 文件或者其他库相冲突（可以使用alert($.[插件名])验证是否存在该全局方法）；

  2. 局部对象附加 jQuery.fn 对象上，全局函数附加在 jQuery对象本身上（可以使用alert($(selector).[插件名])验证是否存在该局部方法）；

  3. 插件内部，this 指向是当前的局部对象（通过选择器获取的jQuery对象）；

  4. 可以通过 this.each 来遍历所有元素；

  5. 所有的方法或插件，必须用分号结尾，避免出现问题（为了更稳妥，可在插件头部先加上一个分号）；

  6. 插件应该返回的是 jQuery 对象，以保证可链式操作；

  7. 避免插件内部使用$，如果要使用，使用闭包把传递 jQuery 进去，使插件内部继续使用$作为jQuery的别名。

编写一个插件

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

假设有如下HTML结构

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<ul class="list">
    <li>导航列表1
        <ul class="nav">
            <li>导航列表1</li>
            <li>导航列表2</li>
            <li>导航列表3</li>
            <li>导航列表4</li>
            <li>导航列表5</li>
            <li>导航列表6</li>
        </ul>
    </li>
    <li>导航列表2
        <ul class="nav">
            <li>导航列表1</li>
            <li>导航列表2</li>
            <li>导航列表3</li>
            <li>导航列表4</li>
            <li>导航列表5</li>
            <li>导航列表6</li>
        </ul>
    </li>
</ul>
<!-- 默认已经引入jquery -->
在这里，就是对该插件的使用有了前置的要求：首先html结构是要先定义好的，对于需要hover展示的元素内部下面必须要有ul列表，并且className必须是nav(相当于css所说的钩子，在插件内部就是要根据钩子来执行操作)

开始编写插件，保存为jQuery.nav.js

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
;(function($){
    $.extend({ //插件定义在全局方法上
        "nav" : function (color){//传参，这里只是抛砖引玉，在您编写的时候，参数选项可以更加丰富，例如传入json对象等等
            $('.nav').css({//对展开的下拉列表设置样式，此处在下面进行详细说明
                "list-style" : "none",
                "margin" : 0,
                "padding" : 0,
                "display" : "none",
                "color":color//由用户控制hover时，展现出来列表的文字颜色
            });
            $('.nav').parent().hover(//这里用到了.nav的父节点（就是hover到的元素）
                //因为我们只能在插件要求的范围内进行设定，若是使用了外部的选择器，就违背了这个原则
                function (){
                    $(this).find(".nav").stop().slideDown("normal");//注意我们在这里使用了jquery的动画方法
                },function (){
                    $(this).find(".nav").stop().slideUp("normal");//注意stop()的使用，不然会有类似手风琴效果的出现，但那并不是我们需要的
                });
        }
    });
})(jQuery);

依赖的css代码为：

?
1
2
3
4
5
6
.hover{/*插件必须样式*/
    list-style: none;
    margin:0;
    padding: 0;
    display: none;
}

js调用代码为：

?
1
2
3
4
$('.nav').addClass("hover");//将CSS与jQuery分离开来
$(function  (){
    $.nav("#999");//调用插件实现的全局方法，并且设置其展现背景颜色为#999。
});

效果

效果是实现了，但是所有是 class 是 nav都被影响到了。

变为局部方法

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
;(function($){
    $.fn.extend({//定义为局部方法
        "nav" : function (color){
            $(this).find('.nav').addClass('hover');//上面已经说过了,此时this指向调用该方法的元素
            $(this).find('.nav').css("color",color);//在当前元素下，增加了一次find筛选，实现在对应的元素中执行。
            $(this).find('.nav').parent().hover(
                function (){
                    $(this).find(".nav").stop().slideDown("normal");
                },function (){
                    $(this).find(".nav").stop().slideUp("normal");
                });
            return this;//返回当前的对象
        }
    });
})(jQuery);

html代码不变，调用的js代码变为

?
1
2
3
4
$(function  (){//这里的eq(0)代表只对第一份起到效果，复制后的没有效果。
    //（你可以把上面的find筛选删除之后再试试，您会发现，他又对余下的几份起效果了）
    $(".list").eq(0).nav("red");//调用局部方法
});

总结

以上是一个简单的jQuery插件，全局和局部的区别在于：是把扩展的方法定义在 $.extend()还是在$.fn.extend()里面。在局部里面是根据调用的对象来进行操作，而全局是根据满足的条件来进行操作。
Demo1 Demo2