noConflict() 메서드 의미
제이쿼리처럼 $ 단축 식별자 사용하는 JS 기반의 다른 프레임워크와 충돌 (= 한쪽 기능 마비) 방지.
$ 기호 사용하는 타 언어와의 충돌 방지
noConflict() 방법1 - $기호 대신 jQuery 사용
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$.noConflict(); // 지금부터는 $기호 대신 jQuery 사용할거야.
jQuery (document).ready(function(){
jQuery ("button").click(function(){
jQuery ("p").text("Homzzang.com");
});
});
</script>
</head>
<body>
<p>홈짱닷컴 주소?</p>
<button>냉큼 보여 줘.</button>
</body>
</html>
결과 보기
noConflict() 방법2 - $기호 대체할 단축 식별자 임의 생성
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
var hz = $.noConflict(); // $기호 대신 hz 사용할거야.
hz (document).ready(function(){
hz ("button").click(function(){
hz ("p").text("Homzzang.com");
});
});
</script>
</head>
<body>
<p>홈짱닷컴 주소?</p>
<button>닁큼 보여줘!</button>
</body>
</html>
결과 보기
noConflict() 방법3 - jQuery와 $기호 동시 사용
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$.noConflict();
jQuery (document).ready(function( $ ){
$ ("button").click(function(){
$ ("p").text("Homzzang.com");
});
});
</script>
</head>
<body>
<p>홈짱닷컴 주소?</p>
<button>제발 알려줘.</button>
</body>
</html>
결과 보기
함수 바깥의 파란색 굵은 글씨 jQuery
함수 안의 매개변수 핑크색 굵은 글씨 $ 기호
PS.
아래처럼 정의 후 사용해도 무방
<scrip> var jQuery =jQuery.noConflict(); </script>
제이쿼리 구버전, 신버전 동시 사용
방법1 - 새 버전만 별도 정의
그누5 구버전 JQUERY <script src="<?php echo G5_JS_URL?>/jquery-1.8.3.min.js"></script> $("선택자")
그누5 신버전 JQUERY
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>var jQuery = $.noConflict(true);</script>
jQuery ("선택자") 형식으로 사용
또는,
방법2 - 각각 별도 정의
<script src="<?php echo G5_JS_URL?>/jquery-1.8.3.min.js"></script> <script>
var jqo = jQuery.noConflict();
</script>
jqo("선택자") 형식으로 사용
<script src="<?php echo G5_JS_URL?>/jquery-1.12.4.min.js"></script>
<script>
var jqn = jQuery.noConflict();
</script>
jqn("선택자") 형식으로 사용
※ 에러 날 수도 있으니, 충분히 테스트 후 사용.
최신댓글