前端——JavaScript基础学习【part 4】

最新推荐文章于 2024-06-13 02:48:16 发布

帆高#

最新推荐文章于 2024-06-13 02:48:16 发布

阅读量270

点赞数 1

分类专栏： JavaScript基础学习文章标签： javascript 前端学习

本文链接：https://blog.csdn.net/qq_73958269/article/details/130686577

版权

JavaScript基础学习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

第一部分

Web API基本认知

1.变量声明

const优先

const语义化更好
实践中有很多变量我们声明之后就不会再更改了
声明变量先给const，后需修改，再改为let

对于引用数据类型，const声明的变量，里面存放的不是值，存放的是地址
基本数据类型的值或者引用类型的地址发生变化的时候，用let

<!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" />
    <title>Document</title>
  </head>
  <body>
    <script>
      // 对于复杂数据类型，堆中存放的数据在栈中对应的地址，是不发生改变的
      const color = ["skyblue", "red", "green"];
      // 只是删除添加某些元素是不发生改变的
      color.push("pink");
      console.log(color);
      // color = ["#345678", "#145289", "#598712"];
      // console.log(color);
      // 会报错
    </script>
  </body>
</html>

2.作用和分类

作用
使用JavaScript去操作html和浏览器
分类
DOM（文档对象模型）
BOM（浏览器对象模型）

3.DOM

定义
DOM是浏览器提供的一套专门用来操作网页内容的功能
作用
开发网页内容特效和实现用户交互

4.DOM树

定义
将HTML文档以树状结构直观地表现出来
作用
文档树直观的体现了标签和标签之间的关系

5.DOM对象

DOM对象
定义：浏览器根据html标签生成的js对象
注意：
（1）所有的标签属性都可以在这个对象上面找到
（2）修改这个对象的属性会自动映射到标签身上
DOM的核心思想
把网页内容当做对象来处理
document对象
（1）是DOM里提供的一个对象
（2）它提供的属性和方法都是用来访问和操作网页内容的
（3）网页所有内容都在document里面

获取DOM对象

1.根据CSS选择器来获取DOM元素

1.1选择匹配的第一个元素

语法
document.querySelector('CSS选择器')
参数
包含一个或多个有效的CSS选择器字符串
返回值
CSS选择器匹配的第一个元素，一个HTML Element对象
如果没有匹配到，则返回null

1.2选择匹配的多个元素

语法
document.querySelectorAll('CSS选择器')
参数
包含一个或多个有效的CSS选择器字符串
返回值
CSS选择器匹配的NodeList对象集合
得到的是一个伪数组
（1）有长度有索引号的数组
（2）但是没有pop() push()等数组方法
（3）想要得到里面的每一个对象，则需要遍历（for）的方式获得
（4）尽管只有一个元素，通过document.querySelectorAll('CSS选择器')获取过来的也还是一个伪数组和元素个数无关，和选择的获取方式有关

<!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" />
    <title>Document</title>
  </head>
  <body>
    <div class="nav">第一个</div>
    <div class="nav">第二个</div>
    <p id="end">第三个</p>
    <ul class="box">
      <li>so crazy1</li>
      <li>so crazy2</li>
      <li>so crazy3</li>
      <li>so crazy4</li>
    </ul>
    <script>
      // 1.获取匹配的第一个元素（只获取一个）
      //   只是修改对象中的属性，对象(标签)没有发生改变
      const nav = document.querySelector("div"); //一定要加引号
      //   const box = document.querySelector(".nav");
      console.log(nav); //结果是第一个盒子
      //   可以直接操作修改
      nav.style.backgroundColor = "skyblue";
      nav.style.color = "white";
      //   获取第一个p
      const end = document.querySelector("#end");
      console.log(end);
      //   获取ul里面的第一个 li
      const li = document.querySelector("ul li:first-child");
      console.log(li);
      //   获取ul里面的所有li
      //   const lis = document.querySelectorAll("ul li");
      //   console.log(lis); //把所有的li放到了一个数组里面
      //   不能直接操作处理，获取到的是个数组，只能通过遍历的方式依次给里面的元素做修改
      //   1. 获取元素
      const lis1 = document.querySelectorAll(".box li");
      console.log(lis1);
      for (let i = 0; i < lis1.length; i++) {
        console.log(lis1[i]);
      }
    </script>
  </body>
