1.0事件

常见的鼠标事件

鼠标事件 触发条件
onclick 鼠标点击左键触发
onmouseover 鼠标经过触发
onmouseout 鼠标离开触发
onfocus 获得鼠标焦点触发
onblur 失去鼠标焦点触发
onmousemove 鼠标移动触发
onmouseup 鼠标弹起触发
onmousedown 鼠标按下触发

2.0自定义属性操作

2.1 获取自定义属性element.getAttribute(‘属性’);

  1. <div id="demo" index="1" class="nav"></div>
  2. <script>
  3.     var div = document.querySelector('div');
  4.     // 1. 获取元素的属性值
  5.     console.log(div.id);
  6.     //2.0 get得到获取 attribute 属性的意思 我们程序员自己添加的属性我们称为自定义属性 index
  7.     console.log(div.getAttribute('id'));//getAttribute也可以获取自带属性，但是没有点语法方便
  8.     console.log(div.getAttribute('index'));
  9. </script>

2.2 设置属性值element.setAttribute(‘属性’,’属性值’);

  1. div.id = 'test';
  2. div.className = 'navs';
  3. // element.setAttribute('属性', '值');  主要针对于自定义属性
  4. div.setAttribute('index', 2);
  5. div.setAttribute('class', 'footer'); // class 特殊  这里面写的就是class （也可以设置自带属性，但是麻烦）

2.3 移除自定义属性语法：element.removeAttribute(‘属性值’)

  1. // 移除属性 removeAttribute(属性)    
  2. div.removeAttribute('index');
  3. div.removeAttribute('id');

2.4 H5自定义属性

  • H5规定自定义属性data-开头做为属性名并且赋值。
    • <div data-index=“1”></div>
  • 获取语法：element.getAttribute(‘data-index’);
  • H5新增获取语法：element.dataset.index 或者 element.dataset[‘index’] ie 11才开始支持
  • 设置语法：element.setAttribute(‘data-index’, 2)
  1.     <div getTime="20" data-index="2" data-list-name="andy"></div>
  2.     <script>
  3.         var div = document.querySelector('div');
  4.         // console.log(div.getTime);
  5.         console.log(div.getAttribute('getTime'));
  6.         div.setAttribute('data-time', 20);
  7.         console.log(div.getAttribute('data-index'));
  8.         console.log(div.getAttribute('data-list-name'));
  9.         // h5新增的获取自定义属性的方法 它只能获取data-开头的
  10.         // dataset 是一个集合里面存放了所有以data开头的自定义属性
  11.         console.log(div.dataset);
  12.         console.log(div.dataset.index);
  13.         console.log(div.dataset['index']);
  14.         // 如果自定义属性里面有多个-链接的单词，我们获取的时候采取 驼峰命名法
  15.         console.log(div.dataset.listName);
  16.         console.log(div.dataset['listName']);
  17.     </script>

3.0节点操作

3.1父级节点

  1. 语法：element.parentNode
  • 如果element没有父节点，那么就返回null
  1.     <div class="demo">
  2.         <div class="box">
  3.             <span class="erweima">×</span>
  4.         </div>
  5.     </div>
  6.     <script>
  7.         // 1. 父节点 parentNode
  8.         var erweima = document.querySelector('.erweima');
  9.         // var box = document.querySelector('.box');
  10.         // 得到的是离元素最近的父级节点(亲爸爸) 如果找不到父节点就返回为 null
  11.         console.log(erweima.parentNode);//box
  12.     </script>

3.2子节点

  • 获取子节点语法：element.childNodes，返回element的所有子节点的集合 （包括元素节点，文本节点等）
  • 获取子元素节点语法：element.children，返回element的所有的子元素节点 *
  1.     <ul>
  2.         <li>我是li</li>
  3.         <li>我是li</li>
  4.         <li>我是li</li>
  5.         <li>我是li</li>
  6.     </ul>
  7.     <script>
  8.         // DOM 提供的方法（API）获取
  9.         var ul = document.querySelector('ul');
  10.         var lis = ul.querySelectorAll('li');
  11.         // 1. 子节点  childNodes 所有的子节点 包含 元素节点 文本节点等等
  12.         console.log(ul.childNodes);
  13.         console.log(ul.childNodes[0].nodeType);
  14.         console.log(ul.childNodes[1].nodeType);
  15.         // 2. children 获取所有的子元素节点 也是我们实际开发常用的
  16.         console.log(ul.children);
  17.     </script>
  • 获取第一个子节点：element.firstChild
    返回element的第一个子节点 （这个子节点可以是元素节点，也可以是文本节点）
  • 获取最后一个子节点：element.lastChild
    返回element的最后一个子节点（这个子节点可以是元素节点，也可以是文本节点）
  • 获取第一个子元素节点：element.firstElementChild IE9+
    返回第一个子元素节点
  • 获取最后一个子元素节点：element.lastElementChild IE9+
    返回最后一个子元素节点

