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技术站

jQuery中noConflict()用法实例分析

jQuery中noConflict()用法实例分析

什么是noConflict()方法？

noConflict()方法的语法

noConflict()方法的作用

noConflict()方法的实现方式

示例说明

示例一

示例二

相关文章