当前位置: 首页 > news >正文

JavaScript进阶:WebAPIs重点知识整理1

目录

1 DOM修改元素内容

2 DOM修改元素常见属性

3 修改元素样式属性

3.1 通过style修改元素样式

3.2 通过类名className修改元素样式

3.3 通过classList修改元素样式

4 操作表单元素属性

5 自定义属性

6 定时器

7 事件监听

7.1 点击事件 click

7.2 鼠mouseenter和移开事件mouseleave

7.3 焦点事件

7.4 键盘事件

7.5 用户输入事件 input

8 事件对象

8.1 通过事件对象获取按下了哪个键

9 补充

10 环境对象 this

11 回调函数

12 补充:伪类选择器

13 事件流

13.1 事件捕获

13.2 事件冒泡

13.3 阻止冒泡

14 解绑事件

14.1 onclick() 方法如何解绑事件

14.2 addEventListener() 方法解绑事件

15 事件委托

16 阻止默认行为

17 页面加载事件

18 页面滚动事件

18.1 元素滚动事件

18.2 页面尺寸事件

18.3 元素的尺寸和位置

18.3.1 获取宽高

18.3.2 获取位置

18.4 总结

19 补充:属性选择器

20 日期对象

20.1 实例化,获取相应的时间

20.2 日期对象中,常用的方法

20.3 获取当前时间戳


1 DOM修改元素内容

const b = document.querySelector('.box')// 1. 对象.innerText = '新的文字内容';
b.innerText = '新的文字内容'
b.innerText = '<strong></strong>'   // 不解析标签// 2. 对象.innerHTML = '新的文字内容';
b.innerHTML = '<strong>我是加粗的文字</strong>'   // 解析标签

2 DOM修改元素常见属性

    <div><div class="box">我是文件内容</div><img src="./girl.jpg" alt=""></div><script>// 1.修改元素属性const img = document.querySelector('img');img.src = './girl2.jpg'img.alt = '美女加载失败'img.title="美女"</script>

3 修改元素样式属性

3.1 通过style修改元素样式

    <style>.box {width: 100px;height: 100px;background-color: pink;}</style>
</head>
<body><div class="box"></div><script>const box = document.querySelector('.box')box.style.width = '200px' // 修改元素的宽度为200px, 一定要带单位!!!box.style.backgroundColor = 'red' // 修改元素的背景颜色为红色, 需要用 小驼峰 命名box.style.border = '3px solid black'</script>

3.2 通过类名className修改元素样式

元素.className = '类名'
className: 会覆盖之前的类的样式

3.3 通过classList修改元素样式

classList 可以解决覆盖以前的类名的问题

元素.classList.add('类名')    类名前不用加 .
元素.classList.remove('类名')
元素.classList.toggle('类名')  切换类: 有就删掉,没有就加上元素.classList.contains('类名')   看看有没有包含某个类,包含返回true, 不包含返回false

4 操作表单元素属性

1. 获取:表单.value2. 设置:表单.value = '新的值'3. 修改表单的类型<input type="text" value="请输入用户名">const input = document.querySelector('input')input.type = 'password'// checked 属性  disabled 属性<input type="checkbox" name="" id=""><button>点击</button><script>const input = document.querySelector('input');console.log(input.value)  // 1.获取表单的值input.value = '222'  // 2.修改input的值// input.type = "password"  // 2.修改input的类型const input = document.querySelector('input')console.log(input.checked)  // 获取input的选中状态input.checked = true  // 修改input的选中状态const button = document.querySelector('button')button.addEventListener('click', function() {button.disabled = true  // 禁用按钮})</script>

5 自定义属性

    // data-  开头的全部都是自定义属性<div data-id="1" data-spm="hhh" data-scm="yyy">01</div> <div data-id="2">02</div><div data-id="3">03</div><div data-id="4">04</div><div data-id="5">05</div><script>const one = document.querySelector('div')console.log(one.dataset.id)   // 通过这个获取自定义属性的值console.log(one.dataset.spm)</script>

