jQuery 라이브러리에서는 거의 모든 플러그인이 네임스페이스로 제한됩니다. 일반적으로 전역 개체는 jQuery 네임스페이스에 잘 저장되므로 jQuery 라이브러리를 다른 js 라이브러리(Prototype, MooTools 또는 YUI)와 함께 사용할 때 충돌이 없습니다.
참고: 기본적으로 jQuery는 "$"를 자체 단축키로 사용합니다.
우리가 사용하는 다른 JavaScript 라이브러리도 "$"를 단축키로 사용할 때, 이때 jQuery와 다른 라이브러리 간의 충돌을 해결하는 방법은 무엇입니까?
1. 다른 라이브러리 다음에 jQuery 라이브러리를 가져옵니다.
다른 라이브러리와 jQuery 라이브러리가 로드된 후 jQuery를 호출할 수 있습니다. noContribute() 함수는 $ 변수의 제어권을 다른 JavaScript 라이브러리에 넘깁니다.
예:
//...省略其他代码 <p id="pp">Text-prototype(将被隐藏)</p> <p>Text-jQuery(将被绑定单击事件)</p> <!-- 引入prototype --> <script src="lib/prototype.js" type="text/javascript"></script> <!-- 引入jQuery --> <script src="../../scripts/jquery.js" type="text/javascript"></script> <script> jQuery.noConflict(); //将变量$的控制权让渡给prototype.js jQuery(function(){ //使用jQuery jQuery("p").click(function(){ alert( jQuery(this).text() ); }) }) $("pp").style.display = 'none'; //使用prototype隐藏元素 </script>
그런 다음 프로그램에서 jQuery() 함수를 jQuery 개체 제조 공장으로 사용할 수 있습니다.
(2) 사용자 정의 단축키
jq, $j 등과 같은 대체 이름을 사용자 정의할 수 있습니다. 예:
var $j = jQuery.noConflict(); //自定义一个快捷方式 $j(function(){ //使用jQuery,利用自定义快捷方式——$j $j("p").click(function(){ alert( $j(this).text() ); }) }) $("pp").style.display = 'none'; //使用prototype.js隐藏元素
(3) 다른 라이브러리와 충돌하지 않고 $ 사용
jQuery에 대한 이러한 대체 이름을 사용자 정의하지 않으려면 다른 라이브러리의 $() 메서드에 관계없이 $를 사용하고 싶을 수도 있습니다. 다른 라이브러리와 충돌하지 않으려면 다음 두 가지 솔루션을 사용할 수 있습니다.
첫 번째:
jQuery.noConflict(); //将变量$的控制权让渡给prototype.js jQuery(function($){ //使用jQuery设定页面加载时执行的函数 $("p").click(function(){ //在函数内部继续使用 $()方法 alert( $(this).text() ); }) }) $("pp").style.display = 'none'; //使用prototype
두 번째:
jQuery.noConflict(); //将变量$的控制权让渡给prototype.js (function($){ //定义匿名函数并设置形参为$ $(function(){ //匿名函数内部的$均为jQuery $("p").click(function(){ //继续使用 $ 方法 alert( $(this).text() ); }); }); })(jQuery); //执行匿名函数且传递实参jQuery $("pp").style.display = 'none'; //使用prototype
이것은 최소한의 코드를 변경하여 완전한 호환성을 달성하는 가장 이상적인 방법입니다.
jQuery 라이브러리를 다른 라이브러리보다 먼저 가져오면 $()의 제어는 기본적으로 나중에 가져오는 JavaScript 라이브러리에 속합니다. "jQuery"를 직접 사용하여 일부 작업을 수행할 수 있습니다. 동시에 $() 메서드를 다른 라이브러리에 대한 바로 가기로 사용할 수 있습니다. 여기서는 jQuery.noConflect() 함수를 호출할 필요가 없습니다. 예:
<!-- 先导入jQuery --> <script src="../../scripts/jquery.js" type="text/javascript"></script> <!-- 后导入prototype --> <script src="lib/prototype.js" type="text/javascript"></script> <p id="pp">Test-prototype(将被隐藏)</p> <p >Test-jQuery(将被绑定单击事件)</p> <script> jQuery(function(){ //直接使用 jQuery ,无需调用"jQuery.noConflict()"函数 jQuery("p").click(function(){ alert( jQuery(this).text() ); }); }); $("pp").style.display = 'none'; //使用prototype </script>
위 내용은 jQuery와 다른 라이브러리 간의 충돌을 해결하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!