1 <!DOCTYPE html>
2 <!--suppress ALL -->
3 <html>
4 <meta charset="utf-8">
5 <style type="text/css">
6 div {
7 height: 200px;
8 margin-bottom: 10px;
9 background-color: #a43035;
10 display: none;
11 }
12 input {
13 width: 200px;
14 height: 44px;
15 }
16 </style>
17
18 <!--同一功能js的实现-->
19 <script type="text/javascript">
20 // HTML页面加载完, 再加载JS
21 window.onload = function () {
22
23 // 获取展示按钮
24 var btn1 = document.getElementById("btn1");
25
26 // 获取设置内容按钮
27 var btn2 = document.getElementById("btn2");
28
29 // 获取所有的div标签
30 var divs = document.getElementsByTagName("div");
31
32 // 展示按钮注册事件
33 btn1.onclick = function () {
34
35 // 遍历div数组, 设置div为显示
36 for (var i = 0; i < divs.length; i++) {
37 divs[i].style.display = "block";
38 }
39 }
40
41 // 设置内容按钮注册事件
42 btn2.onclick = function () {
43
44 // 遍历div数组, 设置div的内容
45 // for (var i = 0; i < divs.length; i++) {
46 divs[i].innerText = "这里显示内容";
47 }
48 }
49 </script>
50
51 <!--同一功能jquery的实现-->
52 <script src="jquery-2.1.1.min.js"></script>
53 <script>
54
55 /*
56 * jquery是一个js库, 它使用起来比js更简单
57 * jquery的优点:
58 * 1. 隐式迭代: 偷偷的遍历
59 * 2. 没有兼容性问题
60 * 3. 注册事件不会被覆盖, 会按顺序执行
61 * 4. jquery的入口函数, 页面加载完就会执行, 不用等待图片加载完
62 * js的入口函数, 要等待页面和图片加载完都会执行
63 *
64 * 常见错误:
65 * 1. $ is not defined 这是因为没有引入jquery导致的
66 *
67 * */
68 // 页面加载完, 再加载JS, 也就是JS才能使用
69 // jquery入口函数第一种
70 $(document).ready(function () {
71 console.log("// jquery入口函数第一种")
72 // 展示按钮注册事件
73 $("#btn1").click(function () {
74 // 所有div标签展示
75 $("div").fadeIn(1000);
76 });
77
78 // 设置内容按钮注册事件
79 $("#btn2").click(function () {
80 // 所有div标签设置内容
81 $("div").text("这里显示内容");
82 });
83 });
84
85 // jquery入口函数第二种
86 $(function () {
87 console.log("// jquery入口函数第二种")
88 });
89
90 </script>
91
92 <head>
93 <title></title>
94 </head>
95 <body>
96
97 <input type="button" value="展示" id="btn1">
98 <input type="button" value="显示内容" id="btn2">
99
100 <div></div>
101 <div></div>
102 <div></div>
103
104 </body>
105 </html>
