JavaScript笔记

最新推荐文章于 2025-05-14 14:41:23 发布

M DownTime

最新推荐文章于 2025-05-14 14:41:23 发布

阅读量310

点赞数 1

文章标签： javascript 前端开发语言

本文链接：https://blog.youkuaiyun.com/qq_43346784/article/details/129915529

版权

文章详细讲解了JavaScript中的DOM操作，包括获取元素、添加删除节点、事件注册、事件对象等。还介绍了BOM中的location对象用于页面跳转和获取浏览器信息，以及navigator对象用于识别用户设备。同时，探讨了事件流、事件委托、同步和异步的概念。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.内置对象

不需要new 直接使用 Math.PI

1.1 Math

  <script>
    console.log(Math.PI); //3.14
    console.log(Math.max(1, 10)); //10
    Math.max(1,99,"shabi");//NaN
    Math.max(); //-Infinity
  </script>

自定义自己的数学对象

      <script>
          // 利用对象封装自己的数学对象  里面有 PI 最大值和最小值
          var myMath = {
              PI: 3.141592653,
              max: function() {
                  var max = arguments[0];
                  for (var i = 1; i < arguments.length; i++) {
                      if (arguments[i] > max) {
                          max = arguments[i];
                      }
                  }
                  return max;
              },
              min: function() {
                  var min = arguments[0];
                  for (var i = 1; i < arguments.length; i++) {
                      if (arguments[i] < min) {
                          min = arguments[i];
                      }
                  }
                  return min;
              }
          }
          console.log(myMath.PI);
          console.log(myMath.max(1, 5, 9));
          console.log(myMath.min(1, 5, 9));
      </script>

绝对值和一些取整方法

      <script>
          // 1.绝对值方法
          console.log(Math.abs(1)); // 1
          console.log(Math.abs(-1)); // 1
          console.log(Math.abs('-1')); // 隐式转换 会把字符串型 -1 转换为数字型
          console.log(Math.abs('pink')); // NaN 
  
          // 2.三个取整方法
          // (1) Math.floor()   地板 向下取整  往最小了取值
          console.log(Math.floor(1.1)); // 1
          console.log(Math.floor(1.9)); // 1
          // (2) Math.ceil()   ceil 天花板 向上取整  往最大了取值
          console.log(Math.ceil(1.1)); // 2
          console.log(Math.ceil(1.9)); // 2
          // (3) Math.round()   四舍五入  其他数字都是四舍五入，但是 .5 特殊 它往大了取  
          console.log(Math.round(1.1)); // 1
          console.log(Math.round(1.5)); // 2
          console.log(Math.round(1.9)); // 2
          console.log(Math.round(-1.1)); // -1
          console.log(Math.round(-1.5)); // 这个结果是 -1
      </script>

Math.random()函数

      <script>
          // 1.Math对象随机数方法   random() 返回一个随机的小数  0 =< x < 1
          // 2. 这个方法里面不跟参数
          // 3. 代码验证 
          console.log(Math.random());
          // 4. 我们想要得到两个数之间的随机整数 并且 包含这2个整数
          // Math.floor(Math.random() * (max - min + 1)) + min;
          function getRandom(min, max) {
              return Math.floor(Math.random() * (max - min + 1)) + min;
          }
          console.log(getRandom(1, 10));
          // 5. 随机点名  
          var arr = ['张三', '张三丰', '张三疯子', '李四', '李思思', 'pink老师'];
          // console.log(arr[0]);
          console.log(arr[getRandom(0, arr.length - 1)]);
      </script>

1.2Date属性

Date必须使用构造函数,必须使用new

let a = new Date();

<script>
    // Date() 日期对象  是一个构造函数 必须使用new 来调用创建我们的日期对象
    var arr = new Array(); // 创建一个数组对象
    var obj = new Object(); // 创建了一个对象实例
    // 1. 使用Date  如果没有参数 返回当前系统的当前时间
    var date = new Date();
    console.log(date);
    // 2. 参数常用的写法  数字型  2019, 10, 01  或者是 字符串型 '2019-10-1 8:8:8'
    var date1 = new Date(2019, 10, 1);
    console.log(date1); // 返回的是 11月 不是 10月 
    var date2 = new Date('2019-10-1 8:8:8');
    console.log(date2);
</script>

注意 ,月份是从0月开始计算的

日期格式化年月日

      <script>
          // 格式化日期 年月日 
          var date = new Date();
          console.log(date.getFullYear()); // 返回当前日期的年  2019
          console.log(date.getMonth() + 1); // 月份 返回的月份小1个月   记得月份+1 呦
          console.log(date.getDate()); // 返回的是 几号
          console.log(date.getDay()); // 3  周一返回的是 1 周六返回的是 6 但是 周日返回的是 0
          // 我们写一个 2019年 5月 1日 星期三
          var year = date.getFullYear();
          var month = date.getMonth() + 1;
          var dates = date.getDate();
          var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
          var day = date.getDay();
          console.log('今天是：' + year + '年' + month + '月' + dates + '日 ' + arr[day]);
      </script>

日期格式化时分秒

  <script>
      // 格式化日期 时分秒
      var date = new Date();
      console.log(date.getHours()); // 时
      console.log(date.getMinutes()); // 分
      console.log(date.getSeconds()); // 秒
      // 要求封装一个函数返回当前的时分秒 格式 08:08:08
      function getTimer() {
          var time = new Date();
          var h = time.getHours();
          h = h < 10 ? '0' + h : h;
          var m = time.getMinutes();
          m = m < 10 ? '0' + m : m;
          var s = time.getSeconds();
          s = s < 10 ? '0' + s : s;
          return h + ':' + m + ':' + s;
      }
      console.log(getTimer());
  </script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ma48nJTy-1680434934825)(C:\Users\11969\AppData\Roaming\Typora\typora-user-images\image-20230305111048435.png)]

获取毫秒数

      <script>
          // 获得Date总的毫秒数(时间戳)  不是当前时间的毫秒数 而是距离1970年1月1号过了多少毫秒数
          // 1. 通过 valueOf()  getTime()
          var date = new Date();
          console.log(date.valueOf()); // 就是 我们现在时间 距离1970.1.1 总的毫秒数
          console.log(date.getTime());
          // 2. 简单的写法 (最常用的写法)
          var date1 = +new Date(); // +new Date()  返回的就是总的毫秒数
          console.log(date1);
          // 3. H5 新增的 获得总的毫秒数
          console.log(Date.now());
      </script>

倒计时效果

      <script>
          // 倒计时效果
          // 1.核心算法：输入的时间减去现在的时间就是剩余的时间，即倒计时 ，但是不能拿着时分秒相减，比如 05 分减去25分，结果会是负数的。
          // 2.用时间戳来做。用户输入时间总的毫秒数减去现在时间的总的毫秒数，得到的就是剩余时间的毫秒数。
          // 3.把剩余时间总的毫秒数转换为天、时、分、秒 （时间戳转换为时分秒）
          // 转换公式如下： 
          //  d = parseInt(总秒数/ 60/60 /24);    //  计算天数
          //  h = parseInt(总秒数/ 60/60 %24)   //   计算小时
          //  m = parseInt(总秒数 /60 %60 );     //   计算分数
          //  s = parseInt(总秒数%60);            //   计算当前秒数
          function countDown(time) {
              var nowTime = +new Date(); // 返回的是当前时间总的毫秒数
              var inputTime = +new Date(time); // 返回的是用户输入时间总的毫秒数
              var times = (inputTime - nowTime) / 1000; // times是剩余时间总的秒数 
              var d = parseInt(times / 60 / 60 / 24); // 天
              d = d < 10 ? '0' + d : d;
              var h = parseInt(times / 60 / 60 % 24); //时
              h = h < 10 ? '0' + h : h;
              var m = parseInt(times / 60 % 60); // 分
              m = m < 10 ? '0' + m : m;
              var s = parseInt(times % 60); // 当前的秒
              s = s < 10 ? '0' + s : s;
              return d + '天' + h + '时' + m + '分' + s + '秒';
          }
          console.log(countDown('2019-5-1 18:00:00'));
          var date = new Date();
          console.log(date);
      </script>

