Five solutions for Jquery naming conflicts and five solutions for jquery naming
Introduction:
Recently, I encountered a problem and referenced the jquery library and another js library. When $ XX is used to call the js library function, it becomes invalid! So I found the document. It turns out that jquery has a name conflict. Because many JavaScript libraries use $ as the name of a function or variable, the same applies to jquery. In fact, $ is just an alias of jquery. If we need to use another js library other than jquery, we can return control to the library by calling $. noConflict. The following are five solutions to solve this problem, which you can 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>
<! -- Introduce prototype -->
<Script src = "prototype-1.6.0.3.js" type = "text/javascript"> </script>
<! -- Introduce jQuery -->
<Script src = "http://www.cnblogs.com/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 (); // assign 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>
</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>
<! -- Introduce prototype -->
<Script src = "prototype-1.6.0.3.js" type = "text/javascript"> </script>
<! -- Introduce jQuery -->
<Script src = "http://www.cnblogs.com/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
$ J (function () {// use jQuery
$ J ("p"). click (function (){
Alert ($ j (this). text ());
});
});
$ ("Pp"). style. display = 'none'; // use prototype
</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>
<! -- Introduce prototype -->
<Script src = "prototype-1.6.0.3.js" type = "text/javascript"> </script>
<! -- Introduce jQuery -->
<Script src = "http://www.cnblogs.com/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 (); // assign 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>
</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>
<! -- Introduce prototype -->
<Script src = "prototype-1.6.0.3.js" type = "text/javascript"> </script>
<! -- Introduce jQuery -->
<Script src = "http://www.cnblogs.com/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 (); // assign control of variable $ to prototype. js
(Function ($) {// defines an anonymous function and sets the parameter to $
$ (Function () {// $ inside the anonymous function is jQuery
$ ("P"). click (function () {// continue to use the $ Method
Alert ($ (this). text ());
});
});
}) (JQuery); // executes an anonymous function and passes the real parameter jQuery
$ ("Pp"). style. display = 'none'; // use prototype
</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>
<! -- Import jQuery first -->
<Script src = "http://www.cnblogs.com/scripts/jquery-1.3.1.js" type = "text/javascript"> </script>
<! -- Import other databases -->
<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 () {// directly use jQuery, there is no need to call the "jQuery. noConflict ()" function.
JQuery ("p"). click (function (){
Alert (jQuery (this). text ());
});
});
$ ("Pp"). style. display = 'none'; // use prototype
</Script>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
