DOM基本概念

DOM的基本概念

DOM使JS操控HTML变得优雅

image.png

DOM是JS操控HTML和CSS的桥梁

image.png
image.png

DOM简介

image.png

DOM节点树

image.png
image.png

nodeType常用属性值

image.png
image.png

节点访问和位置的关系

访问元素节点

所谓“访问”元素节点，就是指“得到”、“获取”页面上的元素节点。
对节点进行操作，第一步就是要得到它。
访问元素节点主要依靠document对象。

认识document对象

image.png

访问元素节点的常用方法

image.png

getElementByld()

image.png
image.png
延迟运行
image.png
image.png

getElementsByTagName()

image.png
image.png

getElementsByClassName()

image.png
image.png

querySelector()

image.png
image.png

querySelectorAll()

image.png

节点的关系

image.png
image.png

注意

image.png

排除文本节点的干扰

image.png

书写常见的节点关系函数

image.png

  1. <div id="box">
  2.   <p id="par">我是</p>
  3.   <p>我是数组</p>
  4.   <p id="para">
  5.     <span>1</span>
  6.     <span>2</span>
  7.     <span>3</span>
  8.   </p>
  9.   <p>我是数组</p>
  10.   <p>我是数组</p>
  11.   <p>我是数组</p>
  12. </div>
  13. <script>
  14.   //得到p标签的数组
  15.   var box = document.getElementById('box');
  16.   var para = document.getElementById('para');
  17.   //封装一个函数，这个函数可以返回元素的所有子元素节点（兼容到IE6），类似children的功能
  18.   function getChildren(node) {
  19.     //结果数组
  20.     var children = [];
  21.     //遍历node这个节点的所有子节点，判断每一个子节点的nodeType属性是不是1
  22.     //如果是1，就推入结果数组
  23.     for (var i = 0; i < node.childNodes.length; i++) {
  24.       if (node.childNodes[i].nodeType == 1) {
  25.         children.push(node.childNodes[i]);
  26.       }
  27.     }
  28.     return children;
  29.   }
  31.   console.log(getChildren(box));
  32.   //封装一个函数，这个函数可以返回元素的前一个元素兄弟节点（兼容到IE6），类似previousElementSibling的功能
  33.   function getElemenPrevtSibling(node) {
  34.     var o = node;
  35.     //使用while语句
  36.     while (o.previousSibling != null) {
  37.       if (o.previousSibling.nodeType == 1) {
  38.         //结束循环，找到了
  39.         return o.previousSibling;
  40.       }
  41.       //让o成为它的前一个节点
  42.       o = o.previousSibling;
  43.     }
  44.   }
  45.   console.log(getElemenPrevtSibling(para));
  46.   //封装第三个函数，这个函数可以返回元素的所有兄弟节点
  47.   function getAllElementSibling(node) {
  48.     //前面的元素兄弟节点
  49.     var prevs = [];
  50.     //后面的元素兄弟节点
  51.     var nexts = [];
  52.     var o = node;
  53.     //遍历node的前面的节点
  54.     while(o.previousSibling != null){              
  55.       if (o.previousSibling.nodeType == 1) {
  56.         prevs.unshift(o.previousSibling);
  57.       }
  58.       o=o.previousSibling;
  59.     }
  60.     o = node;
  61.     //遍历node的后面的节点
  62.     while(o.nextSibling != null){              
  63.       if (o.nextSibling.nodeType == 1) {
  64.         prevs.unshift(o.nextSibling);
  65.       }
  66.       o=o.nextSibling;
  67.     }
  68.     //将两个数组进行合并，然后返回
  69.     return prevs.concat(nexts);
  70.   }
  71.   console.log(getAllElementSibling(para));
  72.     </script>

节点操作

节点操作

如何改变元素节点中的内容

image.png

  1.     <div id="box"></div>
  3.     <script>
  4.         var obox = document.getElementById('box');
  5.         obox.innerHTML='<ul><li>牛奶</li> <li>牛</li></ul>';
  6.         obox.innerText='<ul><li>牛奶</li> <li>牛</li></ul>';
  7.     </script>

如何改变元素节点的CSS样式

image.png

  1.  <style>
  2.         .box{
  3.             width: 200px;
  4.             height: 200px;
  5.             border: 1px solid #000;
  6.         }
  7.     </style>
  8. <div class="box" id="box"></div>
  10.     <script>
  11.         var oBox=document.getElementById('box');
  12.         oBox.style.backgroundColor='red';
  13.     </script>

如何改变元素节点的HTML属性

