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

dom基本操作

1、style修改样式

基本语法:
元素.style.样式=’值‘

注意:
1.修改样式通过style属性引出
2.如果属性有-连接符,需要转换为小驼峰命名法
3.赋值的时候,需要的时候不要忘记加css单位
4.后面的值必须是字符串

<div></div>
// 1、获取元素
const div=document.querySelector('div');
// 2、通过style操作css
div.style.height='300px';
div.style.width='200px';
// 属性有-连接符,需要转换为小驼峰命名法
div.style.backgroundColor='rgba(249, 69, 69, 0.5)';

2、className通过修改类名改样式

className是使用新值换旧值,如果需要添加一个类,需要保留之前的类名
他会覆盖之前的类名

<style>.nav{width: 300px;height: 300px;background-color: pink;border: 5px solid green;}.box{width: 200px;height: 200px;background-color: red;}
</style>
<div class="nav"></div><script>// 1、获取元素let div=document.querySelector('div');// 2、修改类名 不用加点,因为是类名 自动加点// className会覆盖前面的类名,需要写多个类名div.className='nav box';</script>

在这里插入图片描述

3、通过classList控制css

为了解决className容易覆盖以前的类名,我们可以通过classList方式
追加和删除类名
追加一个类
元素.classList.add(‘类名’)
删除一个类
元素.classList.remove(‘类名’)
切换一个类
元素.classList.toggle(‘类名’)

<style>.one {width: 200px;height: 200px;background-color: pink;}.two {border: 10px solid yellowgreen;}
</style><div class="one"></div>
<script>const div = document.querySelector('div');// 追加一个类div.classList.add('two');// 删除一个类div.classList.remove('two');// 切换一个类   有就删掉,没有就加上// 此时,类two已经被删除 div.classList.toggle('two');
</script>

在这里插入图片描述

4、trim()去除字符串两侧的空格

<script>const str='         khfgdjh        ';console.log(str);//         khfgdjh        console.log(str.trim());//khfgdjhconst a='            ';console.log(a.trim());
</script>

在这里插入图片描述

5、自定义属性

标准属性: 标签天生自带的属性 比如class id title等,
可以直接使用点语法操作比如: disabled、checked、selected

自定义属性:
在html5中推出来了专门的data-自定义属性
在标签上一律以data-开头
在DOM对象上一律以dataset.对象方式获取

<div class="box" data-id="1" data-info="这只是一个普通的盒子">盒子</div>
<script>const box=document.querySelector('.box');// 输出自定义属性console.log(box.dataset.id);console.log(box.dataset.info);// 增加自定义属性box.dataset.name='lxl';console.log(box.dataset.name);
</script>

在这里插入图片描述

6、定时器-间歇函数

目标:能够使用定时器函数重复执行代码
定时器函数可以开启和关闭定时器

1.开启定时器
setInterval(函数,间隔时间)
这个函数可以是匿名函数
作用:每隔一段时间调用这个函数,间隔时间单位是毫秒

注意:
1.函数名字不需要加括号
2.定时器返回的是一个id数字

setInterval(function () {document.write('我是半秒钟打印一次</br>'); },500)

7、环境对象this

环境对象this是什么?
它代表着当前函数运行时所处的环境
this指向的粗略规则:
谁调用,this就指向谁

// 每个函数里面 都有this
function fn() {// 普通函数里面this指向的是windowconsole.log(this);console.log(typeof this);//object 是一个对象
}
window.fn()

在这里插入图片描述

<button>点击</button>
。。。。。。。。。
// 点击按钮
const btn = document.querySelector('button');
// 下面的这个function也是回调函数
btn.addEventListener('click', function () {// this指向这个btn按钮// 谁调用,this就指向谁console.log(this);//<button>点击</button>// this就等于btn。在这个例子中btn.style.color='red';this.style.color='blue';
})

在这里插入图片描述

8、回调函数

如果将函数 A 做为参数传递给函数 B 时,我们称函数 A为回调函数

// 函数fn作为参数,传递给setInterval
function fn() {console.log('我是回调函数');
};
setInterval(fn,1000);

