Rails を使っていると、デフォルトで prototype.js が組み込まれています。ですが、やっぱり jQuery を使いたくなることもあって結局両方組み合わせて使う、みたいなことになったりしたりします(よね?)。あ、どうもささたつです。

ということで今回は両方使うときの話です。

ちなみに両方を使いたい場合は $() がコンフリクトするのでこのようにして jQuery 側の $() を置き換えることで解決できますー。どちらも $() ですが、prototype.js の場合はあくまで document.getElementByID の単なるショートカットでDOMオブジェクトを返すのに対し、jQuery の場合は独自のオブジェクト(jQueryオブジェクト)を返します。

prototype.js:DOMオブジェクトを返す
jQuery:独自のオブジェクト(jQueryオブジェクト)を返す

ただ、両方つかっていると何だか混乱してきます。「あれ?id要素を指定するときに#付けるのどっちだっけ?」とか……

そこで自分用リファレンスとしてまとめておきたいと思います!!例えばこのようなid要素とclass要素があったとしましょう。

<div id="hoge">id要素だよ〜</div>
<div class="fuga">class要素だよ〜</div>

これを prototype.js と jQuery で扱うにはどうしたらよいでしょうか?

prototype.js (1.6.0.3)
console.debug( $("hoge") ); // <div id="hoge">

console.debug( $("hoge").innerHTML ); // id要素だよ〜
$("hoge").innerHTML = "prototype.js でid要素変更したよ〜";
console.debug( $("hoge").innerHTML ); // prototype.js でid要素変更したよ〜

console.debug( $$(".fuga") ); // [ div.fuga ]

jQuery (1.4.2)
console.debug( $("#hoge") ); // [ div#hoge ]

console.debug( $("#hoge").html() ); // id要素だよ〜
$("#hoge").html("jQuery でid要素書き換えたよ〜");
console.debug( $("#hoge").html() ); // jQuery でid要素書き換えたよ〜

console.debug( $(".fuga") ); // [ div.fuga ]

prototype.js:#は付けない。DOMオブジェクトのメソッドやプロパティが使える
jQuery:#を付ける。独自のオブジェクト(jQueryオブジェクト)なのでメソッドも特殊

それ以外にもこんな違いがあります。テキストフォームの場合。

<input type="text" value="data_1" id="input" />

prototype.js (1.6.0.3)
console.debug( $("input").value ); // data_1
$("input").value = "data_2";
console.debug( $("input").value ); // data_2

jQuery (1.4.2)
console.debug( $("#input").val() ); // data_1
$("#input").val("data_2");            
console.debug( $("#input").val() ); // data_2

prototype.js:value がそのまま使える
jQuery:value ではなく val を使う。ややこしや〜

ということで、「あれ?この処理どうやるんだっけ?」ってならないように気をつけましょう♪(なったときはこのページを見て思い出しましょうw)
このエントリーをはてなブックマークに追加