XE에서 jQuery (제이쿼리) 사용하는 방법

1. 먼저 jQuery를 사용하는 방법에 대해 알아보겠습니다. jQuery를 사용하는 방법은 3가지가 있습니다.

1) 기본적인 jQuery 사용 방법

$(document).ready(function(){

// 여기에 작성한 코드는 브라우저가 HTML을 해석을 마칠 때까지 기다렸다가 실행합니다.

});

</script>

2) (document).ready 부분을 지워서 축약한 사용 방법

$(function(){

// 여기에 작성한 코드는 브라우저가 HTML을 해석을 마칠 때까지 기다렸다가 실행합니다.

});

</script>

3) 다른 자바스크립트 라이브러리와 충돌이 우려될 경우

다른 자바스크립트 라이브러리와 jQuery를 함께 사용할 경우, 다른 자바스크립트 라이브러리에서도 '$' 기호를 객체로 사용하고 있어 충돌이 날 경우

먼저 jQuery.noConflict() 라고 선언한 뒤 jQuery(fuction($){...}) 라고 해주면, 충돌 없이 안전하게 '$' 기호를 사용 할 수 있습니다.

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('클릭!');
});
});

참조 :

1) https://www.xpressengine.com/index.php?mid=qna&search_target=title_content&search_keyword=jquery&document_srl=23005626

3) noConflict() 메소드에 대해서는 아래 블로그를 참조하시기 바랍니다.

주간 인기 검색어 상세보기