实际开发中，firstChild 和 lastChild 包含其他节点，操作不方便，而 firstElementChild 和 lastElementChild又有兼容性问题，那么我们如何获取第一个子元素节点或最后一个子元素节点呢？

  • 如果想要第一个子元素节点，可以使用 element.chilren[0]
  • 如果想要最后一个子元素节点，可以使用 element.chilren[element.chilren.length - 1]
  1.     <ol>
  2.         <li>我是li1</li>
  3.         <li>我是li2</li>
  4.         <li>我是li3</li>
  5.         <li>我是li4</li>
  6.         <li>我是li5</li>
  7.     </ol>
  8.     <script>
  9.         var ol = document.querySelector('ol');
  10.         // 1. firstChild 第一个子节点 不管是文本节点还是元素节点
  11.         console.log(ol.firstChild);
  12.         console.log(ol.lastChild);
  13.         // 2. firstElementChild 返回第一个子元素节点 ie9才支持
  14.         console.log(ol.firstElementChild);
  15.         console.log(ol.lastElementChild);
  16.         // 3. 实际开发的写法  既没有兼容性问题又返回第一个子元素
  17.         console.log(ol.children[0]);
  18.         console.log(ol.children[ol.children.length - 1]);
  19.     </script>

3.2兄弟节点

  • 获取下一个兄弟节点：element.nextSibling
    返回element的下一个兄弟节点（这个节点可以是元素节点，也可以是文本节点）
  • 获取上一个兄弟节点：element.previousSibling
    返回element的上一个兄弟节点（这个节点可以是元素节点，也可以是文本节点）
  • 获取下一个兄弟元素节点：element.nextElementSibling IE9+ *
    返回element的下一个兄弟元素节点
  • 获取上一个兄弟元素节点：element.previousElementSibling IE9+ *
    返回element的上一个兄弟元素节点 
  1.  <div>我是div</div>
  2.     <span>我是span</span>
  3.     <script>
  4.         var div = document.querySelector('div');
  5.         // 1.nextSibling 下一个兄弟节点 包含元素节点或者 文本节点等等
  6.         console.log(div.nextSibling);
  7.         console.log(div.previousSibling);
  8.         // 2. nextElementSibling 得到下一个兄弟元素节点
  9.         console.log(div.nextElementSibling);
  10.         console.log(div.previousElementSibling);
  11.     </script>

获取下一个兄弟元素兼容函数写法：

  1.  function getNextElementSibling(element) {
  2.       var el = element;
  3.       while (el = el.nextSibling) {
  4.         if (el.nodeType === 1) {
  5.             return el;
  6.         }
  7.       }
  8.       return null;
  9.     }

3.3创建节点

  • 创建节点：document.createElement('tagName')
  • document.createElement() 方法创建由 tagName 指定的 HTML 元素。
  • 因为这些元素原先不存在，是根据我们的需求动态生成的，所以我们也称为动态创建元素节点。

