学习网站建设的网站/河南网站seo费用
目录
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请求并使用自签名证书,可以按照以下步骤进行配置: 生成自签名证书: 打开终端或命令提示符,并导航到Nginx配置文件所在的目录。运行以下命令生成自签名证书和私钥: openssl req -x509 -nodes -days 3…...

【Linux】文件周边001之系统文件IO
👀樊梓慕:个人主页 🎥个人专栏:《C语言》《数据结构》《蓝桥杯试题》《LeetCode刷题笔记》《实训项目》《C》《Linux》《算法》 🌝每一个不曾起舞的日子,都是对生命的辜负 目录 前言 1.C语言文件IO 1.1…...

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

《WebKit 技术内幕》学习之五(4): HTML解释器和DOM 模型
4 影子(Shadow)DOM 影子 DOM 是一个新东西,主要解决了一个文档中可能需要大量交互的多个 DOM 树建立和维护各自的功能边界的问题。 4.1 什么是影子 DOM 当开发这样一个用户界面的控件——这个控件可能由一些 HTML 的标签元素…...

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

【数据结构】二叉树算法讲解(定义+算法原理+源码)
博主介绍:✌全网粉丝喜爱、前后端领域优质创作者、本质互联网精神、坚持优质作品共享、掘金/腾讯云/阿里云等平台优质作者、擅长前后端项目开发和毕业项目实战✌有需要可以联系作者我哦! 🍅附上相关C语言版源码讲解🍅 ὄ…...

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,分别贴3张,4张,5张地表贴图,渲染速度有什么区别?为什么?2.什么是LightMap?3.MipMap是什么,作用?4.请问alpha test在何时使用?能达到什么…...

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

Linux:gcc的相关知识
目录 gcc的翻译(编译)过程: 预处理: 条件编译: 编译: 汇编&链接: 什么是链接? 安装静态库: 静态库的使用: 动态静态的对比: 优缺对比…...

Linux的奇妙冒险———vim的用法和本地配置
vim的用法和本地配置 一.vim的组成和功能。1.什么是vim2.vim的多种模式 二.文本编辑(普通模式)的快捷使用1.快速复制,粘贴,剪切。2.撤销,返回上一步操作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思维导图?
哈喽,大家好,我是木头左,物联网搬砖工一名,致力于为大家淘出更多好用的AI工具! 背景 随着互联网的发展,越来越多的人开始使用Markdown来编写文档。Markdown是一种轻量级的标记语言,它允许人们使…...

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

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

TCP服务器最多支持多少客户端连接
目录 一、理论数值 二、实际部署 参考 一、理论数值 首先知道一个基础概念,对于一个 TCP 连接可以使用四元组(src_ip, src_port, dst_ip, dst_port)进行唯一标识。因为服务端 IP 和 Port 是固定的(如下图中的bind阶段࿰…...

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

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

【rust/bevy】使用points构造ConvexMesh
目录 说在前面问题提出Rapier具体实现参考 说在前面 操作系统:win11rust版本:rustc 1.77.0-nightlybevy版本:0.12github:这里 问题提出 在three.js中,可以通过使用ConvexGeometry从给定的三维点集合生成凸包(Convex Hu…...

【C语言】string.h——主要函数总结
string.h主要定义了字符串处理函数和内存操作函数。 字符串处理函数 strlen() 功能:strlen()函数返回字符串的字节长度,不包括末尾的空字符\0。 函数原型:size_t strlen(const char* s); 返回值:返回的是size_t类型的无符号整…...

如何在前端优化中减少页面加载时间?
在前端优化中,减少页面加载时间是至关重要的,因为快速加载的页面可以提高用户体验,减少跳出率,从而提升网站的整体性能。本文将介绍一些实用的前端优化技巧,以帮助您减少页面加载时间。 一、优化图片 图片是页面加载…...

Typecho后台无法登录显示503 service unavailable问题及处理
一、Typecho 我的博客地址:https://www.aomanhao.top 使用老薛主机动态Typecho博客框架handsome主题的搭配,文章内容可以异地网页更新,可以听后台背景音乐,很好的满足我的痛点需求,博客部署在云端服务器访问响应较快…...

Python入门(一)
anaconda安装 官网:https://www.anaconda.com下载 jupyter lab 简介: 包含了Jupyter Notebook所有功能。 JupyterLab作为一种基于web的集成开发环境,你可以使用它编写notebook,操作终端,编辑markdown文本…...

云表企业级无代码案例-自主开发ERP管理系统
痛点 我是一名企业经营者,同时也是信息化建设的坚定倡导者。凭借管理专业背景,我深知经营数据对于企业的至关重要性。如何高效搜集、精准分析经营数据,并将其转化为决策依据,直接关乎企业的生死存亡。太多因盲目决策而倒闭的企业…...

Qt —— 编译Qt5版本QFTP库,并实现连接服务、获取列表、上传、下载、删除文件等操作(附源码、附基于Qt5编译好的QFTP库)
示例效果1 示例效果2 介绍 QFTP是Qt4的库,Qt5改用了QNetworkAccessManager来代替。但是Qt5提供的QNetworkAccessManager仅支持FTP的上传和下载,所以只能将QFTP库编译为Qt5的库来进行调用。 QFTP在Github的下载地址:https://github.com/qt/qtftp 客户端源码生成的release结果…...

碰到es6的...拓展运算符
第一次碰到,哥们啥也不会 let searchForm ref({}) let formData ref({}) const initArgs async() > { args.value props.init_data formData .value { ...searchForm.value,//把值都带过来 workWhere : args.value.workWhere, statusArgs : args.value.sta…...

JDK8新特性详解
☆* o(≧▽≦)o *☆嗨~我是小奥🍹 📄📄📄个人博客:小奥的博客 📄📄📄CSDN:个人CSDN 📙📙📙Github:传送门 📅&a…...

ELK+Filebeat 部署实验
Filebeat是轻量级的开源日志文件数据搜集器。通常在需要采集数据的客户端安装 Filebeat,并指定目录与日志格式,Filebeat 就能快速收集数据,并发送给 logstash 进行解析,或是直接发给 Elasticsearch 存储,性能上相比运行…...