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