3.4添加节点

  • 创建出来的元素节点，需要添加到界面上才能显示
  • 添加方式：
    1. 末尾添加：element.appendChild(childNode)
      将 childNode 添加到element的子节点列表的末尾 （追加）
    2. 指定位置添加：element.insertBefore(childNode, 指定元素)
      将childNode 添加到element的指定元素的前面 
      1. <ul>
      2.  <li>123</li>
      3. </ul>
      4. <script>
      5.  // 1. 创建节点元素节点
      6.  var li = document.createElement('li');
      7.  // 2. 添加节点 node.appendChild(child)  node 父级  child 是子级 后面追加元素
      8.  var ul = document.querySelector('ul');
      9.  ul.appendChild(li);
      10.  // 3. 添加节点 node.insertBefore(child, 指定元素);
      11.  var li2 = document.createElement('li');
      12.  ul.insertBefore(li2, ul.children[0]);
      13.  // 4. 我们想要页面添加一个新的元素 ： 1. 创建元素 2. 添加元素
      14. </script>

      3.5 删除节点
      说明：node.removeChild() 方法从 node节点中删除一个子节点，返回删除的节点。

      1. node.removeChild(child)
      1. <button>删除</button>
      2. <ul>
      3.  <li>熊大</li>
      4.  <li>熊二</li>
      5.  <li>光头强</li>
      6. </ul>
      7. <script>
      8.  // 1.获取元素
      9.  var ul = document.querySelector('ul');
      10.  var btn = document.querySelector('button');
      11.  // 2. 删除元素  node.removeChild(child)
      12.  // ul.removeChild(ul.children[0]);
      13.  // 3. 点击按钮依次删除里面的孩子
      14.  btn.onclick = function() {
      15.      if (ul.children.length == 0) {
      16.          this.disabled = true;
      17.      } else {
      18.          //注意：每次点击都是删除第一个
      19.          //第一次删除3个里边的第一个，删除之后原来的1,2变为0,1，所以在次删除还是删除0
      20.          ul.removeChild(ul.children[0]);
      21.      }
      22.  }
      23. </script>

      3.5 克隆节点

      1. node.cloneNode([isDeep]) ;// 是否深度拷贝，true
      1. <ul>
      2.  <li>1111</li>
      3.  <li>2</li>
      4.  <li>3</li>
      5. </ul>
      6. <script>
      7.  var ul = document.querySelector('ul');
      8.  // 1. node.cloneNode(); 括号为空或者里面是false 浅拷贝 只复制标签不复制里面的内容
      9.  // 2. node.cloneNode(true); 括号为true 深拷贝 复制标签复制里面的内容
      10.  var lili = ul.children[0].cloneNode(true);
      11.  ul.appendChild(lili);
      12. </script>
      13. //理解： 
      14. //浅拷贝，只是浅浅的拷贝，点到为止，所以只给标签表面（标签本身）拷贝了一下
      15. //深拷贝，就是深度的拷贝，将标签表面，和标签内部所有的内容都拷贝

4.0案例

4.1百度换肤效果

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.         * {
  9.             margin: 0;
  10.             padding: 0;
  11.         }
  13.         body {
  14.             background: url(img/1.jpg) no-repeat center top;
  15.         }
  17.         li {
  18.             list-style: none;
  19.         }
  21.         .baidu {
  22.             overflow: hidden;
  23.             margin: 100px auto;
  24.             background-color: #fff;
  25.             width: 410px;
  26.             padding-top: 3px;
  27.         }
  29.         .baidu li {
  30.             float: left;
  31.             margin: 0 1px;
  32.             cursor: pointer;
  33.         }
  35.         .baidu img {
  36.             width: 100px;
  37.         }
  38.     </style>
  39. </head>
  41. <body>
  42.     <ul class="baidu">
  43.         <li><img src="img/1.jpg"></li>
  44.         <li><img src="img/2.jpg"></li>
  45.         <li><img src="img/3.jpg"></li>
  46.         <li><img src="img/4.jpg"></li>
  47.     </ul>
  48.     <script>
  49.         var imgs = document.querySelector('.baidu').querySelectorAll('img');
  50.         for (var i = 0; i < imgs.length; i++) {
  51.             imgs[i].onclick = function () {
  52.                 document.body.style.backgroundImage = 'url(' + this.src + ')'
  53.             }
  54.         }
  55.     </script>
  56. </body>
  58. </html>

