Mar 30, 2020

JQuery $naming conflict resolution summary

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