拓展jquery 方法

拓展jquery

轉載地址

1.給jquery綁定方法

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  <script>
    // 方法 1
    // jQuery.方法名 = function (參數) {
    //     // 執行語句
    // }
    jQuery.log = function (t) {
      console.log(t)
    }
    $.log('log方法')

    // 方法 2
    // jQuery.extend({ 
    //     方法名1: function (參數) {
    //         //  方法名1 執行語句
    //     }, 
    //     方法名2: function (參數) {
    //         //  方法名2 執行語句
    //     },
    // });
    jQuery.extend({
      log: function (t) {
        console.log(t)
      }
    })

    $.log('log方法')

  </script>

2.給dom元素綁定方法

//示例 jQuery.fn.方法名 = function(參數){}
jQuery.fn.bgRed = function(){
    this.css("background-color", "red")
}
jQuery.("#demo").bgRed();

3.工作中寫法

 //  爲什麼要用(function(jq))(jQuery);
    // 這是爲了防止定義的變量或者方法名重複，修改到jQuery源碼
    (function ($) {
        // 對象方法
        $.jqMethod = function (value) {
            // 自定義參數，json格式，用於在方法中使用
            console.log(value);
        }    
	// dom 元素方法   這個地方如果要添加多個dom方法 可以藉助extend ，如下
    $.extend($.fn, {
        domMethod2: function (value) { // 方法1
            console.log(value);
        },
        domMethod3:function (option) { // 方法2
            // 執行語句
        }
});
})(jQuery);
 
//調用
$.jqMethod("jqMethod測試"); // 輸出jqMethod測試
$("#demo").domMethod2("domMethod2測試"); // 輸出domMethod2測試

• rem

• 手機端適應

• 瀏覽器緩存 (disk cache) (memory cache)

• 瀏覽器輸入網址到看到的過程