Prototype.jsとJqueryを共存して使う方法

07/30/2012

Javascriptをかんたんに扱うことができるPrototype.jsとJquery。Webサイト制作に携わっていると色んなプラグインを使うことがあります。その際に問題になるのがコンフリクト(衝突)。Prototype.jsとJqueryは「$」を関数として使っているため、問題を起こしてしまい、そのままでは使えません。

Jqueryの方が後発のライブラリのためか、回避策があります。まず、先にPrototype.jsを読み込みます。そして、その後にJqueryを読み込ませます。

<script type="text/JavaScript" src="prototype.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script>
jQuery.noConflict();
var j$ = jQuery;

var j$ = jQuery;
    j$(function(){
        j$("ul.sub_list").hide();
            j$("ul#ul_menu>li").hover(function(){
                j$("ul:not(:animated)",this).slideDown("fast")
            },
            function(){
                j$("ul",this).slideUp("fast");
            })
     });
</script>
<script type="text/javascript" src="jqueryプラグイン.js"></script>

こうして、この後にjqueryのプラグインを読み込ませます。
その際、jqueryプラグイン内で使用している「$」を「j$」に置き換えます。
こうすることで、Prototype.jsとJqueryの共存が可能です。

スキルアップにMENTA

MENTAはいろんなプロに相談できるNo1メンターサービスです。

僕自身もプロダクトの壁打ち・相談にのっています。個人開発でもコードレビュー、セキュリティ面のチェック、デザイン、広告、コンテンツマーケ、SNS集客について相談する、など使えます。

YouTubeでも発信中！

PROFILE

入江慎吾
あらゆるスキルが学べるパーソナルメンターサービスMENTAの代表／個人開発が好きでこれまでに30個ほどのWEBサービスやアプリを作ってきました／福岡のWEB制作会社勤務→フリーランスエンジニア→法人立ち上げ→M&A億単位の売却を経験。（詳しいプロフィール）