Home > Developer > JavaScript
1. The jquery library is imported after other libraries
After loading other libraries and jquery libraries, you can call the jquery. noconflict () function at any time to hand over control of variable $ to other JavaScript libraries. Example:
1. <HTML>
2. 3. <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
4. <title> Conflict Resolution 1 </title>
5. <! -- Introduce prototype -->
6. <SCRIPT src = "prototype-1.6.0.3.js" type = "text/JavaScript"> </SCRIPT>
7. <! -- Introduce jquery -->
8. <SCRIPT src = ".../scripts/jquery-1.3.1.js" type = "text/JavaScript"> </SCRIPT>
9. 10. <body>
11. <p id = "PP"> test --- prototype </P>
12. <p> test --- jquery </P>
13.
14. <SCRIPT type = "text/JavaScript">
15. jquery. noconflict ();
16. jquery (function () {// use jquery
17. jquery ("p"). Click (function (){
18. Alert (jquery (this). Text ());
19 .});
20 .});
21.
22. $ ("PP"). style. Display = 'none'; // use prototype
23. </SCRIPT>
24.
25. </body>
26. Then, the jquery () function can be used as the manufacturing factory of the jquery object in the program.
In addition, there is another option. To ensure that jquery does not conflict with other libraries, but you want to customize a short shortcut, follow these steps:
1. //... omit other code...
2. var $ J = jquery. noconflict (); // customize a short shortcut
3. $ J (function () {// use jquery
4. $ J ("p"). Click (function (){
5. Alert ($ J (this). Text ());
6 .});
7 .});
8.
9. $ ("PP"). style. Display = 'none'; // use prototype
10. //... omit other code...
You can customize the backup name, such as JQ, $ J, and awesomequery-any name you want.
If you do not want jquery to customize these slave names, or want to use $, regardless of the $ method of other libraries, and do not want to conflict with other libraries, you can use the following two solutions:
1. //... omit other code...
2. jquery. noconflict (); // assign control of variable $ to prototype. js
3. jquery (function ($) {// use jquery
4. $ ("p"). Click (function () {// continue to use the $ Method
5. Alert ($ (this). Text ());
6 .});
7 .});
8.
9. $ ("PP"). style. Display = 'none'; // use prototype
10. //... omit other code...
Second: 1. //... omit other code...
2. jquery. noconflict (); // assign control of variable $ to prototype. js
3. (function ($) {// define an anonymous function and set the parameter to $
4. $ (function () {// $ inside the anonymous function is jquery
5. $ ("p"). Click (function () {// continue to use the $ Method
6. Alert ($ (this). Text ());
7 .});
8 .});
9.}) (jquery); // executes anonymous functions and passes the real parameter jquery
10.
11. $ ("PP"). style. Display = 'none'; // use prototype
12. //... omit other code...
2. The jquery library is imported before other libraries.
If the jquery library is imported before other libraries, you can directly use "jquery" to do some jquery work. You can also use the "$" method as a shortcut for other libraries. There is no need to call the jquery. noconflict () function.
Example:
1. <! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en"
2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3. <HTML>
4. 5. <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
6. <title> conflict resolution 5 </title>
7. <! -- Import jquery first -->
8. <SCRIPT src = ".../scripts/jquery-1.3.1.js" type = "text/JavaScript"> </SCRIPT>
9. <! -- Import other databases -->
10. <SCRIPT src = "prototype-1.6.0.3.js" type = "text/JavaScript"> </SCRIPT>
11. 12. <body>
13. <p id = "PP"> test --- prototype </P>
14. <p> test --- jquery </P>
15.
16. <SCRIPT type = "text/JavaScript">
17. jquery (function () {// directly use jquery, there is no need to call the "jquery. noconflict ()" function.
18. jquery ("p"). Click (function (){
19. Alert (jquery (this). Text ());
20 .});
21 .});
22.
23. $ ("PP"). style. Display = 'none'; // use prototype
24. </SCRIPT>
25. </body>
26.
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