image.png

  1. <img src="images/bj/0.jpg" id="pic">
  2.     <a href="http://www.baidu.com" id="link">
  3.         去百度
  4.     </a>
  5.     <script>
  6.         var opic = document.getElementById('pic');
  7.         var opi = document.getElementById('link');
  9.         opic.src = 'images/bj/2.jpg';
  10.         opi.href = 'http://sbj.cnipa.gov.cn/sbcx/';
  11.         opi.innerText = '去商标';
  12.     </script>

image.png

  1.  <div id="box"></div>
  2.     <script>
  3.         var box = document.getElementById('box');
  4.         box.setAttribute('data-n', 10);
  5.         var n=box.getAttribute('data-n');
  6.         alert(n);
  7.     </script>

节点的创建、移除和克隆

节点的创建、移除和克隆

节点的创建

image.png

孤儿节点

image.png

appendChild()

image.png

insertBefore()

image.png

  1.     <div id="box">
  2.         <p>我是段落1 </p>
  3.         <p>我是段落2 </p>
  4.         <p>我是段落3 </p>
  5.     </div>
  6.     <script>
  7.         var Obox = document.getElementById('box');
  8.         var ops=document.getElementsByTagName('p');
  9.         //创建孤儿节点
  10.         var oP=document.createElement('p');
  11.         //设置内部文字
  12.         oP.innerText='我是新来的';
  13.         //上树
  14.         //Obox.appendChild(oP);
  15.         Obox.insertBefore(oP,ops[2]);
  16.     </script>

小练习

image.png

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <style>
  10.         td {
  11.             width: 20px;
  12.             height: 20px;
  13.             border: 1px solid #000;
  14.         }
  15.     </style>
  16. </head>
  19. <body>
  20.     <table id="mytable"></table>
  21.     <script>
  22.         //请动态创建出一个20行12列的表格
  23.         var mytable = document.getElementById('mytable');
  24.         for (var i = 0; i < 20; i++) {
  25.             //创建了新的tr标签
  26.             var tr = document.createElement('tr');
  27.             for (var j = 0; j < 12; j++) {
  28.                 //创建了新的td标签
  29.                 var td = document.createElement('td');
  30.                 //让tr追加td标签
  31.                 tr.appendChild(td);
  32.             }//让mytable追加td标签
  33.             mytable.appendChild(tr);
  34.         }
  35.     </script>
  36. </body>
  38. </html>

image.png

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <style>
  10.         td {
  11.             width: 120px;
  12.             height: 30px;
  13.             border: 1px solid #000;
  14.         }
  15.     </style>
  16. </head>
  19. <body>
  20.     <table id="mytable"></table>
  21.     <script>
  22.         //请创建九九乘法表
  23.         var mytable = document.getElementById('mytable');
  24.         for (var i = 1; i < 10; i++) {
  25.             //创建了
  26.             var tr = document.createElement('tr');
  27.             for (var j = 1; j <= i; j++) {
  28.                 //创建了新的td标签
  29.                 var td = document.createElement('td');
  30.                 //设置td内部的文字
  31.                 td.innerText = i + '乘' + j + '等于' + (i * j);
  32.                 //让tr追加td标签
  33.                 tr.appendChild(td);
  34.             }//让mytable追加td标签
  35.             mytable.appendChild(tr);
  36.         }
  37.     </script>
  38. </body>
  40. </html>

移动节点

image.png

  1.     <div id="box1">
  2.         <p id="para">我是段落移动</p>
  3.     </div>
  4.     <div id="box2">
  5.         <P>我是原有</P>
  6.         <P>我是原有</P>
  7.         <P>我是原有</P>
  8.         <P>我是原有</P>
  9.     </div>
  10.     <script>
  11.         var box1 = document.getElementById('box1');
  12.         var box2 = document.getElementById('box2');
  13.         var para = document.getElementById('para');
  14.         var ps = document.getElementsByTagName('p');
  15.         // box2.appendChild(para);
  16.         box2.insertBefore(para, ps[2]);
  17.     </script>

删除节点

image.png

克隆节点

image.png

  1.     <div id="box1">
  2.         <ul>
  3.             <li>牛奶</li>
  4.             <li>咖啡</li>
  5.             <li>可乐</li>
  6.         </ul>
  7.     </div>
  8.     <div id="box2"></div>
  9.     <script>
  10.         var box1 = document.getElementById('box1');
  11.         var box2 = document.getElementById('box2');
  12.         var theul = document.getElementsByTagName('ul')[0];
  14.         var newul=theul.cloneNode(true);
  15.         box2.appendChild(newul);
  17.     </script>

DOM事件

事件监听

什么是“事件监听”

image.png

最简单的设置事件监听的方法

image.png

常见的鼠标事件监听

