• 회원가입
  • 로그인
  • 구글아이디로 로그인

[Misc] JQ - noConflict() 메서드 ★★★ - javascript (JS) 기반의 다른 프레임워크와의 충돌방지 (= 제이쿼리기호변경 = 제이쿼리 신버전 구버전 동시 사용)

noConflict() 메서드 의미

 

제이쿼리처럼 $ 단축 식별자 사용하는 JS 기반의 다른 프레임워크와 충돌 (= 한쪽 기능 마비) 방지.
즉,
noConflict () 메소드는 다른 스크립트가 $ 기호를 사용할 수 있도록 $ 단축 식별자를 해제시키고
$ 단축 식별자 대신 제이쿼리 전체 이름인  jQuery 사용할 수 있도록 함. (예제 보는 게 이해 빠름)

 

 

 

 $ 기호 사용하는 타 언어와의 충돌 방지 

 

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 는 반드시 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("선택자") 형식으로 사용

 

※ 에러 날 수도 있으니, 충분히 테스트 후 사용.

방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
Effect JQ - animate() 메서드 ★★★★★ - 움직이게 하기. (= 움직임 실행/설정 = 동적 애니 효과…
Effect JQ - stop() 메서드 ★ - 멈추게 하기 (= 슬라이드/애니 중단 = 움직임 멈추기/멈춤 = stop…
Effect JQ - Callback (콜백함수) ★ - 추가 호출 실행 함수
Effect JQ - Chaining 기법 ★ - 여러 메서드 연쇄 실행. (= 메서드 이어서 실행시키기. = 체이닝)
HTML_CSS JQ - text(), html(), val() , attr() 메서드 - (내용얻기/값얻기/속성얻기) (내… 2
HTML_CSS JQ - append(), prepend(), after(), before() 메서드 - (요소추가 / 내용…
HTML_CSS JQ - remove() / empty() 메서드 - (요소제거 / 내용삭제 / 내용비우기) ※ 리무브, 엠…
HTML_CSS JQ - addClass() , removeClass() , toggleClass() , css() 메서드 …
HTML_CSS JQ - css() 메서드 ★★★ - CSS 설정/반환 (= CSS메서드 = 스타일메서드) ※ 스타일 주기
HTML_CSS JQ - width() , height() , innerWidth() , innerHeight() , out…
Traversing JQ - Traversing - 특정요소찾기 (= 특정요소선택 = 트래버싱)
Traversing JQ - parent() , parents() , parentsUntil() 메서드 - 부모요소찾기 (= 부…
Traversing JQ - children() 메서드 - 자식요소찾기 / find() 메서드 - 자손요소찾기
Traversing JQ - 형제찾기 메서드 - siblings() , next() , nextAll() , nextUntil(…
Traversing JQ - 검색필터링 메서드 - first() , last() , eq() , filter() , not() …
AJAX JQ - AJAX (아작스) 소개 - 정의 / 기본예제 / 메서드종류
AJAX JQ - load() 메서드 ★ - 파일 내용 가져오기 (= load메서드 = 아작스 로드메서드)
AJAX JQ - get()/post() 메서드 - 서버에 정보요청 (= get메서드 = 겟메서드 / post메서드 …
Misc JQ - noConflict() 메서드 ★★★ - javascript (JS) 기반의 다른 프레임워크와의 충…
Examples jQuery Examples - 제이쿼리 예제 복습
2/15
목록
찾아주셔서 감사합니다. Since 2012