当前位置: 首页 > 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;利用谷…...

论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(二)

HoST框架核心实现方法详解 - 论文深度解读(第二部分) 《Learning Humanoid Standing-up Control across Diverse Postures》 系列文章: 论文深度解读 + 算法与代码分析(二) 作者机构: 上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学 论文主题: 人形机器人…...

微信小程序之bind和catch

这两个呢&#xff0c;都是绑定事件用的&#xff0c;具体使用有些小区别。 官方文档&#xff1a; 事件冒泡处理不同 bind&#xff1a;绑定的事件会向上冒泡&#xff0c;即触发当前组件的事件后&#xff0c;还会继续触发父组件的相同事件。例如&#xff0c;有一个子视图绑定了b…...

MongoDB学习和应用(高效的非关系型数据库)

一丶 MongoDB简介 对于社交类软件的功能&#xff0c;我们需要对它的功能特点进行分析&#xff1a; 数据量会随着用户数增大而增大读多写少价值较低非好友看不到其动态信息地理位置的查询… 针对以上特点进行分析各大存储工具&#xff1a; mysql&#xff1a;关系型数据库&am…...

SpringBoot+uniapp 的 Champion 俱乐部微信小程序设计与实现,论文初版实现

摘要 本论文旨在设计并实现基于 SpringBoot 和 uniapp 的 Champion 俱乐部微信小程序&#xff0c;以满足俱乐部线上活动推广、会员管理、社交互动等需求。通过 SpringBoot 搭建后端服务&#xff0c;提供稳定高效的数据处理与业务逻辑支持&#xff1b;利用 uniapp 实现跨平台前…...

微服务商城-商品微服务

数据表 CREATE TABLE product (id bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 商品id,cateid smallint(6) UNSIGNED NOT NULL DEFAULT 0 COMMENT 类别Id,name varchar(100) NOT NULL DEFAULT COMMENT 商品名称,subtitle varchar(200) NOT NULL DEFAULT COMMENT 商…...

IoT/HCIP实验-3/LiteOS操作系统内核实验(任务、内存、信号量、CMSIS..)

文章目录 概述HelloWorld 工程C/C配置编译器主配置Makefile脚本烧录器主配置运行结果程序调用栈 任务管理实验实验结果osal 系统适配层osal_task_create 其他实验实验源码内存管理实验互斥锁实验信号量实验 CMISIS接口实验还是得JlINKCMSIS 简介LiteOS->CMSIS任务间消息交互…...

Springboot社区养老保险系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;社区养老保险系统小程序被用户普遍使用&#xff0c;为方…...

使用LangGraph和LangSmith构建多智能体人工智能系统

现在&#xff0c;通过组合几个较小的子智能体来创建一个强大的人工智能智能体正成为一种趋势。但这也带来了一些挑战&#xff0c;比如减少幻觉、管理对话流程、在测试期间留意智能体的工作方式、允许人工介入以及评估其性能。你需要进行大量的反复试验。 在这篇博客〔原作者&a…...

给网站添加live2d看板娘

给网站添加live2d看板娘 参考文献&#xff1a; stevenjoezhang/live2d-widget: 把萌萌哒的看板娘抱回家 (ノ≧∇≦)ノ | Live2D widget for web platformEikanya/Live2d-model: Live2d model collectionzenghongtu/live2d-model-assets 前言 网站环境如下&#xff0c;文章也主…...

学习一下用鸿蒙​​DevEco Studio HarmonyOS5实现百度地图

在鸿蒙&#xff08;HarmonyOS5&#xff09;中集成百度地图&#xff0c;可以通过以下步骤和技术方案实现。结合鸿蒙的分布式能力和百度地图的API&#xff0c;可以构建跨设备的定位、导航和地图展示功能。 ​​1. 鸿蒙环境准备​​ ​​开发工具​​&#xff1a;下载安装 ​​De…...