蓝旭前端05:JavaScript进阶

蓝旭前端05:JavaScript进阶

文章目录

  • 蓝旭前端05:JavaScript进阶
    • 基础简单复习
      • 数据类型
      • 变量
      • 运算符
      • 控制语句
      • JavaScript引入
      • JavaScript输出
      • JavaScript注释
      • JavaScript弹窗
    • Overview
    • 获取元素
      • 通过ID获取元素
      • 通过类名获取元素
      • 通过标签名获取元素
      • 通过选择器获取元素
    • 事件监听
      • 事件监听
        • 事件监听的例子
    • 事件对象
      • 事件对象
      • 事件对象的例子
    • 事件委托
      • 事件委托
      • 事件委托的例子
    • 事件绑定
      • 事件绑定
      • 事件绑定的例子
    • 事件解绑
      • 事件解绑
      • 事件解绑的例子
    • 事件触发
      • 事件触发
      • 事件触发的例子
    • 事件处理程序
      • 事件处理程序
      • 内联事件处理程序
      • DOM0级事件处理程序
      • DOM2级事件处理程序
  • 实践:猜数游戏
    • 小作业(选做其中任意一个,有兴趣的同学可以做多个)

基础简单复习

数据类型

  • 基本数据类型:Number、String、Boolean、Null、Undefined等。
  • 引用数据类型:Object、Array、Function等。
  • typeof操作符:返回数据类型的字符串形式。

变量

  • 变量声明:var、let、const。区别:var没有块级作用域,let和const有块级作用域,const声明的变量不能修改。什么是块级作用域:{}。举例:

    {var a = 1let b = 2const c = 3
    }
    console.log(a) // 1
    console.log(b) // 报错
    console.log(c) // 报错
    
  • 变量赋值:赋值操作符=。

  • 变量命名:字母、数字、下划线、$,不能以数字开头

  • 变量作用域:全局作用域、局部作用域。

  • 变量提升:变量声明会提升到作用域的最前面。

  • 变量作用域链:内部作用域可以访问外部作用域的变量,反之不行。

运算符

  • 算术运算符:+、-、*、/、%。
  • 赋值运算符:=、+=、-=、*=、/=、%=。
  • 比较运算符:==!====!==、>、<、>=、<=。
  • 逻辑运算符:&&、||、!。
  • 三元运算符:condition ? expr1 : expr2。

控制语句

  • if语句:if、else if、else。
  • switch语句:switch、case、break、default。
  • for循环:for、break、continue。
  • while循环:while、do while。
  • break语句:跳出循环。
  • continue语句:跳过本次循环。
  • return语句:返回值。

JavaScript引入

<!DOCTYPE html>
<html>
<head><-- 为什么不推荐在head引入script:阻塞页面渲染 --><script src="script.js"></script><title>JavaScript引入</title>
</head>
<body><script>// JavaScript代码</script>
</body>
</html>

JavaScript输出

console.log('Hello, World!')

JavaScript注释

// 单行注释
/* 多行注释 */

JavaScript弹窗

alert('Hello, World!')

Overview

  • 获取元素
  • 事件监听
  • 事件对象
  • 事件委托
  • 事件绑定
  • 事件解绑
  • 事件触发
  • 事件处理程序

获取元素

通过ID获取元素

ID: 元素的id属性,是唯一的。

document.getElementById('id')

通过类名获取元素

class: 元素的class属性,可以有多个相同的类名。

document.getElementsByClassName('class')

多个类名之间用空格隔开,返回的是一个数组

通过标签名获取元素

tag: 元素的标签名,如div、p、a等。

document.getElementsByTagName('tag')

通过选择器获取元素

selector: CSS选择器,如#id、.class、tag等。

document.querySelector('selector')
document.querySelectorAll('selector')// 举例
document.querySelector('#id')
document.querySelectorAll('.class')
document.querySelectorAll('tag')

区别:querySelector只返回第一个匹配的元素,querySelectorAll返回所有匹配的元素。

事件监听

事件监听

element.addEventListener(event, function, useCapture)

