jQueryのメソッドを拡張するコードを紹介します。
jQueryのextendメソッド, fn.extendメソッドを利用すると、jQueryのメソッドを拡張できます。
複数のメソッドを定義する場合は下記
下記の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のメソッドは
または
の記述で呼び出せます。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"が画面に表示されることが確認できます。
