jQueryとprototypeを同時に使う方法時のjQueryの書き方あれこれ
ブログを書こうと、夜な夜な実験したり調べごとしたりしているのですが、
最近眠気に負けて、パソコンに向かったまま寝てしまっているという日々。
以前からあったのですが、最近とくに多くて体中が痛かったりします。
そんな余談はいいとして、先日エントリーした
「ブログでブログパーツやプラグインを入れる際の注意」
のコメントにて、いつもjQuery関連でお世話になっているcyokodogさんが
対処方法を書いてくださいましたので、自分も知っていたのですが
復習ついでに動作確認をしてみました。
2009/02/20 7:10追記
本文の一部を追記しました。
jQuery.noConflict()を記述しない場合
一応jQueryとprototypeがどちらも読み込まれている環境でのお話です。
■ソース
(function($){
$('#test1 button').toggle(function(){
$('#test1 p').slideUp();
},function(){
$('#test1 p').slideDown();
});
})(jQuery);
■プレビュー(たぶん動かない)
ここが隠れたり出たり・・・しません
「クリック」のボタンをクリックするとその下のテキストが消えたり出たりする
そんなスクリプトなのですが、上記の例だとprototype.jsを読み込んでいる環境下だと消えません。
現在prototype.jsが読み込まれている環境下なので、上記サンプルは
クリックしても消えないと思います。
では、どうするのか。
上記のスクリプトを使うにはスクリプトの前に
jQuery.noConflict();を加えれば使える。
2009/02/20 7:10 追記
上記のスクリプトだと、最初にjQuery.noConflict();を加えても動きません。
動作させる方法はこのエントリーの最後に追記しておきましたので
そちらをご覧ください。
この他にも実現する方法がある。
jQuery.noConflict()を記述する
下記のスクリプトにすることでも動作可能になる。
■ソース
jQuery.noConflict()(function($){
$('#test2 button').toggle(function(){
$('#test2 p').slideUp();
},function(){
$('#test2 p').slideDown();
});
});
スクリプトの最初にjQuery.noConflict()を書けばよい。
ひとつの機能ごとにつける際は、上記のような書き方になり、
間に「；」などが入ると動作しなくなる。
■プレビュー
ここが隠れたり出たり
jQuery.noConflict()を記述した際の注意として、最後の(jQuery)は
不必要になるので、そこは先ほどと違うので注意。
間に「；」を入れる場合は最後に(jQUery)が必要。
どちらでも各々使いたい方を使うのがいいでしょう。
jQueryと一緒にライブラリを使う際に設定しましょう。
2009/02/20 7:10追記
cyokodogさんに指摘されて書き忘れに気づいたので、
以下追記しましたです
jQuery.noConflict()を記述しなくても動作可能
Domの読み込みが完了してから動作させるようにしたら
最初のスクリプトでも、prototypeと共存環境下においても使えます！
■ソース
(function($){
$(function(){
$('#test3 button').toggle(function(){
$('#test3 p').slideUp();
},function(){
$('#test3 p').slideDown();
});
});
})(jQuery);
単純に$(function(){・・・});を加えることで
jQuery.noConflict()を記述しなくても動作可能になります。
■プレビュー
ここが隠れたり出たり
上記のように、
(function($){
$(function(){
・・・・・・
});
})(jQuery);
このような記述であれば、共存環境下でも動作します。
いつもこのように書いていたのに、どうやら抜けていました（汗）
さらに追記ついでに気づいたのですが、
今回のスクリプト、もっとシンプルにできることに皆さん気づいてました？
(function($){
$(function(){
$('#test button').click(function(){
$('#test p').slideToggle();
});
});
})(jQuery);
なぜオレはslideUpとslideDownを分けてかいた…orz
自分でも疑問でしかたない。。。
slideToggleでまとめられるので、このほうがシンプルですよね。
わけて書くなら、たとえばCSSのOn/Offなどのスクリプトなら
効果的でしたね・・・
(function($){
…
})(jQuery);
が動作しないのは、DOMツリーが構築される前に要素を掴みに行ってるためかと思われます。
なのでnoConflictを実行しても動作しないかと思われます。
$(function(){
・・・・・・
});
})(jQuery);
なら
jQuery(function($){
・・・・・・
});
の方がシンプルで良いかと…
あとnoConflictを実行しないと,prototype.js側の動作に問題が発生するかもしれません。
例）
<head>
<script>
window.$ = function(id){
return document.getElementById(id)
}
window.onload = function(){
$('test').onclick = function(){
alert('click!')
}
}
</script>
<script src="jquery.js"></script>
<script>
jQuery.noConflict()(function($){
$('#test').hover(
function(){$(this).css('background-color', 'red')},
function(){$(this).css('background-color', 'transparent')})
})
</script>
</head>
<body>
<div id="test">test</div>
</body>
上の例だとclick時alertは表示されますが、noConflictの部分を消すとalertは表示されなくなります。
$(function(){
・・・・・・
});
})(jQuery);
なら
jQuery(function($){
・・・・・・
});
の方がシンプルで良いかと…
あとnoConflictを実行しないと,prototype.js側の動作に問題が発生するかもしれません。
例）
<html>
<head>
<script>
window.$ = function(id){
return document.getElementById(id)
}
window.onload = function(){
$('test').onclick = function(){
alert('click!')
}
}
</script>
<script src="../jquery/jquery_1_2_6.js">
</script>
<script>
jQuery.noConflict()(function($){
$('#test').hover(function(){
$(this).css('background-color', 'red')
}, function(){
$(this).css('background-color', 'transparent')
})
})
</script>
</head>
<body>
<div id="test">
test
</div>
</body>
</html>
上の例だとclick時alertは表示されますが、noConflictの部分を消すとalertは表示されなくなります。