4.2精灵图循环

  2. <!DOCTYPE html>
  3. <html lang="en">
  5. <head>
  6.     <meta charset="UTF-8">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <style>
  10.         * {
  11.             margin: 0;
  12.             padding: 0;
  13.         }
  15.         li {
  16.             list-style-type: none;
  17.         }
  19.         .box {
  20.             width: 250px;
  21.             margin: 100px auto;
  22.         }
  24.         .box li {
  25.             float: left;
  26.             width: 24px;
  27.             height: 24px;
  28.             background-color: pink;
  29.             margin: 15px;
  30.             background: url(./sprite.png) no-repeat;
  31.         }
  32.     </style>
  33. </head>
  35. <body>
  36.     <div class="box">
  37.         <ul>
  38.             <li></li>
  39.             <li></li>
  40.             <li></li>
  41.             <li></li>
  42.             <li></li>
  43.             <li></li>
  44.             <li></li>
  45.             <li></li>
  46.             <li></li>
  47.             <li></li>
  48.             <li></li>
  49.             <li></li>
  50.         </ul>
  51.     </div>
  52.     <script>
  53.         var li = document.querySelectorAll('li');
  54.         for (var i = 0; i < li.length; i++) {
  55.             var index = i * 44;
  56.             li[i].style.backgroundPosition = '0 -' + index + 'px';
  57.         }
  58.     </script>
  59. </body>
  61. </html>

4.3 商品全选及全选

  2. <!DOCTYPE html>
  3. <html lang="en">
  5. <head>
  6.     <meta charset="UTF-8">
  8.     <style>
  10.     </style>
  11. </head>
  13. <body>
  14.     <div class="bg">
  15.         <input type="checkbox" name="" id="quan"> <b>全选</b> <br> <br>
  16.         <br> <br>
  17.     </div>
  19.     <div class="box">
  20.         <input type="checkbox" name="" id=""> 吃饭 <br>
  21.         <input type="checkbox" name="" id=""> 睡觉 <br>
  22.         <input type="checkbox" name="" id=""> 打豆豆i <br>
  23.         <input type="checkbox" name="" id=""> 在吃饭<br>
  24.     </div>
  26.     <script>
  27.         var quan = document.querySelector('#quan');
  28.         var inps = document.querySelectorAll('.box input');
  30.         //先把全选的情况实现 ---下边的复选框全部选中
  31.         quan.onclick = function () {
  32.             for (var i = 0; i < inps.length; i++) {
  33.                 inps[i].checked = quan.checked;
  34.             }
  35.         }
  37.         for (var i = 0; i < inps.length; i++) {
  38.             inps[i].onclick = function () {
  39.                 // 小的复选框的选中个数
  40.                 var num = 0;
  41.                 for (var i = 0; i < inps.length; i++) {
  42.                     if (inps[i].checked == true) {
  43.                         num++;
  44.                     }
  45.                 }
  46.                 console.log(num);
  47.                 if (num == inps.length) {
  48.                     quan.checked = true;
  49.                 } else {
  50.                     quan.checked = false;
  51.                 }
  52.             }
  53.         }
  54.     </script>
  55. </body>
  57. </html>//辉哥思想
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.         * {
  9.             padding: 0;
  10.             margin: 0;
  11.         }
  13.         .wrap {
  14.             width: 300px;
  15.             margin: 100px auto 0;
  16.         }
  18.         table {
  19.             border-collapse: collapse;
  20.             border-spacing: 0;
  21.             border: 1px solid #c0c0c0;
  22.             width: 300px;
  23.         }
  25.         th,
  26.         td {
  27.             border: 1px solid #d0d0d0;
  28.             color: #404060;
  29.             padding: 10px;
  30.         }
  32.         th {
  33.             background-color: #09c;
  34.             font: bold 16px "微软雅黑";
  35.             color: #fff;
  36.         }
  38.         td {
  39.             font: 14px "微软雅黑";
  40.         }
  42.         tbody tr {
  43.             background-color: #f0f0f0;
  44.         }
  46.         tbody tr:hover {
  47.             cursor: pointer;
  48.             background-color: #fafafa;
  49.         }
  50.     </style>
  51. </head>
  53. <body>
  54.     <div class="wrap">
  55.         <table>
  56.             <thead>
  57.                 <tr>
  58.                     <th>
  59.                         <input type="checkbox" id="j_cbAll" />
  60.                     </th>
  61.                     <th>商品</th>
  62.                     <th>价钱</th>
  63.                 </tr>
  64.             </thead>
  65.             <tbody id="j_tb">
  66.                 <tr>
  67.                     <td>
  68.                         <input type="checkbox" />
  69.                     </td>
  70.                     <td>iPhone8</td>
  71.                     <td>8000</td>
  72.                 </tr>
  73.                 <tr>
  74.                     <td>
  75.                         <input type="checkbox" />
  76.                     </td>
  77.                     <td>iPad Pro</td>
  78.                     <td>5000</td>
  79.                 </tr>
  80.                 <tr>
  81.                     <td>
  82.                         <input type="checkbox" />
  83.                     </td>
  84.                     <td>iPad Air</td>
  85.                     <td>2000</td>
  86.                 </tr>
  87.                 <tr>
  88.                     <td>
  89.                         <input type="checkbox" />
  90.                     </td>
  91.                     <td>Apple Watch</td>
  92.                     <td>2000</td>
  93.                 </tr>
  95.             </tbody>
  96.         </table>
  97.     </div>
  98.     <script>
  99.         var quan = document.querySelector('#j_cbAll');
  100.         var ipt = document.getElementById('j_tb').getElementsByTagName('input');
  101.         quan.onclick = function () {
  102.             // this.checked 它可以得到当前复选框的选中状态如果是true 就是选中，如果是false 就是未选中
  103.             console.log(this.checked);
  104.             for (var i = 0; i < ipt.length; i++) {
  105.                 ipt[i].checked = this.checked; //如果ipt的第i为true就选中
  106.             }
  107.         }
  108.         for (var i = 0; i < ipt.length; i++) {
  109.             ipt[i].onclick = function () {
  110.                 var flag = true;
  111.                 for (var i = 0; i < ipt.length; i++) { //每次点击都循环检测有没有选中
  112.                     if (!ipt[i].checked) { //false
  113.                         flag = false;
  114.                         break //退出循环判断
  115.                     }
  116.                 }
  117.                 quan.checked = flag; //是true 才全选
  118.             }
  119.         }
  120.     </script>
  121. </body>
  122. </html>//pink老师思想

