解決jquery和其他庫的衝突

cactusz發表於2017-07-06
jQuery

在jQuery庫中，幾乎所有的外掛都被限制在他的名稱空間裡。通常，全域性（global）物件都被很好地儲存在jQuery名稱空間裡，因此當把jQuery和其他JavaScript庫一起使用時，不會引起衝突。

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>
 

 

 

相關文章