前端基础 - 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>
目录
相关文章
|
14天前
|
前端开发 机器人 API
前端大模型入门(一):用 js+langchain 构建基于 LLM 的应用
本文介绍了大语言模型(LLM)的HTTP API流式调用机制及其在前端的实现方法。通过流式调用,服务器可以逐步发送生成的文本内容,前端则实时处理并展示这些数据块,从而提升用户体验和实时性。文章详细讲解了如何使用`fetch`发起流式请求、处理响应流数据、逐步更新界面、处理中断和错误,以及优化用户交互。流式调用特别适用于聊天机器人、搜索建议等应用场景,能够显著减少用户的等待时间,增强交互性。
109 2
|
14天前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
30 0
|
9天前
|
前端开发 JavaScript 安全
JavaScript前端开发技术
JavaScript(简称JS)是一种广泛使用的脚本语言,特别在前端开发领域,它几乎成为了网页开发的标配。从简单的表单验证到复杂的单页应用(SPA),JavaScript都扮演着不可或缺的角色。
16 3
|
3天前
|
前端开发 JavaScript UED
"前端小技巧大揭秘:JS如何将后台时间戳秒变亲切小时前、分钟前,让用户秒懂,提升互动体验!"
【10月更文挑战第23天】在Web开发中,将后台返回的时间戳转换为“小时前”、“分钟前”、“刚刚”等友好的时间描述是常见需求。本文介绍如何用JavaScript实现这一功能,通过计算当前时间和时间戳的差值,返回相应的描述,提升用户体验。
8 0
|
14天前
|
JavaScript 前端开发 应用服务中间件
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
85 0
|
14天前
|
前端开发 JavaScript 程序员
【从前端入门到全栈】Node.js 之核心概念
【从前端入门到全栈】Node.js 之核心概念
|
14天前
|
Web App开发 JavaScript 前端开发
前端Node.js面试题
前端Node.js面试题
|
15天前
|
监控 JavaScript 前端开发
深入了解Vue.js:构建现代前端应用的利器
【10月更文挑战第11天】深入了解Vue.js:构建现代前端应用的利器
11 0
|
Web App开发 JavaScript 前端开发
JavaScript 保留关键字总结
在 JavaScript 中,一些标识符是保留关键字,不能用作变量名或函数名
1848 0
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
85 2