[JavaScript] [jQuery] jQueryのメソッド拡張 - extend を利用したjQueryの拡張
このページのタグ:[JavaScript] [jQuery]
jQueryのメソッドを拡張するコードを紹介します。

概要

jQueryのextendメソッド, fn.extendメソッドを利用すると、jQueryのメソッドを拡張できます。

書式

$.extend({
  (メソッド名) : function (){
    ....
  }
})

複数のメソッドを定義する場合は下記
$.extend({
  (メソッド名1) : function (){
    ....
  },
  (メソッド名2) : function (){
    ....
  },
  (メソッド名3) : function (){
    ....
  },
  .....
  (メソッド名n) : function (){
    ....
  }
})

プログラム

コード

下記のHTMLファイルを作成します。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
  <script type="text/javascript" src="jquery-2.2.1.js"></script>
	<meta charset="utf-8" />
  <script type="text/javascript">
    $.extend(
      {
        addPlusOne: function (input) {
          return input + 1;
        },
        addMinusOne: function (input) {
          return input - 1;
        }
      }
      );

    $(window).load(function () {
      var pv = $.addPlusOne(120);
      var mv = $.addMinusOne(36);

      $("#output").html(pv + "<br/>" + mv + "<br/>");
    });

  </script>
</head>
<body>
  <div id="output"></div>
</body>
</html>

解説

下記コードにより、jQueryのメソッドの拡張をします。今回は、addPlusOne(), addMinusOne() の2つのメソッドを追加します。メソッドの実装はシンプルで、addPlusOne()メソッドは第一引数に1を加えた値を返し、addMinusOne()メソッドは第一引数に1を引いた値を返します。

$.extend(
  {
    addPlusOne: function (input) {
      return input + 1;
    },
    addMinusOne: function (input) {
      return input - 1;
    }
  }
);

下記コードはloadイベントのハンドラであり、ページ表示時に実行されます。
拡張されたjQueryのメソッドは
$.(メソッド名)();
または
jquery.(メソッド名)();
の記述で呼び出せます。addPlusOne(), addMinusOne()の戻り値を pv, mv 変数に格納し画面に表示します。今回のコードでは、addPlusOneメソッドに120, addMinusOneメソッドに36を与えたので、画面に表示される結果は、"121" と "35" になります。

    $(window).load(function () {
      var pv = $.addPlusOne(120);
      var mv = $.addMinusOne(36);

      $("#output").html(pv + "<br/>" + mv + "<br/>");
    });

実行結果

上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。引数に1を加算した値、"121"と引数から1を引いた値"35"が画面に表示されることが確認できます。


登録日 :2016-02-23    最終更新日 :2016-02-23
このページのタグ:[JavaScript] [jQuery]
Japanese
プライバシー    iPentecについて
iPentec all rights reserverd. (ISDC)