• 事件中的this指向、innerText的用法与考试题讲解

    本课标题：事件中的this指向、innerText的用法与考试题讲解

    引入话术：（打开有道词典this）,大家都学过this的英文含义，是这里、这个的意思，那么我们编程语言中是“当前的……”意思，比如当前的函数、当前的对象、当前的盒子、当前的按钮等……那么我们如何去正确的使用他呢？

    课堂内容：1）事件中的this指向

    2）构造函数中的this指向

    3）普通函数中的this指向（补充）

    4）对象方法中的this指向（补充）

    案例演示：this指向（历时25分钟）

    引入话术：上午给大家讲解了表单元素中value值的设置与获取，现在我想着获取非表单元素的文本值如何获取该用哪个属性呢?

    课堂内容：1）innerText属性的获取

    2）innerText属性的设置

    案例演示：innerText属性（历时10分钟）

    总结：打开Xmind总结今日知识点（历时10分钟）

    周考试题讲解（历时40分钟）

    作业：1、单击按钮利用className属性使盒子背景成半透明      

    1. 单击按钮利用style属性使子盒子位置在父盒子的右下角
    2. 单个按钮实现开关灯的效果
    3. 单个按钮实现小图变大图并使图片下边显示图片名称
      1. html>
      2. <html lang="en">
      3.  
      4. <head>
      5.     <meta charset="UTF-8">
      6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
      7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
      8.     <title>Documenttitle>
      9. head>
      10.  
      11. <body>
      12.     <p id="p1">
      13.         我是一个普通的段落
      14.         <span id="s1" class="s2">我是span元素span>
      15.         
      16.     p>
      17.     <button>设置文本节点button>
      18.     <button class="btn">设置所有节点button>
      19. body>
      20. <script>
      21.     var p1 = document.querySelector("#p1");
      22.     // 1、innerText/textContent:获取或者设置元素的文本内容
      23.     console.log(p1.innerText);
      24.     console.log(p1.textContent);
      25.     var btn1 = document.querySelector("button");
      26.     btn1.onclick = function() {
      27.             // p1.innerText = "hahahaah";
      28.             p1.textContent = "6666666666666";
      29.         }
      30.         // 2、innerHTML:获取或者设置元素的所有节点
      31.     console.log(p1.innerHTML);
      32.     var btn2 = document.getElementsByClassName("btn")[0];
      33.     btn2.onclick = function() {
      34.             p1.innerHTML = "百度一下";
      35.             /*  btn2.innerText = "牛逼！！！！！";
      36.              btn2.style.backgroundColor = "blue"; */
      37.             this.innerText = "牛逼！！！！！";
      38.             this.style.backgroundColor = "blue";
      39.  
      40.         }
      41.         /*
      42.           函数中this的指向问题（考试要考的，面试要面的）
      43.             1、在构造函数中，this指向实例化对象
      44.             2、在对象函数中，this指向当前对象
      45.             3、在普通函数中，this指向window
      46.             4、在事件函数中，this指向事件源
      47.         */
      48. script>
      49.  
      50. html>

  • 相关阅读:
    Linux网络（1）——配网络3招（配置DHCP、配置固定IP、配置DNS）
    Android 开发板接入外接USB键盘App重启问题
    微软官方开源免费的Blazor UI组件库 - Fluent UI Blazor
    MQ系列2：消息中间件的技术选型
    typescript 根据对象的键生成枚举类型
    2023-2024 人工智能专业毕设如何选题
    过敏体质也会遗传给孩子，孕期妈妈应该尽早预防
    （数据结构与算法）LeetCode刷题笔记2-0005：最长回文子串
    Vue3 provide 和 inject 实现祖组件和后代组件通信
    《动手学深度学习 Pytorch版》 9.6 编码器-解码器架构
  • 原文地址：https://blog.csdn.net/weixin_47619284/article/details/126326947