jquery.fn.extend與jquery.extend的用法以及區別

時間 2019-12-09

標籤 jquery.fn.extend jquery extend jquery.extend 用法以及區別欄目 JQuery 简体版

原文原文鏈接

概念：html

jQuery.extend(object)——爲擴展jQuery類自己.爲類添加新的方法。jquery

jQuery.fn.extend(object)——給jQuery對象添加方法。函數

直接下代碼:this

(jquery.fn.extend)prototype

<body>
    <input id="input1" type="text"/>
</body>
    <script>
            //自定義方法 jQuery.fn.extend(object);
            // 對jQuery.prototype進得擴展，就是爲jQuery類添加「成員函數」
            $.fn.extend({
                alterWhileClick1: function () {
                    $(this).click(function () {
                        alert($(this).val());
                    });
                }
            });
    //或者以下自定義也能夠
    $.fn.alterWhileClick2 = function () {
        $(this).click(function () {
            alert($(this).val());
        });
    }
    //直接引用該方法
    $("#input1").alterWhileClick1();
 </script>

再看(jquery.extend)htm

<body>
    <input id="input1" type="text"/>
</body>
<script>
    //或者
    $.extend({
        alterWhileClick3: function (a,b) {
//            $(this).click(function () {
//                alert($(this).val());
//                return false;
//            });
            return a+b;
        }
    });
    //引用方法並賦值
    var a = $.alterWhileClick3(3,4);
    $("#input1").val("答案是:"+a);
</script>

區別：jQuery.extend是return返回結果，而jQuery.fn.extend無返回值，但能夠在該函數裏定義事件。對象

拓展相關知識(自定義方法): blog

//自定義方法加載前綴名  （好處:能夠封裝成自家公司的，以公司的前綴爲主）如:myMethod.js
window.myMethod = window.myMethod || {};
//定義error方法名
myMethod.error=function(){
   //alert("哎呀,加載出錯了"); 
   return "哎呀,加載出錯了";
}
//引用方法無返回值
//myMethod.error();
//引用方法有返回值
 var a = myMethod.error();
}

注：本篇僅簡潔講述二者的用法與區別，想更深一步瞭解的請參照該博文http://www.cnblogs.com/wyjgreat/archive/2011/07/19/2110754.html事件