当サイトはJavaScriptが有効に設定されていないと正しく表示されません。【サンプルデモ】prototypeとjQuery - Webデザインラボ

【サンプルデモ】prototypeとjQuery

<script>
//jQueryの$をj$に置き換える
var j$ = jQuery.noConflict(true);//引数にtrueを指定すると$jQuery共に無効になる

j$(function() {
//prototypeの動作確認
$('pt').style.border = '1px solid #9fb7d4';
$('pt').style.background = '#d49fc2';
$('pt').style.padding = '10px';
//jQueryの動作確認
j$('#jq').css('border','1px solid #d49fc2');
j$('#jq').css('background-color','#9fb7d4');
j$('#jq').css('padding','10px');
});
</script>

<p id="pt">prototypeでCSSが動作しています。</p>
<p id="jq">jQueryでCSSが動作しています。</p>

サンプルデモ

 prototypeでCSSが動作しています。


 jQueryでCSSが動作しています。


 prototypeとjQueryが競合(コンフリクト)せずに動作していることがわかります。