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 >01</div>
21 <div >02</div>
22 <div >03</div>
23
24 <button >点我隐藏</button>
25 <button >点我改变颜色</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>