image.png

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <style>
  10.         div {
  11.             width: 200px;
  12.             height: 200px;
  13.             background-color: rgb(227, 19, 19);
  14.         }
  15.     </style>
  16. </head>
  18. <body>
  19.     <div id="box"></div>
  20.     <button>确认</button>
  21.     <script>
  22.         var obox = document.getElementById('box');
  23.         //给box这个盒子添加点击事件监听
  24.         obox.onclick = function () {
  25.             console.log('你好，我是click');
  26.         }
  27.         obox.ondblclick = function () {
  28.             console.log('你好，我是ondblclick');
  29.         }
  30.         obox.onmousedown = function () {
  31.             console.log('你好，我是onmousedown');
  32.         }
  33.         obox.onmouseup = function () {
  34.             console.log('你好，我是onmouseup');
  35.         }
  36.         obox.onmouseenter = function () {
  37.             console.log('你好，我是onmouseenter');
  38.         }
  39.         obox.onmouseleave = function () {
  40.             console.log('你好，我是onmouseleave');
  41.         }
  42.         obox.onmousemove = function () {
  43.             console.log('你好，我是onmousemove');
  44.         }
  45.     </script>
  46. </body>
  48. </html>

常见的键盘事件监听

image.png

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9. </head>
  11. <body>
  12.     <input type="text" id="nameFiled">
  13.     <script>
  14.         var nameFiled=document.getElementById('nameFiled');
  16.         nameFiled.onkeydown=function(){
  17.             console.log('我是onkeydown')
  18.         }
  19.         nameFiled.onkeypress=function(){
  20.             console.log('我是onkeypress')
  21.         }
  22.         nameFiled.onkeyup=function(){
  23.             console.log('我是onkeyup')
  24.         }
  25.     </script>
  26. </body>
  28. </html>

常见的表单事件监听

image.png

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9. </head>
  11. <body>
  12.     <form id="myform">
  13.         <p>
  14.             姓名：
  15.             <input type="text" name="nameField">
  16.         </p>
  17.         <p>
  18.             年龄：
  19.             <input type="text" name="ageField">
  20.         </p> 
  21.         <p>
  22.             年龄：
  23.             <input type="submit" name="ageField">
  24.         </p>
  25.     </form>
  26.     <script>
  27.         var myform = document.getElementById('myform');
  28.         var nameField = myform.nameField;
  29.         var ageField = myform.ageField;
  31.         nameField.onchange = function () {
  32.             console.log('你已经修改完姓名');
  33.         }
  34.         nameField.oninput = function () {
  35.             console.log('你正在修改姓名');
  36.         }
  37.         nameField.onfocus = function () {
  38.             console.log('姓名框已经得到了焦点');
  39.         }
  40.         nameField.onblur = function () {
  41.             console.log('姓名框已经失去了焦点');
  42.         }
  43.         myform.onsubmit=function(){
  44.             console.log('你正在尝试提交表单');
  45.         }
  46.     </script>
  47. </body>
  49. </html>

事件传播

事件的传播

image.png

Onxxx写法只能监听冒泡阶段

image.png

addEventListener()方法

image.png
image.png

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <style>
  10.         #box1 {
  11.             width: 202px;
  12.             height: 202px;
  13.             border: 1px solid #000;
  14.             padding: 50px;
  15.         }
  17.         #box2 {
  18.             width: 100px;
  19.             height: 100px;
  20.             border: 1px solid #000;
  21.             padding: 50px;
  22.         }
  24.         #box3 {
  25.             width: 100px;
  26.             height: 100px;
  27.             border: 1px solid #000;
  29.         }
  30.     </style>
  31. </head>
  33. <body>
  34.     <div id="box1">
  35.         <div id="box2">
  36.             <div id="box3">
  38.             </div>
  39.         </div>
  41.     </div>
  42.     <script>
  43.         var box1 = document.getElementById('box1');
  44.         var box2 = document.getElementById('box2');
  45.         var box3 = document.getElementById('box3');
  47.        // box1.onclick = function () {
  48.         //    console.log('我是box1的onclick');s
  49.        // }
  50.        // box2.onclick = function () {
  51.        //     console.log('我是box2的onclick');
  52.        // }
  53.       //  box3.onclick = function () {
  54.        //     console.log('我是box3的onclick');
  55.         //}
  56.         box1.addEventListener('click',function(){
  57.             console.log('我是box1的捕获阶段')
  58.         },true)
  59.         box2.addEventListener('click',function(){
  60.             console.log('我是box2的捕获阶段')
  61.         },true)
  62.         box3.addEventListener('click',function(){
  63.             console.log('我是box3的捕获阶段')
  64.         },true)
  65.         box1.addEventListener('click',function(){
  66.             console.log('我是box1的冒泡阶段')
  67.         },false)
  68.         box2.addEventListener('click',function(){
  69.             console.log('我是box2的冒泡阶段')
  70.         },false)
  71.         box3.addEventListener('click',function(){
  72.             console.log('我是box3的冒泡阶段')
  73.         },false)
  74.     </script>
  75. </body>
  77. </html>

