<jQuery> 一. jQuery简介及优点 

  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>

 

posted @ 2017-12-15 14:48  云淡风轻我爱编程  阅读(605)  评论(0)    收藏  举报