前端基础 - JavaScript之this关键字

简介: 前端基础 - JavaScript之this关键字

JavaScript之this关键字

JavaScript中的 this , 表示当前元素,谁调用的函数,在函数中的this就代表谁。

案例:鼠标进入div和移出div显示不同的文本

效果:

鼠标在外面

鼠标在里面:

代码:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
      var divElement;
      //init函数
      function init() {
        //在页面加载完毕之后,获取
        divElement = document.getElementById("div001");
        //动态绑定
        divElement.onmouseover = over;
        divElement.onmouseout = out;
      }
      //移入事件,把div的呵呵改成 嘿嘿
      function over() {
        //把div的呵呵 改为嘿嘿
        //divElement.innerHTML = "<font size='6' color='red'>嘿嘿</font>";
        this.innerHTML = "<font size='6' color='red'>嘿嘿</font>";
      }
      //移出事件,把dvi中的嘿嘿 又改回呵呵
      function out() {
        this.innerHTML = "呵呵";
        //divElement.innerHTML = "呵呵";
      }
    </script>
  </head>
  <body "init()">
    <div id="div001" style="border: 1px solid red; background-color: gray; width: 200px; height: 200px;">
      呵呵
    </div>
  </body>
</html>
目录
相关文章
|
10天前
|
前端开发 JavaScript 网络协议
前端最常见的JS面试题大全
【4月更文挑战第3天】前端最常见的JS面试题大全
28 5
|
26天前
|
JavaScript 前端开发 Java
纯前端JS实现人脸识别眨眨眼张张嘴案例
纯前端JS实现人脸识别眨眨眼张张嘴案例
37 0
|
1月前
|
JavaScript
JS中改变this指向的六种方法
JS中改变this指向的六种方法
|
23天前
|
JavaScript 前端开发 开发者
js开发:请解释什么是ES6的let和const关键字,以及它们与var关键字的区别。
ES6引入`let`和`const`替代`var`声明变量。`let`有块级作用域,存在暂时性死区,不进行变量提升,可重新赋值。`const`用于常量,值不可变但引用类型内容可变,同样有块级作用域和暂时性死区。与`var`主要区别在于作用域、变量提升和可变性。这些改进提高了代码的可预测性和安全性。
24 2
|
24天前
|
JavaScript 前端开发
js开发:请解释this关键字在JavaScript中的用法。
JavaScript中的`this`关键字根据执行上下文指向不同对象:全局作用域中指向全局对象(如`window`),普通函数中默认指向全局对象,但作为对象方法时指向该对象。在构造函数中,`this`指向新实例。箭头函数不绑定`this`,而是继承上下文的`this`值。可通过`call`、`apply`、`bind`方法显式改变`this`指向。
8 2
|
28天前
|
JSON JavaScript 前端开发
Node.js:前端开发的后端利器
Node.js作为一种运行在服务器端的JavaScript环境,为前端开发者打开了后端开发的大门。它以其高效的事件驱动、非阻塞I/O模型以及强大的npm生态,使得前端开发者能够轻松构建服务器端应用,实现前后端的全栈开发。本文将探讨Node.js的核心优势、应用场景以及在前端开发中的重要性。
|
28天前
|
前端开发 JavaScript 数据可视化
JavaScript:前端开发的灵魂与动力
JavaScript(JS)作为前端开发的核心语言,赋予了网页交互性和动态性。通过JS,开发者可以实现复杂的用户交互、数据操作以及动画效果,为用户带来丰富而流畅的网页体验。本文将介绍JS的基本概念、应用场景以及在前端开发中的重要性。
|
1月前
|
JavaScript
JS中call()、apply()、bind()改变this指向的原理
JS中call()、apply()、bind()改变this指向的原理
|
1月前
|
前端开发 JavaScript UED
前端开发的魔法:CSS动画与JavaScript的完美结合
本文将探讨如何利用CSS动画和JavaScript的结合,为前端页面增添生动的效果。我们将通过实例展示如何使用这两种技术为网页元素创建吸引人的动画效果,并讨论它们的优缺点和适用场景。
27 0
|
1月前
|
机器学习/深度学习 人工智能 前端开发
【前端】JavaScript简介
【前端】JavaScript简介
14 0