6 定时器

    <script>// setInterval(函数, 时间)  时间单位为毫秒let time= setInterval(function() {console.log('hello world')  // 每隔3秒执行一次函数,函数内容为打印hello world;},3000)// 上述定时器赋给变量time, 返回的是数字型,是定时器的id 号,每个定时器都是独一无二的clearInterval(time)  // 清除定时器,传入定时器的id号</script>

7 事件监听

语法:

    元素对象.addEventListener('事件类型', 事件处理函数)

下面的事件直接给出实例 

7.1 点击事件 click

随机点名案例:

 

js中也有可以直接调用的点击事件   click()

7.2 鼠mouseenter和移开事件mouseleave

7.3 焦点事件

7.4 键盘事件

7.5 用户输入事件 input

通过input事件,可以实时获取到用户输入的内容

8 事件对象

8.1 通过事件对象获取按下了哪个键

e.key 

9 补充

处理字符串的方法 trim():去除字符串前后空格  如果用户输入的是空格,则直接清空,值就变为空了

当页面中有滚动事件时,让其丝滑滚动 

10 环境对象 this

function fn() {console.log(this)// 1. 普通函数中,this 指向window
}const btn = document.querySelector('button')
btn.addEventListener('click', fn) {// 2. 事件处理函数中,this 指向事件源对象console.log(this)  // 这边this指向button
}

总结:this指向函数的调用者 

11 回调函数

12 补充:伪类选择器

:checked

13 事件流

事件流的两个阶段:

    1.捕获阶段:从外向内(父到子)

    2.冒泡阶段:从内向外(子到父)

13.1 事件捕获

    <!-- 1.事件捕获 --><div class="fan"><div class="son"></div></div><script>const fan = document.querySelector('.fan')const son = document.querySelector('.son')document.addEventListener('click', function() {alert('点击了页面')},true)  // true 表示事件捕获, 若为false 表示事件冒泡,默认为falsefan.addEventListener('click', function() {alert('点击了父元素')},true)son.addEventListener('click', function() {alert('点击了子元素')},true)</script>

13.2 事件冒泡

13.3 阻止冒泡

语法:

    事件对象.stopPropagation()

  (此方法可以阻断事件流动传播,不光在冒泡阶段有效,捕获阶段也有效)

     e.stopPropagation()  // 阻止事件冒泡


14 解绑事件

14.1 onclick() 方法如何解绑事件

14.2 addEventListener() 方法解绑事件

removeEventListener()

15 事件委托

优点:减少了事件的注册次数,可以提高程序性能

原理:事件委托其实是利用事件冒泡的特点

--->>>  给父元素注册事件,当我们触发子元素的时候,会冒泡到父元素的身上,从而触发父元素的事件

    <ul><li>第1个孩子</li><li>第2个孩子</li><li>第3个孩子</li><li>第4个孩子</li><li>第5个孩子</li><p>uuu</p></ul><script>// 1.获取父元素const ul = document.querySelector('ul')ul.addEventListener('click', function(e) {// alert('点击了li')// e.target 获取当前点击的对象e.target.style.backgroundColor = 'red'  // 改变点击的li的背景颜色为红色// 我们指向点击li进行变色, 不让标签p 变色// 2.判断点击的元素是否为li  可以指定元素对象进行变色if (e.target.tagName === 'LI') {  // tagName 获取标签名// 3.是li 修改背景颜色e.target.style.backgroundColor = 'pink'}})</script>

16 阻止默认行为

e.preventDefault()   ->  注意和前面的阻止冒泡区分下

    <form action="http://www.itcast.cn"><input type="submit" value="免费注册"></form><a href="http://www.baidu.com">百度</a><script>const form = document.querySelector('form')  // 获取form元素form.addEventListener('submit', function(e) {e.preventDefault()  // 阻止默认行为 })const a = document.querySelector('a')a.addEventListener('click', function(e) {e.preventDefault()  // 阻止默认行为 })</script>