事件对象

image.png

鼠标

image.png

鼠标位置

image.png
image.png
image.png

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  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.         }
  14.         #box {
  15.             width: 200px;
  16.             height: 200px;
  17.             background-color: rgb(36, 30, 30);
  18.             margin: 100px;
  19.             padding: 50px;
  20.         }
  21.         body {
  22.             height: 2000px;
  23.         }
  24.         #info {
  25.             font-size: 30px;
  26.         }
  27.     </style>
  28. </head>
  30. <body>
  31.     <div id="box"> </div>
  32.     <div id="info"> </div>
  33.     <script>
  34.         var obox = document.getElementById('box');
  35.         var oinfo = document.getElementById('info');
  37.         obox.onmousemove = function (e) {
  38.             oinfo.innerHTML = 'offsetX/Y:' + e.offsetX + ',' + e.offsetY+'<br>'
  39.                             + 'clientX/Y:' + e.clientX + ',' + e.clientY+'<br>'
  40.                             + 'pageX/Y:' + e.pageX + ',' + e.pageY;
  41.         }
  42.     </script>
  43. </body>
  45. </html>

e.charCode和e.keyCode属性

image.png

charCode字符码

image.png

keyCode属性

image.png

  1. <input type="text" id="field1">
  2.     <h1 id="info1"></h1>
  3.     <input type="text" id="field2">
  4.     <h1 id="info2"></h1>
  5.     <script>
  6.         var ofield1 = document.getElementById('field1');  
  7.         var oinfo1 = document.getElementById('info1');
  8.         var ofield2 = document.getElementById('field2');
  9.         var oinfo2 = document.getElementById('info2');
  11.         ofield1.onkeypress = function (e) {
  12.             oinfo1.innerText = '你输入的字符的字符码是' + e.charCode;
  13.          }
  14.          ofield2.onkeydown = function (e) {
  15.             oinfo2.innerText = '你按下的按键的键码是' + e.keyCode;
  16.          }
  17.     </script>

小案例

image.png

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <style>
  10.         #box {
  11.             position: absolute;
  12.             top: 200px;
  13.             left: 200px;
  14.             width: 100px;
  15.             height: 100px;
  16.             background-color: rgb(214, 41, 41);
  17.         }
  18.     </style>
  19. </head>
  21. <body>
  22.     <div id="box"></div>
  23.     <script>
  24.         var box = document.getElementById('box');
  26.         //全局变量t、l,分别代表盒子的top属性和left属性值
  27.         var t = 200;
  28.         var l = 200;
  29.         //监听document对象的键盘按下事件监听，表示当用户在整个网页上按下按键的时候
  30.         document.onkeydown = function (e) {
  31.             switch (e.keyCode) {
  32.                 case 37:
  33.                     l -= 5;
  34.                     break;
  35.                 case 38:
  36.                     t -= 5;
  37.                     break;
  38.                 case 39:
  39.                     l += 5;
  40.                     break;
  41.                 case 40:
  42.                     t += 5;
  43.                     break;
  44.             }
  45.             //更改样式
  46.             box.style.left = l + 'px';
  47.             box.style.top = t + 'px'
  48.         }
  49.     </script>
  50. </body>
  52. </html>

e.preventDefault()方法

image.png

小案例1

image.png

  1. <p>
  2.         <input type="text" id="field">
  3.     </p>
  4.     <script>
  5.         var field = document.getElementById('field');
  6.         field.onkeypress = function (e) {
  7.             console.log(e.charCode);
  8.             //根据和用户输入的字符的字符码(e.charCode)
  9.             //数字0~9，字符码48~57
  10.             //小写字母a~z，字符码97~122
  11.             if (!(e.charCode >= 48 && e.charCode <= 57 || e.charCode >= 97 && e.charCode <= 122) ){
  12.                 e.小案例2();
  13.             }
  14.         }
  15.     </script>

小案例2

image.png

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <style>
  10.         #box {
  11.             width: 200px;
  12.             height: 200px;
  13.             background: #000;
  14.         }
  15.         body{
  16.             height: 2000px;
  17.         }
  18.     </style>
  19. </head>
  21. <body>
  22.     <div id="box"></div>
  23.     <h1 id="info"></h1>
  24.     <script>
  25.         var box = document.getElementById('box');
  26.         var info = document.getElementById('info');
  27.         //全局变量就是info中显示的数字
  28.         var a = 0;
  29.         //给box盒子添加鼠标事件监听
  30.         box.onmousewheel = function (e) {
  31.             //阻止默认事件；就是说当用户在盒子里滚动鼠标滚轮的时候，不会引发页面的滚动
  32.             e.preventDefault();
  33.             if (e.deItaY > 0) {
  34.                 a++;
  35.             } else {
  36.                 a--;
  37.             }
  38.             info.innerText = a;
  39.         }
  40.     </script>
  41. </body>
  43. </html>