在这里插入图片描述

     const btn = document.querySelector('button');// 下面的这个function也是回调函数btn.addEventListener('click', function () {// this指向这个btn按钮// 谁调用,this就指向谁console.log(this);//<button>点击</button>
})

相关文章:

dom基本操作

1、style修改样式 基本语法&#xff1a; 元素.style.样式’值‘ 注意: 1.修改样式通过style属性引出 2.如果属性有-连接符&#xff0c;需要转换为小驼峰命名法 3.赋值的时候&#xff0c;需要的时候不要忘记加css单位 4.后面的值必须是字符串 <div></div> // 1、…...

如何将python训练的XGBoost模型部署在C++环境推理

当前环境&#xff1a;Ubuntu&#xff0c;xgboost1.7.4过程介绍&#xff1a;首先用python训练XGBoost模型&#xff0c;在训练完成后注意使用xgb_model.save_model(checkpoint.model)进行模型的保存。找到xgboost的动态链接库和头文件动态链接库&#xff1a;如果你在conda环境下面…...

About Oracle Database Performance Method

bottleneck&#xff08;瓶颈&#xff09;&#xff1a; a point where resource contention is highest throughput(吞吐量)&#xff1a; the amount of work that can be completed in a specified time. response time (响应时间)&#xff1a; the time to complete a spec…...

JavaScript 日期和时间的格式化大汇总(收集)

一、日期和时间的格式化 1、原生方法 1.1、使用 toLocaleString 方法 Date 对象有一个 toLocaleString 方法&#xff0c;该方法可以根据本地时间和地区设置格式化日期时间。例如&#xff1a; const date new Date(); console.log(date.toLocaleString(en-US, { timeZone: …...

【Python】缺失值可视化工具库:missingno

文章目录一、前言二、下载二、使用介绍2.1 绘制缺失值条形图2.2 绘制缺失值热力图2.3 缺失值树状图三、参考资料一、前言 在我们进行机器学习或者深度学习的时候&#xff0c;我们经常会遇到需要处理数据集缺失值的情况&#xff0c;那么如何可视化数据集的缺失情况呢&#xff1…...

【代码随想录二刷】Day18-二叉树-C++

代码随想录二刷Day18 今日任务 513.找树左下角的值 112.路径总和 113.路径总和ii 106.从中序与后序遍历序列构造二叉树 105.从前序与中序遍历序列构造二叉树 语言&#xff1a;C 513.找树左下角的值 链接&#xff1a;https://leetcode.cn/problems/find-bottom-left-tree-va…...

制造业的云ERP在外网怎么访问?内网服务器一步映射到公网

随着企业信息化、智能化时代的到来&#xff0c;很多制造业企业都在用云ERP。用友U 9cloud通过双版本公有云专属、私有云订阅、传统软件购买三种模式满足众多制造业企业的需求&#xff0c;成为一款适配中型及中大型制造业的云ERP&#xff0c;是企业数智制造的创新平台。 用友U 9…...

zookeeper 复习 ---- 练习

zookeeper 复习 ---- 练习在同一节点配置三个 zookeeper&#xff0c;配置正确的是&#xff1f; A&#xff1a; zoo1.cfg tickTime2000 initLimit5 syncLimit2 dataDir/var/lib/zookeeper/zoo1 clientPort2181 server.1localhost:2666:3666 server.2localhost:2667:3667 serv…...

2023年全国最新道路运输从业人员精选真题及答案1

百分百题库提供道路运输安全员考试试题、道路运输从业人员考试预测题、道路安全员考试真题、道路运输从业人员证考试题库等&#xff0c;提供在线做题刷题&#xff0c;在线模拟考试&#xff0c;助你考试轻松过关。 11.在以下选项中关于安全生产管理方针描述正确的是&#xff08;…...

Java每日一练——Java简介与基础练习

系列文章目录 提示&#xff1a;这里可以添加系列文章的所有文章的目录&#xff0c;目录需要自己手动添加 例如&#xff1a;第一章 Python 机器学习入门之pandas的使用 文章目录 目录 系列文章目录 文章目录 前言 一、简述解释型语言与编译型语言 二、Java语言的执行流程 2.1、…...