</html>

2.其他获取DOM元素方法

<!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" />
    <title>Document</title>
  </head>
  <body>
    <div id="nav">根据id获取一个元素</div>
    <div>根据标签获取一类元素，获取页面所以的div</div>
    <div class="end"></div>
    <script>
      // 根据id获取一个元素
      const box1 = document.getElementById("nav");
      console.log(box1); //获取到的是个对象
      console.log("------------------------------------------");
      // 根据标签获取一类元素，获取页面所以的div(标签选择器)
      const box2 = document.getElementsByTagName("div");
      console.log(box2); //获取到的是个伪数组
      console.log("------------------------------------------");
      //   根据类名获取元素，获取页面中所有类名为end的
      const box3 = document.getElementsByClassName("end");
      console.log(box3); //获取到的是个伪数组
    </script>
  </body>
</html>

操作元素内容

1.对象.innerText属性

将文本内容添加或者更新到任意标签
显示纯文本，不解析标签

2.对象.innerHTML属性

将文本内容添加或者更新到任意标签
会解析标签，多标签建议使用模板字符

 <div class="box">玫瑰少年在我心里</div>

<script>
      // 1.获取元素
      const box = document.querySelector(".box");
      // 2.修改文字内容 对象.innerRext 属性
      //   console.log(box.innerText); // 获取文字内容
      //   box.innerText = "<h4>哪朵玫瑰没有荆棘</h4>"; // 修改文字内容
      //   box.innerText = "<h4>哪朵玫瑰没有荆棘</h4>"; // 不解析标签
      //  3. innerHTML 解析标签
      console.log(box.innerHTML); // 获取文字内容
      box.innerHTML = "<b>最好的报复是美丽</b>"; // 修改文字内容
    </script>

操作元素属性

1.操作元素常用属性

1.1语法

对象.属性 = 值

<!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" />
    <title>Document</title>
  </head>
  <body>
    <img src="../images/天空-1.jpg" alt="" />
    <script>
      // 1.获取元素
      const pic = document.querySelector("img");
      // 2.修改图片对象的属性
      pic.src = `../images/东师-1.jpg`;
      pic.title = "东北师范大学的风景照";
    </script>
  </body>
</html>

2.操作元素样式属性

2.1通过style属性操作CSS

语法
对象.style.属性 = 值