1.3 Array

创建数据

      <script>
          // 创建数组的两种方式
          // 1. 利用数组字面量
          var arr = [1, 2, 3];
          console.log(arr[0]);
  
          // 2. 利用new Array()
          // var arr1 = new Array();  // 创建了一个空的数组
          // var arr1 = new Array(2);  // 这个2 表示 数组的长度为 2  里面有2个空的数组元素 
          var arr1 = new Array(2, 3); // 等价于 [2,3]  这样写表示 里面有2个数组元素 是 2和3
          console.log(arr1);
      </script>

判断和反转数据是不是数组

      // 翻转数组
      function reverse(arr) {
          // if (arr instanceof Array) {
          if (Array.isArray(arr)) {
              var newArr = [];
              for (var i = arr.length - 1; i >= 0; i--) {
                  newArr[newArr.length] = arr[i];
  
              }
              return newArr;
          } else {
              return 'error 这个参数要求必须是数组格式 [1,2,3]'
          }
      }
      console.log(reverse([1, 2, 3]));
      console.log(reverse(1, 2, 3));
      // 检测是否为数组
      // (1) instanceof  运算符 它可以用来检测是否为数组
      var arr = [];
      var obj = {};
      console.log(arr instanceof Array);
      console.log(obj instanceof Array);
      // (2) Array.isArray(参数);  H5新增的方法  ie9以上版本支持
      console.log(Array.isArray(arr));
      console.log(Array.isArray(obj));

增加和删除数组元素

      // 添加删除数组元素方法
      // 1. push() 在我们数组的末尾 添加一个或者多个数组元素   push  推
      var arr = [1, 2, 3];
      // arr.push(4, 'pink');
      console.log(arr.push(4, 'pink'));
  
      console.log(arr);
      // (1) push 是可以给数组追加新的元素
      // (2) push() 参数直接写 数组元素就可以了
      // (3) push完毕之后，返回的结果是 新数组的长度 
      // (4) 原数组也会发生变化
      // 2. unshift 在我们数组的开头 添加一个或者多个数组元素
      console.log(arr.unshift('red', 'purple'));
  
      console.log(arr);
      // (1) unshift是可以给数组前面追加新的元素
      // (2) unshift() 参数直接写 数组元素就可以了
      // (3) unshift完毕之后，返回的结果是 新数组的长度 
      // (4) 原数组也会发生变化
  
      // 3. pop() 它可以删除数组的最后一个元素  
      console.log(arr.pop());
      console.log(arr);
      // (1) pop是可以删除数组的最后一个元素 记住一次只能删除一个元素
      // (2) pop() 没有参数
      // (3) pop完毕之后，返回的结果是 删除的那个元素 
      // (4) 原数组也会发生变化
      // 4. shift() 它可以删除数组的第一个元素  
      console.log(arr.shift());
      console.log(arr);
      // (1) shift是可以删除数组的第一个元素 记住一次只能删除一个元素
      // (2) shift() 没有参数
      // (3) shift完毕之后，返回的结果是 删除的那个元素 
      // (4) 原数组也会发生变化

反转和排序

      // 数组排序
      // 1. 翻转数组
      var arr = ['pink', 'red', 'blue'];
      arr.reverse();
      console.log(arr);
  
      // 2. 数组排序（冒泡排序）
      var arr1 = [13, 4, 77, 1, 7];
      arr1.sort(function(a, b) {
          //  return a - b; 升序的顺序排列
          return b - a; // 降序的顺序排列
      });
      console.log(arr1);

获取数组索引的方法

      // 返回数组元素索引号方法  indexOf(数组元素)  作用就是返回该数组元素的索引号 从前面开始查找
      // 它只返回第一个满足条件的索引号 
      // 它如果在该数组里面找不到元素，则返回的是 -1  
      // var arr = ['red', 'green', 'blue', 'pink', 'blue'];
      var arr = ['red', 'green', 'pink'];
      console.log(arr.indexOf('blue'));
      // 返回数组元素索引号方法  lastIndexOf(数组元素)  作用就是返回该数组元素的索引号 从后面开始查找
      var arr = ['red', 'green', 'blue', 'pink', 'blue'];
  
      console.log(arr.lastIndexOf('blue')); // 4

1.4 字符型

基本包装类型

      // 基本包装类型
      var str = 'andy';
      console.log(str.length);
      // 对象 才有 属性和方法   复杂数据类型才有 属性和方法 
      // 简单数据类型为什么会有length 属性呢？ 
      // 基本包装类型：  就是把简单数据类型 包装成为了 复杂数据类型 
      // (1) 把简单数据类型包装为复杂数据类型 
      var temp = new String('andy');
      // (2) 把临时变量的值 给 str
      str = temp;
      // (3) 销毁这个临时变量
      temp = null;

字符串的不可变性

      // 字符串的不可变性
      var str = 'andy';
      console.log(str);
      str = 'red';
      console.log(str);
      // 因为我们字符串的不可变所以不要大量的拼接字符串
      var str = '';
      for (var i = 1; i <= 1000000000; i++) {
          str += i;
      }
      console.log(str);

根据字符串返回位置

      // 字符串对象  根据字符返回位置  str.indexOf('要查找的字符', [起始的位置])
      var str = '改革春风吹满地，春天来了';
      console.log(str.indexOf('春'));
      console.log(str.indexOf('春', 3)); // 从索引号是 3的位置开始往后查找

根据索引获取值

      // 根据位置返回字符
      // 1. charAt(index) 根据位置返回字符
      var str = 'andy';
      console.log(str.charAt(3));
      // 遍历所有的字符
      for (var i = 0; i < str.length; i++) {
          console.log(str.charAt(i));
      }
      // 2. charCodeAt(index)  返回相应索引号的字符ASCII值 目的： 判断用户按下了那个键 
      console.log(str.charCodeAt(0)); // 97
      // 3. str[index] H5 新增的
      console.log(str[0]); // a

替换和分割

      // 1. 替换字符 replace('被替换的字符', '替换为的字符')  它只会替换第一个字符
      var str = 'andyandy';
      console.log(str.replace('a', 'b'));
      // 有一个字符串 'abcoefoxyozzopp'  要求把里面所有的 o 替换为 *
      var str1 = 'abcoefoxyozzopp';
      while (str1.indexOf('o') !== -1) {
          str1 = str1.replace('o', '*');
      }
      console.log(str1);
  
      // 2. 字符转换为数组 split('分隔符')    前面我们学过 join 把数组转换为字符串
      var str2 = 'red, pink, blue';
      console.log(str2.split(','));
      var str3 = 'red&pink&blue';
      console.log(str3.split('&'));
  </script>

复杂数据类型传参

      // 复杂数据类型传参
      function Person(name) {
          this.name = name;
      }
  
      function f1(x) { // x = p
          console.log(x.name); // 2. 这个输出什么 ?  刘德华   
          x.name = "张学友";
          console.log(x.name); // 3. 这个输出什么 ?   张学友
      }
      var p = new Person("刘德华");
      console.log(p.name); // 1. 这个输出什么 ?   刘德华 
      f1(p);
      console.log(p.name); // 4. 这个输出什么 ?   张学友

2 DOM

2.1 获取标签

2.1.1 getElementById

获取元素

  <html lang="en">
  
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
  </head>
  
  <body>
      <div id="time">2019-9-9</div>
      <script>
          // 1. 因为我们文档页面从上往下加载，所以先得有标签 所以我们script写到标签的下面
          // 2. get 获得 element 元素 by 通过 驼峰命名法 
          // 3. 参数 id是大小写敏感的字符串
          // 4. 返回的是一个元素对象
          var timer = document.getElementById('time');
          console.log(timer);  //返回的是 <div id="time">2019-9-9</div>
          console.log(typeof timer); //返回的是 object
          // 5. console.dir 打印我们返回的元素对象 更好的查看里面的属性和方法
          console.dir(timer);  //div#time
      </script>
  </body>
  
  </html>

