JQ插件寫法 擴展JQ方法

目錄：

1.基本JQ擴展插件js的格式

2.對JQ選中元素的方法的擴展，調用類似於$("selector").myMethod(),這里的myMethod是自己擴展的方法，與.click()同理

3.對JQ自身的方法擴展，調用類似於$.ajax();

 

一、基本JQ擴展插件的格式

一個擴展插件的格式一般是：

(function($){.........})(jQuery);

當然，為了防止壓縮合並等操作時，它前面的js代碼沒有結束分號而引起錯誤，這里可以在前面加個;就是：

;(function($){.........})(jQuery);

傳入參數可以有多個，比如：

;(function($, window,document,undefined){.........})(jQuery,window, document);

引用這種寫法的插件時，務必要在引入jquery本身之后，再引入插件。

 

二、對JQ選中元素的方法的擴展，調用類似於$("selector").myMethod()

 

類似於.click(),.show()這種調用方式的方法。。屬於對jQuery.fn的擴展，所以，擴展自己的方法，這樣寫：

  $.fn.extend({
    myMethod: function () {
    //用this可以拿到調用該方法的jq dom元素
    //do your work
    }
  });

 或者：

  $.fn.myMethod = function(){
    //用this可以拿到調用該方法的jq dom元素
    //do your work
  };

$("#dd").click();

 例如：

封裝一個方法：alertWhileClick，點擊input時控制台打印出當前input輸入框的內容

      $.fn.alertWhileClick = function(){
        $(this).click(function () {
          console.log($(this).val());
        });

調用：

    $("#demo1Input").alertWhileClick();

試一下：

https://hamupp.github.io/gitblog/app/jquery/extendDemo.html

二、對JQ自身的擴展，調用如$.ajax()

  $.extend({
    myMethod: function (param1, param2....需要傳入的參數) {
      //do your work

    }
  });

 

例如擴展一個得到最大最小值的方法：

  $.extend({
    min: function (a, b) {
      //do your work
      return a < b ? a : b;
    },
    max: function (a, b) {
      return a > b ? a : b;
    }
  });

調用如下：

var result = $.max(10,20);//得到10和20中最大的樹