JQuery $naming conflict resolution summary

  • 2020-03-30 04:19:15
  • OfStack

Recently, I encountered a problem, referring to both the jquery library and another js library. When using $XX to call the js library function, it was found to be invalid! So find the data, the original jquery name conflict. Because many JavaScript libraries use $as a function or variable name, so does jquery. In fact, $is just an alias name for jquery. If we need to use another js library besides jquery, we can return control to the library by calling $.noconflict (). Here's a collection of five solutions to the problem, and one you'll use.

Example 1:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Conflict resolution 1</title>
<!-- The introduction of prototype  -->
<script src="prototype-1.6.0.3.js" type="text/javascript"></script>
<!-- The introduction of jQuery  -->
<script src="/scripts/jquery-1.3.1.js" type="text/javascript"></script>
</head>
<body>
<p id="pp">test---prototype</p>
<p >test---jQuery</p>
<script type="text/javascript">
jQuery.noConflict();                //Cede control of the variable $to prototype.js  < br / > jQuery(function(){                    //Use jQuery  < br / >     jQuery("p").click(function(){ 
        alert( jQuery(this).text() ); 
    }); 
}); 
$("pp").style.display = 'none';        //Use prototype  < br / > </script>
</body>
</html>

Example 2:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Conflict resolution 2</title>
<!-- The introduction of prototype  -->
<script src="prototype-1.6.0.3.js" type="text/javascript"></script>
<!-- The introduction of jQuery  -->
<script src="/scripts/jquery-1.3.1.js" type="text/javascript"></script>
</head>
<body>
<p id="pp">test---prototype</p>
<p >test---jQuery</p>
<script type="text/javascript">
var $j = jQuery.noConflict();        //Customize a short shortcut & NBSP; < br / > $j(function(){                        //Use jQuery  < br / >     $j("p").click(function(){ 
        alert( $j(this).text() ); 
    }); 
}); 
$("pp").style.display = 'none';        //Use prototype  < br / > </script>
</body>
</html>

Example 3:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Conflict resolution 3</title>
<!-- The introduction of prototype  -->
<script src="prototype-1.6.0.3.js" type="text/javascript"></script>
<!-- The introduction of jQuery  -->
<script src="/scripts/jquery-1.3.1.js" type="text/javascript"></script>
</head>
<body>
<p id="pp">test---prototype</p>
<p >test---jQuery</p>
<script type="text/javascript">
jQuery.noConflict();                //Cede control of the variable $to prototype.js  < br / > jQuery(function($){                    //Use jQuery  < br / >     $("p").click(function(){        //Continue with the $method & NBSP; < br / >         alert( $(this).text() ); 
    }); 
}); 
$("pp").style.display = 'none';        //Use prototype  < br / > </script>
</body>
</html>

Example 4:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Conflict resolution 4</title>
<!-- The introduction of prototype  -->
<script src="prototype-1.6.0.3.js" type="text/javascript"></script>
<!-- The introduction of jQuery  -->
<script src="/scripts/jquery-1.3.1.js" type="text/javascript"></script>
</head>
<body>
<p id="pp">test---prototype</p>
<p >test---jQuery</p>
<script type="text/javascript">
jQuery.noConflict();                //Cede control of the variable $to prototype.js  < br / > (function($){                        //Defines an anonymous function and sets its parameter to $& NBSP; < br / >     $(function(){                    //The $inside the anonymous function is jQuery ; < br / >         $("p").click(function(){    //Continue with the $method & NBSP; < br / >             alert($(this).text()); 
        }); 
    }); 
})(jQuery);                            //Executes the anonymous function and passes the argument jQuery  < br / > $("pp").style.display = 'none';        //Use prototype  < br / > </script>
</body>
</html>

Example 5:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Conflict resolution 5</title>
<!-- Leading into the jQuery -->
<script src="/scripts/jquery-1.3.1.js" type="text/javascript"></script>
<!-- Then import other libraries -->
<script src="prototype-1.6.0.3.js" type="text/javascript"></script>
</head>
<body>
<p id="pp">test---prototype</p>
<p >test---jQuery</p>
<script type="text/javascript">
jQuery(function(){   //Using jQuery directly, there is no need to call the "jquery.noconflict ()" function.   < br / >     jQuery("p").click(function(){       
        alert( jQuery(this).text() ); 
    }); 
}); 
$("pp").style.display = 'none'; //Use prototype  < br / > </script>
</body>
</html>

Look, the original solution to the problem can be more than one or two, there is a need for friends to pick it up


Related articles: