다른 자바스크립트 라이브러리등과 jQuery를 함께 사용하면 $ 별칭이 전역적 충돌이 일어날 수 있다.
(ex : prototype.js)
이 때 익명의 자기호출 함수를 만들어 해결 할수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery demo</title>
<!--css style-->
<style>
a.test {
font-weight: bold;
}
</style>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<!--jquery 로드-->
<script src="prototype.js"></script>
<script>
(function ($) {
$("a").click(function(event) {
$("a").addClass('test');
alert("더이상 jQuery 홈페이지로 연결하지 않습니다.");
$("a").removeClass('test');
event.preventDefault();
$('a').hide("slow");
});
})(jQuery);
</script>
</body>
</html>
위의 코드처럼
(function($){
//jQuery 코딩
})(jQuery);
형태로 캡슐화를 시키면 prototyp의 $와 jQuery의 $가 충돌하지 않음을 보장하며, jQuery를 사용할 수 있다.
(해당 부분을 지우면 jQuery가 동작하지 않음을 확인할 수 있다. 23줄과 36줄을 주석처리 해보라)
다른 방법들은 여기서 확인할수 있다
참고문헌 : 실전 jQuery쿡북 (O'Reilly, Bj퍼블릭)
'javascript > jQuery' 카테고리의 다른 글
| [jQuery] bind(), delegate(), live()를 on()으로 대체하기 (0) | 2013.05.15 |
|---|---|
| [jQuery] jQuery selector로 radio버튼 값 가져오기. (0) | 2012.09.26 |
| [jQuery] jQuery 객체에서 Dom 객체 가져오기 (2) | 2012.05.09 |
| [jQuery] .ready() 메소드 최적화 (0) | 2012.04.27 |
| [jQuery] jQuery Basic, 간단한 jQuery 기본 코딩 (0) | 2012.04.26 |