e.stopPropagation()方法

image.png

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <style>
  10.         #box {
  11.             width: 200px;
  12.             height: 200px;
  13.             background: #000;
  14.         }
  15.         body{
  16.             height: 2000px;
  17.         }
  18.     </style>
  19. </head>
  21. <body>
  22.     <div id="box">
  23.         <button id="bth">按我</button>
  24.     </div>
  25.     <h1 id="info"></h1>
  26.     <script>
  27.         var box = document.getElementById('box');
  28.         var bth = document.getElementById('bth');
  30.        // box.onclick=function(){
  31.          //   console.log('我是盒子');
  32.        // };
  33.         //bth.onclick=function(e){
  34.              //阻止事件继续传播
  35.         //    e.stopPropagation();
  36.         //    console.log('我是按钮');
  37.       //  };
  38.         box.addEventListener('click',function(){
  39.             console.log('我是box的捕获阶段')
  40.         },true)
  41.         bth.addEventListener('click',function(e){
  42.             //阻止事件继续传播
  43.             e.stopPropagation();
  44.             console.log('我是bth的捕获阶段')
  45.         },false)
  47.     </script>
  48. </body>
  50. </html>

小案例

image.png

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <style>
  10.         .model{
  11.             width: 200px;
  12.             height: 200px;
  13.             background-color: rgb(236, 40, 40);
  14.             position: absolute;
  15.             top: 50%;
  16.             left: 50%;
  17.             margin-top: -70px;
  18.             margin-left: -200px;
  19.             display: none;
  20.         }
  21.     </style>
  22. </head>
  24. <body>
  25.     <button id="bth">
  26.         按我弹出弹出层
  27.     </button>
  28.     <div class="model" id="box"></div>
  29.     <script>
  30.        var bth=document.getElementById('bth');
  31.        var box=document.getElementById('box');
  32.        //点击按钮的时候，弹出层显示
  33.        bth.onclick=function(e){
  34.            //阻止事件继续传播到document身上
  35.            e.stopPropagation();
  36.            box.style.display='block';
  37.        }
  38.         //点击页面任何部分的时候，弹出层关闭
  39.         document.onclick=function(){
  40.            box.style.display='none';
  41.        }
  42.        //阻止事件继续传播
  43.        box.onclick=function(e){
  44.            //阻止事件继续传播到document身上
  45.         e.stopPropagation();
  46.        }
  47.     </script>
  48. </body>
  50. </html>

事件监听

批量添加事件监听

image.png

  1.     <ul id="list">
  2.         <li>列表项</li>
  3.         <li>列表项</li>
  4.         <li>列表项</li>
  5.         <li>列表项</li>
  6.         <li>列表项</li>
  7.         <li>列表项</li>
  8.         <li>列表项</li>
  9.         <li>列表项</li>
  10.         <li>列表项</li>
  11.         <li>列表项</li>
  12.         <li>列表项</li>
  13.         <li>列表项</li>
  14.         <li>列表项</li>
  15.         <li>列表项</li>
  16.         <li>列表项</li>
  17.         <li>列表项</li>
  18.         <li>列表项</li>
  19.         <li>列表项</li>
  20.         <li>列表项</li>
  21.         <li>列表项</li>
  22.     </ul>
  23.     <script>
  24.         var list = document.getElementById('list');
  25.         var lis = list.getElementsByTagName("li");
  27.         console.log(lis.length);
  28.         //书写循环语句，批量给元素添加监听
  29.         for (var i = 0; i < lis.length; i++) {
  30.             lis[i].onclick = function () {
  31.                 //在这个函数中，this代表点击的这个元素，this涉及函数上下文的相关知识
  32.                 this.style.color = 'red';
  33.             }
  34.         }
  35.     </script>

批量添加事件监听的性能问题

image.png

新增元素动态绑定事件

image.png

  1.     <button id="bth">按我添加新的列表项</button>
  2.     <ul id="list">
  4.     </ul>
  5.     <script>
  6.         var bth = document.getElementById('bth');
  7.         var list = document.getElementById('list');
  8.         //按钮的点击事件
  9.         bth.onclick = function () {
  10.             //创建一个新的li列表项，孤儿节点
  11.             var lis = document.createElement("li");
  12.             lis.innerHTML = '我是列表项';
  13.             //上树
  14.             list.appendChild(lis);
  15.             //给新创建的这个li节点添加onclick事件监听
  16.             lis.onclick=function(){
  17.                 this.style.color = 'red';
  18.             }
  19.         }
  20.     </script>

