jQuery와 다른 라이브러리 간의 충돌을 해결하는 방법

jQuery 라이브러리에서는 거의 모든 플러그인이 네임스페이스로 제한됩니다. 일반적으로 전역 개체는 jQuery 네임스페이스에 잘 저장되므로 jQuery 라이브러리를 다른 js 라이브러리(Prototype, MooTools 또는 YUI)와 함께 사용할 때 충돌이 없습니다.

참고: 기본적으로 jQuery는 "$"를 자체 단축키로 사용합니다.

우리가 사용하는 다른 JavaScript 라이브러리도 "$"를 단축키로 사용할 때, 이때 jQuery와 다른 라이브러리 간의 충돌을 해결하는 방법은 무엇입니까?

1. 다른 라이브러리 다음에 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 = &#39;none&#39;;          //使用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

이것은 최소한의 코드를 변경하여 완전한 호환성을 달성하는 가장 이상적인 방법입니다.

2. jQuery 라이브러리를 다른 라이브러리보다 먼저 가져옵니다.

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 = &#39;none&#39;;        //使用prototype
</script>

위 내용은 jQuery와 다른 라이브러리 간의 충돌을 해결하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!