解释:event是事件的类型,function是事件触发时执行的函数,useCapture是一个布尔值,表示事件是否在捕获阶段执行。

  • 事件类型:click、mouseover、mouseout、keydown、keyup等。
  • 事件处理函数:事件触发时执行的函数。
  • 捕获阶段:事件从最外层元素向内层元素传播的阶段。例如:点击一个按钮,事件会从document传播到按钮。
事件监听的例子

举例:

document.getElementById('id').addEventListener('click', function() {console.log('click')
}, false)

解释:点击id为id的元素时,控制台输出click。这里false表示事件在冒泡阶段执行,若为true则表示事件在捕获阶段执行,默认是false(可不写)。

  • 什么是冒泡阶段:事件从内层元素向外层元素传播的阶段。例如:点击一个按钮,事件会从按钮传播到document。
  • 捕获阶段:事件从最外层元素向内层元素传播的阶段。例如:点击一个按钮,事件会从document传播到按钮。

冒泡阶段和捕获阶段的执行顺序:先捕获再冒泡。

冒泡和捕获的例子:

<!DOCTYPE html>
<html>
<head><title>事件监听</title>
</head>
<body><div id="div"><button id="btn">按钮</button></div><script>document.getElementById('div').addEventListener('click', function() {console.log('div')}, false)document.getElementById('btn').addEventListener('click', function() {console.log('btn')}, false)</script>
</body>
</html>

点击按钮,控制台输出:

btn
div

解释:点击按钮,事件先在按钮上触发,再在div上触发。
怎么阻止冒泡:使用event.stopPropagation()方法。
例如:

document.getElementById('btn').addEventListener('click', function(event) {console.log('btn')event.stopPropagation()
}, false)

这样点击按钮时,只会输出btn。

事件对象

事件对象

事件对象是事件触发时传递给事件处理函数的一个对象,包含了事件的相关信息。

element.addEventListener('event', function(event) {// 事件对象
})
  • 事件对象的属性:type、target、currentTarget、clientX、clientY等。
  • 事件对象的方法:preventDefault()、stopPropagation()等。
  • 事件对象的类型:click、mouseover、mouseout、keydown、keyup等。
  • 事件对象的坐标:事件触发时的坐标。

事件对象的例子

举例:

document.getElementById('id').addEventListener('click', function(event) {console.log(event.type) // clickconsole.log(event.target) // 点击的元素console.log(event.currentTarget) // 绑定事件的元素console.log(event.clientX) // 鼠标点击的x坐标console.log(event.clientY) // 鼠标点击的y坐标
}, false)

事件委托

事件委托

事件委托是指将事件绑定到父元素上,通过事件对象的target属性判断事件源,从而执行对应的事件处理函数。

