デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
Core:コアとなる仕組み
Selectors:セレクタ
Attributes:属性
Traversing:対象の変更
Manipulation:操作
CSS:スタイルシート
Events:イベント
Effects:演出効果
Ajax:xml等との連携
Utilities:ユーティリティ
Data:データ
Miscellaneous:諸々
Deferred:処理管理
Callbacks:コールバック
Internals:内部処理

jQuery.sub( )jQueryのコピーを作成

構文

jQueryのコピーを作成返値:jQueryオブジェクト
jQuery.sub( )ver1.5〜v1.8.2
※ver1.9で廃止されました

機能

jQuery.subメソッドを利用すると、元のjQueryに影響与えることなく変更することができるjQueryのコピー(サブクラス)を作成できます。これはjQueryオブジェクトではなく、jQuery本体のコピーです。

元のjQueryには変更が及ばないので、プラグインなどを利用している時でも、安心してオリジナルのメソッドやプロパティを追加/変更できるようになります。

しかしjQuery.subメソッドはv1.9で廃止となりました

解説

jQueryのコピーを作成

サンプル(sub/01.html)を開いてbodyタグ内にはbuttonしか無いことを確認して下さい。jQueryでは、まず以下の部分を確認してください。

1行目でjQuery.subメソッドを利用してjQueryのコピー「myQuery」を作成しています。2行目以降では「myQuery」に新しいメソッド「myFunc」を追加しています。このメソッドはセレクタで選択された要素(this)にcssメソッドを利用して背景色をピンクに変更する処理を設定しました。

var myQuery = jQuery.sub();
myQuery.fn.myFunc = function(){
	this.css("background-color", "pink");	
};

実際にmyQueryのmyFuncを利用しているのは以下の部分で、buttonをクリックしたらmyFuncメソッドを実行するようにしています。注意するのはセレクタの部分にjQuery(又は$)ではなく、jQuery.subメソッドによってコピーした「myQuery」を利用している点です。myFuncメソッドを追加したのはmyQueryですから、myQueryでないとmyFuncメソッドは利用できません。

$("button").click(function(){
	myQuery("body").myFunc();
})

結果として、buttonをクリックするとセレクタで指定したbody要素の背景色がピンクになります。