直接返回的是标签的对象
console.dir(timer) 打印我们返回的元素对象更好的查看里面的属性和方法(全部的方法和属性,直接timer.XXX就行)

2.1.2 getElementByTagName

获取标签名 getElementByTagName(“”)
存入的是获取过来元素对象的集合,以伪数组的形势存储
element.getElementsByTagName(‘标签名’); 父元素必须是指定的单个元素

  <html lang="en">
  
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
  </head>
  
  <body>
      <ul>
          <li>知否知否，应是等你好久11</li>
          <li>知否知否，应是等你好久11</li>
          <li>知否知否，应是等你好久11</li>
          <li>知否知否，应是等你好久11</li>
  
      </ul>
      <ol id="ol">
          <li>生僻字</li>
          <li>生僻字</li>
          <li>生僻字</li>
          <li>生僻字</li>
  
      </ol>
  
      <script>
          // 1.返回的是 获取过来元素对象的集合 以伪数组的形式存储的
          var lis = document.getElementsByTagName('li');
          console.log(lis);
          console.log(lis[0]);
          // 2. 我们想要依次打印里面的元素对象我们可以采取遍历的方式
          for (var i = 0; i < lis.length; i++) {
              console.log(lis[i]);
  
          }
          // 3. 如果页面中只有一个li 返回的还是伪数组的形式 
          // 4. 如果页面中没有这个元素 返回的是空的伪数组的形式
          // 5. element.getElementsByTagName('标签名'); 父元素必须是指定的单个元素
          // var ol = document.getElementsByTagName('ol'); // [ol]
          // console.log(ol[0].getElementsByTagName('li'));
          var ol = document.getElementById('ol');
          console.log(ol.getElementsByTagName('li'));
      </script>
  </body>
  
  </html>

2.1.3 Html5新增的方法

获取类名根据类名获取某些元素 getElementByClassName
querySelector 随便选择但是只能返回一个
document.querySelectorAll(‘.box’) 返回所有对象

  <!DOCTYPE html>
  <html lang="en">
  
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
  </head>
  
  <body>
      <div class="box">盒子1</div>
      <div class="box">盒子2</div>
      <div id="nav">
          <ul>
              <li>首页</li>
              <li>产品</li>
          </ul>
      </div>
      <script>
          // 1. getElementsByClassName 根据类名获得某些元素集合
          var boxs = document.getElementsByClassName('box');
          console.log(boxs);
          // 2. querySelector 返回指定选择器的第一个元素对象  切记 里面的选择器需要加符号 .box  #nav
          var firstBox = document.querySelector('.box');
          console.log(firstBox);
          var nav = document.querySelector('#nav');
          console.log(nav);
          var li = document.querySelector('li');
          console.log(li);
          // 3. querySelectorAll()返回指定选择器的所有元素对象集合
          var allBox = document.querySelectorAll('.box');
          console.log(allBox);
          var lis = document.querySelectorAll('li');
          console.log(lis);
      </script>
  </body>
  
  </html>

querySelector 返回指定选择器的第一个元素对象切记里面的选择器需要加符号 .box #nav

2.1.4 body和html获取

body可以直接点,但是html标签不能直接点
可以通过dir查看内部方法和值

  <html lang="en">
  
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
  </head>
  
  <body>
      <script>
          // 1.获取body 元素
          var bodyEle = document.body;
          console.log(bodyEle);
          console.dir(bodyEle);
          // 2.获取html 元素
          // var htmlEle = document.html;
          var htmlEle = document.documentElement;
          console.log(htmlEle);
      </script>
  </body>
  
  </html>

2.2 事件基础

2.2.1 样例事件(鼠标点击)

  <html lang="en">
  
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
  </head>
  
  <body>
      <button id="btn">唐伯虎</button>
      <script>
          // 点击一个按钮，弹出对话框
          // 1. 事件是有三部分组成  事件源  事件类型  事件处理程序   我们也称为事件三要素
          //(1) 事件源 事件被触发的对象   谁  按钮
          var btn = document.getElementById('btn');
          //(2) 事件类型  如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过 还是键盘按下
          //(3) 事件处理程序  通过一个函数赋值的方式 完成
          btn.onclick = function() {
              alert('点秋香');
          }
      </script>
  </body>
  </html>

2.2.2 执行事件的步骤

1.获取事件源

2.注册事件(绑定事件)

3.添加事件处理程序(采取函数赋值形势)

  <html lang="en">
  
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
  </head>
  
  <body>
      <div>123</div>
      <script>
          // 执行事件步骤
          // 点击div 控制台输出 我被选中了
          // 1. 获取事件源
          var div = document.querySelector('div');
          // 2.绑定事件 注册事件
          // div.onclick 
          // 3.添加事件处理程序 
          div.onclick = function() {
              console.log('我被选中了');
  
          }
      </script>
  </body>
  
  </html>

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

2.2.3 操作元素之改变元素

  <html lang="en">
  
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
      <style>
          div,
          p {
              width: 300px;
              height: 30px;
              line-height: 30px;
              color: #fff;
              background-color: pink;
          }
      </style>
  </head>
  
  <body>
      <button>显示当前系统时间</button>
      <div>某个时间</div>
      <p>1123</p>
      <script>
          // 当我们点击了按钮，  div里面的文字会发生变化
          // 1. 获取元素 
          var btn = document.querySelector('button');
          var div = document.querySelector('div');
          // 2.注册事件
          btn.onclick = function() {
              // div.innerText = '2019-6-6';
              div.innerHTML = getDate();
          }
  
          function getDate() {
              var date = new Date();
              // 我们写一个 2019年 5月 1日 星期三
              var year = date.getFullYear();
              var month = date.getMonth() + 1;
              var dates = date.getDate();
              var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
              var day = date.getDay();
              return '今天是：' + year + '年' + month + '月' + dates + '日 ' + arr[day];
          }
          // 我们元素可以不用添加事件
          var p = document.querySelector('p');
          p.innerHTML = getDate();
      </script>
  </body>
  
  </html>

innerHTML和innerText|

      <script>
          // innerText 和 innerHTML的区别 
          // 1. innerText 不识别html标签 非标准  去除空格和换行
          var div = document.querySelector('div');
          // div.innerText = '<strong>今天是：</strong> 2019';
          // 2. innerHTML 识别html标签 W3C标准 保留空格和换行的
          div.innerHTML = '<strong>今天是：</strong> 2019';
          // 这两个属性是可读写的  可以获取元素里面的内容
          var p = document.querySelector('p');
          console.log(p.innerText);
          console.log(p.innerHTML);
      </script>

修改元素的属性

  <html lang="en">
  
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
      <style>
          img {
              width: 300px;
          }
      </style>
  </head>
  
  <body>
      <button id="ldh">刘德华</button>
      <button id="zxy">张学友</button> <br>
      <img src="images/ldh.jpg" alt="" title="刘德华">
  
      <script>
          // 修改元素属性  src
          // 1. 获取元素
          var ldh = document.getElementById('ldh');
          var zxy = document.getElementById('zxy');
          var img = document.querySelector('img');
          // 2. 注册事件  处理程序
          zxy.onclick = function() {
              img.src = 'images/zxy.jpg';
              img.title = '张学友思密达';
          }
          ldh.onclick = function() {
              img.src = 'images/ldh.jpg';
              img.title = '刘德华';
          }
      </script>
  </body>
  
  </html>

2.2.4 表单操作

表单里面的值是通过value进行修改
而不是innerHtml