4.4生成表格

  2. <!DOCTYPE html>
  3. <html lang="en">
  5. <head>
  6.     <meta charset="UTF-8">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <style>
  10.         table {
  11.             width: 600px;
  12.             cursor: pointer;
  13.         }
  15.         table td {
  16.             text-align: center;
  17.         }
  19.         table th {
  20.             background-color: blueviolet;
  21.         }
  23.         table tr {
  24.             background-color: pink;
  25.         }
  26.     </style>
  27. </head>
  29. <body>
  30.     <div id="dv">
  31.         请输入姓名:
  32.         <input type="text" value="" id="uname" />
  33.         <br /> 请输入邮箱:
  34.         <input type="text" value="" id="email" />
  35.     </div>
  37.     <input type="button" value="添加" id="btn" />
  38.     <table border="1" cellpadding="0" cellspacing="0" id="tb">
  39.         <thead>
  40.             <tr>
  41.                 <th>姓名</th>
  42.                 <th>邮箱</th>
  43.             </tr>
  44.         </thead>
  45.         <tbody id="tbd">
  46.             <tr>
  47.                 <td>小黑</td>
  48.                 <td>xiaohei@126.com</td>
  49.             </tr>
  50.         </tbody>
  51.     </table>
  52.     <script>
  53.         var btn = document.querySelector('#btn');
  54.         btn.onclick = function () {
  55.             var uname = document.getElementById('uname');
  56.             var email = document.getElementById('email');
  57.             if (uname.value == '' || email.value == '') {
  58.                 alert('内容为空，重新输入');
  59.                 return
  60.             }
  61.             var tr = document.createElement('tr'); //创建行节点
  62.             var tbd = document.getElementById('tbd') //获取tbd
  63.             tbd.appendChild(tr); //将行添加到tbd
  64.             var td1 = document.createElement('td'); //添加td节点
  65.             var td2 = document.createElement('td'); //添加td节点
  66.             td1.innerHTML = uname.value; //吧uname的内容给第一个td
  67.             td2.innerHTML = email.value; //吧email的内容给第er个td
  68.             tr.appendChild(td1); //设置节点 给 tr
  69.             tr.appendChild(td2); //设置节点 给 tr
  70.         }
  71.     </script>
  72. </body>
  74. </html>