动态绑定事件的问题

image.png

事件委托

image.png

e.target和e.currentTarget属性

image.png

  1.     <button id="btn">按我创建一个新列表项</button>
  2.     <ul id="list">
  3.         <li>列表项</li>
  4.         <li>列表项</li>
  5.         <li>列表项</li>
  6.     </ul>
  7.     <script>
  8.         var list = document.getElementById('list');
  9.         var btn = document.getElementById('btn');
  11.         list.onclick = function (e) {
  12.             // e.target表示用户真正点击的那个元素
  13.             e.target.style.color = 'red';
  14.         }
  16.         btn.onclick=function(){
  17.             //创建新的li元素
  18.             var lis = document.createElement("li");
  19.             lis.innerHTML = '我是新来的';
  20.             //上树
  21.             list.appendChild(lis);
  22.         }
  23.     </script>

事件委托的使用场景

image.png

注意事项

image.png
image.png

实现动画

定时器和延时器

定时器

image.png

  1.  var a=0;
  2.         setInterval(function(){
  3.             console.log(a);
  4.             a=a+2;
  5.         },1000)

函数的参数

image.png

具名函数也可以传入setInterval

image.png

清除定时器

image.png

  1.     <h1 id="info">0</h1>
  2.     <button id="btn1">开始</button>
  3.     <button id="btn2">暂停</button>
  4.     <script>
  5.         var info = document.getElementById('info');
  6.         var btn1 = document.getElementById('btn1');
  7.         var btn2 = document.getElementById('btn2');
  9.         var a = 0;
  10.         //设置一个全局变量
  11.         var timer = null;
  12.         btn1.onclick = function () {
  13.             //为了防止定时器叠加，我们应该在设置定时器之前先清除定时器
  14.             clearInterval(timer);
  15.             //更改全局变量timer的值为一个定时器实体
  16.             timer = setInterval(function () {
  17.                 info.innerText = ++a;
  18.             }, 1000);
  19.         };
  20.         btn2.onclick = function () {
  21.             clearInterval(timer);
  22.         }
  23.     </script>

延时器

image.png

清除延时器

image.png

  1. <button id="btn1">2秒后弹出你好</button>
  2. <button id="btn2">取消弹出</button>
  3. <script>
  4.   var btn1 = document.getElementById('btn1');
  5.   var btn2 = document.getElementById('btn2');
  7.   var timer;
  8.   btn1.onclick = function () {
  9.     timer = setTimeout(function () {
  10.       console.log('你好');
  11.     }, 2000);
  12.   }
  13.   btn2.onclick = function () {
  14.     clearTimeout(timer);
  15.   }
  16. </script>

初步认识异步语句

image.png
image.png

使用定时器实现动画

image.png

image.png
image.png

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <style>
  9.         #box {
  10.             position: absolute;
  11.             top: 100px;
  12.             left: 100px;
  13.             width: 100px;
  14.             height: 100px;
  15.             background-color: orange;
  16.         }
  17.     </style>
  18. </head>
  20. <body>
  21.     <button id="btn">运动</button>
  22.     <div id="box"></div>
  23.     <script>
  24.         //得到元素
  25.         var btn = document.getElementById('btn');
  26.         var box = document.getElementById('box');
  28.         //全局变量盒子的left值
  29.         var left = 100;
  30.         //按钮监听
  31.         btn.onclick = function () {
  32.             var timer = setInterval(function () {
  33.                 //改变全局变量
  34.                 left += 10;
  35.                 if (left >= 1000) {
  36.                     clearInterval(timer);
  37.                 }
  38.                 box.style.left = left + 'px';
  39.             }, 20)
  40.         }
  41.     </script>
  42. </body>
  44. </html>

JS和CSS结合实现动画

image.png

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <style>
  9.         #box {
  10.             position: absolute;
  11.             top: 100px;
  12.             left: 100px;
  13.             width: 100px;
  14.             height: 100px;
  15.             background-color: orange;
  16.         }
  17.     </style>
  18. </head>
  20. <body>
  21.     <button id="btn">按我运动</button>
  22.     <div id="box"></div>
  23.     <script>
  24.         //得到元素
  25.         var btn = document.getElementById('btn');
  26.         var box = document.getElementById('box');
  28.         //标示量，指示当前盒子在左边还是右边
  29.         var pos = 1;   //1左边，2右边
  30.         //事件监听
  31.         btn.onclick = function () {
  32.             //把过渡加上
  33.             box.style.transition = 'all 2s linear 0s';
  34.             if (pos == 1) {
  35.                 //瞬间移动，但是由于有过渡，所以是动画
  36.                 box.style.left = '1100px';
  37.                 pos = 2;
  38.             } else if (pos == 2){
  39.                 box.style.left = '100px';
  40.             pos = 1;
  41.             }              
  42.         }
  43.     </script>
  44. </body>
  46. </html>

