实例说明扩展JQuery方式

如何扩展Jquery?

1. 有两种方式来扩展JQuery,分别是:

$.extend(object): 为域名jQuery增加方法,为静态方法,全局方法,任何人都可以调用,调用的时候,需要直接加上$或者jQuery前缀。

$.fn.extend(object): $.fn = $.prototype, 因此可以从这里看出,这张扩展方式是在为每个jQuery对象增加方法,因为每个jQuery对象的实例,都可以获得在这里扩展的方案。调用的时候,不需要添加特殊的前缀,直接选取jQuery对象之后,就可以调用了。

2. jQuery是一个封装的非常好的类,如果使用$(“#id”)可以生成一个jQuery对象,但是注意,jQuery对象并不是真正的HTML标记所对应的对象,而是包含一个标记所对应的数组,数组中的成员才是标记所对应的对象。

下面代码可以演示这两种方式:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
    <title></title>
    <script type="text/javascript" src="../lib/jquery-1.6.3.js"></script>
    <script type="text/javascript">


        $(function() {

            $.extend({
                        staticextend: function() {
                            alert("This is a static extend function, called staticextend.")
                        }
                    });

            $.fn.extend({
                        jqueryextend: function() {
                            alert("all jquery object can call this function, and I am jqueryextend.")
                        }
                    });

            //以静态方法的形式直接使用jquery本身的对象调用
            if ($.staticextend) {
                $.staticextend();
            } else {
                alert("There is not a function called staticextend in Jquery Object itself.");
            }
            //以静态方法的形式直接调用jqueryextend
            if ($.jqueryextend) {
                $.jqueryextend();
            } else {
                alert("There is not a function called jqueryextend in Jquery Object itself. You must get wrong.");
            }

            //获取一个jquery实例
            var jdiv = $(".idtest");
            //一个jquery实例本身包含了一个数组对象
            if (jdiv.length>1) {
                alert("we can see jdiv contains an array object!");
            }

            //如果jquery有多个,需要这样调用。
            jdiv.each(function() {
                alert("I am "+ $(this).attr("id")); //这里不能直接使用this,因为this是htmlelement,没有attr方法。
                if (jdiv.staticextend) {
                    jdiv.staticextend();
                } else {
                    alert("There is not a function called staticextend in jdiv ");
                }

                if (jdiv.jqueryextend) {
                    jdiv.jqueryextend();
                } else {
                    alert("There is not a function called jqueryextend in jdiv. You must get wrong.");
                }
            });

        });
    </script>
</head>
<body>

<div id="one" class="idtest"></div>
<div id="two" class="idtest"></div>
</body>
</html>

如果扩展jquery已经存在的方法,比如拿jqgrid来说,如果你想修改某个方法,让他在方法的执行前后做些事情,这样的话,我们可以这样做:

var oldEditCell = $.fn.jqGrid.editCell;
$.jgrid.extend({
    editCell: function (iRow,iCol, ed){
        var ret;
        // do someting before
        ret = oldEditCell.call (this, iRow, iCol, ed);
        // do something after
        return ret; // return original or modified results
    }
});

在这里,我们覆盖了原始的editCell方法,你可以在这个方法的前后做些事情。


原文地址:https://www.cnblogs.com/kevinhigher/p/2213759.html