A quick solution to the conflict between JQuery's $ and other JS_jquery

As we all know, jQuery is currently the most popular JS package, which simplifies many complex JS programs. JQuery defines the browser DOM tree as $, and uses $ to obtain each child node.

Then, JS plug-ins are not only JQuery, but also prototype.js and other better plug-ins. They also use $. So sometimes when these two JS plug-ins are used at the same time, there will be a conflict of usage rights of $. Now let's see how to resolve this conflict. Please see below:

We all know that JQuery has a function, jquery.noConflict(). Its function is to transfer the control of $. Then we can use jQuery instead of $ to get the dom node

Example:

Method 1:

Copy the code The code is as follows:

<script type="text/javascript">
jQuery.noConflict(); //Transfer control of variable $ to prototype.js
jQuery(function(){ //Use jQuery
jQuery("p").click(function(){
alert( jQuery(this).text() );
});
});
$("pp").style.display = 'none'; //Use prototype
</script>

Method 2:

We can use the noConflict() function to define a shortcut to get the dom node

Copy the code The code is as follows:

<script type="text/javascript">
var $j = jQuery.noConflict(); //Customize a shorter shortcut
$j(function( ){ //Use jQuery
$j("p").click(function(){
alert( $j(this).text() );
});
}) ;
$("pp").style.display = 'none'; //Using prototype
</script>

and other methods are listed here. Come out, you can understand the same thing, haha.

Method three:

Copy the code The code is as follows:

<script type="text/javascript">
jQuery.noConflict(); //Transfer control of variable $ to prototype.js
jQuery(function($) { //Use jQuery
$("p").click(function(){ //Continue to use the $ method
alert( $(this).text() );
});
});
$("pp").style.display = 'none'; //Use prototype
</script>

method Four:

Copy code The code is as follows:

<script type ="text/javascript">
jQuery.noConflict(); //Transfer control of variable $ to prototype.js
(function($){ //Define the anonymous function and set the formal parameters to $
$(function(){ //The $ inside the anonymous function is jQuery
$("p").click(function(){ //Continue to use the $ method
alert($(this ).text());
});
});
})(jQuery); //Execute the anonymous function and pass the actual parameters jQuery
$("pp").style. display = 'none'; //Use prototype
</script>