4.5点击盒子body变色

  2. <!DOCTYPE html>
  3. <html lang="en">
  5. <head>
  6.   <meta charset="UTF-8">
  7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.   <title>Document</title>
  9.   <style>
  10.     * {
  11.       margin: 0;
  12.       padding: 0;
  13.     }
  15.     p {
  16.       float: left;
  17.       width: 100px;
  18.       height: 100px;
  19.       border: 1px solid red;
  20.       margin: 130px;
  21.     }
  23.     p:nth-child(1) {
  24.       background-color: pink;
  25.     }
  27.     p:nth-child(2) {
  28.       background-color: orange;
  29.     }
  31.     p:nth-child(3) {
  32.       background-color: yellow;
  33.     }
  35.     p:nth-child(4) {
  36.       background-color: black;
  37.     }
  38.   </style>
  39. </head>
  41. <body>
  42.   <p>1</p>
  43.   <p>2</p>
  44.   <p>3</p>
  45.   <p>4</p>
  46.   <script>
  47.     var p = document.querySelectorAll('p');
  48.     for (var i = 0; i < p.length; i++) {
  49.       p[i].setAttribute('index', i)
  50.       p[i].onclick = function () { //给每个p绑定事件
  51.         var index = this.getAttribute('index');
  52.         if (index == 0) {
  53.           document.body.style.backgroundColor = 'pink';
  54.         } else if (index == 1) {
  55.           document.body.style.backgroundColor = 'orange';
  56.         } else if (index == 2) {
  57.           document.body.style.backgroundColor = 'yellow';
  58.         } else if (index == 3) {
  59.           document.body.style.backgroundColor = 'black';
  60.         }
  62.       }
  63.     }
  64.   </script>
  65. </body>
  67. </html>

4.6 仿京东点击显示信息

  2. <!DOCTYPE html>
  3. <html lang="en">
  5. <head>
  6.     <meta charset="UTF-8">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <style>
  10.         * {
  11.             padding: 0;
  12.             margin: 0;
  13.         }
  15.         li {
  16.             list-style: none;
  17.         }
  19.         .box {
  20.             width: 500px;
  21.             height: 50px;
  22.             background-color: pink;
  23.             margin: 100px auto;
  25.         }
  27.         .t ul li {
  28.             float: left;
  30.             width: 100px;
  31.             height: 50px;
  32.             text-align: center;
  33.             line-height: 50px;
  34.             cursor: pointer;
  35.         }
  37.         .item {
  38.             display: none;
  39.         }
  41.         .red {
  42.             background-color: yellow;
  43.         }
  44.     </style>
  45. </head>
  47. <body>
  48.     <div>
  49.         <div class="box">
  50.             <div class="t">
  51.                 <ul>
  52.                     <li class="red">商品介绍</li>
  53.                     <li>规格包装</li>
  54.                     <li>售后保障</li>
  55.                     <li>商品评价</li>
  56.                     <li>手机社区</li>
  57.                 </ul>
  58.             </div>
  59.             <div class="b">
  60.                 <div class="item">商品介绍</div>
  61.                 <div class="item">规格包装</div>
  62.                 <div class="item">售后保障</div>
  63.                 <div class="item">商品评价</div>
  64.                 <div class="item">手机社区</div>
  65.             </div>
  66.         </div>
  67.     </div>
  68.     <script>
  69.         var li = document.querySelectorAll('li'); //获取所有li
  70.         var items = document.querySelectorAll('.item'); //获取所有div      
  71.         for (var i = 0; i < li.length; i++) {
  72.             li[i].setAttribute('index', i); //给每个li设置自定义属性（或者理解索引）
  73.             li[i].onclick = function () { //给每个li添加点击事件
  74.                 for (var i = 0; i < li.length; i++) { //派他思想
  75.                     li[i].className = ''; //把每个li的颜色干掉
  76.                 }
  77.                 this.className = 'red'; //留下自己的颜色
  78.                 var index = this.getAttribute('index') //获取自定义属性（索引）
  79.                 for (var i = 0; i < items.length; i++) { //派他思想
  80.                     items[i].style.display = 'none'; //让div隐藏
  81.                 }
  82.                 items[index].style.display = 'block'; //之让自己显示
  83.             }
  85.         }
  86.     </script>
  87. </body>
  89. </html>

