jQuery中noConflict()用法实例分析
什么是noConflict()方法？
jQuery的一个特别之处是可以通过$进行简写，进行操作。然而，在某些情况下，与其他脚本库的代码或有可能使用 jQuery 定义不同的 $ 变量，就会出现冲突问题。为了解决此类问题，jQuery提供了一种方法，即noConflict()方法。
noConflict()方法的语法
jQuery.noConflict([removeAll])
- removeAll：可选参数，如果为true，表示将jQuery自身的对象也删除。
noConflict()方法的作用
noConflict() 方法释放页面中使用 jQuery 的控制权。noConflict() 方法可以让使用$来代替 jQuery 的控制权，$符号就可以被其他库来使用。
noConflict()方法的实现方式
var jq = jQuery.noConflict();
jq(document).ready(function(){
jq("#id").hide();
})
上面的例子中，$符号已经被解除了 jQ 的控制权，所以需要用jQ来代替$。
jQuery.noConflict();
(function($){
$(function(){
//放在原有的$(document).ready()函数中的代码
});
})(jQuery);
上面的例子演示了如何在有多个库使用$符号时，使用noConflict方法释放jQuery所占用的控制权，并将它指定给一个自定义的变量。
示例说明
示例一
在页面中同时引入了jQuery库和MooTools库，可以通过如下代码解决$冲突问题：
<html>
<head>
<title>noConflict示例一</title>
<script type="text/javascript" src="mootools-core-1.5.1.js"></script>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
var jq = jQuery.noConflict(); //无需将$赋给自定义变量
jq(function(){
jq("#banner").css("color","red");
});
</script>
</head>
<body>
<h1 id="banner">$符号无冲突</h1>
</body>
</html>
在这个例子中，$符号会报错，所以需要将$赋给自定义变量，之后再使用jq代替$。
示例二
在页面中同时引入了Prototype库和Juery库，可以通过如下代码解决$冲突问题：
<html>
<head>
<title>noConflict示例二</title>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
var $j = jQuery.noConflict(true); //将jQuery自身的对象也删除
$j(function(){
$j("#banner").css("color","red");
});
</script>
</head>
<body>
<h1 id="banner">$符号无冲突</h1>
</body>
</html>
在这个例子中，因为removeAll被设置为true，所以将jQuery自身的对象也删除，这样可以避免与Prototype库冲突问题的发生。之后就可以直接使用$j代替$，以避免冲突问题的发生。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery中noConflict()用法实例分析 - Python技术站
微信扫一扫 
支付宝扫一扫 