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

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

jQuery.noConflict()他のプラグインとの競合を防ぐ

構文

jQuery代わりの$を使えなくする返値:objectオブジェクト
jQuery.noConflict( [true/false] )ver1.0〜

機能

jQueryの省略形である$は他のプラグイン(prototype.js等)でも利用されます。noConflictメソッドを実行するとjQueryを$と省略することができなくなり、他のプラグインと$が競合することを避けることができます。いわばjQueryが$の利用を他のプラグインに譲るのです。

基本的には引数は必要ありません。引数にtrueを設定することで「jQuery」すら利用できなくすることが可能になります。その際は返値でobjectオブジェクトを受け取り、それを「jQuery」の代わりに利用します(以下の解説を参照)。

解説

他のプラグインに$を使わさせたいので、jQueryで$を使うのを辞退する

$は他のプラグイン(prototype.js等)でも利用されるため、jQueryと合わせて利用すると$が競合してしまいます。jQueryはnoConflictメソッドを利用し、自ら$を利用することをやめることで競合を避けることができます。サンプル(noConflict/01.html)を開いてjQueryの以下の部分を確認して下さい。

jQuery.noConflict();		
$(function() {
	alert("ready!");
});

1〜3行目でjQuery(function)を利用してDOMの読込が完了したら、アラートで「ready!」と表示するようにしていますが、アラートが表示されません。これは1行目のnoConflictメソッドによって$がjQueryとして利用できなくなったためです。

$は利用できなくなりますが「jQuery」は利用できます。サンプル(noConflict/02.html)を開くとアラートが表示されます。アラートを閉じてjQueryを確認してください。以下のように$と省略せずにjQueryを利用して記述してします。

jQuery.noConflict();		
jQuery(function() {
	alert("ready!");
});

jQueryも使えなくする

これは、ほとんど利用されることはないと思うので覚えなくても良いと思います。
サンプル(noConflict/03.html)を開きjQueryを確認してください。jQueryを省略せずに書いているのにアラートが表示されませんでした。これはnoConflictメソッドの引数にtrueを設定するとjQueryも利用できなくなるためです。

jQuery.noConflict(true);
jQuery(function() {
	alert("ready!");
});

jQueryが使えなくなりますが、代わりに返値を受け取り任意の名前に変更できます。
サンプル(noConflict/04.html)を開いて(アラートが表示されます)以下のjQueryを確認して下さい。

myQuery = jQuery.noConflict(true);		
myQuery(function() {
	alert("ready!");
});

上記の1行目で引数にtrueを渡したnoConflictメソッドの返値を「myQuery」という変数で受け取りました。このmyQueryがjQueryの代わりに利用できます。2行目でmyQueryを利用し、アラートが表示されることからmyQueryがjQueryとして機能しているのを確認できます。