jQuery 插件写法

2022-10-30 20:25:31

一、jQuery插件的类型

1. jQuery方法

很大一部分的jQuery插件都是这种类型，由于此类插件是将对象方法封装起来，在jQuery选择器获取jQuery对象过程中进行操作，从而发挥jQuery强大的选择器优势。

2. 全局函数法

可以把自定义的功能函数独立附加到jQuery命名空间下，从而作为jQuery作用域下的一个公共函数使用。
但全局函数没有被绑定到jQuery对象上，故不能在选择器获取的jQuery对象上调用。需要通过jQuery.fn()或$.fn()方式进行引用。

3. 选择器法

如果觉得jQuery提供的选择器不够用或不方便的话，可以考虑自定义选择器。

二、jQuery插件的机制

1. jQuery.extend()方法

这种方法能够创建全局函数或选择器。

所谓全局函数，就是jQuery对象的方法，实际上就是位于jQuery命名空间内部的函数，有人把这类函数称为实用工具函数，这些函数都有一个共同特征，就是不直接操作DOM元素，而是操作Javascript的非元素对象，或者执行其他非对象的特定操作，如jQuery的each()函数和noConflict()函数。

例如，在jQuery命名空间上创建两个公共函数：

jQuery.extend({

min : function(a,b){

return a<b?a:b;

},

max : function(a,b){

return a<b?b:a;

}

})

$(function(){

$("input").click(function(){

var a = prompt("请输入一个数：");

var b = prompt("再输入一个数：");

var c = jQuery.min(a,b);

var d = jQuery.max(a,b);

alert("最大值是：" + d + "\n最小值是：" + c);

});

})

<input type="button" value="jQuery扩展测试" />

jQuery.extend()方法除了可以创建插件外，还可以用来扩展jQuery对象。

例如，调用jQuery.extend()方法把对象a和对象b合并为一个新的对象，并返回合并对象将其赋值给变量c：

var a = {name : "aaa",pass : 777};

var b = {name : "bbb",pass : 888,age : 9};

var c = jQuery.extend(a,b);

$(function(){

for(var name in c){

$("div").html($("div").html() + "<br />"+ name + ":" + c[name]);

}

})

如果要向jQuery命名空间上添加一个函数，只需要将这个新函数制定为jQuery对象的一个属性即可。其中jQuery对象名也可以简写为$，jQuery.smalluv==$.smalluv。

例如，创建jQuery全局函数：

jQuery.smalluv = {

min : function(a,b){

return a<b?a:b;

},

max : function(a,b){

return a<b?b:a;

}

}

$(function(){

$("input").click(function(){

var a = prompt("请输入一个数:");

var b = prompt("再输入一个数:");

var c = jQuery.smalluv.min(a,b);

var d = jQuery.smalluv.max(a,b);

alert("最大值是：" + d + "\n最小值是：" + c);

});

})

2. jQuery.fn.extend()方法

这种方法能够创建jQuery对象方法。

举一个最简单的jQuery对象方法例子：

jQuery.fn.test = function(){

alert("jQuery对象方法");

}

$(function(){

$("div").click(function(){

$(this).test();

});

})

三、总结

在jQuery匿名函数中,采用jQuery.extend();方法创建jQuery插件
在jQuery匿名函数中,采用对象.属性=函数的方式创建jQuery插件

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

    <head>

        <title>最简单的jquery插件</title>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <script type="text/javascript" src="../res/jquery/jquery-1.4.4.min.js"></script>

        <script type="text/javascript">

            (function($) {

                jQuery.extend({//写法1

                    a: function(h){

                        $("#ad").html(h);

                    },

                    b:function(h){

                        alert(h);

                    }

                })

            })(jQuery);

            (function($) {//写法2

                jQuery.a=function(h){

                    $("#ad").html(h);

                }

                jQuery.b=function(h){

                    alert(h);

                }

            })(jQuery);

            $(document).ready(function(){

                $.a("abc");

                $.b("xyz");

            });

        </script>

    </head>

    <body>

        <h3>最简单的jQuery插件</h3>

        <div id="ad"></div>

    </body>

</html>

码农公寓