In jQuery, $ is an alias for jQuery. For the convenience of writing, we are more accustomed to writing code in the form of $('#id'). When multiple versions of jQuery are referenced on the same page or jQuery conflicts with some other js libraries, the console will report an error.
Solutions to conflicts between multiple versions of the same page
You may ask, why would you just refer to multiple versions of jQuery on a page, and wouldn't it be better to just refer to one?
The answer is: No. The reason for using two (or more) versions of jQuery libraries is that existing websites have used old versions of jQuery and related plug-ins. Upgrading jQuery to a new version will cause these plug-ins based on old versions of jQuery to fail to work unless you can upgrade all these plug-ins, or wait for the authors of each plug-in to publish plug-in versions that support the new version of jQuery.
Solution: Use the ([extreme]) method.
For example, I quote jquery-1.11. and jquery-1.5.
<script src="jquery-1.5."></script> <script src="jquery-1.11."></script> <script> ($.); //'1.11.0' var $jq = (true); ($.); //'1.5.0' </script>
You can see that the control of the variable $ is transferred to the 1.5.0 version of jQuery library. To use the 1.11.0 version, you need to use $jq() instead.
However, after introducing two versions of jQuery, the code is very messy, which makes it difficult for others to understand and even delete some important code by mistake?
The improvement method is:
First, directly refer to the new version of the jQuery library.
<script src="jquery-1.11."></script> <script src=""></script>
Write the main content of the script we wrote in the call function immediately, referring to a new version of jQuery.
//
(function() {
The code of // refers to v1.11.0})();
Write another call function immediately and embed the old version of jQuery code (the compressed code has only a few lines). Then write the code inside, at this time, the jQuery embedded in the front referenced by the variable $ is now
//
(function () {
//...Omitted here /jquery1.5.0//Jquery1.5.0's compressed codevar $ = (true);
//The $() that started writing here refers to jquery1.5.0})();
Ps: You need to check whether the jQuery protocol allows us to directly embed the jQuery source code into our own JavaScript code
2. Solutions for conflict resolution of jQuery and other js libraries on the same page
① You can still use the control of the variable $ to transfer to other js libraries.
If jQuery is in front of other js libraries, noConflict is not required.
<!-- Introduced jqueryLibrary -->
<script src="jquery-1.11."></script>
<script type="text/javascript">
var $jq = $;
($.); //'1.11.0'
</script>
<!-- Introduced 其他Library-->
<script type="text/javascript">
$ = {
fn:{
jquery:"otherJS"
}
};
</script>
<script type="text/javascript">
($.); //otherJS
($); //'1.11.0'
</script>
If you are after other js libraries, use noConflict to transfer.
<!-- Introduced Other libraries-->
<script type="text/javascript">
$ = {
fn:{
jquery:"otherJS"
}
};
</script>
<!-- Introduced jqueryLibrary -->
<script src="jquery-1.11."></script>
<script type="text/javascript">
($.); //'1.11.0'
var $180 = $.noConflict(); //Resolute the conflict($.); //otherJS
($); //'1.11.0'
</script>
Its disadvantage is: in the next js code, you must replace $ with $jq.
②The ready function is the entry function of jquery
Can
$(document).ready(function() {...})
Replace with:
jQuery(document).ready(function($) {...})
Its disadvantage is: it is only valid for code inside the ready nested. If there are some subfunctions outside the ready function, it is invalid for code outside the nested.
③Pass $ as a parameter
(function($) {
//Your js code})(jQuery);
or
jQuery(function($){
//Your js code}
Your js code can include the ready function and subfunction mentioned above. When writing public components in jQuery, using this method can not only avoid $ conflicts, but also do not require people who use public components to modify their own code.
The above is the conflict problem and solution of the $ symbol in jQuery introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support for my website!