diabled:禁用

  <html lang="en">
  
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
  </head>
  
  <body>
      <button>按钮</button>
      <input type="text" value="输入内容">
      <script>
          // 1. 获取元素
          var btn = document.querySelector('button');
          var input = document.querySelector('input');
          // 2. 注册事件 处理程序
          btn.onclick = function() {
              // input.innerHTML = '点击了';  这个是 普通盒子 比如 div 标签里面的内容
              // 表单里面的值 文字内容是通过 value 来修改的
              input.value = '被点击了';
              // 如果想要某个表单被禁用 不能再点击 disabled  我们想要这个按钮 button禁用
              // btn.disabled = true;
              this.disabled = true;
              // this 指向的是事件函数的调用者 btn
          }
      </script>
  </body>
  
  </html>

例子:登录时候的小眼睛

  <body>
      <div class="box">
          <label for="">
              <img src="images/close.png" alt="" id="eye">
          </label>
          <input type="password" name="" id="pwd">
      </div>
      <script>
          // 1. 获取元素
          var eye = document.getElementById('eye');
          var pwd = document.getElementById('pwd');
          // 2. 注册事件 处理程序
          var flag = 0;
          eye.onclick = function() {
              // 点击一次之后， flag 一定要变化
              if (flag == 0) {
                  pwd.type = 'text';
                  eye.src = 'images/open.png';
                  flag = 1; // 赋值操作
              } else {
                  pwd.type = 'password';
                  eye.src = 'images/close.png';
                  flag = 0;
              }
          }
      </script>
  </body>

2.2.5 操作元素-修改样式属性

  <html lang="en">
  
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
      <style>
          div {
              width: 200px;
              height: 200px;
              background-color: pink;
          }
      </style>
  </head>
  
  <body>
      <div></div>
      <script>
          // 1. 获取元素
          var div = document.querySelector('div');
          // 2. 注册事件 处理程序
          div.onclick = function() {
              // div.style里面的属性 采取驼峰命名法 
              this.style.backgroundColor = 'purple';
              this.style.width = '250px';
          }
      </script>
  </body>
  
  </html>

XXX.style.xxx

2.2.6 点击焦点和失去焦点

      <input type="text" value="手机">
      <script>
          // 1.获取元素
          var text = document.querySelector('input');
          // 2.注册事件 获得焦点事件 onfocus 
          text.onfocus = function() {
                  // console.log('得到了焦点');
                  if (this.value === '手机') {
                      this.value = '';
                  }
                  // 获得焦点需要把文本框里面的文字颜色变黑
                  this.style.color = '#333';
              }
              // 3. 注册事件 失去焦点事件 onblur
          text.onblur = function() {
              // console.log('失去了焦点');
              if (this.value === '') {
                  this.value = '手机';
              }
              // 失去焦点需要把文本框里面的文字颜色变浅色
              this.style.color = '#999';
          }
      </script>

2.2.7 给标签加上类

      .change {
          background-color: purple;
          color: #fff;
          font-size: 25px;
          margin-top: 100px;
      }
  </style>
  </head>
  
  
  <body>
      <div class="first">文本</div>
      <script>
          // 1. 使用 element.style 获得修改元素样式  如果样式比较少 或者 功能简单的情况下使用
          var test = document.querySelector('div');
          test.onclick = function() {
              // this.style.backgroundColor = 'purple';
              // this.style.color = '#fff';
              // this.style.fontSize = '25px';
              // this.style.marginTop = '100px';
              // 让我们当前元素的类名改为了 change
  
              // 2. 我们可以通过 修改元素的className更改元素的样式 适合于样式较多或者功能复杂的情况
              // 3. 如果想要保留原先的类名，我们可以这么做 多类名选择器
              // this.className = 'change';
              this.className = 'first change';
          }
      </script>
  </body>

2.2.8 密码（表单检验）

  <html lang="en">
  
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
      <style>
          div {
              width: 600px;
              margin: 100px auto;
          }
          
          .message {
              display: inline-block;
              font-size: 12px;
              color: #999;
              background: url(images/mess.png) no-repeat left center;
              padding-left: 20px;
          }
          
          .wrong {
              color: red;
              background-image: url(images/wrong.png);
          }
          
          .right {
              color: green;
              background-image: url(images/right.png);
          }
      </style>
  </head>
  
  <body>
      <div class="register">
          <input type="password" class="ipt">
          <p class="message">请输入6~16位密码</p>
      </div>
      <script>
          // 首先判断的事件是表单失去焦点 onblur
          // 如果输入正确则提示正确的信息颜色为绿色小图标变化
          // 如果输入不是6到16位，则提示错误信息颜色为红色 小图标变化
          // 因为里面变化样式较多，我们采取className修改样式
          // 1.获取元素
          var ipt = document.querySelector('.ipt');
          var message = document.querySelector('.message');
          //2. 注册事件 失去焦点
          ipt.onblur = function() {
              // 根据表单里面值的长度 ipt.value.length
              if (this.value.length < 6 || this.value.length > 16) {
                  // console.log('错误');
                  message.className = 'message wrong';
                  message.innerHTML = '您输入的位数不对要求6~16位';
              } else {
                  message.className = 'message right';
                  message.innerHTML = '您输入的正确';
              }
          }
      </script>
  </body>
  
  </html>

2.2.9 表格隔行变色

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        table {
            width: 800px;
            margin: 100px auto;
            text-align: center;
            border-collapse: collapse;
            font-size: 14px;
        }
        
        thead tr {
            height: 30px;
            background-color: skyblue;
        }
        
        tbody tr {
            height: 30px;
        }
        
        tbody td {
            border-bottom: 1px solid #d7d7d7;
            font-size: 12px;
            color: blue;
        }
        
        .bg {
            background-color: pink;
        }
    </style>
</head>

<body>
    <table>
        <thead>
            <tr>
                <th>代码</th>
                <th>名称</th>
                <th>最新公布净值</th>
                <th>累计净值</th>
                <th>前单位净值</th>
                <th>净值增长率</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
        </tbody>
    </table>
    <script>
        //自己写的
        let tr = document.querySelector("tbody").querySelectorAll("tr");
        for (let i = 0; i < tr.length; i++) {
            tr[i].onmouseover = function (){
                tr[i].style.backgroundColor = "pink";
            }
            tr[i].onmouseout=function (){
                tr[i].style.backgroundColor="";
            }
        }

        /*
        *         // 1.获取元素 获取的是 tbody 里面所有的行
        var trs = document.querySelector('tbody').querySelectorAll('tr');
        // 2. 利用循环绑定注册事件
        for (var i = 0; i < trs.length; i++) {
            // 3. 鼠标经过事件 onmouseover
            trs[i].onmouseover = function() {
                    // console.log(11);
                    this.className = 'bg';
                }
                // 4. 鼠标离开事件 onmouseout
            trs[i].onmouseout = function() {
                this.className = '';
            }
        }*/
    </script>
</body>

</html>

2.2.10 排他思想

写四个按钮,在点击之后就会变为粉色,其余按钮为原色

  <!DOCTYPE html>
  <html lang="en">
  
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
  </head>
  
  <body>
      <button>按钮1</button>
      <button>按钮2</button>
      <button>按钮3</button>
      <button>按钮4</button>
      <button>按钮5</button>
      <script>
          // 1. 获取所有按钮元素
          var btns = document.getElementsByTagName('button');
          // btns得到的是伪数组  里面的每一个元素 btns[i]
          for (var i = 0; i < btns.length; i++) {
              btns[i].onclick = function() {
                  // (1) 我们先把所有的按钮背景颜色去掉  干掉所有人
                  for (var i = 0; i < btns.length; i++) {
                      btns[i].style.backgroundColor = '';
                  }
                  // (2) 然后才让当前的元素背景颜色为pink 留下我自己
                  this.style.backgroundColor = 'pink';
              }
          }
          //2. 首先先排除其他人，然后才设置自己的样式 这种排除其他人的思想我们成为排他思想
      </script>
  </body>
  
  </html>

