拓展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)

• 浏览器输入网址到看到的过程