How to resolve conflicts between jQuery and other libraries

In the jQuery library, almost all plug-ins are restricted to its namespace. Generally, global objects are well stored in the jQuery namespace, so there will be no conflicts when using the jQuery library with other js libraries (Prototype, MooTools or YUI).

Note: By default, jQuery uses "$" as its own shortcut.

When other JavaScript libraries we use also use "$" as a shortcut, how to solve the conflict between jQuery and other libraries at this time?

1. Import the jQuery library after other libraries

(1) Use the full name of "jQuery" instead of "$"

After other libraries and the jQuery library have been loaded, the jQuery.noConflict() function can be called at any time to transfer control of the variable $ to other JavaScript libraries.

Example:

//...省略其他代码
<p id="pp">Text-prototype(将被隐藏)</p>
<p>Text-jQuery(将被绑定单击事件)</p>
<!-- 引入prototype -->
<script src="lib/prototype.js" type="text/javascript"></script>
<!-- 引入jQuery -->
<script src="../../scripts/jquery.js" type="text/javascript"></script>
<script>
    jQuery.noConflict();                 //将变量$的控制权让渡给prototype.js
    jQuery(function(){                   //使用jQuery
        jQuery("p").click(function(){
            alert( jQuery(this).text() );
        })
})
$("pp").style.display = &#39;none&#39;;          //使用prototype隐藏元素
</script>

Then you can use the jQuery() function as the jQuery object manufacturing factory in the program.

(2) Custom shortcut

You can customize alternative names, such as jq, $j, etc. Example:

var $j = jQuery.noConflict();        //自定义一个快捷方式
$j(function(){                       //使用jQuery,利用自定义快捷方式——$j
    $j("p").click(function(){
        alert( $j(this).text() );
    })
})
$("pp").style.display = 'none';      //使用prototype.js隐藏元素

(3) Use $ without conflicting with other libraries

If you don’t want to customize these alternative names for jQuery, you also want to use $ instead Regardless of the $() methods of other libraries, and at the same time do not want to conflict with other libraries, you can use the following two solutions.

One:

jQuery.noConflict();                 //将变量$的控制权让渡给prototype.js
jQuery(function($){                  //使用jQuery设定页面加载时执行的函数
    $("p").click(function(){         //在函数内部继续使用 $()方法
        alert( $(this).text() );
    })
})
$("pp").style.display = 'none';      //使用prototype

Second:

jQuery.noConflict();                      //将变量$的控制权让渡给prototype.js
(function($){                             //定义匿名函数并设置形参为$
    $(function(){                         //匿名函数内部的$均为jQuery
        $("p").click(function(){          //继续使用 $ 方法
            alert( $(this).text() );
        });
    });
})(jQuery);                               //执行匿名函数且传递实参jQuery
$("pp").style.display = 'none';           //使用prototype

This is the most ideal way, which can be achieved by changing the least code compatibility.

2. The jQuery library is imported before other libraries.

If the jQuery library is imported before other libraries, then the control of $() belongs to the JavaScript library imported later by default. You can use "jQuery" directly to do some work. At the same time, you can use the $() method as a shortcut to other libraries. There is no need to call the jQuery.noConflict() function here. Example:

<!-- 先导入jQuery  -->
<script src="../../scripts/jquery.js" type="text/javascript"></script>
<!-- 后导入prototype  -->
<script src="lib/prototype.js" type="text/javascript"></script>

<p id="pp">Test-prototype(将被隐藏)</p>
<p >Test-jQuery(将被绑定单击事件)</p>

<script>
jQuery(function(){                     //直接使用 jQuery ,无需调用"jQuery.noConflict()"函数
    jQuery("p").click(function(){      
        alert( jQuery(this).text() );
    });
});
$("pp").style.display = &#39;none&#39;;        //使用prototype
</script>

The above is the detailed content of How to resolve conflicts between jQuery and other libraries. For more information, please follow other related articles on the PHP Chinese website!