$.fn.extend和$.extend的用法

$.fn.extend 給jquery物件新增方法，相當於把方法擴充套件到了物件的prototypes上。

$.extend 給jquery類新增方法，可理解為靜態方法，可直接呼叫。

<!doctype html>
<html>
<head>
    <meta charset="urf-8">
    <title>Demo</title>
    <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
    <input id="input1" value="" />
    <input id="input2" value="" />
    <input id="input3" value="" />
    <input id="input4" value="" />

    <script type="text/javascript">
        //$.fn.extend
        $.fn.addTest = function (a, b) {
            return a + b;
        };
        //$.fn.extend
        $.fn.extend({
            mulipTest: function (a, b) {
                return a * b;
            }
        });

        //$.extend
        $.minusTest = function (a, b) {
            return a - b;
        };
        //$.extend
        $.extend({
            divisionTest: function (a, b) {
                return a / b;
            }
        });

        var result = $("#input1").addTest(1, 2);
        $("#input1").val(result);

        var result2 = $("#input2").mulipTest(3, 4);
        $("#input2").val(result2);

        var result3 = $.minusTest(10, 8);
        $("#input3").val(result3);

        var result4 = $.divisionTest(27, 3);
        $("#input4").val(result4);

    </script>
</body>
</html>

結果

$.fn.extend和$.extend的用法

相關推薦