jQuery noConflict()的应用实例

noConflict()是jQuery中的一个内置函数，jQuery一般使用” $“符号作为快捷标识。有许多javascript库，如Angular Js, Ember, Knockout等。现在，如果其他的jQuery框架开始使用”$ “符号作为快捷方式，那么就会产生冲突，其中的一个框架可能会停止工作。因此，我们实现了noConflict方法。

语法:

$.noConflict();

参数：它不接受任何参数。
返回值：它不返回任何东西。
冲突是如何产生的？
示例:

src="prototype.js"
src="jquery.js"

在上面的例子中，在同一个文件中使用了两个JavaScript库，它们都使用相同的” $“符号来选择元素。现在冲突出现了，可能其中一个库无法使用”$ “符号访问元素。
noConflict()方法释放了对”$”快捷键标识符的控制，这样其他脚本就可以使用它。
产生冲突的jQuery代码：

<html>
  
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/
                  jquery/3.3.1/jquery.min.js"></script>
    <script>
        jq(document).ready(function() {
            jq("button").click(function() {
                jq("p").text("jQuery is still working!");
            });
        });
    </script>
</head>
  
<body>
    <p style="color:green">This will show how to save
                           reference and use them.</p>
    <button>Click Me.!</button>
</body>
  
</html>

输出:
在点击按钮之前-
jQuery noConflict()的应用实例
点击按钮后-

这里的输出在点击按钮之前和之后都是一样的，因此存在着冲突。
jQuery代码使用noConflict()函数来克服这种冲突：

<html>
  
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        //Here noConflict() reference is saved to a variable
        var jq = $.noConflict();
        jq(document).ready(function() {
            jq("button").click(function() {
                jq("p").text("jQuery is still working!");
            });
        });
    </script>
</head>
  
<body>
    <p style="color:green">This will show how to save 
                           reference and use them.</p>
    <button>Click Me.!</button>
</body>
  
</html>