解决Edge浏览器主页被篡改问题,或许可以帮你彻底解决

问题描述&#xff1a; 之前从一个第三方网站下载了一个不知名软件&#xff0c;接着电脑就各种下载360全家桶之类的软件&#xff0c;后来问题解决了&#xff0c;但是还残留了一些问题&#xff0c;前几天发现edge浏览器的主页被改成了360导航&#xff0c;就是那个该死的hao123&a…...

字符设备驱动基础(一)

目录 一、Linux内核对设备的分类 linux的文件种类&#xff1a; Linux内核按驱动程序实现模型框架的不同&#xff0c;将设备分为三类&#xff1a; 总体框架图&#xff1a; 二、设备号------内核中同类设备的区分 三、申请和注销设备号 四、函数指针复习 4.1、 内存四区 …...

将 Supabase 作为下一个后端服务

对于想快速实现一个产品而言&#xff0c;如果使用传统开发&#xff0c;又要兼顾前端开发&#xff0c;同时又要花费时间构建后端服务。然而有这么一个平台&#xff08;Baas Backend as a service&#xff09;后端即服务&#xff0c;能够让开发人员可以专注于前端开发&#xff0c…...

14:高级篇 - CTK 服务工厂 简述

作者: 一去、二三里 个人微信号: iwaleon 微信公众号: 高效程序员 一般情况下,服务对象在被注册之后,任何其它的 Plugin 在请求该服务时,CTK Plugin Framework 都返回的是同一个对象。倘若要为每一个 Plugin 消费者返回不同的服务对象,或者在真正需要该服务对象时才创建…...

Java中的链表实现介绍

Java中的链表实现介绍 学习数据结构的的链表和树时&#xff0c;会遇到节点&#xff08;node&#xff09;和链表&#xff08;linked list&#xff09;这两个术语&#xff0c;节点是处理数据结构的链表和树的基础。节点是一种数据元素&#xff0c;包括两个部分&#xff1a;一个是…...

演示Ansible中的角色使用方法(ansible roles)

文章目录一、ansible 角色简介二、roles目录结构三、role存放的路径&#xff1a;配置文件ansible.cfg中定义四、创建目录结构五、playbook中使用rolesplaybook变量会覆盖roles中的定义变量六、控制任务执行顺序七、ansible—galaxy命令工具八、安装选择的角色1.从网上下载&…...

Bash Shell 通过ls命令筛选文件

Bash Shell 通过ls命令及其管道根据大小名称筛选文件 最近参与的项目当中有需要用pyarmor加密项目的要求&#xff0c;听网上吹的pyarmor都那么神&#xff0c;用了一下感觉也一般&#xff0c;试用版普通模式下文件加密居然还有大小32KB的限制&#xff0c;加密到一半就失败了&am…...

2023-2-18 刷题情况

删列造序 III 题目描述 给定由 n 个小写字母字符串组成的数组 strs &#xff0c;其中每个字符串长度相等。 选取一个删除索引序列&#xff0c;对于 strs 中的每个字符串&#xff0c;删除对应每个索引处的字符。 比如&#xff0c;有 strs [“abcdef”,“uvwxyz”] &#xf…...

【Linux】进程控制

文章目录进程创建简单认识一下fork()函数为什么fork()会有两个返回值fork通过写时拷贝的方式创建子进程进程终止进程退出码进程退出的方式exit()和_exit()进程等待进程等待方法 -- wait()和waitpid()status参数解释waitpid()的pid参数waitpid()的options参数 - 阻塞和非阻塞进程…...

谷歌seo快排技术怎么做?Google排名霸屏推广原理

本文主要分享关于谷歌快速排名的方法和所需要的条件。 本文由光算创作&#xff0c;有可能会被剽窃和修改&#xff0c;我们佛系对待这种行为吧。 首先提出一个问题&#xff1a;谷歌seo快排技术怎么做&#xff1f;如何达到谷歌霸屏的效果&#xff1f; 答案是&#xff1a;利用谷…...

