1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" 6 content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>解决$的冲突作用</title> 9 <style> 10 div{ 11 200px; 12 height: 200px; 13 margin-top: 20px; 14 background-color: #3b9e3c;; 15 } 16 17 </style> 18 </head> 19 <body> 20 <div id="div1">01</div> 21 <div id="div2">02</div> 22 <div id="div3">03</div> 23 24 <button id="btn">点我隐藏</button> 25 <button id="btn1">点我改变颜色</button> 26 <script src="js/jquery-3.3.1.js"></script> 27 <script> 28 //解决冲突1 闭包作用域 29 /* window.onload=function () { 30 (function ($) { 31 $("#btn").on("click",function () { 32 $("#div1").hide() 33 34 }) 35 $("#btn1").on("click",function () { 36 $("#div2").css("background","red") 37 $("#div3").css("background","cyan") 38 }) 39 })(jQuery) 40 }*/ 41 // 02 ,声明变量 42 window.onload=function () { 43 var _ = noc 44 } 45 var _ = $.noConflict(); 46 _("#btn").on("click",function () { 47 _("#div1").hide() 48 }) 49 _("#btn1").on("click",function () { 50 _("#div2").css("background","red") 51 _("#div3").css("background","cyan") 52 }) 53 </script> 54 </body> 55 </html>