一、案例：推盒子

  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title></title>
  7.     <link rel="stylesheet" href="css/reset.min.css">
  8.     <style>
  9.         html,
  10.         body {
  11.             height: 100%;
  12.         }
  14.         .container {
  15.             box-sizing: border-box;
  16.             position: absolute;
  17.             top: 50%;
  18.             left: 50%;
  19.             margin: -200px 0 0 -200px;
  20.             width: 400px;
  21.             height: 400px;
  22.             background: lightblue;
  23.         }
  25.         .container .box {
  26.             position: absolute;
  27.             top: 0;
  28.             left: 0;
  29.             width: 100px;
  30.             height: 100px;
  31.             background: lightcoral;
  32.             /* CSS3动画 */
  33.             transition: .3s linear;
  34.         }
  35.     </style>
  36. </head>
  38. <body>
  39.     <div class="container">
  40.         <div class="box"></div>
  41.     </div>
  43.     <script src="js/jquery.min.js"></script>
  44.     <script>
  45.         let $container = $('.container'),
  46.             $box = $container.children('.box');
  47.         $(document).on('keydown keypress', function (ev) {
  48.             // 1.首先获取按键码和元素当前的 TOP / LEFT
  49.             let code = ev.keyCode,
  50.                 T = parseFloat($box.css('top')),
  51.                 L = parseFloat($box.css('left')),
  52.                 step = 30;
  53.             // 2.根据键盘码计算移动的距离
  54.             switch (code) {
  55.                 case 37:
  56.                     L -= step;
  57.                     break;
  58.                 case 38:
  59.                     T -= step;
  60.                     break;
  61.                 case 39:
  62.                     L += step;
  63.                     break;
  64.                 case 40:
  65.                     T += step;
  66.                     break;
  67.             }
  68.             // 4.边界判断
  69.             let minL = 0,
  70.                 maxL = $container.outerWidth() - $box.outerWidth(),
  71.                 minT = 0,
  72.                 maxT = $container.outerHeight() - $box.outerHeight();
  73.             L = L < minL ? minL : (L > maxL ? maxL : L);
  74.             T = T < minT ? minT : (T > maxT ? maxT : T);
  75.             // 3.把最新的样式重新赋值为盒子
  76.             $box.css({
  77.                 left: L,
  78.                 top: T
  79.             });
  80.         });
  81.     </script>
  82. </body>
  84. </html>

mouseover和mouseenter的区别.png

二、案例：自定义菜单

  1. // 1. 获取鼠标的位置
  2. // 2. 把 ul 的 left 和 top 设置为鼠标的位置
  3. // 3. 把盒子的 display 属性设为 block；
  4. let menu = document.getElementById('menu');
  6. document.oncontextmenu = function (e) {
  7.   e.preventDefault();
  8.   // 1. 获取鼠标的位置
  9.   let left = e.clientX;
  10.   let top = e.clientY;
  11.   // 2. 上一步获取的值设置给 ul
  12.   menu.style.left = left + 'px';
  13.   menu.style.top = top + 'px';
  15.   // 3. 让 ul 显示出来
  16.   menu.style.display = 'block';
  17. };
  19. // 增加刷新功能
  20. let refresh = document.getElementById('refresh');
  21. refresh.onclick = function () {
  22.   // 刷新页面的方法：
  23.   // 1. reload
  24.   // window.location.reload();
  26.   // 2. 重新给 location 的 href 属性赋值
  27.   // window.location.href 获取当前页面的 url；如果给 href 属性赋值一个 url，页面就会跳转到这个 url 指向的页面
  28.   window.location.href = window.location.href;
  29. };

三、enter 和 over 的区别

  1. /*
  2. * over: 当从父元素进入子元素会触发父元素 out 事件；接着触发子元素的 over 事件，因为冒泡，又会触发父元素的 over 事件；
  3. *
  4. * */
  6. inner.onmouseenter = function () {
  7.   console.log('inner enter');
  8. };
  9. inner.onmouseleave = function () {
  10.   console.log('inner leave');
  11. };
  13. outer.onmouseenter = function () {
  14.   console.log('outer enter');
  15. };
  16. outer.onmouseleave = function () {
  17.   console.log('outer leave');
  18. };
  19. /*
  20. * enter: 从父元素进入子元素并不会触发父元素的 leave 事件，接下来触发子元素的 enter 事件，而且不会冒泡，进而父元素的 enter 事件不会触发；
  21. * */
  23. // 如果以后项目中用到这种大盒子套小盒子的，尽量用 enter 事件；

四、onload 和 DOMContentLoaded

  1. // window.onload 页面中所有的资源（css、js、图片、字体）全部加载完成后，才会触发；
  3. // DOM0级事件：
  4. window.onload = function () {
  5.   console.log('window onload');
  6. };
  8. // DOMContentLoaded 页面中的 DOM 结构加载解析完成后就会触发；（DOM2 级事件）
  9. // DOM2 级事件绑定
  10. document.addEventListener('DOMContentLoaded', function () {
  11.   console.log('DOM Content Loaded');
  12. }, false);
  14. // DOMContentLoaded 触发早于 window.onload ；
  16. // 以后经常会见到这样写的代码：
  17. document.addEventListener('DOMContentLoaded', function () {
  18.   // 在这里面写了很多的业务逻辑，表示页面中的 DOM 结构加载完成后再执行这个回调函数中的代码；
  19.   // 因为 JS 是用来操作 DOM 的，这样写是保证 DOM 结构加载解析完成，再操作 DOM 更安全；
  20. }, false);

五、obj 和 key 的问题

  1. let obj = {
  2.   name: 'mb', // 对象的属性名都是字符串类型的
  3.   id: 17
  4. };
  6. let obj2 = {};
  8. for (let key in obj) {
  9.   obj2[key] = obj[key]; 
  10.   /* obj[key] 写在方括号中的 key 没有引号，就是变量，最终被添加到 obj2 中的属性是 key 变量代表的值；第一次遍历 obj key代表的是 'name' 属性，所以第一次给 obj2 添加了一个'name' 属性，值 'mb' ，第二次 key 代表 'id',所以给 obj2 添加的属性是 'id'，值是17；所以最后 obj2 是{name: 'mb', id: 17}
  11.   */
  12. }
  14. let obj3 = {};
  16. for (let attr in obj) {
  17.   obj3.attr = obj[attr]; 
  18.   /*obj3.attr 写在.后面的 attr 是死的属性，不是变量，表示的就是 'attr' 属性，给 obj3 添加的属性 就是 'attr' ，第一遍历时，给 obj3 添加了 'attr' 属性，obj3 就是 {attr: 'mb'}；第二次遍历时，obj3.attr 表示 obj3['attr']，此时obj3['attr']有值，所以本次不是添加是修改，就把obj3 修改成了 {attr: 17};*/
  19. }
  21. // obj.key 等价于 obj['key']