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           width: 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>