Jquery에서 $는 JQuery의 별칭입니다. $가 사용되는 모든 위치는 JQuery로 대체될 수도 있습니다. 예를 들어 $('#msg')는 JQuery('#msg')와 동일합니다. 그러나 여러 js 라이브러리를 도입하고 $ 기호가 다른 js 라이브러리에도 정의되어 있으면 $ 기호를 사용할 때 충돌이 발생합니다. 다음은 jquery.js와 Prototype.js라는 두 개의 라이브러리 파일을 도입한 예입니다.
첫 번째 경우: jquery.js는 다음과 같이 프로토타입.js 다음에 도입됩니다.
이 경우 js 코드에 다음을 작성합니다.
$('#msg').hide();
두 번째 경우: jquery.js는 다음과 같이 프로토타입.js보다 먼저 도입됩니다.
<script src="jquery.js" type="text/javascript"/> <script src="prototype.js" type="text/javascript"/>
$('#msg').hide();
다음에서는 js 라이브러리 파일을 도입하는 첫 번째 경우, 서로 다른 js 라이브러리에 정의된 $ 기호를 올바르게 사용하는 방법을 먼저 소개합니다.
1. JQuery.noContribute()를 사용하세요
이 메서드의 기능은 Jquery가 $의 소유권을 포기하고 $의 제어권을 프로토타입.js에 반환하도록 하는 것입니다. jquery.js가 나중에 도입되었기 때문에 최종적으로 $에 대한 제어권을 갖게 되는 것은 jquery입니다. 반환 값은 JQuery입니다. 코드에서 이 메서드를 호출한 후에는 $를 사용하여 jquery 메서드를 호출할 수 없습니다. 이때 $는 프로토타입.js 라이브러리에 정의된 $를 나타냅니다. 다음과 같습니다:
이후부터 $는 프로토타입.js에 정의된 $를 나타냅니다. jquery.js의 $는 더 이상 jquery.js, JQuery에서 $의 전체 이름만 사용할 수 있습니다.
jQuery를 충돌 없음 모드로 설정한 후 $에 대한 별칭을 설정할 수 있습니다:
<script src="prototype.js"></script> <script src="jquery.js"></script> <script>var $j = jQuery.noConflict();</script>
<script src="prototype.js"></script> <script src="jquery.js"></script> <script> jQuery.noConflict(); (function($) { // 这里依然可以继续使用 jQuery 的 $ })(jQuery); </script>
2. JQuery 별칭 사용자 정의
첫 번째 방법에서 JQuery.noConstrict() 메서드를 사용한 후 JQuery의 전체 이름만 사용하는 것이 번거롭다면 JQuery의 별칭을 재정의할 수도 있습니다. 다음과 같습니다:
var $j=JQuery.noConflict(); $j('#msg').hide();//此处$j就代表JQuery
3. 명령문 블록을 사용하고 다음과 같이 명령문 블록의 jquery.js에 정의된 $를 계속 사용합니다.
JQuery.noConflict(); JQuery(document).ready(function($){ $('#msg').hide(); //此时在整个ready事件的方法中使用的$都是jquery.js中定义的$. });
(function($){ ..... $('#msg').hide();//此时在这个语句块中使用的都是jquery.js中定义的$. })(JQuery)
<script src="jquery.js" type="text/javascript"/> <script src="prototype.js" type="text/javascript"/> <script type="text/javascript"> (function($){ ..... $('#msg').hide();//此时在这个语句块中使用的都是jquery.js中定义的$. })(JQuery) </script>
코드
<script src="jquery.js" type="text/javascript"/> <script src="prototype.js" type="text/javascript"/> <script type="text/javascript"> (function($){ ..... $('#msg').hide(); //此时在这个语句块中使用的都是jquery.js中定义的$. })(JQuery) </script>