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>