ホームページ > ウェブフロントエンド > jsチュートリアル > Jquery_jquery での名前の競合を解決する 5 つのソリューション

Jquery_jquery での名前の競合を解決する 5 つのソリューション

WBOY
リリース: 2016-05-16 17:55:05
オリジナル
1253 人が閲覧しました

多くの JavaScript ライブラリは $ を関数名または変数名として使用するため、jquery も同様に機能します。実際、$ は jquery の単なるエイリアスです。jquery 以外の別の js ライブラリを使用する必要がある場合は、$.noConflict() を呼び出すことで制御をライブラリに戻すことができます。以下に、この問題に対する 5 つの解決策をまとめました。そのうちの 1 つは役に立つでしょう。
例 1:

コードをコピーします コードは次のとおりです:




競合解決 1</ title> <br><!-- プロトタイプの紹介 --> <br><script src="prototype-1.6.0.3.js" type="text/javascript"></script> <! --jQuery の紹介 --> <br><script src="http://www.cnblogs.com/scripts/jquery-1.3.1.js" type="text/javascript"< ;/script> <br><body> <br><p id="pp">テスト<br><p> --- jQuery</p> <br><script type="text/javascript"> <br>jQuery.noConflict() //prototype.js に変数 $ の制御を渡す <br>jQuery( ){ //jQuery を使用します <br>jQuery("p").click(function(){ <br>alert( jQuery(this).text() ); <br>}); <br>$("pp").style.display = 'none' //プロトタイプを使用 <br></html> > <br>例 2: <br><br><br><br><br> コードをコピー <br> </div> <br> コードは次のとおりです。 !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ; <br><head> <div class="codetitle"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <span><title> /title> <a style="CURSOR: pointer" data="36495" class="copybut" id="copybut36495" onclick="doCopy('code36495')"><!-- プロトタイプの紹介 --> <u><script src="prototype-1.6.0.3.js" type="text/javascript"></script> >< !--jQuery の紹介 --> </u><script src="http://www.cnblogs.com/scripts/jquery-1.3.1.js" type="text/javascript"> </ スクリプト> </a><body> </span><p id="pp">テスト</div><p> test-- -jQuery</p> <div class="codebody" id="code36495"><script type="text/javascript"> <br>var $j = jQuery.noConflict() // 短いショートカットをカスタマイズします <br>$j(function) (){ //jQuery を使用します <br>$j("p").click(function(){ <br>alert( $j(this).text() ); <br>}); ); <br>$("pp").style.display = 'none'; // プロトタイプを使用します <br></body> ><br> <br>例 3: <br><br><br><br><br>コードをコピー<br><br><br> コードは次のとおりです:<br><br> <br>< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <br><head> <br><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <br><title>解決策 3< /title> <br><-- プロトタイプの導入 --> <br><script src="text/javascript"></script> ; </div><!-- jQuery を紹介します --> <br><script src="http://www.cnblogs.com/scripts/jquery-1.3.1.js" type="text/javascript "> </script> <br></head> <div class="codetitle"><body> <span><p id="pp">テスト---プロトタイプ</p> <a style="CURSOR: pointer" data="14468" class="copybut" id="copybut14468" onclick="doCopy('code14468')">< p > test---jQuery</p> <u><script type="text/javascript"> </u>jQuery.noConflict(); //prototype.js に制御を移すjQuery(function($){ //jQuery を使用します </a>$("p").click(function(){ //$ メソッドを引き続き使用します </span>alert( $(this).text() ); </div>}) <div class="codebody" id="code14468">}); <br>$("pp").style.display = 'none'; // プロトタイプを使用します <br></script> <br></html> <br><br> <br>例 4: <br><br><br><br><br>コードをコピーします<br><br><br> コードは次のとおりです以下:<br><div class="codebody" id="code53989"> <br><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > <br><html> <br><head> <br><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>競合解決 4





test---プロトタイプ


test---jQuery




<スクリプト src="prototype-1.6.0.3.js" type="text/javascript">
pp">テスト--- プロトタイプ


テスト---jQuery








上記の例はパッケージ化されてダウンロードされています
関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のおすすめ
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート