1. 먼저 jQuery를 사용하는 방법에 대해 알아보겠습니다. jQuery를 사용하는 방법은 3가지가 있습니다.
1) 기본적인 jQuery 사용 방법
<script type="text/javascript">
$(document).ready(function(){
// 여기에 작성한 코드는 브라우저가 HTML을 해석을 마칠 때까지 기다렸다가 실행합니다.
});
</script>
2) (document).ready 부분을 지워서 축약한 사용 방법
<script type="text/javascript">
$(function(){
// 여기에 작성한 코드는 브라우저가 HTML을 해석을 마칠 때까지 기다렸다가 실행합니다.
});
</script>
3) 다른 자바스크립트 라이브러리와 충돌이 우려될 경우
다른 자바스크립트 라이브러리와 jQuery를 함께 사용할 경우, 다른 자바스크립트 라이브러리에서도 '$' 기호를 객체로 사용하고 있어 충돌이 날 경우
먼저 jQuery.noConflict() 라고 선언한 뒤 jQuery(fuction($){...}) 라고 해주면, 충돌 없이 안전하게 '$' 기호를 사용 할 수 있습니다.
<script type="text/javascript">
jQuery.noConflict();
jQuery(function($){
// 여기에 작성한 코드는 브라우저가 HTML을 해석을 마칠 때까지 기다렸다가 실행합니다.
});
</script>
2. XE에서 jQuery를 사용하는 방법
XE에서는 앞서 말했듯이 먼저 사용한 스크립트 라이브러리에서 사용한 '$' 기호와 충돌이 나기 때문에 jQuery를 $로 바꿔서 사용할 수가 없습니다.
1) $를 jQuery로 바꿔서 사용하기
XE의 jQuery는 $.~ 형태 또는 $(this) 이렇게 사용할 수가 없습니다.
다른 JS와의 충돌을 방지 하기 위하여 jQuery(this) 형태로 사용해야 합니다.
꼭 $를 사용하셔야 한다면,
var $ = jQuery;
하시면 되긴 하지만, 권장하진 않습니다.
2) jQuery.noConlict();jQuery(function($){...}); 선언해서 사용하기
1의 3) 방법입니다.
3) jQuery(fuction($){..}); 이렇게도 됩니다.
[예제]
jQuery(function($){
// click 이벤트 연결
$('.btn_login').click(function () { // h1 태그를 누르면 경고창 발생
alert('클릭!');
});
});
// click 이벤트 연결
$('.btn_login').click(function () { // h1 태그를 누르면 경고창 발생
alert('클릭!');
});
});
참조 :
1) https://www.xpressengine.com/index.php?mid=qna&search_target=title_content&search_keyword=jquery&document_srl=23005626
3) noConflict() 메소드에 대해서는 아래 블로그를 참조하시기 바랍니다.