4.7仿微博下拉菜单

  2. <!DOCTYPE html>
  3. <html lang="en">
  5. <head>
  6.     <meta charset="UTF-8">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <style>
  10.         * {
  11.             margin: 0;
  12.             padding: 0;
  13.         }
  15.         li {
  16.             list-style-type: none;
  17.         }
  19.         a {
  20.             text-decoration: none;
  21.             font-size: 14px;
  22.         }
  24.         .nav {
  25.             margin: 100px;
  26.         }
  28.         .nav>li {
  29.             position: relative;
  30.             float: left;
  31.             width: 80px;
  32.             height: 41px;
  33.             text-align: center;
  34.         }
  36.         .nav li a {
  37.             display: block;
  38.             width: 100%;
  39.             height: 100%;
  40.             line-height: 41px;
  41.             color: #333;
  42.         }
  44.         .nav>li>a:hover {
  45.             background-color: #eee;
  46.         }
  48.         .nav ul {
  49.             display: none;
  50.             position: absolute;
  51.             top: 41px;
  52.             left: 0;
  53.             width: 100%;
  54.             border-left: 1px solid #FECC5B;
  55.             border-right: 1px solid #FECC5B;
  56.         }
  58.         .nav ul li {
  59.             border-bottom: 1px solid #FECC5B;
  60.         }
  62.         .nav ul li a:hover {
  63.             background-color: #FFF5DA;
  64.         }
  65.     </style>
  66. </head>
  68. <body>
  69.     <ul class="nav">
  70.         <li>
  71.             <a href="#">微博</a>
  72.             <ul>
  73.                 <li>
  74.                     <a href="">私信</a>
  75.                 </li>
  76.                 <li>
  77.                     <a href="">评论</a>
  78.                 </li>
  79.                 <li>
  80.                     <a href="">@我</a>
  81.                 </li>
  82.             </ul>
  83.         </li>
  84.         <li>
  85.             <a href="#">微博</a>
  86.             <ul>
  87.                 <li>
  88.                     <a href="">私信</a>
  89.                 </li>
  90.                 <li>
  91.                     <a href="">评论</a>
  92.                 </li>
  93.                 <li>
  94.                     <a href="">@我</a>
  95.                 </li>
  96.             </ul>
  97.         </li>
  98.         <li>
  99.             <a href="#">微博</a>
  100.             <ul>
  101.                 <li>
  102.                     <a href="">私信</a>
  103.                 </li>
  104.                 <li>
  105.                     <a href="">评论</a>
  106.                 </li>
  107.                 <li>
  108.                     <a href="">@我</a>
  109.                 </li>
  110.             </ul>
  111.         </li>
  112.         <li>
  113.             <a href="#">微博</a>
  114.             <ul>
  115.                 <li>
  116.                     <a href="">私信</a>
  117.                 </li>
  118.                 <li>
  119.                     <a href="">评论</a>
  120.                 </li>
  121.                 <li>
  122.                     <a href="">@我</a>
  123.                 </li>
  124.             </ul>
  125.         </li>
  126.     </ul>
  127.     <script>
  128.         var nav = document.querySelector('.nav');
  129.         var lis = nav.children; // 得到4个小li
  130.         for (var i = 0; i < lis.length; i++) {
  131.             lis[i].onmouseover = function () {
  132.                 this.children[1].style.display = 'block'
  133.             }
  134.             lis[i].onmouseout = function () {
  135.                 this.children[1].style.display = ''
  136.             }
  137.         }
  138.     </script>
  139. </body>
  141. </html>

