jQueryと他のライブラリを同時に使用する方法


jQuery は、Prototype など $ 関数を使用する他のライブラリと同時に使用することを想定して設計されています。

他のライブラリと同時に使用するには、jQuery による $ 関数の上書きを元に戻す jQuery.noConflict() メソッドを実行します。 実行後、jQuery を使用する場合は、$ 関数 の代わりに jQuery を使用します。（jQuery には別のショートカットを割り当てることもできます。）

また、無名関数の引数に jQuery を渡し、仮引数に $ を使用すれば「(function($) { ... })(jQuery);」、そのコードブロック内で jQuery の $ 関数を使用することが可能です。（そのコードブロック内では、他のライブラリの $ 関数は使用できなくなります。）

例

例えば、Prototype と同時に使用する場合は、以下のように noConflict() を実行します。 

<html>
<head>
    <script src="prototype.js"></script>
    <script src="jquery.js"></script>
    <script>
        // jQueryの $ 参照を無効にします。
        jQuery.noConflict();

        // jQuery を使用する場合は $ の代わりに jQuery を使用します。
        jQuery(function() {
            jQuery("div > p").slideUp("slow");
        });

        // $ は Prototype を使用します。
        $("myId").addClassName("myClass");
    </script>
</head>
<body></body>
</html>

jQuery を別のショートカットに割り当てることもできます。 

<html>
<head>
    <script src="prototype.js"></script>
    <script src="jquery.js"></script>
    <script>
        // jQueryの $ 参照を無効にします。
        jQuery.noConflict();

        // jQuery を $j に割り当てます。
        var $j = jQuery;

        // jQuery を使用する場合は、上で割り当てた $j を使用できます。
        $j(function() {
            $j("div > p").slideUp("slow");
        });

        // $ は Prototype を使用します。
        $("myId").addClassName("myClass");
    </script>
</head>
<body></body>
</html>

(function($) { ... })(jQuery); コードブロック内では、jQuery の $ ショートカットを使用することが可能です。 当然、そのコードブロック内では、他のライブラリの $ ショートカットは使用できなくなります。 

<html>
<head>
    <script src="prototype.js"></script>
    <script src="jquery.js"></script>
    <script>
        // jQueryの $ 参照を無効にします。
        jQuery.noConflict();

        // このコードブロック内の $ は jQueryのショートカットです。
        (function($) {
            $("div > p").slideUp("slow");
        })(jQuery);

        // $ は Prototype を使用します。
        $("myId").addClassName("myClass");
    </script>
</head>
<body></body>
</html>

上記の記法は、$(document).ready(fn) イベントハンドラでも使用することができます。 

<html>
<head>
    <script src="prototype.js"></script>
    <script src="jquery.js"></script>
    <script>
        // jQueryの $ 参照を無効にします。
        jQuery.noConflict();

        // DOMの準備が完了した時点で呼び出されます。
        // このコードブロック内の $ は jQueryのショートカットです。
        jQuery(function($) {
            $("div > p").click(function() {
                $(this).slideUp("slow");
            });
        });

        // $ は Prototype を使用します。
        $("myId").addClassName("myClass");
    </script>
</head>
<body></body>
</html>

ページトップヘ

Stack一覧 (jQuery)
jQueryと他のライブラリを同時に使用する方法


ページトップヘ
スポンサードリンク