<!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" />
    <title>Document</title>
    <style>
      .box {
        width: 200px;
        height: 200px;
        background-color: skyblue;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
    <script>
      //   1.获取元素
      const box = document.querySelector(".box");
      //   2. 修改元素样式属性
      box.style.width = "500px"; // 一定要跟单位
      box.style.backgroundColor = "gray"; // 多组单词的采用小驼峰命名法！！！
      box.style.border = "5px solid red";
      box.style.borderTop = "5px solid blue";
    </script>
  </body>
</html>

2.2操作类名（className）操作CSS

适用场景
如果修改的样式比较多，直接通过style属性修改比较繁琐，我们可以通过借助于css类名的形式
语法
元素.className = 'active'
active是一个css类名
注意
（1）由于class是关键字，所以使用className去代替
（2）className是使用新值换旧值
（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" />
    <title>Document</title>
    <style>
      .nav {
        width: 400px;
        height: 400px;
        background-color: #094a6d;
      }
      .box {
        width: 500px;
        height: 200px;
        background-color: purple;
        border-radius: 40px;
      }
    </style>
  </head>
  <body>
    <div class="nav"></div>
    <script>
      // 1.获取元素s
      const div = document.querySelector("div");
      // 2.添加类名
      div.className = " nav  box  "; //会覆盖之前的类名
    </script>
  </body>
</html>

2.3通过classList操作类控制CSS

适用场景
为了解决className容易覆盖以前的类名，通过classList方式追加和删除类名
语法
（1）追加一个类
元素.classList.add('类名')
（2）删除一个类
元素.classList.remove('类名')
（3）切换一个类
元素.classList.toggle('类名')

<!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" />
    <title>Document</title>
    <style>
      .box {
        width: 800px;
        height: 200px;
      }
      .active {
        color: white;
        background-color: purple;
        font-size: 36px;
        font-weight: 800;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div class="box">一定要两个人吗？一个人或许更胜一筹！</div>
    <script>
      // 1.获取元素
      const box = document.querySelector(".box");
      // 2.修改样式
      //   （1）追加一个类 类名不加点，并且是字符串
      //   box.classList.add("active");
      //   （2）删除一个类 类名不加点，并且是字符串
      //   box.classList.remove("box");
      //   （3）切换一个类 有or没有，有就删掉，没有就加上
      box.classList.toggle("active");
    </script>
  </body>
</html>

3.操作表单元素属性

3.1获取

DOM对象.属性名

3.2设置

DOM对象.属性名=新值

<!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" />
    <title>Document</title>
  </head>
  <body>
    <input type="text" value="请输入你的名字" />
    <script>
      // 1.获取元素
      const uname = document.querySelector("input");
      // 2.获取值  获取表单里面的值用的是 表单.value
      console.log(uname.value); //请输入你的名字
      uname.type = "password";
      console.log(uname.type);
    </script>
  </body>
</html>

3.3特殊

表单属性中添加就有效果，移除就没有效果，一律使用布尔值表示
如果为true，代表添加了该属性
如果是false，代表移除了该属性
比如：disabled，checked，selected

<!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" />
    <title>Document</title>
  </head>
  <body>
    <input type="checkbox" name="" id="" />
    <button>点击我！</button>
    <script>
      // 1.checked
      const input = document.querySelector("input");
      // console.log(input.checked); //false
      input.checked = true;
      // input.checked = "true";//不提倡
      // 字符串里面，只有是个空字符串是false，其余都是true
      console.log(input.checked);
      // 2.disabled
      const button = document.querySelector("button");
      console.log(button.disabled); // disabled的颜色是禁用吗？   默认值是false，不禁用
      button.disabled = true; //禁用
    </script>
  </body>
</html>

4.自定义属性

4.1标准属性

标签天生自带的属性，可以直接使用点语法操作
比如：class，id，title和disabled，checked，selected

4.2自定义属性

在html5中推出来了专门的data-自定义属性
在标签上一律以data-开头
在DOM对象上一律以dataset对象方式获取

<!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" />
    <title>Document</title>
  </head>
  <body>
    <div data-id="1" data-pc="lt">1</div>
    <div data-id="2">2</div>
    <div data-id="3">3</div>
    <div data-id="4">4</div>
    <div data-id="5">5</div>
    <script>
      const one = document.querySelector("div");
      console.log(one.dataset.id); //1
      console.log(one.dataset.pc); //lt
    </script>
  </body>
</html>

5.定时器-间歇函数

5.1定时器函数介绍

开启定时器
setInterval（函数，间隔时间）
作用：每隔一段时间调用这个函数
间隔时间单位是ms（毫秒）1s=1000ms
关闭定时器
let 变量名=setInterval（函数，间隔时间）
clearInterval（变量名）

5.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" />
    <title>Document</title>
  </head>
  <body>
    <script>
      //    匿名函数
      // setInterval(函数名，间隔时间) 函数名不用加小括号
      //   setInterval(function () {
      //     document.write("一共多少次你猜猜咯");
      //   }, 1000);
      //    声明函数
      function fn() {
        console.log("哪朵玫瑰没有荆棘");
      }
      //   定时器返回的是一个id数字
      let n = setInterval(fn, 1000);
      console.log(n); // 2
      //   关闭定时器
      clearInterval(n);
    </script>
  </body>
</html>

第二部分

事件监听（绑定）

1.事件监听

1.1基础知识

事件
事件是在编程时系统内发生的动作或者发生的事情
事件监听
就是让程序检测是否有事件发生，if有事件发生，立即调用一个函数做出响应，也称绑定事件或者注册事件

1.2语法

元素对象.addEventListener('事件类型'，要执行的函数)

事件监听三要素
（1）事件源
哪个DOM元素被事件触发了，要获取DOM元素
（2）事件类型
用什么方式触发
例如：鼠标单击（click），鼠标经过（mouseover）
（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" />
    <title>Document</title>
  </head>
  <body>
    <button>点击我！</button>
    <script>
      // flag-点击按钮弹出一个对话框
      //   1.事件源：button
      //   2.事件类型：点击鼠标
      //   3.事件处理程序：弹出一个对话框
      //   获取元素
      const btn = document.querySelector("button");
      btn.addEventListener("click", function () {
        alert("你点我了！");
      });
    </script>
  </body>
</html>

2.拓展阅读-事件监听版本

2.1DOM L0

事件源.on事件=function（）{}
###V 2.2DOM L2
事件源.addEventListener(事件，事件处理函数)

2.3区别

on方式会被覆盖，addEventListener方式可绑定多次，拥有事件更多特性

事件类型

1.鼠标事件

鼠标触发

click 鼠标点击
mouseenter 鼠标经过
mouseleave 鼠标离开

<!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" />
    <title>Document</title>
    <style>
      div {
        background-color: #3c5188;
        width: 300px;
        height: 300px;
      }
    </style>
  </head>
  <body>
    <div></div>
    <script>
      const div = document.querySelector("div");
      div.addEventListener("mouseenter", function () {
        // document.write(`我来了`);
        console.log(`我来了`);
      });
      div.addEventListener("mouseleave", function () {
        // document.write(`我走了`);
        console.log(`我走了`);
      });
    </script>
  </body>
</html>

2.焦点事件

表单获得光标

focus 获得焦点
blur 失去焦点

<!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" />
    <title>Document</title>
  </head>
  <body>
    <input type="text" />
    <script>
      const ip = document.querySelector("input");
      ip.addEventListener("focus", function () {
        console.log("获得光标啦~");
      });
      ip.addEventListener("blur", function () {
        console.log("失去光标啦~");
      });
    </script>
  </body>
</html>

3.键盘事件

键盘触发

keydown 键盘按下触发
keyup 键盘抬起抬起触发

<!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" />
    <title>Document</title>
  </head>
  <body>
    <input type="text" />
    <script>
      const input = document.querySelector("input");
      input.addEventListener("keydown", function () {
        console.log("按下键盘");
      });
      input.addEventListener("keyup", function () {
        console.log("弹起键盘");
      });
    </script>
  </body>
</html>

4.文本事件

表单输入触发

input 用户输入事件

<!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" />
    <title>Document</title>
  </head>
  <body>
    <input type="text" />
    <script>
      const input = document.querySelector("input");
      input.addEventListener("input", function () {
        console.log(input.value); //用input.value获取用户填入的内容
      });
    </script>
  </body>
</html>

事件对象

1.获取事件对象

定义
事件对象也是一个对象，在这个对象里有事件触发时的相关信息
使用场景
（1）可以判断用户按下哪个键
（2）可以判断鼠标点击了哪个元素
语法
元素对象.addEventListener('click'，function·（e）{ })
e就是事件对象
（1）在事件绑定的回调函数的第一个参数就是事件对象
（2）一般命名为event、ev、e

<!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" />
    <title>Document</title>
  </head>
  <body>
    <button>点击我</button>
    <script>
      const btn = document.querySelector("button");
      btn.addEventListener("click", function (e) {
        console.log(e);
      });
    </script>
  </body>
</html>

2.事件对象常用属性

部分常用属性
（1）type
获取当前的事件类型
（2）clientX/clientY
获取光标相对于浏览器可见窗口左上角的位置
（3）offsetX/offsetY
获取光标相对于当前DOM元素左上角的位置
（4）key
用户按下的键盘键的值
现在不提倡使用keyCode

环境对象

环境对象
指的是函数内部特殊的 变量this，它代表着当前函数运行时所处的环境
作用
弄清楚this的指向，可以让我们代码更简洁
特点
函数的调用方式不同，this指代的对象也不同
谁调用，this就指向谁

<!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" />
    <title>Document</title>
  </head>
  <body>
    <button>点击我！</button>
    <script>
      // 每个函数里面都有this 环境对象
      //   function fn() {
      //     console.log(this);
      //     // 普通函数里this指向的是window
      //   }
      //   fn();
      const btn = document.querySelector("button");
      btn.addEventListener("click", function () {
        // console.log(this);
        // 这里的this指向的是调用者 btn
        this.style.backgroundColor = "red";
      });
    </script>
  </body>
</html>

回调函数

定义
如果将函数A作为参数传递给函数B时，我们称函数A为回调函数

function fn() {
        console.log("我就是回调函数");
      }
      setInterval(fn, 1000);//每过一秒就返回去执行fn函数一次

第三部分

事件流

1.事件流和两个阶段

事件流
指的是事件完整执行过程中的流动路径
两个阶段
捕获阶段是从父到子，冒泡阶段是从子到父

2.事件捕获

定义
从DOM的根元素开始去执行对应的事件（从外到里）
代码
DOM.addEventListener(事件类型，事件处理函数，是否使用捕获机制)
注意
（1）addEventListener第三个参数传入true代表是捕获阶段触发
（2）若传入false代表冒泡阶段触发，默认的是false

3.事件冒泡

定义
当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发
（当一个元素触发事件后，会依次向上调用所有父级元素的同名事件）

4.阻止冒泡

作用
把某个事件限制在当前元素内，就需要阻止事件冒泡，防止事件影响到父级元素
前提
需要拿到事件对象
语法
事件对象.stopPropagation（）
注意
这个方法可以阻断事件流动传播，不光在冒泡阶段有效，捕获阶段也有效
阻止默认行为发生
（1）语法
e.preventDefault
（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" />
    <title>Document</title>
  </head>
  <body>
    <form action="http://www.itcast.cn">
      <input type="submit" value="免费注册" />
    </form>
    <a href="http://www.baidu.cn">百度一下</a>
    <script>
      const form = document.querySelector("form");
      form.addEventListener("submit", function (e) {
        // 阻止默认行为 ：提交
        e.preventDefault();
      });
      const a = document.querySelector("a");
      a.addEventListener("click", function (e) {
        // 阻止默认行为 ：点击
        e.preventDefault();
      });
    </script>
  </body>
</html>

5.解绑事件

5.1 on事件方式

定义
直接使用null覆盖就可以实现事件解绑
语法

   btn.onclick = function () {
         alert("nidianjiwol");
              L0 事件解绑
           btn.onclick = null;
         };

5.2 addEventListener事件方式

语法

  function fn() {
        alert("O(∩_∩)O哈哈~");
      }
      //   绑定事件
      btn.addEventListener("click", fn);
      //   L2 时间解绑
      btn.removeEventListener("click", fn);

注意
匿名函数无法被解绑

6.鼠标经过事件的区别

mouseover和mouseout会有冒泡效果
mouseenter和mouseleave没有有冒泡效果（使用）

事件委托

1.定义

是利用事件流的特征解决一些开发需求的知识技巧

2.优点

减少注册次数，可以提高程序性能

3.原理

利用的是事件冒泡的特点
给父级元素注册事件，当我们触发子级元素的时候，会冒泡到父级元素身上，从而触发父级元素的事件

4.实现

事件对象.target.tagName可以获得真正触发事件的元素

<!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" />
    <title>Document</title>
  </head>
  <body>
    <ul>
      <li>第1个孩子</li>
      <li>第2个孩子</li>
      <li>第3个孩子</li>
      <li>第4个孩子</li>
      <li>第5个孩子</li>
      <li>第6个孩子</li>
      <p>好困</p>
    </ul>
    <script>
      // 点击每个li，当前的li中的文字变成红色
      //   事件委托
      //   1.获取父级元素
      const ul = document.querySelector("ul");
      ul.addEventListener("click", function (e) {
        // console.dir(e.target);//就是我们点击的对象
        if (e.target.tagName === "LI") {
          e.target.style.backgroundColor = "red";
        }
      });
    </script>
  </body>
</html>

其他事件

1.页面加载事件

1.1第一种

定义
外部资源记载完毕之后触发的事件
事件名
load
语法
页面加载事件
window.addEventListener('load'，function({ 执行的操作 }))

1.1第二种

定义
当初始的HTML文档被完全加载和解析完成之后，DOMContentLoaded事件被触发，而无需等待样式表、图像等完全加载
事件名
DOMContentLoaded
语法
给document添加DOMContentLoaded事件
document.addEventListener('DOMContentLoaded'，function({ 执行的操作 }))

2.元素滚动事件

2.1基础知识

定义
滚动条在滚动时持续触发的事件
事件名
scroll
语法
监听整个页面滚动
window.addEventLiustener('scroll',function(){执行的操作})

2.2增加的属性

scrollLeft和 scrollTop（属性）
（1）获取被卷去的大小
（2）获取元素内容往左，往上滚出去看不到的距离
（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" />
    <title>Document</title>
    <style>
      body {
        height: 1000px;
        width: 200px;
      }
      div {
        width: 250px;
        height: 250px;
        margin: 100px auto;
        background-color: #3c5188;
      }
    </style>
  </head>
  <body>
    <div></div>
    <script>
      const div = document.querySelector("div");
      window.addEventListener("scroll", function () {
      //是数字型数据，可以取值也可以赋值
        const x = document.documentElement.scrollTop;
        if (x >= 100) {
          div.style.display = "none";
        } else {
          div.style.display = "block";
        }
      });
    </script>
  </body>
</html>

3.页面尺寸事件

会在窗口尺寸改变的时候触发事件

window.addEventListener('resize',function(){
	//执行的代码
})

检测屏幕宽度

window.addEventListener('resize',function(){
	let w = document.documentElement.clienWidth
	console.log(w)
})

获取宽高
获取元素的可见部分宽高（不包含边框，margin，滚动条等）
clientWidth和clientHeight

元素尺寸与位置

1.使用场景

前面案例滚动多少距离，都是我们自己看的，最好是页面滚动到某个元素，就可以做某些事情
简单说，就是通过js的方式，得到元素在页面中的位置
这样我们可以做，页面滚动到这个位置，就可以做某些操作，省去计算了

2.获取宽高

获取元素自身的宽高，包含元素自身设置的宽高、padding、border
offsetWidth和offsetHeight
获取出来的是数值，方便计算

注意：获取的是可视宽高，如果盒子是隐藏的，获取的结果是0

3.获取位置

获取元素距离自己定位父级元素的左、上距离（受父级元素的影响）
（1）如果父亲有定位，则以父亲为准
（2）如果父亲没有定位，再以最近的带有父亲的定位为准
（3）如果都没有，就以文档左上角为准
offsetWidth` ``和offsetHeight```注意是只读属性

第四部分

日期对象

1.实例化

1.1日期对象

日期对象：用来表示时间的对象
作用：可以得到当前的系统时间

1.2实例化

在代码中发现了new关键字时，一般将这个操作称为实例化
创建一个时间对象并获取时间

（1）获得当前时间

const date  = new Date()

（2）获得指定时间

const date  = new Date('2004-02-29')

2.日期对象方法

2.1使用场景

因为日期对象返回的数据我们不能直接使用，所以需要转换为实际开发中常用的格式

2.2方法

方法	作用	说明
getFullYear()	获得年份	获取四位年份
getMonth()	获得月份	取值为0~11
getDate()	获取月份中的每一天	不同月份取值也不同
getDay()	获取星期	取值为0~6
getHours()	获取小时	取值为0~23
getMinutes()	获取分钟	取值为0~59
getSeconds()	获取秒	取值为0~59

2.3其他格式

toLocaleString()2022/4/1 09:41:21
toLocaleDateString() 2022/4/1
toLocaleTimeString() 09:41:21

3.时间戳

3.1使用场景

如果计算倒计时效果，前面无法直接计算，需要借助于时间戳完成

3.2定义

是指1970年1月1日00时00分到现在的毫秒数，它是一种特殊的计量时间的方式

3.3计算方法

将来的时间戳 - 现在的时间戳 = 剩余时间毫秒数
剩余时间毫秒数转化为剩余时间的年月日分秒就是倒计时时间
例如：将来的时间戳 2000ms - 现在的时间戳 1000ms = 1000ms
1000ms 转换后就是 0小时0分1秒

3.4获取方式

使用getTime()方法

const date = new Date()//必须实例化
console.log(date.getTime())

简写+new Date()

//无须实例化
console.log(+new Date())

使用Date.now()

//无须实例化
//只能得到当前的时间戳，而前面两种可以返回指定时间的时间戳
console.log(Date.now())

节点操作

1.DOM节点

DOM节点
DOM树里的每一个内容都称之为节点
节点类型
（1）元素节点
a——所有的标签比如body，div
b——html是根节点
（2）属性节点
所有的属性比如 href
（3）文本节点
所有的文本

2.查找节点

节点关系
针对的找亲戚返回的都是对象
父节点
（1）parentNode属性
（2）返回最近一级的父节点，找不到返回值为null

子元素.parentNote

子节点
（1）childNodes
获得所有子节点，包括文本节点（空行，换格）、注释节点等
（2）children属性
获得所有元素节点
返回的还是一个伪数组

父元素.children

兄弟节点

（1）下一个兄弟节点
nextElementSibling属性

（2）上一个兄弟节点
previousElementSibling属性

3.增加节点

很多情况下，我们需要在页面元素中增加元素
比如，点击发布按钮，可以新增一条信息
一般情况下
创建一个新的节点
把创建的节点放入到指定的元素内部
创建节点
（1）定义
即创建出一个新的网页元素，再添加到网页内，一般先创建节点，然后插入节点
（2）方法

//创造一个新的元素节点
document.creatElement('标签名')

追加节点
（1）想要在界面看到，还得插入到某个父元素中
（2）插入到父元素的最后一个子元素

//插入到这个父元素的最后
父元素.appendChild(要插入的元素)

（3）插入到父元素中某个子元素的前面

//插入到某个父元素的前面
父元素.insertBefore(要插入的元素，在那个元素前面)

克隆节点

（1）特殊情况下，我们新增节点，按照如下操作：

a——复制一个原有的节点
b——把复制的节点放入到指定的元素内部
（2）克隆节点

//克隆一个已有的元素节点
元素.cloneNode(布尔值)

（3）cloneNode会克隆出一个跟原标签一样的元素，括号内传入布尔值

若为true，则代表克隆时会包含后代节点一起克隆

若为false，则代表克隆时不包含后代节点

注意：默认为false

4.删除节点

使用场景
若一个节点在页面中已不需要时，可以删除它
要求
在JavaScript原生DOM操作中，要删除元素必须通过父元素删除
语法

父元素.removeChild(要删除的元素)

注意
（1）如不存在父子关系则删除不成功
（2）删除节点和隐藏节点（display:none）有区别的，隐藏节点还是存在的，但是删除，则从html中删除节点

M端事件

移动端也有自己独特的地方，比如触屏事件touch（也称触摸事件）

touch对象代表一个触摸点
触摸点可能是一根手指，也可能是一只触屏笔
触屏事件可以响应用户手指对屏幕或者触摸板操作
常见的触屏事件如下

触屏touch事件	说明
touchstart	手指触摸到一个DOM元素时触发
touchmove	手指在一个DOM元素上滑动时触发
touchend	手指从一个DOM元素上移开时触发

第五部分

BOM（浏览器对象模型）

dow对象是一个全局对象，也可以说是JavaScript中的顶级对象- 像document，alert()，console.log()这些都是window的属性，基本BOM方法的属性和方法都是window的- 所用通过var定义在全局作用域中的变量、函数都会变成window对象的属性和方法

window对象下的属性和方法调用的时候可以省略window

定时器-延时函数

1.定义

JavaScript中内置的一个用来让代码延迟执行的函数，叫setTimeout

2.语法

setTime(回调函数,等待的毫秒数)

注意：setTimeout仅仅执行一次，所以可以理解为就是把一段代码延迟执行，平时省略window

3.清除延时函数

let timer = setTime(回调函数,等待的毫秒数)
clearTimeout(timer)

注意：
（1）延时器需要等待，所以后面的代码先执行
（2）每一次调用延时器都会产生一个新的延时器

4.两种定时器对比

延时函数：执行一次
间歇函数：每隔一段时间就执行一次，除非手动清除

js执行机制

1.使用场景

JavaScript语言的一大特点是单线程，也就是说，同一个时间只能处理一件事
单线程就意味着，所有的任务需要排队，前一个任务结果，才会执行后一个任务。这样所导致的问题：如果js执行的时间过长，这样就会造成渲染的页面不连贯，导致产生页面渲染加载阻塞的效果

2.同步

同步任务都在主线程上进行，形成一个执行栈

3.异步

JS的异步是通过回调函数实现的

一般而言，异步任务有以下三种类型：

普通时间
如click，resize等
资源加载
如load，error等
定时器
包括setInterval,setTimeout等
异步任务相关添加到任务队列中，（任务队列也称为消息队列）

4.JS执行机制

（1）先执行执行栈中的同步任务
（2）异步任务放入任务队列中
（3）一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行

由于主线程不断地重复获得任务、执行任务、再获取任务、再执行，所以这种机制被称为事件循环
在这里插入图片描述

location对象

location的数据类型是对象，它拆分并保存了URL地址的各个组成部分

常用属性和方法

href属性获取完整的url地址，对其赋值时用于地址的跳转

console.log(location.href)
location.href = '链接'

search属性获取地址中携带的参数，符号？后面部分

console.log(location.search)

hash 属性获取地址中的哈希值，符号 # 后面部分

console.log(loaction.hash)

reload 方法用来刷新当前页面，传入参数 true 时表示强制刷新

<button>点击刷新<button>

let btn = document.querySelector('button')
btn.addEventListener('click',function(){
	location.reload(true)
})

navigator对象

navigator的数据类型是对象，该对象下记录了浏览器自身的相关信息

常用属性和方法

通过 userAgent 检测浏览器的版本及平台

// 检测 userAgent（浏览器信息）
!(function () {
	const userAgent = navigator.userAgent
	// 验证是否为Android或iPhone
	const android = userAgent.match(/(Android);?[\s\/]+([\d.]+)?/)
	const iphone = userAgent.match(/(iPhone\sOS)\s([\d_]+)/)
	// 如果是Android或iPhone，则跳转至移动站点
	if (android || iphone) {
	location.href = 'http://m.itcast.cn' }
})()

history对象

history 的数据类型是对象，主要管理历史记录，该对象与浏览器地址栏的操作相对应，如前进、后退、历史记录等

常用属性和方法

history 对象一般在实际开发中比较少用

history对象方法	作用
back()	可以后退功能
forward()	前进功能
go(参数)	前进后退，参数如果是1则前进1个页面，参数如果是-1则后退1一个页面

帆高#

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
前端——JavaScript基础学习【part 4】

目录第一部分Web API基本认知1.变量声明2.作用和分类3.DOM4.DOM树5.DOM对象获取DOM对象1.根据CSS选择器来获取DOM元素1.1选择匹配的第一个元素1.2选择匹配的多个元素2.其他获取DOM元素方法操作元素内容1.对象.innerText属性2.对象.innerHTML属性操作元素属性1.操作元素常用属性1.1语法2.操作元素样式属性2.1通过style属性操作CSS2.2操作类名（className）操作CSS2.3通过classList操作类控制CSS3.操作表单元素属性3.1获
复制链接

扫一扫

专栏目录