プラグイン全体を(function($) {...})(jQuery);でくくること
プラグインで利用する変数／関数を全てローカルスコープに押し込めることができる
$.fn.メソッド名 = ～でプラグインを定義
$.fnは、jQueryオブジェクトのprototypeオブジェクト。
要は、標準のjQueryオブジェクトに対してインスタンスメソッドを拡張するということ。
function() { ... }の配下では、thisでプラグインを呼び出したときのjQueryオブジェクトを表します
対象の要素にはthisでアクセスする
戻り値はjQueryオブジェクトを返す→メソッドチェーンが使える
(function($) {
$.fn.imageBg = function() {
var $this = this;
//画像URLを取得する
var imgSrc = $this.find('img').attr('src');
//imgタグを非表示にする
$this.find('img').hide();
//背景画像として表示させる
$this.css({
backgroundImage: 'url("' + imgSrc + '")'
});
}
//該当オブジェクト全てに上記メソッドを適用する
$('.thumb').each(function() {
$(this).imageBg();
});
})(jQuery);