jQueryをmootoolsなどの他のライブラリと干渉しないようにする方法まとめ

ブログとかのプラグインでよく分からず使ってる人もいるみたいですし。結論は一番上のやつやってればいいんですけど、というか、プラグインソースは全部こうなってないとだめなんですけど、古いソースコードはそうなっていないものもあったりして（thickboxとか）、思いつく方法全部書き出します。

• カプセル化する（これだけやればOK
• jQuery.noConflictを使う
• $をjQueryに置き換える
• jQueryを使わない
• jQueryだけを使う

カプセル化する（これだけやればOK

プラグインソースを

(function($) {
  // hogehoge
})(jQuery);

で囲むだけ。ソースコードは // hogehoge のところに入れてください。これは簡単に言うと、(function($) { })(jQuery); に囲まれた中では $ = jQuery として扱われるのですね。この中はソースコードの隠蔽が行われていて外からはよく見えなくなっているので、他のライブラリと干渉することもありません。

あとクラス振るとか、しましまテーブルとかそういう簡単なやつは自分で書いてると思いますが

$(function() {
  // hogehoge
});

こんなやつの中に書いてると思いますけど

jQuery(function($) {
  // hogehoge
});

こっちに変えてください。こっちは以前紹介したと思いますけど、そもそも

$(function() { });

っていうのは

$(document).ready(function() { });

の簡易版になってて（ソースコードが短くてすむ）、これの$をjQueryに置き換えたものが

jQuery(document).ready(function($) { });

でさらに短く戻して

jQuery(function($) { });

になるというわけです。

jQuery.noConflictを使う

jQueryが出た当初はこれがよく使われてましたなぁ

var $j = jQuery.noConflict();
$j("hoge").addClass("hage");

つまり$を$jと置き換えるんですね。

$をjQueryに置き換える

超手間がかかりますが $ を jQuery に置き換えていきます。え？一括置換すればいいやん、とか思ってる人はちょっと気をつけてください。正規表現とかjQueryの属性マッチングでも$は使われています。

一括置換したら動かなくなった、っていうのはよくありがちな話っぽいですよ。

jQueryを使わない

なんてことはないです。つまりjQueryを使わなければ干渉する心配もないのです。

jQueryだけを使う

その逆もその通りｄ（ｒｙ