jquery와 다른 라이브러리의 충돌 해결

jQuery 라이브러리에서 거의 모든 플러그인은 그의 이름 공간에 제한되어 있습니다.일반적으로 전역 (글로벌) 대상은 jQuery 이름 공간에 잘 저장되어 있기 때문에 jQuery를 다른 자바스크립트 라이브러리와 함께 사용할 때 충돌을 일으키지 않습니다.
다른 라이브러리 다음에 jQuery 라이브러리 가져오기
방법1
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>    1</title>
<!--    prototype  -->
<script src="prototype-1.6.0.3.js" type="text/javascript"></script>
<!--    jQuery  -->
<script src="../../scripts/jquery-1.4.3.min.js" type="text/javascript"></script>
</head>
<body>
<p id="pp">test---prototype</p>
<p >test---jQuery</p>

<script type="text/javascript">
jQuery.noConflict();				//   $       prototype.js
jQuery(function(){					//  jQuery
	jQuery("p").click(function(){
		alert( jQuery(this).text() );
	});
});

$("pp").style.display = 'none';		//  prototype
</script>

</body>
</html>

 
방법2
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>    2</title>
<!--    prototype  -->
<script src="prototype-1.6.0.3.js" type="text/javascript"></script>
<!--    jQuery  -->
<script src="../../scripts/jquery-1.4.3.min.js" type="text/javascript"></script>
</head>
<body>
<p id="pp">test---prototype</p>
<p >test---jQuery</p>

<script type="text/javascript">
var $j = jQuery.noConflict();		//            
$j(function(){						//  jQuery
	$j("p").click(function(){
		alert( $j(this).text() );
	});
});

$("pp").style.display = 'none';		//  prototype
</script>
</body>
</html>
 
 
방법3
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>    3</title>
<!--    prototype  -->
<script src="prototype-1.6.0.3.js" type="text/javascript"></script>
<!--    jQuery  -->
<script src="../../scripts/jquery-1.4.3.min.js" type="text/javascript"></script>
</head>
<body>
<p id="pp">test---prototype</p>
<p >test---jQuery</p>

<script type="text/javascript">
jQuery.noConflict();				//   $       prototype.js
jQuery(function($){					//  jQuery
	$("p").click(function(){		//     $   
		alert( $(this).text() );
	});
});

$("pp").style.display = 'none';		//  prototype
</script>

</body>
</html>
 
 
방법4(플러그인은 일반적으로 이런 형식으로 쓴다)
 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>    4</title>
<!--    prototype  -->
<script src="prototype-1.6.0.3.js" type="text/javascript"></script>
<!--    jQuery  -->
<script src="../../scripts/jquery-1.4.3.min.js" type="text/javascript"></script>
</head>
<body>
<p id="pp">test---prototype</p>
<p >test---jQuery</p>

<script type="text/javascript">
jQuery.noConflict();				//   $       prototype.js
(function($){						//            $
	$(function(){					//       $  jQuery
		$("p").click(function(){	//     $   
			alert($(this).text());
		});
	});
})(jQuery);							//           jQuery

$("pp").style.display = 'none';		//  prototype
</script>

</body>
</html>
 
 
다른 라이브러리 이전에 jQuery 라이브러리 가져오기
 
방법5
 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>    5</title>
<!--   jQuery -->
<script src="../../scripts/jquery-1.4.3.min.js" type="text/javascript"></script>
<!--       -->
<script src="prototype-1.6.0.3.js" type="text/javascript"></script>
</head>
<body>
<p id="pp">test---prototype</p>
<p >test---jQuery</p>

<script type="text/javascript">
jQuery(function(){   //     jQuery ,      "jQuery.noConflict()"  。
	jQuery("p").click(function(){      
		alert( jQuery(this).text() );
	});
});

$("pp").style.display = 'none'; //  prototype
</script>
</body>
</html>
 
 

좋은 웹페이지 즐겨찾기