2.2.11 表单全选功能

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        .wrap {
            width: 300px;
            margin: 100px auto 0;
        }
        
        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
            width: 300px;
        }
        
        th,
        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }
        
        th {
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
        }
        
        td {
            font: 14px "微软雅黑";
        }
        
        tbody tr {
            background-color: #f0f0f0;
        }
        
        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }
    </style>

</head>

<body>
    <div class="wrap">
        <table>
            <thead>
                <tr>
                    <th>
                        <input type="checkbox" id="j_cbAll" />
                    </th>
                    <th>商品</th>
                    <th>价钱</th>
                </tr>
            </thead>
            <tbody id="j_tb">
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>iPhone8</td>
                    <td>8000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>iPad Pro</td>
                    <td>5000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>iPad Air</td>
                    <td>2000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>Apple Watch</td>
                    <td>2000</td>
                </tr>

            </tbody>
        </table>
    </div>
    <script>
        // 1. 全选和取消全选做法：  让下面所有复选框的checked属性（选中状态） 跟随 全选按钮即可
        // 获取元素
        var j_cbAll = document.getElementById('j_cbAll'); // 全选按钮
        var j_tbs = document.getElementById('j_tb').getElementsByTagName('input'); // 下面所有的复选框
        // 注册事件
        j_cbAll.onclick = function() {
                // this.checked 它可以得到当前复选框的选中状态如果是true 就是选中，如果是false 就是未选中
                console.log(this.checked);
                for (var i = 0; i < j_tbs.length; i++) {
                    j_tbs[i].checked = this.checked;
                }
            }
            // 2. 下面复选框需要全部选中， 上面全选才能选中做法： 给下面所有复选框绑定点击事件，每次点击，都要循环查看下面所有的复选框是否有没选中的，如果有一个没选中的， 上面全选就不选中。
        for (var i = 0; i < j_tbs.length; i++) {
            j_tbs[i].onclick = function() {
                // flag 控制全选按钮是否选中
                var flag = true;
                // 每次点击下面的复选框都要循环检查者4个小按钮是否全被选中
                for (var i = 0; i < j_tbs.length; i++) {
                    if (!j_tbs[i].checked) {
                        flag = false;
                        break; // 退出for循环 这样可以提高执行效率 因为只要有一个没有选中，剩下的就无需循环判断了
                    }
                }
                j_cbAll.checked = flag;
            }
        }
    </script>
</body>

</html>

2.2.11 自定义属性操作

getAttribute

      <div id="demo" index="1" class="nav"></div>
      <script>
          var div = document.querySelector('div');
          // 1. 获取元素的属性值
          // (1) element.属性
          console.log(div.id);
          //(2) element.getAttribute('属性')  get得到获取 attribute 属性的意思 我们程序员自己添加的属性我们称为自定义属性 index
          console.log(div.getAttribute('id'));
          console.log(div.getAttribute('index'));
          // 2. 设置元素属性值
          // (1) element.属性= '值'
          div.id = 'test';
          div.className = 'navs';
          // (2) element.setAttribute('属性', '值');  主要针对于自定义属性
          div.setAttribute('index', 2);
          div.setAttribute('class', 'footer'); // class 特殊  这里面写的就是class 不是className
          // 3 移除属性 removeAttribute(属性)    
          div.removeAttribute('index');
      </script>

3.节点操作

3.1 节点层级

3.1.1 父节点

      <div class="demo">
          <div class="box">
              <span class="erweima">×</span>
          </div>
      </div>
  
      <script>
          // 1. 父节点 parentNode
          var erweima = document.querySelector('.erweima');
          // var box = document.querySelector('.box');
          // 得到的是离元素最近的父级节点(亲爸爸) 如果找不到父节点就返回为 null
          console.log(erweima.parentNode);
      </script>

得到的是离元素最近的父级节点(亲爸爸) 如果找不到父节点就返回为 null

3.1.2 子节点

      <!-- 节点的优点 -->
      <div>我是div</div>
      <span>我是span</span>
      <ul>
          <li>我是li</li>
          <li>我是li</li>
          <li>我是li</li>
          <li>我是li</li>
  
      </ul>
      <ol>
          <li>我是li</li>
          <li>我是li</li>
          <li>我是li</li>
          <li>我是li</li>
      </ol>
      <script>
          // DOM 提供的方法（API）获取
          var ul = document.querySelector('ul');
          var lis = ul.querySelectorAll('li');
          // 1. 子节点  childNodes 所有的子节点 包含 元素节点 文本节点等等
          console.log(ul.childNodes);
          console.log(ul.childNodes[0].nodeType); //3
          console.log(ul.childNodes[1].nodeType); //1 
          // 2. children 获取所有的子元素节点 也是我们实际开发常用的
          console.log(ul.children);
      </script>

childNodes 会获取到全部节点例如元素节点和文本节点
**children 直接使用即可 **
**firstChildren **这个可以取第一个子节点
lastChildren 这个可以取到最后一个节点

      <ol>
          <li>我是li1</li>
          <li>我是li2</li>
          <li>我是li3</li>
          <li>我是li4</li>
          <li>我是li5</li>
      </ol>
      <script>
          var ol = document.querySelector('ol');
          // 1. firstChild 第一个子节点 不管是文本节点还是元素节点
          console.log(ol.firstChild);
          console.log(ol.lastChild);
          // 2. firstElementChild 返回第一个子元素节点 ie9才支持
          console.log(ol.firstElementChild);
          console.log(ol.lastElementChild);
          // 3. 实际开发的写法  既没有兼容性问题又返回第一个子元素
          console.log(ol.children[0]);
          console.log(ol.children[ol.children.length - 1]);
      </script>

3.1.3 兄弟节点

<body>
    <div>我是div</div>
    <span>我是span</span>
    <script>
        var div = document.querySelector('div');
        // 1.nextSibling 下一个兄弟节点 包含元素节点或者 文本节点等等
        console.log(div.nextSibling);
        console.log(div.previousSibling);
        // 2. nextElementSibling 得到下一个兄弟元素节点
        console.log(div.nextElementSibling);
        console.log(div.previousElementSibling);
    </script>
</body>

3.2 操作节点

3.2.1 创建节点

docunment.createElement('tagName');
node.appendChild(child) 后面是孩子,前面一定是父亲
添加节点 node.insertBefore(child, 指定元素);
原来没有这个标签,然后这个直接创建了标签

      <ul>
          <li>123</li>
      </ul>
      <script>
          // 1. 创建节点元素节点
          var li = document.createElement('li');
          // 2. 添加节点 node.appendChild(child)  node 父级  child 是子级 后面追加元素  类似于数组中的push
          var ul = document.querySelector('ul');
          ul.appendChild(li);
          // 3. 添加节点 node.insertBefore(child, 指定元素);
          var lili = document.createElement('li');
          ul.insertBefore(lili, ul.children[0]);
          // 4. 我们想要页面添加一个新的元素 ： 1. 创建元素 2. 添加元素
      </script>

3.2.2 删除节点

  <body>
      <button>删除</button>
      <ul>
          <li>熊大</li>
          <li>熊二</li>
          <li>光头强</li>
      </ul>
      <script>
          // 1.获取元素
          var ul = document.querySelector('ul');
          var btn = document.querySelector('button');
          // 2. 删除元素  node.removeChild(child)
          // ul.removeChild(ul.children[0]);
          // 3. 点击按钮依次删除里面的孩子
          btn.onclick = function() {
              if (ul.children.length == 0) { //删除全部之后,可点击按钮就失效了
                  this.disabled = true;
              } else {
                  ul.removeChild(ul.children[0]);
              }
          }
      </script>
  </body>

node.removeChild(child)
点击超链接会生成#号使用href='javascript:;'可以做到

3.2.3 复制(克隆)节点

