JS的DOM事件

发布于：2024-04-08 ⋅ 阅读:(85) ⋅ 点赞:(0)

文章目录

1. Json 内置对象

1.1. 概念

​ JSON 是一种轻量级的数据交换格式，文本被任何编程语言读取及作为数据格式传递作用，通常用于服务端向网页传递数据。

和 xml 区别：

xml 是一个重量级语句(标签占用的体积比较大)，现在主要用于后台的配置文件。

1.2. 语法规则

  • 数据为键/值对。
  • 数据由逗号分隔。
  • 大括号保存对象。
  • 方括号保存数组。
      //json对象(本质是一个字符串类型)
      const jsonStr = '{"username":"张三","password":"123"}';

      //json数组
      const sites = [
        { name: "Runoob", url: "www.runoob.com" },
        { name: "Google", url: "www.google.com" },
        { name: "Taobao", url: "www.taobao.com" },

1.3. json 和 js 对象的区别

1.3.1. 语法

  • json 字符串：属性名必须用双引号引起来。
  • js 对象：属性名可以不用双引号。

1.3.2. 作用

  • json 字符串：本质上是一个字符串，可以用于网络传输(从后台接收到的数据大部分都是 json)。

  • js 对象：本质是一个对象(类的实例)，不能在网络上传输(后台经常将对象转成 js 字符串，通过网络发给前台)。

1.4. 方法

JSON.parse()用于将一个 JSON 字符串转换为 JavaScript 对象。

JSON.stringify()用于将 JavaScript 值转换为 JSON 字符串。

1.5. 解析网络数据

    <script>
      let jsonStr = {
        success: true,
        data: {
          title: "天蝎座",
          type: "今日运势",
          time: "3月15日",
          todo: {
            yi: "平衡生活",
            ji: "无意义社交",
          },
          fortune: {
            all: 4,
            love: 4,
            work: 4,
            money: 3,
            health: 4,
          },
          index: {
            all: "83%",
            love: "79%",
            work: "85%",
            money: "73%",
            health: "88%",
          },
          shortcomment: "追求自己的目标",
          fortunetext: {
            all: "整体运势尚佳，能够从中找到平衡点。你可能会有一些新的想法或计划，不妨大胆尝试，去追求自己的目标。建议你多和朋友交流，分享自己的想法和感受。生活方面，可以考虑去参加一个艺术展览或者看一场电影，享受文化生活的乐趣。",
            love: "单身的你需要为感情付出更多的努力，不要害怕被拒绝，有机会就大胆行动。已有伴者的你需要为感情付出更多，关心对方的需求，为对方创造更多美好的回忆，让感情更加深厚。",
            work: "需要打磨实力。不要急于求成，而是要通过不断的学习和努力，提升自己的专业能力和知识水平。只有具备扎实的实力，你才能应对各种挑战和困难，并取得更好的成果和回报。",
            money:
              "消费需谨慎。在花钱前三思而后行，避免冲动购买与浪费。合理规划预算，建立储蓄习惯。牢记财务目标，并审慎考虑长期投资，以实现财务增值。",
            health:
              "适当摄取各类食物，避免过度挑食。均衡饮食，多摄取富含营养的食物，保持身体健康。注意保持消化系统的健康，避免过度进食或过度饮酒。",
          },
          luckynumber: "9",
          luckycolor: "姜黄",
          luckyconstellation: "天秤座",
        },
      };
      console.log(typeof jsonStr);
      console.log(jsonStr.data.fortune.love);
    </script

2. DOM 树

2.1. 概念

Document Object Mode 文档对象模型，是用来动态修改 HTML 的，其目的是开发网页特效及用户交互。

如下图所示，将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树，文档树直观的体现了标签与标签之间的关系。

web-api

2.2. document 对象

document 是 JavaScript 内置的专门用于 DOM 的对象，该对象包含了若干的属性和方法，document 是学习 DOM 的核心。

2.3. 获取 DOM 对象

属性 作用
querySelector() 满足条件的第一个元素
querySelectorAll 满足条件的元素集合 返回伪数组
getElementById() 返回对拥有指定 id 的第一个对象的引用
getElementsByClassName() 返回文档中所有指定类名的元素集合
getElementsByTagName() 返回带有指定标签名的对象集合。

3. 事件入门

三要素：

  1. 事件源(按钮)
  2. 事件(其实就是一个动作:点击)
  3. 事件处理程序(事件发生之后,需要做的事情.比如弹框)

三个步骤：

  1. 写一个事件源
  2. 写一个监听器(本质就是一个事件处理函数)
  3. 绑定监听器和事件源(通过一个属性，将二者绑定到一块)
<!-- 使用动态绑定的方式:要先获取按钮对象,然后再给按钮对象的onclick属性赋值-->
<button>秋香</button>

//事件处理函数(就是一个普通函数)
function myClick() {
  alert("真香");
}

//获取按钮对象
const btn = document.querySelector("button");
//然后再给按钮对象的onclick属性赋值
btn.onclick = myClick; //myClick是函数名,代表整个函数,不能加(),加()代表将函数执行后的返回值赋给onclick属性

改进：

btn.onclick = function () {
  alert("真香");
};

4. 书架案例

4.1. 演示效果

QQ录屏20240324224151 -original-original

4.2. 代码实现

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    书名：<input type="text" id="bookname" name="bookname" /><br />
    作者：<input type="text" id="bookauthor" name="bookauthor" /><br />
    价格：<input type="text" id="bookprice" name="bookprice" /><br />
    折扣：<input type="text" id="booksale" name="booksale" /><br />
    <button id="btn">计算折扣价</button>
    <script>
      // 获取元素

      // 给按钮绑定点击事件
      btn.addEventListener("click", function () {
        const bookname = document.querySelector("#bookname").value;
        const bookauthor = document.querySelector("#bookauthor").value;
        const bookprice = document.querySelector("#bookprice").value;
        const booksale = document.querySelector("#booksale").value;
        const btn = document.querySelector("#btn");

        const price = bookprice * booksale;
        alert("打折后的价格为：" + price);
      });
    </script>
  </body>
</html>

5. 操作元素属性

5.1. 原始方式

element.setAttribute() 设置或者改变指定属性并指定值。

element.getAttribute() 返回指定元素的属性值

5.2. 简化方式

元素对象.属性名=属性值 设置或者修改元素属性的值

元素对象.属性名 获取元素属性的值

5.3. 电灯开关

演示效果：

QQ录屏20240324224621 -original-original

思路：

  • 获取图片对象
  • 添加点击事件
  • 在点击事件中根据条件修改属性

5.3.1. 方式一

使用endsWith方法来判断图片的 src 属性值，进行切换。

      const img = document.querySelector("img");
      //  添加点击事件
      img.addEventListener("click", function () {
        // 获取img的属性值
        const src = img.src;
        // 判断图片的src属性值,进行切换
        if (src.endsWith("off.gif")) {
          img.src = "./img/on.gif";
        } else {
          img.src = "./img/off.gif";
        }

5.3.2. 方式二

使用includes方法来判断图片的 src 属性值，进行切换。

//获取图片对象
const img = document.querySelector("img");
//添加点击事件
img.addEventListener("click", function () {
  //获取img的src属性的值
  const src = img.src;
  console.log(src);

  //判断
  if (src.includes("off.gif")) {
    img.src = "./img/on.gif";
  } else {
    img.src = "./img/off.gif";
  }
});

5.3.3. 方式三

使用字符串的 match 方法判断图片的 src 属性值，进行切换。

const img = document.querySelector("img");
//  添加点击事件
img.addEventListener("click", function () {
  // 获取img的属性值
  const src = img.src;
  // 判断图片的src属性值,进行切换
  if (src.match(/off/)) {
    img.src = "./img/on.gif";
  } else {
    img.src = "./img/off.gif";
  }
});

**match()**方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。

  • 语法：string.match(regexp)

  • 参数：regexp 必需。规定要匹配的模式的RegExp对象。

  • 返回值：Array 存放匹配结果的数组

5.3.4. 方式四

使用奇偶数进行切换，不再利用图片的属性判断。

//获取图片对象
const img = document.querySelector("img");

//定义一个初始的变量
let num = 0;

//添加点击事件
img.onclick = function () {
  //判断
  if (num % 2 == 0) {
    img.src = "./img/on.gif";
  } else {
    img.src = "./img/off.gif";
  }

  num++;
};

5.3.5. 方式五

使用标记变量进行切换，不再利用图片的属性判断。

//获取图片对象
const img = document.querySelector("img");

//定义一个标记变量(跟灯泡的亮灭是一致的)
let flag = false;

//添加点击事件
img.onclick = function () {
  //判断
  if (flag == false) {
    img.src = "./img/on.gif";
    flag = true; //更新状态,跟灯泡亮灭一致
  } else {
    img.src = "./img/off.gif";
    flag = false; //更新状态,跟灯泡亮灭一致
  }
};

6. 操作元素的标签体

6.1. innerHTM

innerHTML 将文本内容添加/更新到任意标签位置，文本中包含的标签会被解析。

<script>
  // innerHTML 将文本内容添加/更新到任意标签位置 const span =
  document.querySelector('span') intro.innerHTML = '嗨~ 我叫韩梅梅！'
  intro.innerHTML = '<h4>嗨~ 我叫韩梅梅！</h4>'
</script>

6.2. innerText

innerText 将文本内容添加/更新到任意标签位置，文本中包含的标签不会被解析。

<script>
  // innerText 将文本内容添加/更新到任意标签位置 const span =
  document.querySelector('span') // intro.innerText = '嗨~ 我叫李雷！' //
  intro.innerText = '<h4>嗨~ 我叫李雷！</h4>'
</script>

innerText 只能操作纯文本。

总结：如果文本内容中包含 html 标签时推荐使用 innerHTML，否则建议使用 innerText 属性。

6.3. 根据时间显示图片

演示效果

image-20240324225551872

实现代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <img src="./img/s.gif" alt="" />
    <div>上午好</div>
    <script>
      // 根据系统不同时间来判断，所以需要用到日期内置对象Date
      // 利用多分支语句来设置不同的图片
      // 需要一个图片，并且根据时间修改图片，就需要用到操作元素src属性
      // 需要一个div元素，显示不同问候语，修改元素内容即可

      // 获取元素
      const img = document.querySelector("img");
      const div = document.querySelector("div");

      // 获取当前时间
      let nowTime = new Date();
      // 获取当前小时
      let h = nowTime.getHours();
      console.log(h);

      // 判断当时的时间段
      if (h >= 6 && h <= 12) {
        img.src = "./img/s.gif";
        div.innerText = "上午好，好好敲代码";
      } else if (h >= 13 && h <= 18) {
        img.src = "./img/x.gif";
        div.innerText = "下午好，好好敲代码";
      } else {
        img.src = "./img/w.gif";
        div.innerText = "晚上好，好好敲代码";
      }
    </script>
  </body>
</html>

7. 操作元素样式

7.1. 单独设置

element.style 设置或返回元素的样式属性

 元素对象.style.属性名 = 属性值

div.style.background = "red";
div.style.backgroundColor = "red"; //属性名是background-color需要写成backgroundColor

7.2. 批量设置

element.className 设置或返回元素的 class 属性

元素对象.className = '类选择器的值'

div.className = "c1";

7.3. classList

相当于一个存储了 class 样式的集合。

可以解决 className 容易覆盖以前的类名，通过 classList 方式追加和删除类名。

方法：

属性 作用
add() 在元素中添加一个或多个类名
remove() 移除元素中一个或多个类名
toggle() 在元素中切换类名，如果存在就删除，不存在则添加
contains() 判断指定的类名是否存在

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布