Jquery noConflict()方法
jQuery中的
$(美元)符号用作别名或快捷方式。许多JavaScript库还将
$ 符号与同一页面上的jQuery一起用作快捷方式。但是，如果两个不同的框架使用相同的别名，则可能会发生冲突，并且其中一个框架可能会停止工作。
在jQuery中
noConflict()方法处理此类情况。它用于避免与其他库一起使用
$ 变量的冲突。此方法释放对
$(美元)标识符的保留，以便其他库可以使用它。
此方法还可以用于创建新的快捷方式。这意味着我们可以使用此方法来创建自定义别名。如果我们不想定义另一个快捷方式，或者我们喜欢使用
$ 符号，因为它可以节省时间且易于使用，则可以使用一种新的方法。也就是说，我们可以将
$ 作为参数传递给
$(document).ready()函数。可以写成-
jQuery.noConflict();
jQuery(document).ready(function($){
});
语法
此方法的常用语法如下。
它不接受任何参数。
让我们看一些插图来了解如何使用
noConflict()。
Example1
在此示例中，我们使用了两个
JS 库，它们是原型和jQuery。这两个库都使用
$ 作为别名，因此我们使用
noConflict()方法来避免冲突。
noConflict()方法允许jQuery释放对
$ 标识符的保留，并使其可用于其他库。在这里，另一个库是原型。
加载文档后，jQuery进入noConflict模式。在这里，我们使用jQuery
noConflict()创建新的别名。我们正在声明一个名为
j 的变量，并为其分配
noConflict()方法。现在，此变量将用作jQuery代码的别名。将使用此新别名，而不使用
$ 。因此，它避免了与原型库的冲突。
我们必须单击给定的按钮才能看到效果。
<html>
<head>
<script src="/ajax/libs/prototype/1.7.2.0/prototype.js"></script>
<script src="/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
var j = $.noConflict();
j(document).ready(function(){
j("#b1").click(function(){
alert("jQuery is working fine");
});
});
document.observe("dom:loaded", function(){
$("b2").observe("click", function(event){
alert("Prototype is working fine");
});
});
</script>
</head>
<body style = "text-align: center;">
<h4> It is an example of using the jQuery noConflict() method. </h4>
<p> Click the following buttons to see the effect. </p>
<button id = "b1"> Run jQuery </button>
<button id = "b2"> Run Prototype </button>
</body>
</html>
输出:
执行上述代码后，输出将为-
单击给定的
Run jQuery 按钮后，输出将为-
点击给定的
Run Prototype 按钮后，输出为-
假设我们有一段使用
$ 快捷方式，我们不想修改代码，或者我们喜欢使用
$ ，因为它易于使用，因此我们可以使用下一个示例中给出的方法。
Example2
在这里，我们只是传递
$ 符号作为
$(document).ready( )功能。这使我们可以在函数中使用
$ 访问jQuery。但是在函数之外，我们必须使用全名
jQuery 。
输出与上面的示例相同。
<html>
<head>
<script src="/ajax/libs/prototype/1.7.2.0/prototype.js"></script>
<script src="/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
jQuery.noConflict();
jQuery(document).ready(function($){
$("#b1").click(function(){
alert("jQuery is working fine");
});
});
document.observe("dom:loaded", function(){
$("b2").observe("click", function(event){
alert("Prototype is working fine");
});
});
</script>
</head>
<body style = "text-align: center;">
<h4> It is an example of using the jQuery noConflict() method. </h4>
<p> Click the following buttons to see the effect. </p>
<button id = "b1"> Run jQuery </button>
<button id = "b2"> Run Prototype </button>
</body>
</html>
输出:
执行上述代码后，输出将为-
单击给定的
Run jQuery 按钮后，输出将为-
点击给定的
Run Prototype 按钮后，输出为-