4.8动态创建表格

  2. <!DOCTYPE html>
  3. <html lang="en">
  5. <head>
  6.     <meta charset="UTF-8">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <style>
  10.         * {
  11.             margin: 0;
  12.             padding: 0;
  13.         }
  15.         li {
  16.             list-style-type: none;
  17.         }
  19.         a {
  20.             text-decoration: none;
  21.             font-size: 14px;
  22.         }
  24.         .nav {
  25.             margin: 100px;
  26.         }
  28.         .nav>li {
  29.             position: relative;
  30.             float: left;
  31.             width: 80px;
  32.             height: 41px;
  33.             text-align: center;
  34.         }
  36.         .nav li a {
  37.             display: block;
  38.             width: 100%;
  39.             height: 100%;
  40.             line-height: 41px;
  41.             color: #333;
  42.         }
  44.         .nav>li>a:hover {
  45.             background-color: #eee;
  46.         }
  48.         .nav ul {
  49.             display: none;
  50.             position: absolute;
  51.             top: 41px;
  52.             left: 0;
  53.             width: 100%;
  54.             border-left: 1px solid #FECC5B;
  55.             border-right: 1px solid #FECC5B;
  56.         }
  58.         .nav ul li {
  59.             border-bottom: 1px solid #FECC5B;
  60.         }
  62.         .nav ul li a:hover {
  63.             background-color: #FFF5DA;
  64.         }
  65.     </style>
  66. </head>
  68. <body>
  69.     <ul class="nav">
  70.         <li>
  71.             <a href="#">微博</a>
  72.             <ul>
  73.                 <li>
  74.                     <a href="">私信</a>
  75.                 </li>
  76.                 <li>
  77.                     <a href="">评论</a>
  78.                 </li>
  79.                 <li>
  80.                     <a href="">@我</a>
  81.                 </li>
  82.             </ul>
  83.         </li>
  84.         <li>
  85.             <a href="#">微博</a>
  86.             <ul>
  87.                 <li>
  88.                     <a href="">私信</a>
  89.                 </li>
  90.                 <li>
  91.                     <a href="">评论</a>
  92.                 </li>
  93.                 <li>
  94.                     <a href="">@我</a>
  95.                 </li>
  96.             </ul>
  97.         </li>
  98.         <li>
  99.             <a href="#">微博</a>
  100.             <ul>
  101.                 <li>
  102.                     <a href="">私信</a>
  103.                 </li>
  104.                 <li>
  105.                     <a href="">评论</a>
  106.                 </li>
  107.                 <li>
  108.                     <a href="">@我</a>
  109.                 </li>
  110.             </ul>
  111.         </li>
  112.         <li>
  113.             <a href="#">微博</a>
  114.             <ul>
  115.                 <li>
  116.                     <a href="">私信</a>
  117.                 </li>
  118.                 <li>
  119.                     <a href="">评论</a>
  120.                 </li>
  121.                 <li>
  122.                     <a href="">@我</a>
  123.                 </li>
  124.             </ul>
  125.         </li>
  126.     </ul>
  127.     <script>
  128.         var nav = document.querySelector('.nav');
  129.         var lis = nav.children; // 得到4个小li
  130.         for (var i = 0; i < lis.length; i++) {
  131.             lis[i].onmouseover = function () {
  132.                 this.children[1].style.display = 'block'
  133.             }
  134.             lis[i].onmouseout = function () {
  135.                 this.children[1].style.display = ''
  136.             }
  137.         }
  138.     </script>
  139. </body>
  141. </html>

4.9仿留言板效果

  2. <!DOCTYPE html>
  3. <html lang="en">
  5. <head>
  6.     <meta charset="UTF-8">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <style>
  10.         div {
  11.             width: 500px;
  12.             margin: 100px auto;
  13.         }
  15.         * {
  16.             margin: 0;
  17.             padding: 0;
  18.         }
  20.         li {
  21.             width: 220px;
  22.             height: 50px;
  23.             line-height: 50px;
  25.             list-style: none;
  26.             color: #333;
  27.             background-color: #ccc;
  28.         }
  30.         a {
  31.             float: right;
  32.             color: red;
  33.             line-height: 50px;
  34.             cursor: pointer;
  35.         }
  36.     </style>
  37. </head>
  39. <body>
  40.     <div>
  41.         <textarea name="" id="" cols="30" rows="10"></textarea>
  42.         <button>发表</button>
  43.         <ul>
  45.         </ul>
  46.     </div>
  47.     <script>
  48.         var btn = document.querySelector('button');
  49.         var ul = document.querySelector('ul');
  50.         var text = document.querySelector('textarea');
  51.         var li = document.querySelectorAll('li')
  52.         btn.onclick = function () {
  53.             if (text.value == '') {
  54.                 alert('输入为空，不能发布');
  55.             } else {
  56.                 var lili = document.createElement('li');
  57.                 ul.appendChild(lili);
  58.                 lili.innerHTML = text.value + "<a herf='javascript:;'>删除</a>";
  59.                 text.value = ''
  60.             }
  61.             ul.insertBefore(lili, ul.children[0]);
  62.             var a = document.querySelectorAll('a');
  63.             for (var i = 0; i < a.length; i++) {
  64.                 a[i].onclick = function () {
  65.                     ul.removeChild(ul.children[0])
  66.                 }
  67.             }
  68.         }
  69.     </script>
  70. </body>
  72. </html>