17 页面加载事件

    <button>按钮</button><script>// 1.页面加载事件// 1.1 等到资源都加载完了,在执行js代码,这样的话script标签可以放在页面的任何位置// 等待页面所有资源都加载完毕了,就回去执行回调函数window.addEventListener('load', function(){const btn = document.querySelector('button')btn.addEventListener('click', function() {alert('点击了')})})// 1.2 也可以等待具体的元素加载完毕,再去执行相应的代码// 等待id为one的元素加载完毕,再去执行回调函数img.addEventListener('load', function(){//...})// 1.3 DOMContentLoaded事件// 只等待dom结点加载完毕,不等待图片、视频等资源加载完毕document.addEventListener('DOMContentLoaded', function(){//...})// 注意:DOMContentLoaded事件比load事件更快一些</script>

18 页面滚动事件

18.1 元素滚动事件

scrollLeft 和 scrollTop 属性可以获取页面滚动的位置,scrollLeft获取水平滚动的位置,scrollTop获取垂直滚动的位置。

  <script>window.addEventListener('scroll', function(){console.log('滚动了')// 1.获取页面滚动到哪个位置// scrollLeft 和 scrollTop 属性可以获取页面滚动的位置,scrollLeft获取水平滚动的位置,scrollTop获取垂直滚动的位置。// 注意:这两个属性只有当有滚动条的时候才能获取到值,否则获取到的都是0// 获取被卷去的大小// 获取元素内容往左  往上滚出去看不到的距离// 这两个值是可读写的const div = document.querySelector('div')console.log(div.scrollTop)// 2. 获取html元素的写法// document.documentElement.scrollTop  检测页面被卷去的距离console.log(document.documentElement.scrollTop) // html滚动的位置// 3. 返回顶部const backToTop = document.querySelector('backToTop') // 获取返回顶部的元素// 给返回顶部元素添加点击事件,点击时把页面滚动到顶部位置,滚动到0的位置,就是滚动到顶部位置。backToTop.addEventListener('click', function(){// 设置滚动的位置document.documentElement.scrollTop = 0// 或者// window.scrollTo(0, 0)})})</script>

18.2 页面尺寸事件

clientWidth 和 clientHeight 属性可以获取元素可见部分的宽度和高度

   <div></div><script>// 1. clientWidth 和 clientHeight 属性可以获取元素可见部分的宽度和高度。const div = document.querySelector('div') // 获取div元素console.log(div.clientWidth) // 获取div元素的可见部分的宽度console.log(div.clientHeight) // 获取div元素的可见部分的高度// resize 事件会在窗口或框架被调整大小时触发。window.addEventListener('resize', function(){console.log(document.documentElement.clientWidth);})</script>

18.3 元素的尺寸和位置

18.3.1 获取宽高

 offsetWidth 和 offsetHeight:

        1.获取元素的自身宽高,包含元素自身设置的宽高, padding, border等

        2. 注意:获取的是可视宽高,如果盒子是隐藏的,获取的结果是 0,

18.3.2 获取位置

方式1:offsetLeft 和 offsetTop

获取元素距离自己定位父级元素的左, 上距离offsetLeft 和 offsetTop 为只读属性。比如一个窗口中有两个盒子,小盒子在大盒子的里面,如果,大盒子有定位; 那么小盒子相对于大盒子定位,小盒子距离大盒子左, 上距离; 如果大盒子没有定位,那么小盒子相对于窗口定位,小盒子距离窗口左, 上距离;

方式2:getBoundingClientRect()

element.getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置。

18.4 总结

19 补充:属性选择器

20 日期对象

20.1 实例化,获取相应的时间

        // 1.得到当前时间const date  = new Date()console.log(date)// 2.得到指定时间const date1 = new Date('2024-01-01 00:00:00')console.log(date1)

 20.2 日期对象中,常用的方法


        // 1. 日期对象的一些方法let year = date.getFullYear()let month = date.getMonth() + 1let day = date.getDate()let hours = date.getHours()let minutes = date.getMinutes()let seconds = date.getSeconds()let xq = date.getDay()  // 0-6  0代表周日// console.log(year, month, day, hours, minutes, seconds)// 月份和天数前面补零操作month = month < 10 ? '0' + month : monthday = day < 10 ? '0' + day : dayconsole.log(`${year}-${month}-${day}`)// 2. 也可以通过这种方式获取简单形式的时间console.log(date.toLocaleString())  //  2024/1/20 20:14:26console.log(date.toLocaleDateString())   //   2024/1/20console.log(date.toLocaleTimeString())   //  20:14:51

20.3 获取当前时间戳

因为时间是不方便相加减的,所以我们需要获取当前时间或指定时间对应的时间戳(单位为毫秒),利用时间戳来相加减,典型案例就是倒计时案例

       // 方式1: getTime()// 用这种方法首先需要实例化日期对象const date2 = new Date()const time1 = date2.getTime()// console.log(time1)console.log('--------------')// 方式2: +new Date()console.log(+new Date())// 返回指定时间的时间戳console.log(+new Date('2024-01-01 18:30:00'))console.log('--------------')// 方式3: Date.now()console.log(Date.now())// 但是这种方式只能得到当前的时间戳,而前面两种方式可以得到指定时间的时间戳


注意上述的天时分秒是如何换算得到的

相关文章:

JavaScript进阶:WebAPIs重点知识整理1

目录 1 DOM修改元素内容 2 DOM修改元素常见属性 3 修改元素样式属性 3.1 通过style修改元素样式 3.2 通过类名className修改元素样式 3.3 通过classList修改元素样式 4 操作表单元素属性 5 自定义属性 6 定时器 7 事件监听 7.1 点击事件 click 7.2 鼠mouseenter和移…...

【Nginx】使用自生成证书配置nginx代理https

使用Nginx代理HTTPS请求并使用自签名证书&#xff0c;可以按照以下步骤进行配置&#xff1a; 生成自签名证书&#xff1a; 打开终端或命令提示符&#xff0c;并导航到Nginx配置文件所在的目录。运行以下命令生成自签名证书和私钥&#xff1a; openssl req -x509 -nodes -days 3…...

【Linux】文件周边001之系统文件IO

&#x1f440;樊梓慕&#xff1a;个人主页 &#x1f3a5;个人专栏&#xff1a;《C语言》《数据结构》《蓝桥杯试题》《LeetCode刷题笔记》《实训项目》《C》《Linux》《算法》 &#x1f31d;每一个不曾起舞的日子&#xff0c;都是对生命的辜负 目录 前言 1.C语言文件IO 1.1…...

防火墙接口配置实验

1、搭建拓扑 2、给云端添加网络&#xff0c;来实现真机与虚拟机的连接 3、 给防火墙g0/0/0口配置IP&#xff0c;由于我云端绑定的是192.168.100.10&#xff0c;所以这里IP配置为192.168.100.1/24,使用命令开启防火墙远程连接的服务&#xff0c;之后便可通过web远程登陆防火墙 …...

《WebKit 技术内幕》学习之五(4): HTML解释器和DOM 模型

4 影子&#xff08;Shadow&#xff09;DOM 影子 DOM 是一个新东西&#xff0c;主要解决了一个文档中可能需要大量交互的多个 DOM 树建立和维护各自的功能边界的问题。 4.1 什么是影子 DOM 当开发这样一个用户界面的控件——这个控件可能由一些 HTML 的标签元素…...

SpringBoot+Vue充电桩管理系统 附带详细运行指导视频

文章目录 一、项目演示二、项目介绍三、运行截图四、主要代码1. 分页获取预约数据代码2.保存预约信息代码3.修改订单状态代码 一、项目演示 项目演示地址&#xff1a; 视频地址 二、项目介绍 项目描述&#xff1a;这是一个基于SpringBootVue框架开发的充电桩管理系统。首先&…...

【数据结构】二叉树算法讲解(定义+算法原理+源码)

博主介绍&#xff1a;✌全网粉丝喜爱、前后端领域优质创作者、本质互联网精神、坚持优质作品共享、掘金/腾讯云/阿里云等平台优质作者、擅长前后端项目开发和毕业项目实战✌有需要可以联系作者我哦&#xff01; &#x1f345;附上相关C语言版源码讲解&#x1f345; &#x1f44…...

Vue3基础:挂载事例方法.mount()是什么?根组件模板又是什么?

.mount() <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Vue 3 演示</title> </head>…...

Unity 面试篇|(七)Unity渲染与Shader篇 【全面总结 | 持续更新】

目录 1.问一个Terrain&#xff0c;分别贴3张&#xff0c;4张&#xff0c;5张地表贴图&#xff0c;渲染速度有什么区别&#xff1f;为什么&#xff1f;2.什么是LightMap&#xff1f;3.MipMap是什么&#xff0c;作用&#xff1f;4.请问alpha test在何时使用&#xff1f;能达到什么…...

记录一些多维数组的方法

文章目录 前言一、获取多维数组的数据二、多维数组自带的方法总结 前言 验证过程中&#xff0c;我们经常会用到多维数组存储数据&#xff0c;本文主要记录一下&#xff0c;如何去获取我们需要的数据&#xff0c;以及多维数组自带的一些方法。 一、获取多维数组的数据 获取多维…...

Linux:gcc的相关知识

目录 gcc的翻译&#xff08;编译&#xff09;过程&#xff1a; 预处理&#xff1a; 条件编译&#xff1a; 编译&#xff1a; 汇编&链接&#xff1a; 什么是链接&#xff1f; 安装静态库&#xff1a; 静态库的使用&#xff1a; 动态静态的对比&#xff1a; 优缺对比…...

Linux的奇妙冒险———vim的用法和本地配置

vim的用法和本地配置 一.vim的组成和功能。1.什么是vim2.vim的多种模式 二.文本编辑&#xff08;普通模式&#xff09;的快捷使用1.快速复制&#xff0c;粘贴&#xff0c;剪切。2.撤销&#xff0c;返回上一步操作3.光标的控制4.文本快捷变换5.批量化操作和注释 三.底行模式四.v…...

微信小程序底部按钮适配iPhoneX以上,显示遮挡问题

只需要在给底部按钮加个样式 /* 底部导航栏容器 */ .button-box {/* 使用 safe-area-inset-bottom 属性适配 iPhone X 及以上型号设备 */padding-bottom: constant(safe-area-inset-bottom);padding-bottom: env(safe-area-inset-bottom);/* 其他样式属性 */ }iPhone6/7/8效果 …...

Qt容器QMap(映射)

插入数据 QMap<QString,QString> infoMap; //第一个是key 第二个是valueinfoMap.insert("王祖蓝","163cm");infoMap.insert("Anglebaby","168cm");infoMap["易烊千玺"] "173cm(成长中)";infoMap["姚…...

AI时代的创新工具:如何利用AI生成独具个性的XMind思维导图?

哈喽&#xff0c;大家好&#xff0c;我是木头左&#xff0c;物联网搬砖工一名&#xff0c;致力于为大家淘出更多好用的AI工具&#xff01; 背景 随着互联网的发展&#xff0c;越来越多的人开始使用Markdown来编写文档。Markdown是一种轻量级的标记语言&#xff0c;它允许人们使…...

【每日一题】最长交替子数组

文章目录 Tag题目来源解题思路方法一&#xff1a;双层循环方法二&#xff1a;单层循环 写在最后 Tag 【双层循环】【单层循环】【数组】【2024-01-23】 题目来源 2765. 最长交替子数组 解题思路 两个方法&#xff0c;一个是双层循环&#xff0c;一个是单层循环。 方法一&am…...

gin数据解析和绑定

1. Json 数据解析和绑定 客户端传参&#xff0c;后端接收并解析到结构体 package mainimport ("github.com/gin-gonic/gin""net/http" )// 定义接收数据的结构体 type Login struct {// binding:"required"修饰的字段&#xff0c;若接收为空值…...

TCP服务器最多支持多少客户端连接

目录 一、理论数值 二、实际部署 参考 一、理论数值 首先知道一个基础概念&#xff0c;对于一个 TCP 连接可以使用四元组&#xff08;src_ip, src_port, dst_ip, dst_port&#xff09;进行唯一标识。因为服务端 IP 和 Port 是固定的&#xff08;如下图中的bind阶段&#xff0…...

UML类图学习

UML类图学习 UML类图是描述类之间的关系概念1.类(Class)&#xff1a;使用三层矩形框表示2.接口(interface)&#xff1a;使用两层矩形框表示&#xff0c;与类图主要区别在于顶端有<<interface>>显示3、继承类&#xff08;extends&#xff09;&#xff1a;用空心三角…...

死锁面试题详解

什么是死锁&#xff1f; 死锁是指两个或多个进程在执行过程中&#xff0c;因争夺资源而造成的一种相互等待的现象&#xff0c;如果没有外力干涉&#xff0c;这些进程将永远无法继续执行 死锁通常发生在多个进程试图同时访问同一资源而无法获取的情况下&#xff0c;例如&#…...

后进先出(LIFO)详解

LIFO 是 Last In, First Out 的缩写&#xff0c;中文译为后进先出。这是一种数据结构的工作原则&#xff0c;类似于一摞盘子或一叠书本&#xff1a; 最后放进去的元素最先出来 -想象往筒状容器里放盘子&#xff1a; &#xff08;1&#xff09;你放进的最后一个盘子&#xff08…...

Java 语言特性(面试系列1)

一、面向对象编程 1. 封装&#xff08;Encapsulation&#xff09; 定义&#xff1a;将数据&#xff08;属性&#xff09;和操作数据的方法绑定在一起&#xff0c;通过访问控制符&#xff08;private、protected、public&#xff09;隐藏内部实现细节。示例&#xff1a; public …...

Qt Widget类解析与代码注释

#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码&#xff0c;写上注释 当然可以&#xff01;这段代码是 Qt …...

前端导出带有合并单元格的列表

// 导出async function exportExcel(fileName "共识调整.xlsx") {// 所有数据const exportData await getAllMainData();// 表头内容let fitstTitleList [];const secondTitleList [];allColumns.value.forEach(column > {if (!column.children) {fitstTitleL…...

服务器硬防的应用场景都有哪些?

服务器硬防是指一种通过硬件设备层面的安全措施来防御服务器系统受到网络攻击的方式&#xff0c;避免服务器受到各种恶意攻击和网络威胁&#xff0c;那么&#xff0c;服务器硬防通常都会应用在哪些场景当中呢&#xff1f; 硬防服务器中一般会配备入侵检测系统和预防系统&#x…...

第25节 Node.js 断言测试

Node.js的assert模块主要用于编写程序的单元测试时使用&#xff0c;通过断言可以提早发现和排查出错误。 稳定性: 5 - 锁定 这个模块可用于应用的单元测试&#xff0c;通过 require(assert) 可以使用这个模块。 assert.fail(actual, expected, message, operator) 使用参数…...

Java编程之桥接模式

定义 桥接模式&#xff08;Bridge Pattern&#xff09;属于结构型设计模式&#xff0c;它的核心意图是将抽象部分与实现部分分离&#xff0c;使它们可以独立地变化。这种模式通过组合关系来替代继承关系&#xff0c;从而降低了抽象和实现这两个可变维度之间的耦合度。 用例子…...

C#中的CLR属性、依赖属性与附加属性

CLR属性的主要特征 封装性&#xff1a; 隐藏字段的实现细节 提供对字段的受控访问 访问控制&#xff1a; 可单独设置get/set访问器的可见性 可创建只读或只写属性 计算属性&#xff1a; 可以在getter中执行计算逻辑 不需要直接对应一个字段 验证逻辑&#xff1a; 可以…...

libfmt: 现代C++的格式化工具库介绍与酷炫功能

libfmt: 现代C的格式化工具库介绍与酷炫功能 libfmt 是一个开源的C格式化库&#xff0c;提供了高效、安全的文本格式化功能&#xff0c;是C20中引入的std::format的基础实现。它比传统的printf和iostream更安全、更灵活、性能更好。 基本介绍 主要特点 类型安全&#xff1a…...

数学建模-滑翔伞伞翼面积的设计,运动状态计算和优化 !

我们考虑滑翔伞的伞翼面积设计问题以及运动状态描述。滑翔伞的性能主要取决于伞翼面积、气动特性以及飞行员的重量。我们的目标是建立数学模型来描述滑翔伞的运动状态,并优化伞翼面积的设计。 一、问题分析 滑翔伞在飞行过程中受到重力、升力和阻力的作用。升力和阻力与伞翼面…...