node.cloneNode()
- 参数 :
  - 空浅拷贝
  - true:深拷贝

  <body>
      <ul>
          <li>1111</li>
          <li>2</li>
          <li>3</li>
      </ul>
      <script>
          var ul = document.querySelector('ul');
          // 1. node.cloneNode(); 括号为空或者里面是false 浅拷贝 只复制标签不复制里面的内容
          // 2. node.cloneNode(true); 括号为true 深拷贝 复制标签复制里面的内容
          var lili = ul.children[0].cloneNode(true);
          console.log(lili);
          ul.appendChild(lili);
      </script>
  </body>

3.3 三种动态创建元素区别

  <body>
      <button>点击</button>
      <p>abc</p>
      <div class="inner"></div>
      <div class="create"></div>
      <script>
          // window.onload = function() {
          //         document.write('<div>123</div>');
  
          //     }
          // 三种创建元素方式区别 
          // 1. document.write() 创建元素  如果页面文档流加载完毕，再调用这句话会导致页面重绘
          // var btn = document.querySelector('button');
          // btn.onclick = function() {
          //     document.write('<div>123</div>');
          // }
  
          // 2. innerHTML 创建元素
          var inner = document.querySelector('.inner');
          // for (var i = 0; i <= 100; i++) {
          //     inner.innerHTML += '<a href="#">百度</a>'
          // }
          var arr = [];
          for (var i = 0; i <= 100; i++) {
              arr.push('<a href="#">百度</a>');
          }
          inner.innerHTML = arr.join('');
          // 3. document.createElement() 创建元素
          var create = document.querySelector('.create');
          for (var i = 0; i <= 100; i++) {
              var a = document.createElement('a');
              create.appendChild(a);
          }
      </script>
  </body>

3.3.1 document.write()

会出现页面重绘

3.3.2 element.innerHTML()

如果大量操作的话会出现会耗时的情况
如果采用数组的形势拼接,结构稍微的会变得复杂一些

3.3.3 document.createElement()

创建多个元素的效率稍微低一点,但是结构更加清晰

不同浏览器下,innerHTML的效率要比creatElement的效率高(采用数组)

4.DOM重点核心

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NaXUZ31c-1680434934826)(C:\Users\11969\AppData\Roaming\Typora\typora-user-images\image-20230307214139849.png)]

创建,增,删,改,查
事件

4.事件

4.1 注册事件

给元素添加事件,成为注册事件或者绑定事件
注册事件有两种方式:传统方式和方法监听注册方式
传统:
- 利用on开头 ,同一个函数设置一个事件,只能设置一个
监听:
- addEventListener() 直接可以重复的设置事件,不会重新覆盖

  <body>
      <button>传统注册事件</button>
      <button>方法监听注册事件</button>
      <button>ie9 attachEvent</button>
      <script>
          var btns = document.querySelectorAll('button');
          // 1. 传统方式注册事件   一个会把前面那一个给覆盖掉
          btns[0].onclick = function() {
              alert('hi');
          }
          btns[0].onclick = function() {
                  alert('hao a u');
              }
              // 2. 事件侦听注册事件 addEventListener 
              // (1) 里面的事件类型是字符串 必定加引号 而且不带on
              // (2) 同一个元素 同一个事件可以添加多个侦听器（事件处理程序）
          btns[1].addEventListener('click', function() {
              alert(22);
          })
          btns[1].addEventListener('click', function() {
                  alert(33);
              })
              // 3. attachEvent ie9以前的版本支持
          btns[2].attachEvent('onclick', function() {
              alert(11);
          })
      </script>
  </body>

addEventListener(type,listener)

4.2 删除事件

传统直接将οnclick=null
addEventListener 函数直接使用removeEventListener

  <body>
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <script>
          var divs = document.querySelectorAll('div');
          divs[0].onclick = function() {
                  alert(11);
                  // 1. 传统方式删除事件
                  divs[0].onclick = null;
              }
              // 2. removeEventListener 删除事件
          divs[1].addEventListener('click', fn) // 里面的fn 不需要调用加小括号
  
          function fn() {
              alert(22);
              divs[1].removeEventListener('click', fn);
          }
          // 3. detachEvent
          divs[2].attachEvent('onclick', fn1);
  
          function fn1() {
              alert(33);
              divs[2].detachEvent('onclick', fn1);
          }
      </script>
  </body>

4.3 DOM事件流

事件传播的过程称为事件流
- [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Pj4ozXZA-1680434934826)(C:\Users\11969\AppData\Roaming\Typora\typora-user-images\image-20230308110010179.png)]
- 1.捕获阶段
- DOM事件流
- 冒泡阶段

4.4 事件对象

  <body>
      <div>123</div>
      <script>
          // 事件对象
          var div = document.querySelector('div');
          div.onclick = function(e) {
                  // console.log(e);
                  // console.log(window.event);
                  // e = e || window.event;
                  console.log(e);
  
  
              }
              // div.addEventListener('click', function(e) {
              //         console.log(e);
  
          //     })
          // 1. event 就是一个事件对象 写到我们侦听函数的 小括号里面 当形参来看
          // 2. 事件对象只有有了事件才会存在，它是系统给我们自动创建的，不需要我们传递参数
          // 3. 事件对象 是 我们事件的一系列相关数据的集合 跟事件相关的 比如鼠标点击里面就包含了鼠标的相关信息，鼠标坐标啊，如果是键盘事件里面就包含的键盘事件的信息 比如 判断用户按下了那个键
          // 4. 这个事件对象我们可以自己命名 比如 event 、 evt、 e
          // 5. 事件对象也有兼容性问题 ie678 通过 window.event 兼容性的写法  e = e || window.event;
      </script>
  </body>

事件对象属性方法	说明
e.target	返回触发事件的对象标准
e.srcElement	返回触发事件的对象
e.type	返回事件的类型比如click
e.cancelBubble	该属性阻止冒泡非标准
e.returnValue	该属性阻止默认事件默认行为
e.preventDefault()	该方法阻止默认事件默认行为
e.stopPropagation	阻止冒泡标准

4.4.1target和this的区别

e.target 返回的是触发事件的对象（元素） this 返回的是绑定事件的对象（元素）

  <body>
      <div>123</div>
      <ul>
          <li>abc</li>
          <li>abc</li>
          <li>abc</li>
      </ul>
      <script>
          // 常见事件对象的属性和方法
          // 1. e.target 返回的是触发事件的对象（元素）  this 返回的是绑定事件的对象（元素）
          // 区别 ： e.target 点击了那个元素，就返回那个元素 this 那个元素绑定了这个点击事件，那么就返回谁
          var div = document.querySelector('div');
          div.addEventListener('click', function(e) {
              console.log(e.target);
              console.log(this);
  
          })
          var ul = document.querySelector('ul');
          ul.addEventListener('click', function(e) {
                  // 我们给ul 绑定了事件  那么this 就指向ul  
                  console.log(this);
                  console.log(e.currentTarget);
  
                  // e.target 指向我们点击的那个对象 谁触发了这个事件 我们点击的是li e.target 指向的就是li
                  console.log(e.target);
  
              })
              // 了解兼容性
              // div.onclick = function(e) {
              //     e = e || window.event;
              //     var target = e.target || e.srcElement;
              //     console.log(target);
  
          // }
          // 2. 了解 跟 this 有个非常相似的属性 currentTarget  ie678不认识
      </script>
  </body>

4.4.2 e.type和e.preventDefault

  <body>
      <div>123</div>
      <a href="http://www.baidu.com">百度</a>
      <form action="http://www.baidu.com">
          <input type="submit" value="提交" name="sub">
      </form>
      <script>
          // 常见事件对象的属性和方法
          // 1. 返回事件类型
          var div = document.querySelector('div');
          div.addEventListener('click', fn);
          div.addEventListener('mouseover', fn);
          div.addEventListener('mouseout', fn);
  
          function fn(e) {
              console.log(e.type);
  
          }
          // 2. 阻止默认行为（事件） 让链接不跳转 或者让提交按钮不提交
          var a = document.querySelector('a');
          a.addEventListener('click', function(e) {
                  e.preventDefault(); //  dom 标准写法
              })
              // 3. 传统的注册方式
          a.onclick = function(e) {
              // 普通浏览器 e.preventDefault();  方法
              // e.preventDefault();
              // 低版本浏览器 ie678  returnValue  属性
              // e.returnValue;
              // 我们可以利用return false 也能阻止默认行为 没有兼容性问题 特点： return 后面的代码不执行了， 而且只限于传统的注册方式
              return false;
              alert(11);
          }
      </script>
  </body>

