Jquery入門記事一覧
Jquery 入門 その1 要素にアクセスするJquery 入門 その2 要素にアクセスするメソッドJquery 入門 その3 メソッドチェーンJquery 入門 その4 プラグイン（$.fn.extend）の作り方Jquery 入門 その5 プラグイン（$.extend）のサンプルJquery 入門 その6 イベント処理Jquery 入門 その7 繰り返し処理Jquery 入門 その8 DOMツリーへのアクセスを意識するJquery 入門 その9 非同期通信で用いるデータJquery 入門 その10 非同期通信とはJquery 入門 その11 非同期通信のサンプル1Jquery 入門 その12 非同期通信のサンプル2Jquery 入門 その13 非同期通信のサンプル3 $.post,$.getJquery 入門 その14 非同期通信実践例(formをpostしphpで処理)サンプルのソースコードのダウンロード(下のURLをブラウザで入力してください。)
http://html5.web.fc2.com/jquery_new/jquery_new.zip
---------------------------------------------------------------------
前回の記事では、jqueryのメソッドの多くはjqueryオブジェクトを返すことを説明いたしました。
この機能を利用してプラグイン(自作関数のようなもの)を作ることができます。
プラグインを作成するには、以下の2つの方法があります。
$.extend(object)
$.fn.extend(object)
jQueryの日本語リファレンスなどを見ると、
$.extend(object)は、jQuery名前空間に新たなメソッドを追加する、
$.fn.extend(object)は、jQueryオブジェクトのプロトタイプを拡張する
と書かれています。正直意味不明だと思います。
そこで、個人的によく使う$.fn.extend(object)の方を説明したいと思います。
$.fn.extendで何ができるかというと、
jQueryのオブジェクトに対するメソッドを作ることができます。
つまり、
$("#method").jisakuPlugin();というようなメソッドを作ることができます。
というわけで、簡単な
サンプルを作ってみました。
定義されたjisakuPluginを、
$("button").jisakuPlugin().css("background-color","#FFCCCC");
で実行しています。Pluginは戻り値として、自分自身を返すと、サンプルのようにメソッドチェーンもできるようになります。
まずは、一度作成してみてください。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Jquery 入門 その4 $.fn.extendのサンプル</title>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
<!--
$(function() { //DOMツリーがREADYになったら実行する
$.fn.extend({
jisakuPlugin: function() {
// 指定した要素に対して処理を実行
this.each(function(index) {
$(this).click(function(){
$(this).css("background-color","#CCCCFF");
alert('jisakuPluginです！' + index + '個目のボタンをクリックしました。');
});
});
return this;
}
});
$("button").jisakuPlugin().css("background-color","#FFCCCC");
});
// -->
</script>
</head>
<body>
<h1>Jquery メソッドチェーンのサンプル</h1>
<button>0個目のボタン</button>
<button>1個目のボタン</button>
<button>2個目のボタン</button>
<hr>
<footer>
<small><a href="http://html5.blog20.fc2.com/" target="_blank">HTML5、JavaScript、Android を勉強しよう</a></small>
</footer>
</body>
</html>