element.addEventListener('event', function(event) {if (event.target.tagName === 'tag') {// 事件处理函数}
})
  • 事件委托的优点:减少事件绑定,提高性能。
  • 事件委托的原理:事件冒泡。
  • 事件委托的应用:动态添加元素。

事件委托的例子

举例:

<!DOCTYPE html>
<html>
<head><title>事件委托</title>
</head>
<body><ul id="ul"><li>1</li><li>2</li><li>3</li></ul><script>document.getElementById('ul').addEventListener('click', function(event) {// 为什么要判断tagName:防止事件源不是li,注意tagName是大写,这是一个坑,这个属于DOM的知识// console.log(event.target.tagName)if (event.target.tagName === 'LI') {console.log(event.target.innerHTML)}}, false)</script>
</body>
</html>

事件绑定

事件绑定

事件绑定是指将事件处理函数绑定到元素上,当事件触发时执行对应的事件处理函数。

element.addEventListener('event', function, useCapture)
  • 事件绑定的优点:解耦,提高代码的可维护性。
  • 事件绑定的原理:事件监听。

事件绑定的例子

举例:

<!DOCTYPE html>
<html>
<head><title>事件绑定</title>
</head>
<body><button id="btn">按钮</button><script>document.getElementById('btn').addEventListener('click', function() {console.log('click')}, false)</script>
</body>
</html>

事件解绑

事件解绑

事件解绑是指将事件处理函数从元素上解绑,当事件不再触发时不执行对应的事件处理函数。

element.removeEventListener('event', function, useCapture)
  • 事件解绑的优点:减少内存占用,提高性能。
  • 事件解绑的原理:事件监听。

事件解绑的例子

举例:

<!DOCTYPE html>
<html>
<head><title>事件解绑</title>
</head>
<body><button id="btn">按钮</button><script>// 点击按钮一次后,再点击按钮,按钮的点击事件就会被解绑var btn = document.getElementById('btn');function clickHandler() {console.log('click');btn.removeEventListener('click', clickHandler);}btn.addEventListener('click', clickHandler);</script>
</body></html>

事件触发

事件触发

事件触发是指手动触发元素上的事件,执行对应的事件处理函数。

element.dispatchEvent(event)
  • 事件触发的应用:模拟用户操作。
  • 事件触发的原理:事件监听。

触发的类型:click、mouseover、mouseout、keydown、keyup等。

事件触发的例子

举例:

<!DOCTYPE html>
<html>
<head><title>事件触发</title>
</head>
<body><button id="btn">按钮</button><div id="clr">变化颜色</div><div id="keyon">现在没有按下</div><script>var btn = document.getElementById('btn');btn.addEventListener('click', function() {console.log('click');}, false);// 手动触发按钮的点击事件btn.dispatchEvent(new Event('click'));var clr = document.getElementById('clr');clr.addEventListener('mouseover', function() {this.style.backgroundColor = 'red';}, false);// 手动触发div的mouseover事件// clr.dispatchEvent(new Event('mouseover'));var keyon = document.getElementById('keyon');document.addEventListener('keydown', function() {keyon.innerHTML = '按下了键盘';}, false);document.addEventListener('keyup', function() {keyon.innerHTML = '现在没有按下';}, false);// 手动触发键盘事件document.dispatchEvent(new KeyboardEvent('keydown', {key: 'a'}));</script>
</body>
</html>

事件处理程序

事件处理程序

事件处理程序是指事件触发时执行的函数,用于处理事件。

  • 事件处理程序的类型:内联事件处理程序、DOM0级事件处理程序、DOM2级事件处理程序。
  • 事件处理程序的优点:解耦,提高代码的可维护性。

内联事件处理程序

内联事件处理程序是指将事件处理函数直接写在元素的事件属性中。

<!DOCTYPE html>
<html>
<head><title>内联事件处理程序</title>
</head>
<body><button onclick="console.log('click')">按钮</button>
</body>
</html>
  • 优点:简单、直观。
  • 缺点:不推荐使用,不利于代码的维护。

DOM0级事件处理程序

DOM0级事件处理程序是指将事件处理函数赋值给元素的事件属性。

<!DOCTYPE html>
<html>
<head><title>DOM0级事件处理程序</title>
</head>
<body><button id="btn">按钮</button><script>document.getElementById('btn').onclick = function() {console.log('click');}</script>
</body>
</html>
  • 优点:简单、直观。
  • 缺点:同一事件只能绑定一个处理函数。
  • 注意:DOM0级事件处理程序会覆盖元素原有的事件处理函数。
  • 注意:DOM0级事件处理程序不支持事件委托、不支持事件解绑、不支持事件触发、不支持事件对象。
  • 注意:DOM0级事件处理程序不推荐使用,不利于代码的维护。

DOM2级事件处理程序

DOM2级事件处理程序是指使用addEventListener方法绑定事件处理函数。

<!DOCTYPE html>
<html>
<head><title>DOM2级事件处理程序</title>
</head>
<body><button id="btn">按钮</button><script>document.getElementById('btn').addEventListener('click', function() {console.log('click');}, false)</script>
</body>
</html>
  • 优点:支持事件委托、支持事件解绑、支持事件触发、支持事件对象。
  • 注意:DOM2级事件处理程序不会覆盖元素原有的事件处理函数。
  • 注意:DOM2级事件处理程序推荐使用,提高代码的可维护性。
  • 注意:DOM2级事件处理程序的第三个参数useCapture是一个布尔值,表示事件是否在捕获阶段执行,默认是false(可不写)。

实践:猜数游戏

代码演示

小作业(选做其中任意一个,有兴趣的同学可以做多个)

  • 作业1:实现一个简单的轮播图效果。🎯
  • 作业2:实现一个简单的猜数游戏🎯
  • 作业3:实现一个简单的下拉菜单效果。
  • 作业4:实现一个简单的模态框效果。
  • 作业5:实现一个简单的时钟效果。🎯
  • 作业6:实现一个简单的瀑布流效果。
  • 作业7:实现一个简单的懒加载效果。
  • 作业8:实现一个简单的拖拽效果。
  • 作业9:实现一个简单的放大镜效果。
  • 作业10:实现一个简单的无缝滚动效果。
  • 作业11:实现一个简单的图片预览效果。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/809821.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ELFK的部署

目录 一、ELFK&#xff08;FilebeatELK&#xff09; 1. Filebeat的作用 2. ELFK工作流程 3. ELFK的部署 3.1 服务器配置 3.2 服务器环境 3.3 安装filebeat 3.4 修改filebeat主配置文件 3.5 在logstash组件所在节点&#xff08;apache节点&#xff09;上新建一个logstas…

Redis部署之哨兵

背景 在上篇中Redis部署之主从已完成redis主从部署&#xff0c;系统的性能提高了&#xff0c;但如果主节点发送故障&#xff0c;则无法对外提供写入服务&#xff0c;需要手动进行主从切换。 引入哨兵可提升系统可用性&#xff0c;并在主节点故障时自动完成主从切换。 环境说…

如何管好地铁站见新质生产力 | 图扑数字孪生

智慧车站建设是现代交通领域的重要发展方向&#xff0c;旨在通过集成先进的信息技术&#xff0c;提升车站的运营效率、安全性及乘客体验。基于既有的综合监控技术&#xff0c;通过集成多种传感器和数据采集设备&#xff0c;实现对车站设备、环境、客流、人员等对象群的智能感知…

这样画箱线图,为你的SCI论文增色!

高级箱线图的绘制 下面的箱线图比较美观&#xff0c;非常适合数据量不大、且分布明显的时候使用。 在论文撰写中&#xff0c;图表的清晰和吸引人的展示方式是至关重要的。箱线图&#xff08;Whisker Plot&#xff09;是一种展示数据分布的经典工具&#xff0c;它不仅可以清楚地…

第十一届蓝桥杯大赛第二场省赛试题 CC++ 研究生组-七段码

#include<iostream> using namespace std; const int N 10, M 7; int e[N][N] {0}, f[N], open[N];//e[i][j]表示i和j之间是否连通&#xff1b;f[i]表示结点i的父节点&#xff1b;open[i] 1表示结点i打开&#xff0c;0表示关闭 long long ans 0;int find(int x){if(…

WPF 编辑器模式中隐藏/显示该元素

XAML中引用&#xff1a;xmlns:d"http://schemas.microsoft.com/expression/blend/2008" 在所需要的控件中加上d:Visibility"Visible"属性 d:Visibility属性有3个值&#xff0c;可以根据需要进行设置 转自&#xff1a;在Visual Studio设计器中隐藏WPF元素…

详解单文件组件

当你创建 Vue 单文件组件时&#xff0c;通常会包含三个部分&#xff1a;<template>、<script> 和 <style>。这三个部分分别用于定义组件的模板、逻辑和样式。让我更详细地解释一下它们的作用和用法&#xff1a; <template> <template> 标签用于…

【ROS2笔记一】ROS2的基本组件

1.ROS2的基本组件 与ROS1类似的&#xff0c;ROS2也具有node&#xff0c;topic&#xff0c;service&#xff0c;action之类的组件&#xff0c;并且也具有rqt等工具。 可以像使用ROS1的命令行的方式&#xff08;参这里【ROS学习笔记7】ROS中的常用命令行&#xff09;&#xff0…

Mysql内存表及使用场景(12/16)

内存表&#xff08;Memory引擎&#xff09; InnoDB引擎使用B树作为主键索引&#xff0c;数据按照索引顺序存储&#xff0c;称为索引组织表&#xff08;Index Organized Table&#xff09;。 Memory引擎的数据和索引分开存储&#xff0c;数据以数组形式存放&#xff0c;主键索…

宏函数的使用

宏函数的特点&#xff1a; 参数没有类型检查&#xff0c;仅仅是文本替换&#xff0c;因此使用不当容易引起错误。宏函数的替换过程发生在编译之前的预处理阶段&#xff0c;不涉及函数调用开销&#xff0c;效率较高。可以用来定义常量、实现简单的算法、封装编译开关等。 /* * …

【保姆级讲解Nginx】

&#x1f308;个人主页: 程序员不想敲代码啊 &#x1f3c6;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家 &#x1f44d;点赞⭐评论⭐收藏 &#x1f91d;希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出指正&#xff0c;让我们共…

拿到迅雷网盘推广授权,离财富自由更进一步

为了提高平台知名度、增加平台用户数量&#xff0c;迅雷网盘推出了网盘推广的新项目。网盘推广的奖励很丰厚&#xff0c;只要有人点击、下载你分享的资料&#xff0c;你就能获得佣金。听到这里&#xff0c;是不是已经有人心动了&#xff1f;心动的人一定要看完下面的网盘推广&a…

【开发篇】十七、基准测试框架JMH

文章目录 1、JMH2、运行方式二3、死代码与黑洞变量4、可视化分析5、案例&#xff1a;日期格式化方法性能测试6、总结7、整合到SpringBoot 判断一个方法的耗时 ⇒ endTime-startTime ⇒ 不准确&#xff0c;首先部分对象懒加载&#xff0c;第一次请求会慢一些&#xff0c;其次&am…

systemd的unit

systemd 是一个用于管理 Linux 系统初始化和服务的系统和服务管理器。在 systemd 中&#xff0c;不同类型的单元&#xff08;unit&#xff09;用于配置不同的系统资源和服务。 automount: automount 单元用于自动挂载文件系统。它会在需要时自动挂载指定的路径&#xff0c;例如…

YOLOv8改进 | 检测头篇 | 自研超分辨率检测头HATHead助力超分辨率检测(混合注意力变换器检测头)

一、本文介绍 本文给大家带来的改进机制是由由我本人利用HAT注意力机制(超分辨率注意力机制)结合V8检测头去掉其中的部分内容形成一种全新的超分辨率检测头。混合注意力变换器(HAT)的设计理念是通过融合通道注意力和自注意力机制来提升单图像超分辨率重建的性能。通道注意…

多无人机集群协同避障

matlab2020a正常运行 场景1规划结果 场景2规划结果 场景3规划结果 代码地址&#xff1a; 多无人机集群协同避障效果&#xff08;5架&#xff09;资源-CSDN文库

【D3.js Tidy tree绘制树形图,单棵树,左右树,平移,拖拽,树形中的天花板实现,源码实现】

这里写自定义目录标题 D3.js Tidy tree绘制树形图,单棵树,左右树,平移,拖拽,树形中的天花板实现,源码实现D3 简介D3 官网有很多例子,这里说的是Tidy tree[树形图表svg][左侧关系->中间对象<-右侧关系 ] 树形实现 D3.js Tidy tree绘制树形图,单棵树,左右树,平移,拖拽,树形…

BM25和语言模型的改进研究

原文链接&#xff1a; BM25和语言模型的改进研究 摘要&#xff1a; 近期关于搜索引擎排名函数的研究报告指出&#xff0c;BM25和带Dirichlet平滑的语言模型有所改进。本研究通过在INEX 2009维基百科语料库上训练&#xff0c;然后在INEX 2010和9个TREC语料库上测试&#xff0…

ES6 全详解 let 、 const 、解构赋值、剩余运算符、函数默认参数、扩展运算符、箭头函数、新增方法,promise、Set、class等等

目录 ES6概念ECMAScript6简介ECMAScript 和 JavaScript 的关系ES6 与 ECMAScript 2015 的关系 1、let 、 const 、var 区别2、变量解构赋值1、数组解构赋值2、对象解构赋值3、字符串的解构赋值 3、展开剩余运算符1、**展开运算符(...)**2、**剩余运算符(...)** 4、函数的拓展函…

前端用 HTML5 + CSS3 + JavaScript,后端连接什么数据库更简单?

当前端使用 HTML5、CSS3 和 JavaScript 进行开发时&#xff0c;后端连接何种数据库是一个非常重要的问题&#xff0c;因为数据库的选择直接影响着后端代码的编写、数据存储与查询的效率以及系统的可维护性。 1. 关系型数据库&#xff08;SQL 数据库&#xff09;&#xff1a; …