**e.type是触发的事件类型 **
preventDefault是阻止默认行为(时间),让链接不跳转,或者按钮不提交
returnValue 和 return false是默认的

4.4.3 stopPerpagation

    <script>
        // 常见事件对象的属性和方法
        // 阻止冒泡  dom 推荐的标准 stopPropagation() 
        var son = document.querySelector('.son');
        son.addEventListener('click', function(e) {
            alert('son');
            e.stopPropagation(); // stop 停止  Propagation 传播
            e.cancelBubble = true; // 非标准 cancel 取消 bubble 泡泡
        }, false);

        var father = document.querySelector('.father');
        father.addEventListener('click', function() {
            alert('father');
        }, false);
        document.addEventListener('click', function() {
            alert('document');
        })
    </script>

阻止冒泡

4.4.4 事件委托

原理不要给每个子节点设置事件监听器,而是给事件监听器设置在其父节点上,利用时间冒泡影响每一个子节点

  <body>
      <ul>
          <li>知否知否，点我应有弹框在手！</li>
          <li>知否知否，点我应有弹框在手！</li>
          <li>知否知否，点我应有弹框在手！</li>
          <li>知否知否，点我应有弹框在手！</li>
          <li>知否知否，点我应有弹框在手！</li>
      </ul>
      <script>
          // 事件委托的核心原理：给父节点添加侦听器， 利用事件冒泡影响每一个子节点
          var ul = document.querySelector('ul');
          ul.addEventListener('click', function(e) {
              // alert('知否知否，点我应有弹框在手！');
              // e.target 这个可以得到我们点击的对象
              e.target.style.backgroundColor = 'pink';
  
  
          })
      </script>
  </body>

4.5 常用鼠标事件

<body>
    我是一段不愿意分享的文字
    <script>
        // 1. contextmenu 我们可以禁用右键菜单
        document.addEventListener('contextmenu', function(e) {
                e.preventDefault();
            })
            // 2. 禁止选中文字 selectstart
        document.addEventListener('selectstart', function(e) {
            e.preventDefault();

        })
    </script>
</body>

4.6 鼠标事件对象

鼠标事件对象	说明
e.clientX	返回鼠标相对于浏览器窗口可视区的X坐标
e.clientY	返回鼠标相对于浏览器窗口可视区的Y坐标
e.pageX	返回鼠标相对于文档与面的X坐标
e.pageY	返回鼠标相对于文档页面的Y坐标
e.screenX	返回鼠标相对于电脑屏幕的X坐标
e.screenY	返回鼠标相对于电脑屏幕的Y坐标

<body>
    <script>
        // 鼠标事件对象 MouseEvent
        document.addEventListener('click', function(e) {
            // 1. client 鼠标在可视区的x和y坐标
            console.log(e.clientX);
            console.log(e.clientY);
            console.log('---------------------');

            // 2. page 鼠标在页面文档的x和y坐标
            console.log(e.pageX);
            console.log(e.pageY);
            console.log('---------------------');

            // 3. screen 鼠标在电脑屏幕的x和y坐标
            console.log(e.screenX);
            console.log(e.screenY);

        })
    </script>
</body>

5.BOM

5.1 BOm顶级对象

    <script>
        // window.document.querySelector()
        var num = 10;
        console.log(num);
        console.log(window.num);

        function fn() {
            console.log(11);

        }
        fn();
        window.fn();
        // alert(11);
        // window.alert(11)
        console.dir(window);
        // var name = 10;
        console.log(window.name);
    </script>

5.2 常见事件

5.2.1

    <script>
        // window.onload = function() {
        //     var btn = document.querySelector('button');
        //     btn.addEventListener('click', function() {
        //         alert('点击我');
        //     })
        // }
        // window.onload = function() {
        //     alert(22);
        // }
        window.addEventListener('load', function() {
            var btn = document.querySelector('button');
            btn.addEventListener('click', function() {
                alert('点击我');
            })
        })
        window.addEventListener('load', function() {

            alert(22);
        })
        document.addEventListener('DOMContentLoaded', function() {
                alert(33);
            })
            // load 等页面内容全部加载完毕，包含页面dom元素 图片 flash  css 等等
            // DOMContentLoaded 是DOM 加载完毕，不包含图片 falsh css 等就可以执行 加载速度比 load更快一些
    </script>

window.onLoad只能用一次,如果重复就会出现一次
window.addEventListener('load', function())使用这个可以多个
内部有两个事件 onload事件和DOMContentLoaded事件

5.2.2 调整窗口事件

<script>
        window.addEventListener('load', function() {
            var div = document.querySelector('div');
            window.addEventListener('resize', function() {
                console.log(window.innerWidth);

                console.log('变化了');
                if (window.innerWidth <= 800) {
                    div.style.display = 'none';
                } else {
                    div.style.display = 'block';
                }

            })
        })
    </script>

只要页面的大小发生变化,就会执行函数的变化了
window.innerWidth 是反映当时的页面宽度

5.2.3 定时器

setTimeout

setTimeout 回调函数,时间到了再调用这个函数

<script>
        // 1. setTimeout 
        // 语法规范：  window.setTimeout(调用函数, 延时时间);
        // 1. 这个window在调用的时候可以省略
        // 2. 这个延时时间单位是毫秒 但是可以省略，如果省略默认的是0
        // 3. 这个调用函数可以直接写函数 还可以写 函数名 还有一个写法 '函数名()'
        // 4. 页面中可能有很多的定时器，我们经常给定时器加标识符 （名字)
        // setTimeout(function() {
        //     console.log('时间到了');

        // }, 2000);
        function callback() {
            console.log('爆炸了');

        }
        var timer1 = setTimeout(callback, 3000);
        var timer2 = setTimeout(callback, 5000);
        // setTimeout('callback()', 3000); // 我们不提倡这个写法
    </script>

清楚定时器事件

document.clearTimeout(Timeout ID)关闭定时器使用

      <img src="images/ad.jpg" alt="" class="ad">
      <script>
          var ad = document.querySelector('.ad');
          setTimeout(function() {
              ad.style.display = 'none';
          }, 5000);
      </script>

给定时器起名字是为了更好的操作

setInterval() 定时器

每隔一段时间就调用一次函数,一直重复
重复调用

      <script>
          // 1. setInterval 
          // 语法规范：  window.setInterval(调用函数, 延时时间);
          setInterval(function() {
              console.log('继续输出');
  
          }, 1000);
          // 2. setTimeout  延时时间到了，就去调用这个回调函数，只调用一次 就结束了这个定时器
          // 3. setInterval  每隔这个延时时间，就去调用这个回调函数，会调用很多次，重复调用这个函数
      </script>

清除计时器

clearInterval(timer)

      <button class="begin">开启定时器</button>
      <button class="stop">停止定时器</button>
      <script>
          var begin = document.querySelector('.begin');
          var stop = document.querySelector('.stop');
          var timer = null; // 全局变量  null是一个空对象
          begin.addEventListener('click', function() {
              timer = setInterval(function() {
                  console.log('ni hao ma');
  
              }, 1000);
          })
          stop.addEventListener('click', function() {
              clearInterval(timer);
          })
      </script>

5.2.4 this

谁调用这个函数,this指的就是谁
在全局作用下,一般都指向的window
定时器里面的this也是window
在方法中this指的是:方法函数对象
构造函数的this指的是Function

