jQuery . noConflict()

jQuery API の jQuery . noConflict() は、jQueryのエイリアス(別名)である「$」を無効にするメソッド。

他のライブラリと併用するときに便利だ。

記述方法

jQuery . noConflict();

jQueryのエイリアス(別名)である「$」を無効にする。

記述例1

jQueryのエイリアス(別名)である「$」を無効にし、jQueryを使うときは、「$」ではなく、「jQuery」としなければならない例。

jQuery . noConflict();
jQuery( '#jquery-sample' ) . hover(
    function () {
        jQuery( this ) . fadeOut( 500 );
        jQuery( this ) . fadeIn( 500 );
    }
);

idが「jquery-sample」の要素に、カーソルを合わせるか、カーソルを外すと、その要素をフェードアウト、フェードインする。

記述例2

jQueryのエイリアス(別名)である「$」を無効にし、代わりに「j」を、jQueryのエイリアス(別名)として使用できるようにする例。

var j = jQuery . noConflict();
j( '#jquery-sample' ) . hover(
    function () {
        j( this ) . fadeOut( 500 );
        j( this ) . fadeIn( 500 );
    }
);

idが「jquery-sample」の要素に、カーソルを合わせるか、カーソルを外すと、その要素をフェードアウト、フェードインする。

記述例3

jQueryのエイリアス(別名)である「$」を無効にしたが、関数のスコープ内では、jQueryのエイリアス(別名)として、「$」を使用できるようにする例。

jQuery . noConflict();
( function( $ ) {
    $( function() {
        $( '#jquery-sample' ) . hover(
            function () {
                $( this ) . fadeOut( 500 );
                $( this ) . fadeIn( 500 );
            }
        );
    } );
} )( jQuery );

idが「jquery-sample」の要素に、カーソルを合わせるか、カーソルを外すと、その要素をフェードアウト、フェードインする。

実装例(サンプル)

実装例(サンプル)の動作について

黄色のボックス要素に、カーソルを合わせるか、カーソルを外すと、黄色のボックス要素をフェードアウト、フェードインする。

実装例(サンプル)のソースコード

JavaScript

<script type="text/javascript">
<!--
jQuery( function() {
    jQuery . noConflict();
    ( function( $ ) {
        $( function() {
            $( '#jquery-sample' ) . hover(
                function () {
                    $( this ) . fadeOut( 500 );
                    $( this ) . fadeIn( 500 );
                }
            );
        } );
    } )( jQuery );
} );
// -->
</script>

CSS

<style>
<!--
#jquery-sample {
    width: 100%;
    height: 200px;
    background-color: yellow;
    border-color: gray;
    border-radius: 10px;
}
-->
</style>

HTML

<div id="jquery-sample"></div>

スポンサード リンク

カテゴリー: API, Core, JavaScript, jQuery, その他諸々, セットアップ・メソッド タグ: パーマリンク