• 事件中的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>

  • 相关阅读:
    分享一些我的远程办公经验
    rust变量绑定、拷贝、转移、引用
    （附源码）springboot西安酷跑健身房管理系统 毕业设计 345421
    F3L600R10W4S7FC22BPSA1 EasyPACK IGBT模块 950V(F3L600R10W4S7FC22)
    关于GIS空间分析的几点思路
    RocketMQ源码阅读（十）消息消费-—消息队列负载均衡
    为什么短时傅里叶变换无法实现小波等优秀时频方法对时频分布的提取效果？
    Swiper实现轮播效果
    C++没落了？学习C++没有前途了？从业者给你揭晓答案
    Spring系列25：Spring AOP 切点详解
  • 原文地址：https://blog.csdn.net/weixin_47619284/article/details/126326947