jQuery API の jQuery . noConflict() は、jQueryのエイリアス（別名）である「$」を無効にするメソッド。
他のライブラリと併用するときに便利だ。
記述方法
jQuery . noConflict();
jQueryのエイリアス（別名）である「$」を無効にする。
記述例１
jQueryのエイリアス（別名）である「$」を無効にし、jQueryを使うときは、「$」ではなく、「jQuery」としなければならない例。
jQuery . noConflict();
jQuery( '#jquery-sample' ) . hover(
function () {
jQuery( this ) . fadeOut( 500 );
jQuery( this ) . fadeIn( 500 );
}
);
jQuery( '#jquery-sample' ) . hover(
function () {
jQuery( this ) . fadeOut( 500 );
jQuery( this ) . fadeIn( 500 );
}
);
idが「jquery-sample」の要素に、カーソルを合わせるか、カーソルを外すと、その要素をフェードアウト、フェードインする。
記述例２
jQueryのエイリアス（別名）である「$」を無効にし、代わりに「j」を、jQueryのエイリアス（別名）として使用できるようにする例。
var j = jQuery . noConflict();
j( '#jquery-sample' ) . hover(
function () {
j( this ) . fadeOut( 500 );
j( this ) . fadeIn( 500 );
}
);
j( '#jquery-sample' ) . hover(
function () {
j( this ) . fadeOut( 500 );
j( this ) . fadeIn( 500 );
}
);
idが「jquery-sample」の要素に、カーソルを合わせるか、カーソルを外すと、その要素をフェードアウト、フェードインする。
記述例３
jQueryのエイリアス（別名）である「$」を無効にしたが、関数のスコープ内では、jQueryのエイリアス（別名）として、「$」を使用できるようにする例。
jQuery . noConflict();
( function( $ ) {
$( function() {
$( '#jquery-sample' ) . hover(
function () {
$( this ) . fadeOut( 500 );
$( this ) . fadeIn( 500 );
}
);
} );
} )( jQuery );
( 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>
<!--
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>
<!--
#jquery-sample {
width: 100%;
height: 200px;
background-color: yellow;
border-color: gray;
border-radius: 10px;
}
-->
</style>
HTML
<div id="jquery-sample"></div>