函数节流

image.png
image.png

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        #box {
            position: absolute;
            top: 100px;
            left: 100px;
            width: 100px;
            height: 100px;
            background-color: orange;
        }
    </style>
</head>

<body>
    <button id="btn">按我运动</button>
    <div id="box"></div>
    <script>
        //得到元素
        var btn = document.getElementById('btn');
        var box = document.getElementById('box');

        //标示量，指示当前盒子在左边还是右边
        var pos = 1;   //1左边，2右边
        //函数节流锁
        var lock = true;
        //事件监听
        btn.onclick = function () {
            //首先检查锁是否是关闭
            if (!lock) return;
            //把过渡加上
            box.style.transition = 'all 2s linear 0s';
            if (pos == 1) {
                //瞬间移动，但是由于有过渡，所以是动画
                box.style.left = '1100px';
                pos = 2;
            } else if (pos == 2) {
                box.style.left = '100px';
                pos = 1;
            }
            //关锁
            lock = false;

            setTimeout(function () {
                lock = true;
            }, 2000);
        }
    </script>
</body>

</html>

动画效果开发1·无缝连续滚动特效

原理
image.png

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 1000px;
            height: 130px;
            border: 1px solid #000;
            margin: 50px auto;
            overflow: hidden;
        }

        .box ul {
            list-style: none;
            width: 5000px;
            position: relative;
        }

        .box ul li {
            float: left;
            margin-right: 10px;
        }
    </style>
</head>

<body>
    <div id="box" class="box">
        <ul id="list">
            <li><img src="/images/number/0.png" alt=""></li>
            <li><img src="/images/number/1.png" alt=""></li>
            <li><img src="/images/number/2.png" alt=""></li>
            <li><img src="/images/number/3.png" alt=""></li>
            <li><img src="/images/number/4.png" alt=""></li>
            <li><img src="/images/number/5.png" alt=""></li>
        </ul>
    </div>
    <script>
        var box = document.getElementById('box');
        var list = document.getElementById('list');

        //复制多一遍所有的li
        list.innerHTML += list.innerHTML;

        //全局变量,表示当前list的left值
        var left = 0;

        //定时器，全局变量
        var timer;
        move();
        //动画封装成函数
        function move() {
            //设表先关，防止动画积累
            clearInterval(timer);
            timer = setInterval(function () {
                left -= 4;
                //验收
                if (left <= -1260) {
                    left = 0;
                }
                list.style.left = left + 'px';
            }, 20);
        }
        //鼠标进入停止计时器
        box.onmouseenter = function () {
            clearInterval(timer);
        };
        //鼠标离开继续计时器
        box.onmouseleave = function () {
            move();
        } ;
    </script>
</body>

</html>

动画效果开发2·跑马灯轮播图特效

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .carousel {
            width: 650px;
            height: 360px;
            border: 1px solid #000;
            margin: 50px auto;
            position: relative;
            overflow: hidden;
        }

        .carousel ul {
            list-style: none;
            width: 6000px;
            position: relative;
            left: 0px;
            transition: left .5s ease 0s;
        }

        .carousel ul li {
            float: left;
        }

        .carousel .leftbtn {
            position: absolute;
            left: 20px;
            top: 50%;
            margin-top: -25px;
            width: 50px;
            height: 50px;
            background-color: orange;
            border-radius: 50%;
        }

        .carousel .rightbtn {
            position: absolute;
            right: 20px;
            top: 50%;
            margin-top: -25px;
            width: 50px;
            height: 50px;
            background-color: orange;
            border-radius: 50%;
        }
    </style>
</head>