6.同步和异步

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sH9Nanlj-1680434934827)(C:\Users\11969\AppData\Roaming\Typora\typora-user-images\image-20230402153626512.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YxvbmK2x-1680434934827)(C:\Users\11969\AppData\Roaming\Typora\typora-user-images\image-20230402153734198.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YtC1ek2S-1680434934827)(C:\Users\11969\AppData\Roaming\Typora\typora-user-images\image-20230402154630405.png)]

7.location对象

7.1 URL

统一资源定位符

7.2 Location的属性

属性	返回值
href	获取或者设置整个url
host	获取主机
port	获取端口
pathname	返回路径
search	返回参数
hash	返回片段 #后面的内容

7.3 例子

在login页面里面输入跳转后在index中显示信息

  <body>
      <form action="index.html">
          用户名： <input type="text" name="uname">
          <input type="submit" value="登录">
      </form>
  </body>

index

  <body>
      <div></div>
      <script>
          console.log(location.search); // ?uname=andy
          // 1.先去掉？  substr('起始的位置'，截取几个字符);
          var params = location.search.substr(1); // uname=andy
          console.log(params);
          // 2. 利用=把字符串分割为数组 split('=');
          var arr = params.split('=');
          console.log(arr); // ["uname", "ANDY"]
          var div = document.querySelector('div');
          // 3.把数据写入div中
          div.innerHTML = arr[1] + '欢迎您';
      </script>
  </body>

substr(‘起始的位置’，截取几个字符);
利用=把字符串分割为数组 split(‘=’);

7.4 location的跳转功能

    <script>
        var btn = document.querySelector('button');
        btn.addEventListener('click', function() {
            // 记录浏览历史，所以可以实现后退功能
            // location.assign('http://www.itcast.cn');
            // 不记录浏览历史，所以不可以实现后退功能
            // location.replace('http://www.itcast.cn');
            location.reload(true);
        })
    </script>

assign 记录浏览历史，所以可以实现后退功能
replace 不记录浏览历史，所以不可以实现后退功能
reload 重新加载页面
- 括号里面有参数 true是强制刷新

8 navigator 对象

navigator 对象包含有关浏览器的信息，它有很多属性，我们最常用的是 userAgent，该属性可以返回由客户机发送服务器的 user-agent 头部的值。下面前端代码可以判断用户那个终端打开页面，实现跳转

if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|
Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS
|Symbian|Windows Phone)/i))) {
 window.location.href = ""; //手机
} else {
 window.location.href = ""; //电脑
}

9 history对象

window 对象给我们提供了一个 history 对象，与浏览器历史记录进行交互。该对象包含用户（在浏览器窗口中）访问过的 URL。
方法作用
back() 可以后退功能
forward() 前进功能
go(参数) 前进后退和刷新 -1后退 1前进 0刷新

方法	作用
back()	可以后退功能
forward()	前进功能
go(参数)	前进后退和刷新 -1后退 1前进 0刷新

10 PC网页特效

10.1 offset

offset 翻译过来就是偏移量，我们使用 offset 系列相关属性可以动态的得到该元素的位置（偏移）、大小等。
- 获得元素距离带有定位父元素的位置
- 获得元素自身的大小（宽度高度）
- 注意：返回的数值都不带单位

10.1.1 属性

offset属性	作用
element.offsetParent	返回作为该元素带有定位的父元素,如果父元素没有定位则返回body距离
element.offsetTop	返回元素相对带有定位父元素上方的偏移
element.offsetLeft	返回元素相对带有定位父元素左边框的偏移
element.offsetWidth	返回自身包括padding.边框,内容区的宽度,返回数组不带单位
element.offsetHeight	返回自身包括padding,边框,内容区的高度,返回数值不带单位

10.1.2 运用

        .father {
            /* position: relative; */
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 150px;
        }
        
        .son {
            width: 100px;
            height: 100px;
            background-color: purple;
            margin-left: 45px;
        }
        
        .w {
            height: 200px;
            background-color: skyblue;
            margin: 0 auto 200px;
            padding: 10px;
            border: 15px solid red;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <div class="w"></div>
    <script>
        // offset 系列
        var father = document.querySelector('.father');
        var son = document.querySelector('.son');
        // 1.可以得到元素的偏移 位置 返回的不带单位的数值  
        console.log(father.offsetTop);
        console.log(father.offsetLeft);
        // 它以带有定位的父亲为准  如果么有父亲或者父亲没有定位 则以 body 为准
        console.log(son.offsetLeft);
        var w = document.querySelector('.w');
        // 2.可以得到元素的大小 宽度和高度 是包含padding + border + width 
        console.log(w.offsetWidth);
        console.log(w.offsetHeight);
        // 3. 返回带有定位的父亲 否则返回的是body
        console.log(son.offsetParent); // 返回带有定位的父亲 否则返回的是body
        console.log(son.parentNode); // 返回父亲 是最近一级的父亲 亲爸爸 不管父亲有没有定位
    </script>
</body>

10.1.3 和style的区别

offset
-  offset 可以得到任意样式表中的样式值
-  offset 系列获得的数值是没有单位的
-  offsetWidth 包含padding+border+width
-  offsetWidth 等属性是只读属性，只能获取不能赋值
-  所以，我们想要获取元素大小位置，用offset更合适
style
- style 只能得到行内样式表中的样式值
-  style.width 获得的是带有单位的字符串
-  style.width 获得不包含padding和border 的值
-  style.width 是可读写属性，可以获取也可以赋值
-  所以，我们想要给元素更改值，则需要用style改变

10.1.4 鼠标在盒子内部坐标

e.PageX - element.offsetLeft 即可
e.PageY - element.offsetTop 即可

10.1.5 按下拖拽,弹起放手例子

 // 4. 开始拖拽
    // (1) 当我们鼠标按下， 就获得鼠标在盒子内的坐标
title.addEventListener('mousedown', function(e) {
    var x = e.pageX - login.offsetLeft;
    var y = e.pageY - login.offsetTop;
    // (2) 鼠标移动的时候，把鼠标在页面中的坐标，减去 鼠标在盒子内的坐标就是模态框的left和top值
    document.addEventListener('mousemove', move)

    function move(e) {
        login.style.left = e.pageX - x + 'px';
        login.style.top = e.pageY - y + 'px';
    }
    // (3) 鼠标弹起，就让鼠标移动事件移除
    document.addEventListener('mouseup', function() {
        document.removeEventListener('mousemove', move);
    })

10.2 client

client 翻译过来就是客户端，我们使用 client 系列的相关属性来获取元素可视区的相关信息。通过 client 系列的相关属性可以动态的得到该元素的边框大小、元素大小等。

属性	作用
element.clientTop	返回元素上边框的大小
element.clientLeft	返回元素左边框的大小
element.clientWidth	返回自身包括padding,内容区的宽度,不含边框,返回数值不带单位
element.clientHeight	返回自身包括padding,内容区的宽度,不含边框,返回数值不带单位

10.3 scroll

scroll 翻译过来就是滚动的，我们使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。

属性	作用
element.scrollTop	返回被卷上去的上策距离,返回数值不带单位
element.scrollLeft	返回被卷去的左侧距离,返回数值不带单位
element.scrollWidth	返回自身实际的宽度,不含边框,返回数值不带单位
element.scrollHeight	返回自身实际的高度,不含边框,返回数值不带单位

11 立即执行函数

    <script>
        // 1.立即执行函数: 不需要调用，立马能够自己执行的函数
        function fn() {
            console.log(1);

        }
        fn();
        // 2. 写法 也可以传递参数进来
        // 1.(function() {})()    或者  2. (function(){}());
        (function(a, b) {
            console.log(a + b);
            var num = 10;
        })(1, 2); // 第二个小括号可以看做是调用函数
        (function sum(a, b) {
            console.log(a + b);
            var num = 10; // 局部变量
        }(2, 3));
        // 3. 立即执行函数最大的作用就是 独立创建了一个作用域, 里面所有的变量都是局部变量 不会有命名冲突的情况
    </script>