jQuery noConflict（）

最新推荐文章于 2023-10-25 19:46:17 发布

cunchi4221

最新推荐文章于 2023-10-25 19:46:17 发布

阅读量107

点赞数

文章标签： javascript js jquery java html ViewUI

原文链接：https://www.journaldev.com/4644/jquery-noconflict

版权

jQuery noConflict() method releases the control of the $ variable. You might have seen many JavaScript libraries which uses $ variable. In jQuery $ is used as an alias for jQuery. If you want to use the $ variable of other libraries, jQuery have to release the control over the $ variable by calling it’s noconflict method.

jQuery noConflict（）方法释放$变量的控件。您可能已经看到许多使用$变量JavaScript库。在jQuery中，$用作jQuery的别名。如果要使用其他库的$变量，则jQuery必须通过调用$ noconflict方法来释放对$变量的控制。

jQuery noConflict (jQuery noConflict)

Here is the general syntax for using the jQuery noConflict method:

这是使用jQuery noConflict方法的常规语法：

$.noConflict()
<!-- OR --> 
jQuery.noConflict()

jQuery noConflict示例 (jQuery noConflict example)

Following examples demonstrate the use of jQuery noConflict method.

以下示例演示了jQuery noConflict方法的用法。

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script>
$.noConflict();
$(document).ready(function(){
  $("button").click(function(){
    $("div").fadeToggle("slow"); // This won’t work
  });
});
</script>
<style>
.divBlock{
width: 100px;
height: 50px;

padding: 15px;
margin: 15px;
background-color: red;
}
</style>
</head>

<body>

<div class="divBlock"></div>
<button>Test</button>

</body>
</html>

In the above example fade and toggle effect applied to <div> element.

在上面的示例中，淡化和切换效果应用于<div>元素。

You will not get the desired output because it uses $.noConflict() method above the $(document).ready() function. If you remove the $.noConflict() method, the above code will give you the appropriate result.

您将无法获得所需的输出，因为它在$（document）.ready（）函数上方使用了$.noConflict()方法。如果删除$ .noConflict（）方法，则上面的代码将为您提供适当的结果。

In the example below, you can see that $.noconflict() is used and the full name jQuery is used instead of $ variable in ready function and all other methods. This code will work even though the noConflict() method is used.

在下面的示例中，您可以看到在就绪函数和所有其他方法中使用了$ .noconflict（）并使用了全名jQuery，而不是$变量。即使使用了noConflict（）方法，该代码也将起作用。

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script>
$.noConflict();
jQuery(document).ready(function(){
  jQuery("button").click(function(){
    jQuery("div").fadeToggle("slow"); // This is working
  });
});
</script>
<style>
.divBlock{
width: 100px;
height: 50px;

padding: 15px;
margin: 15px;
background-color: red;
}
</style>
</head>

<body>

<div class="divBlock"></div>
<button>Test</button>

</body>
</html>

jQuery noConflict别名 (jQuery noConflict alias)

In the below example you can see that $.noConflict() method is used with a custom alias name ‘jq‘. This code will also give you the proper output.

在下面的示例中，您可以看到$ .noConflict（）方法与自定义别名“ jq ”一起使用。此代码还将为您提供正确的输出。

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script>
jq = $.noConflict();
jq (document).ready(function(){
  jq ("button").click(function(){
    jq ("div").fadeToggle("slow"); // this is still working
  });
});
</script>
<style>
.divBlock{
width: 100px;
height: 50px;

padding: 15px;
margin: 15px;
background-color: red;
}
</style>
</head>

<body>

<div class="divBlock"></div>
<button>Test</button>

</body>
</html>

jQuery uses noConflict() method to avoid the conflict of using $ variable with other JavaScript variables. The above examples will give you an idea about the usage of noConflict method in jQuery.

jQuery使用noConflict()方法来避免$变量与其他JavaScript变量的冲突。上面的示例将使您对jQuery中的noConflict方法的用法有所了解。

Reference: API Doc

参考： API文档

翻译自: https://www.journaldev.com/4644/jquery-noconflict

cunchi4221

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery noConflict（）

jQuery noConflict() method releases the control of the $ variable. You might have seen many JavaScript libraries which uses $ variable. In jQuery $ is used as an alias for jQuery. If you want to use t...
复制链接

扫一扫