<body>
    <div class="carousel">
        <ul id="list">
            <li><img src="images/bj/0.jpg" </li>
            <li><img src="images/bj/1.jpg" </li>
            <li><img src="images/bj/2.jpg" </li>
            <li><img src="images/bj/3.jpg" </li>
            <li><img src="images/bj/4.jpg" </li>
        </ul>
        <a href="javascript:;" class="leftbtn" id="leftbtn"></a>
        <a href="javascript:;" class="rightbtn" id="rightbtn"></a>
    </div>
    <script>
        //得到按钮和ul,ul整体进行运动
        var leftbtn = document.getElementById('leftbtn');
        var rightbtn = document.getElementById('rightbtn');
        var llist = document.getElementById('list');


        //克隆第一张照片
        var cloneli = list.firstElementChild.cloneNode(true);
        list.appendChild(cloneli);
        //当前ul显示到第几张了，从0开始数
        var idx = 0;
        //节流锁
        var lock = true;
        //右按钮监听
        rightbtn.onclick = function () {
            //判断锁的状态
            if (!lock) return;
            lock=false;
            //给list加过渡，
            list.style.transition = 'left .5s ease 0s';
            idx++;
            if (idx >4) {
                //设置一个延时器，延时器的作用就是将ul瞬间拉回0的位置，延时器的目的是让过渡动画结束拉回去
                setTimeout(function () {
                    //取消过渡,因为要的是瞬间移动
                    list.style.transition = 'none';
                    list.style.left = 0;
                    idx = 0;
                }, 500)
            }

            list.style.left = -idx * 650 + 'px';
            setTimeout(function () {
                lock = true;
            }, 500)
        }

        leftbtn.onclick = function () {
            if (!lock) return;
            lock=false;
            //判断是不是第0张，如果是，那就用假的替换真的
            if (idx == 0) {
                //取消过渡
                list.style.transition = 'none';
                list.style.left = -5 * 650 + 'px';
                //设置一个延时器，这个延时器的延时时间是0毫秒，虽然是0毫秒，但是可以让我们过渡先是瞬间取消，然后再加上
                setTimeout(function () {
                    list.style.transition = 'left .5s ease 0s';
                    idx = 4;
                    list.style.left = -idx * 650 + 'px';
                }, 0);
            } else {
                idx--;
                list.style.left = -idx * 650 + 'px';
            }
            setTimeout(function () {
                lock = true;
            }, 500)
        }
    </script>动画效果开发2 - 轮播图特效.htm
</body>

</html>

动画效果开发3·呼吸轮播图特效

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .carousel {
            width: 650px;
            height: 360px;
            border: 1px solid #000;
            margin: 50px auto;
            position: relative;
        }

        .carousel ul {
            list-style: none;
        }

        .carousel ul li {
            position: absolute;
            top: 0;
            left: 0;
            /*透明度都是0*/
            opacity: 0;
            transition: opacity 1s ease 0s;
        }

        /*只有第一张透明度是1*/
        .carousel ul li:first-child {
            opacity: 1;
        }

        .carousel .leftbtn {
            position: absolute;
            left: 20px;
            top: 50%;
            margin-top: -25px;
            width: 50px;
            height: 50px;
            background-color: orange;
            border-radius: 50%;
        }

        .carousel .rightbtn {
            position: absolute;
            right: 20px;
            top: 50%;
            margin-top: -25px;
            width: 50px;
            height: 50px;
            background-color: orange;
            border-radius: 50%;
        }
    </style>
</head>

<body>
    <div class="carousel">
        <ul id="list">
            <li><img src="images/bj/0.jpg" </li>
            <li><img src="images/bj/1.jpg" </li>
            <li><img src="images/bj/2.jpg" </li>
            <li><img src="images/bj/3.jpg" </li>
            <li><img src="images/bj/4.jpg" </li>
        </ul>
        <a href="javascript:;" class="leftbtn" id="leftbtn"></a>
        <a href="javascript:;" class="rightbtn" id="rightbtn"></a>
    </div>
    <script>
        //得到按钮和ul,ul整体进行运动
        var leftbtn = document.getElementById('leftbtn');
        var rightbtn = document.getElementById('rightbtn');
        var list = document.getElementById('list');
        var lis = list.getElementsByTagName('li');

        //当前是第几张图显示
        var idx = 0;
        //节流
        var lock = true;
        //右按钮
        rightbtn.onclick = function () {
            //判断节流
            if (!lock) return;
            lock = false;
            //还没有改idx，此时的idx就是老图，老图淡出
            lis[idx].style.opacity = 0;
            idx++;
            if (idx > 4) idx = 0;
            //改了idx，此时的idx这个图片就是新图，新图淡入
            lis[idx].style.opacity = 1;
            //动画结束之后，开锁
            setTimeout(function () {
                lock = true;
            }, 1000)
        }
        //左按钮
        leftbtn.onclick = function () {
            //判断节流
            if (!lock) return;
            lock = false;
            //还没有改idx，此时的idx就是老图，老图淡出
            lis[idx].style.opacity = 0;
            idx--;
            if (idx < 0) idx = 4;
            //改了idx，此时的idx这个图片就是新图，新图淡入
            lis[idx].style.opacity = 1;
            //动画结束之后，开锁
            setTimeout(function () {
                lock = true;
            }, 1000)
        }

    </script>
</body>

</html>