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"が画面に表示されることが確認できます。
著者
iPentecのプログラマー、最近はAIの積極的な活用にも取り組み中。
とっても恥ずかしがり。
最終更新日: 2024-01-06
作成日: 2016-02-23