MySQL的优化

目录 一.概念 二.查看SQL执行频率 三.定位低效率执行SQL 定位低效率执行SQL—慢查询日志 操作 定位低效率执行SQL—show processlist 四.explain分析执行计划 字段说明 explain中的id explain中的select_type explain中的type explain中的table explain中的rows ex…...

实现qq群消息接收和发送功能

QQWebsocketClient是什么 实现qq群消息接收和发送功能&#xff0c;基于websocket技术和cqhttp服务开发 一、 效果截图 二、实现思路 使用cqhttp进行socket反向代理&#xff0c;获取qq聊天的所有消息 编写java客户端&#xff0c;连接至cqhttp服务器获取聊天消息 获取聊天消…...

压缩20M文件从30秒到1秒的优化过程

压缩20M文件从30秒到1秒的优化过程 有一个需求需要将前端传过来的10张照片&#xff0c;然后后端进行处理以后压缩成一个压缩包通过网络流传输出去。之前没有接触过用Java压缩文件的&#xff0c;所以就直接上网找了一个例子改了一下用了&#xff0c;改完以后也能使用&#xff0…...

如何选择合适的固态继电器?

如何选择合适的固态继电器&#xff1f; 在选择固态继电器&#xff08;SSR&#xff09;时&#xff0c;应根据实际应用条件和SSR性能参数&#xff0c;特别要考虑到使用中的过流和过压条件以及SSR的负载能力&#xff0c;这有助于实现固态继电器的长寿命和高可靠性。然后&#xff0…...

SAP 忘记SAP系统Client 000的所有账号密码

忘记SAP系统Client 000的所有账号密码。 Solution 在SAP系统DB中删除账号SAP*&#xff0c;SAP系统会自动创建SAP*这个账号&#xff0c;然后初始密码是“PASS”&#xff0c;这样就获得Client 000 SAP*账号。 Step by Step 以Oracle数据库为例&#xff1a; 1.以<SID>ADM账…...

Connext DDS可扩展类型Extensible Types指南

RTI Connext DDS 可扩展类型Extensible Types指南 可扩展类型Extensible TypesConnextDDSv6.1.1版本,包含了对OMG“DDS的可扩展和动态主题类型Extensible andDynamic Topic Types for DDS”规范1.3版的部分支持,该规范来自对象管理组OMG。这种支持,允许系统以更灵活的方式定义…...

Docker简单使用

文章目录1、安装配置2、服务启动3、Docker镜像下载4、Docker启动容器5、容器的常用命令6、Docker进入容器内部7、宿主机与容器交换文件8、查看日志官网地址&#xff1a;1、安装配置 sudo yum install -y yum-utils 设置镜像地址 sudo yum-config-manager \--add-repo \https:…...

A Time Series is Worth 64 Words(PatchTST模型)论文解读

摘要 我们提出了一种高效的基于Transformer设计的模型&#xff0c;用于多变量时间序列预测和自我监督表征学习&#xff08;self-supervised learning&#xff09;。它基于两个关键部分&#xff1a;1、将时间序列分隔成子序列级别的patches&#xff0c;作为Transformer的输入&a…...

微服务学习:SpringCloud+RabbitMQ+Docker+Redis+搜索+分布式

目录 一、高级篇 二、面试篇 实用篇 day05-Elasticsearch01 安装elasticsearch 1.部署单点es 2.部署kibana 一、高级篇 二、面试篇 实用篇 day05-Elasticsearch01 安装elasticsearch 1.部署单点es 1.1.创建网络 因为我们还需要部署kibana容器&#xff0c;因此需要…...

nginx平滑升级

1.平滑升级操作1.1 备份安装目录下的nginxcd /usr/local/nginx/sbin mv nginx nginx.bak1.2 复制objs目录下的nginx到当前sbin目录下cp /opt/software/nginx/nginx-1.20.2/objs/nginx /usr/local/nginx/sbin/1.3 发送信号user2给nginx老版本对应的进程kill -user2 more /usr/lo…...