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

JavaScript(WebAPI)

news 文章来源：https://blog.csdn.net/chenchenchencl/article/details/129432436 2024/9/20 3:20:06

目录

1.什么是Web API?

2.DOM和DOM树

3.获取元素 

4.事件

5.操作元素

 获取/修改元素内容

1.innerText

2. innerHTML

获取/修改元素属性

获取/修改表单元素属性

获取/修改样式属性

1.修改内联样式

2.修改元素应用的CSS类名

6.操作节点

新增节点

删除节点

7.案例

1.网页版猜数字 

2.表白墙

1.什么是Web API?

 之前学习的JS分为三个大的部分

ECMAScript: 基础语法部分

DOM API: 操作页面结构

BOM API: 操作浏览器

(Web API就包含了了 DOM + BOM)

想要实现一个复杂的具有交互功能的页面不能只靠基础语法,还需要Web API 的支持

WebAPI是一个很具体的概念,特指DOM+BOM,本质就是相当于工具,一些函数/对象,能直接使用,提高开发的效率

2.DOM和DOM树

DOM ,文档对象模型.全称为 Document Object Model,提供了一系列的函数,让我们可以操作网页内容,网页结构,网页样式

一个页面的结构是一个树形结构, 称为 DOM 树.

注意:

文档: 一个页面就是一个 文档, 使用 document 表示

元素: 页面中所有的标签都称为 元素. 使用 element 表示

节点: 网页中所有的内容都可以称为 节点(标签节点, 注释节点, 文本节点, 属性节点等). 使用 node 表示.

3.获取元素 

之前几种方式获取元素的时候都比较麻烦,querySelector 能够完全复用前面学过的 CSS 选择 器知识, 达到更快捷更精准的方式获取到元素对象.

let element = document.querySelector(selectors);

注意:

selectors 包含一个或多个要匹配的选择器的 DOM字符串 DOMString . 该字符串必须是有效的 CSS选择器字符串；如果不是，则引发 ''SYNTAX_ERR'' 异常

指定选择器匹配的所有元素的列表，则应该使用 querySelectorAll()

可以在任何元素上调用，不仅仅是 document, 调用这个方法的元素将作为本次查找的根元素

看一个示例

querySelector()

<body><div class="box">abc</div><div id="id">def</div><h3><span><input type="text"></span></h3><script>// .box 是类选择器, #star 是 id 选择器let elem1 = document.querySelector('.box');console.log(elem1);let elem2 = document.querySelector('#id');console.log(elem2);let elem3 = document.querySelector('h3 span input');console.log(elem3);</script>
</body>

 querySelectorAll() 

4.事件

事件就是针对用户的操作进行的一些响应,要能够和用户交互,就需要知道用户做了什么操作,用户做出的一系列操作,就会在浏览器中产生一些事件(鼠标按下,双击,移动,键盘按下....),代码针对事件作出反应

事件三要素

事件源:明确那个元素产生的事件

事件类型:用户进行的什么操作,是鼠标按下,移动还是别的..

事件处理程序:事件发生之后,针对事件要执行的代码

看一个示例

事件源:btn按钮

事件类型:点击

事件处理程序:function()

其中 btn.onclick = function() 这个操作称为 注册事件/绑定事件

这个function是一个匿名函数,也是回调函数,不需要程序员来主动调用,而是由浏览器在合适的时机(触发点击操作)进行调用

5.操作元素

 获取/修改元素内容

1.innerText

<span>hello world</span>

Element.innerText 属性表示一个节点及其后代的“渲染”文本内容

         var div = document.querySelector('div');// 读取 div 内部内容console.log(div.innerText);// 修改 div 内部内容, 界面上就会同步修改div.innerText = 'hello js <span>hello js</span>';

通过 innerText 无法获取到 div 内部的 html 结构, 只能得到文本内容. 修改页面的时候也会把 span 标签当成文本进行设置 

2. innerHTML

Element.innerHTML 属性设置或获取HTML语法表示的元素的后代

先获取到该元素,使用innerHTML属性就鞥能拿到元素里的内容,修改该属性,就会影响到界面的显示

被打印的abc前面有一个数字11,是鼠标点击了11次,获得了11次该内容,chrome控制台默认会把相同的日志合并起来

如果不想合并,在设置中关闭取消勾选即可 

innerHTML 不光能获取到页面的 html 结构, 同时也能修改结构. 并且获取到的内容保留的空格 和换行.

获取/修改元素属性

html标签的属性也会映射到js对象中

通过 Element 对象的属性来直接修改, 就能影响到页面显示效果

我们实现一个功能,将背景图片点击后,换成另一张图片

 标签中的各种属性,都是可以获取和修改的

查看一个元素中的所有属性:console.dir(img);都可以获取到并且修改

获取/修改表单元素属性

表单元素有一些特别的属性,普通标签没有

value:获取input的值

 注意:console.log(input.innerHTML);不能获取到input的内容

 inner HTML得到的是标签的内容(开始标签和结束标签中间的内容),input标签是单个标签,就没有内容!!

看一个示例:我们给input里输入数字,然后点击后数字+1并显示出来

这个变成了字符串拼接,value属性是一个string类型的属性,直接加会变成字符串拼接

转换一下:

我们实现一下平时使用的密码框,可以切换密码是否显示的功能 

type也是input一个属性,影响的是输入框的形态,是可见的或者密码框

获取/修改样式属性

1.修改内联样式

element.style.[属性名] = [属性值];

element.style.cssText = [属性名+属性值];

"行内样式", 通过 style 直接在标签上指定的样式. 优先级很高. 适用于改的样式少的情况

示例:点击文字则放大字体

<div style="font-size: 20px;">这是一个div,点击字体会放大</div><script>let div = document.querySelector('div');div.onclick = function(){//获取当前字体大小let fontSize = parseInt(div.style.fontSize);//改变字体大小fontSize+=10;//设置div字体大小div.style.fontSize = fontSize + 'px';}</script>

注意:

初始字体大小为20px ,是个字符串属性,获取它之后要换成数字,parseInt(div.style.fontSize);

另外,这里的fontSize采用驼峰命名,CSS中采用的是脊柱命名:font-size,是因为CSS中不需要进行算术运算,所以不会被当成减号,并且CSS不区分大小写,使用驼峰也不合适,就使用脊柱法了

但是在别的语言中就需要转换,-会被当成减号!

2.修改元素应用的CSS类名

element.className = [CSS 类名];class 是 JS 的保留字, 所以名字叫做 className

 修改元素的 CSS 类名. 适用于要修改的样式很多的情况.

示例:点击页面切换到夜间模式(背景变成黑色) 再次点击恢复日间模式(背景变成白色)

<div id = 'one' class="light" style="font-size: 20px;height: 50px;">这是一个div</div></div><style>.light{color:black;background:white;}.dark{color:aliceblue;background: #000;}</style><script>let div = document.querySelector('#one');div.onclick = function(){//点击切换日间和夜间if(div.className == 'dark'){div.className = 'light';}else{div.className = 'dark';}}

6.操作节点

新增节点

分成两个步骤 1. 创建元素节点 2. 把元素节点插入到 dom 树中

document.createElement('input');是创建元素

div.appendChild(input);追加元素

再看个示例:实现无序列表的新增

    <ul><li>11</li><li>22</li></ul><script>let ul = document.querySelector('ul');for(let n = 3;n<10;n++){let li = document.createElement('li');li.innerHTML = n+ '' + n;ul.appendChild(li);}

使用appendChild是把要追加的加到元素末尾

使用 insertBefore 将节点插入到指定节点之前.

let insertedNode = parentNode.insertBefore(newNode, referenceNode);

insertedNode 被插入节点(newNode)

parentNode 新插入节点的父节点

newNode 用于插入的节点

referenceNode newNode 将要插在这个节点之前,referenceNode 为 null 则 newNode 将被插入到子节点的末尾.referenceNode 引用节点不是可选参数.

看个示例:

<ul class="container"><li>11</li><li>22</li></ul><script>let ul = document.querySelector('.container');let newul = document.createElement('div');newul.innerHTML = '这是一个新节点';ul.insertBefore(newul,ul.children[0]);

插入成功 

 

 如果针对一个节点插入两次, 则只有最后一次生效(相当于把元素移动了)

 

第一次插入,是在最前面的0位置,现在相当于有三个元素了,0-这是一个新节点,1-11,2-22,又插入到2位置,那就是22这个位置前

 

注意:一旦一个节点插入完毕, 再针对刚刚的节点对象进行修改, 能够同步影响到 DOM 树中的内容.

 删除节点

使用 removeChild 删除子节点

oldChild = element.removeChild(child);

child 为待删除节点

element 为 child 的父节点

返回值为该被删除节点

被删除节点只是从 dom 树被删除了, 但是仍然在内存中, 可以随时加入到 dom 树的其他位置. 如果上例中的 child节点 不是 element 节点的子节点,则该方法会抛出异常

我们删除刚才追加的节点 

 

我们对前面的内容做一个简单的总结

1.选中元素 query Selector/querySelectorAll

2.事件 onclick

3.修改元素内容 innerHTML

4.修改元素属性 元素.属性

5.修改表属性 元素.value 元素.type

6.元素样式 元素.style.样式名 = 值   元素.class Name = CSS类名

7.创建元素 createElement

8.将元素放到dom树上, appendChild

9.删除元素 removeChild

下面写两个案例

7.案例

1.网页版猜数字 

我们预期的效果:

 

<body><div>请输入要猜的数字</div><input type="text"><button>提交</button><div class="result"></div><script>//1.生成1-100随机数let toGuess = parseInt(Math.random()*100+1);console.log(toGuess);//2.进行猜数字操作let button = document.querySelector('button');let resultDiv = document.querySelector('.result');let input = document.querySelector('input');button.onclick = function(){//取输入框内容if(input.value == ''){//没有输入return;}let inputNUm = parseInt(input.value);//比较大小关系if(inputNUm<toGuess){resultDiv.innerHTML = '低了';}else if(inputNUm>toGuess){resultDiv.innerHTML = '高了';}else{resultDiv.innerHTML = '猜中了';}}</script>
</body>

2.表白墙

要实现的页面:

 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表白墙</title><style>/* *是通配符选择器,会选中页面所有的元素 *//* 消除浏览器的默认显示模式 */*{margin: 0;padding: 0;box-sizing: border-box;}.container{width: 600px;margin: 0 auto;}h1{margin-top: 100px;text-align: center;}p{text-align: center;color: #666;margin: 20px auto;}.row{/* 开启弹性布局 */display: flex;height: 40px;/* 水平方向居中 */justify-content: center;/* 垂直方向居中 */align-items: center;}.row span{width: 50px;}.row input{width: 200px;height: 30px;}.row button{width: 250px;height: 30px;color: aliceblue;background-color: orange;/* 去掉边框 */border: none;border-radius: 3px;}/* 点击反馈 */.row button:active{background-color: grey;}</style>
</head>
<body><div class="container"><h1>表白墙</h1><p>输入信息后提交,信息会显示到表格中</p><div class="row"><span>谁:</span><input type="text"></div><div class="row"><span>对谁:</span><input type="text"></div><div class="row"><span>说:</span><input type="text"></div><div class="row"><button>提交</button></div></div><script>//实现提交操作,点击提交按钮,将用户输入的内容提交到页面上//点击的时候获取输入框内容,然后创建一个新的div.row,将内容构造进去let containerDiv = document.querySelector('.container');let inputs = document.querySelectorAll('input');let button = document.querySelector('button');button.onclick = function(){//1.获取输入框的内容let from = inputs[0].value;let to = inputs[1].value;let msg = inputs[2].value;if(from =='' || to == '' || msg == ''){return; }//2.构造新的divlet rowDiv = document.createElement('div');rowDiv.className = 'row';rowDiv.innerHTML = from + ' 对 ' + to + ' 说: ' + msg;containerDiv.appendChild(rowDiv)//3.清空之前的输入for(let input of inputs){input.value = '';}}</script>
</body>
</html>

 

相关文章：

JavaScript(WebAPI)

目录 1.什么是Web API? 2.DOM和DOM树 3.获取元素 4.事件 5.操作元素 获取/修改元素内容 1.innerText 2. innerHTML 获取/修改元素属性 获取/修改表单元素属性 获取/修改样式属性 1.修改内联样式 2.修改元素应用的CSS类名 6.操作节点 新增节点 删除节点 7.案例…...

编程日记 2023/3/11 18:34:09

idea集成GitHub

设置 GitHub 账号绑定账号有两种方式&#xff1a;1. 通过授权登录2.如果上述登录不成功&#xff0c;用Token口令的方式登录&#xff0c;口令在github账号哪里生成&#xff0c;点击settings --->Developer settings --->pwrsonal access tokens ----> 复制口令到idea 口…...

编程日记 2023/3/11 18:33:06

软考高级信息系统项目管理师系列之四十一：项目组合管理

软考高级信息系统项目管理师系列之四十一：项目组合管理 一、项目组合管理内容二、项目组合管理基础概述1.项目组合定义及相关知识图2.项目组合、项目集和项目之间的关系3.项目组合模块具备的特征三、项目组合管理1.项目组合管理定义及要求2.不同级别管理之间的特性及关联3.项目…...

编程日记 2023/3/11 18:32:04

Spring——Spring整合Mybatis(XML和注解两种方式)

框架整合spring的目的:把该框架常用的工具对象交给spring管理&#xff0c;要用时从IOC容器中取mybatis对象。 在spring中应该管理的对象是sqlsessionfactory对象&#xff0c;工厂只允许被创建一次&#xff0c;所以需要创建一个工具类&#xff0c;把创建工厂的代码放在里面&…...

编程日记 2023/3/11 18:30:59

【专项训练】布隆过滤器和LRU缓存

布隆过滤器：与哈希表类似 哈希表是一个没有误差的数据结构！ 有哈希函数得到index，会把要存的整个元素放在哈希表里面 有多少元素，每个元素有多大，所有的这些元素需要占的内存空间，在哈希表中都要找相应的内存大小给存起来 事实上，我们并不需要存所有的元素本身，而是只…...

编程日记 2023/3/11 18:29:58

从一道面试题看 TCP 的吞吐极限

分享一个 TCP 面试题&#xff1a;单条 TCP 流如何打满香港到旧金山的 320Gbps 专线&#xff1f;(补充&#xff0c;写成 400Gbps 更具迷惑性&#xff0c;但预测大多数人都会跑偏&#xff0c;320Gbps 也就白给了) 这个题目是上周帮一个朋友想的&#xff0c;建议他别问三次握手&a…...

编程日记 2023/3/11 18:28:53

rsync 的用法

rsync 介绍下 用法 rsync是一个常用的数据同步工具&#xff0c;它能够在本地和远程系统之间同步文件和目录。以下是rsync的基本用法&#xff1a; 同步本地文件夹&#xff1a; bash Copy code rsync -av /path/to/source /path/to/destination其中&#xff0c;-a表示归档模式&…...

编程日记 2023/3/11 18:27:52

【LeetCode每日一题:[面试题 17.05] 字母与数字-前缀和+Hash表】

题目描述 给定一个放有字母和数字的数组&#xff0c;找到最长的子数组&#xff0c;且包含的字母和数字的个数相同。 返回该子数组&#xff0c;若存在多个最长子数组&#xff0c;返回左端点下标值最小的子数组。若不存在这样的数组&#xff0c;返回一个空数组。 示例 1: 输入…...

编程日记 2023/3/11 18:26:50

华为OD机试题 - 简易压缩算法（JavaScript）| 机考必刷

更多题库，搜索引擎搜 梦想橡皮擦华为OD 👑👑👑 更多华为OD题库，搜 梦想橡皮擦 华为OD 👑👑👑 更多华为机考题库，搜 梦想橡皮擦华为OD 👑👑👑 华为OD机试题 最近更新的博客使用说明本篇题解：简易压缩算法题目输入输出示例一输入输出说明示例二输入输出说明…...

编程日记 2023/3/11 18:25:46

Kubenates中的日志收集方案ELK(下)

1、rpm安装Logstash wget https://artifacts.elastic.co/downloads/logstash/logstash-6.8.7.rpm yum install -y logstash-6.8.7.rpm2、创建syslog配置 input {beats{port> 5044 } }output {elasticsearch {hosts > ["http://localhost:9200"]index …...

编程日记 2023/3/11 18:24:44

LeetCode - 42 接雨水

目录 题目来源 题目描述 示例 提示 题目解析 算法源码 题目来源 42. 接雨水 - 力扣&#xff08;LeetCode&#xff09; 题目描述 给定 n 个非负整数表示每个宽度为 1 的柱子的高度图&#xff0c;计算按此排列的柱子&#xff0c;下雨之后能接多少雨水。 示例1 输入&…...

编程日记 2023/3/11 18:23:40

python --生成时间序列，作为横轴的标签。时间跨越2008-2022年，生成每年的6-10月的第一天作为时间序列

python 生成制定的时间序列作为绘图时x轴的标签 问题需求 在绘图时&#xff0c;需要对于x轴的标签进行专门的设置&#xff0c;整体时间跨越2008年-2022年&#xff0c;将每年的6-10月的第一天生成一条时间序列&#xff0c;绘制成图。 解决思路 对于时间序列的生成&#xff0…...

编程日记 2023/3/11 18:22:38

【Unity VR开发】结合VRTK4.0：创建一个按钮（Togglr Button）

语录&#xff1a; 有人感激过你的善良吗&#xff0c;貌似他们只会得寸进尺。 前言&#xff1a; Toggle按钮是提供简单空间 UI 选项的另一种方式&#xff0c;在该选项中&#xff0c;按钮将保持其状态&#xff0c;直到再次单击它。这允许按钮处于激活状态或停用状态的情况&#…...

编程日记 2023/3/11 18:21:34

lottie-miniprogram在taro+vue的小程序中怎么使用

把一个json的动图展示在页面上。使用的是插件lottie-miniprogramhttps://blog.csdn.net/qq_33769914/article/details/128705922之前介绍过。但是发现使用在taro使用的时候他会报错。那可能是因为我们 wx.createSelectorQuery().select(#canvas).node(res > {console.log(re…...

编程日记 2023/3/11 18:20:28

C++回顾（二十二）—— stack容器 与 queue容器

22.1 stack容器 &#xff08;1&#xff09; stack容器简介 stack是堆栈容器&#xff0c;是一种“先进后出”的容器。stack是简单地装饰deque容器而成为另外的一种容器。添加头文件&#xff1a;#include <stack> &#xff08;2&#xff09;stack对象的默认构造 stack…...

编程日记 2023/3/11 18:19:26

逻辑优化基础-disjoint support decomposition

先遣兵 在了解 disjoint support decomposition 之前&#xff0c;先学习两个基本的概念。 disjoint 数学含义上的两个集合交集&#xff0c;所谓非相交&#xff0c;即交集为空集。 A∩BC⊘A \cap B C \oslash A∩BC⊘ support 逻辑综合中的 supportsupportsupport 概念是…...

编程日记 2023/3/11 18:18:24

保姆级使用PyTorch训练与评估自己的DaViT网络教程

文章目录前言0. 环境搭建&快速开始1. 数据集制作1.1 标签文件制作1.2 数据集划分1.3 数据集信息文件制作2. 修改参数文件3. 训练4. 评估5. 其他教程前言 项目地址&#xff1a;https://github.com/Fafa-DL/Awesome-Backbones 操作教程&#xff1a;https://www.bilibili.co…...

编程日记 2023/3/11 18:17:22

Java8新特性：Stream流处理使用总结

一. 概述 Stream流是Java8推出的、批量处理数据集合的新特性&#xff0c;在java.util.stream包下。结合着Java8同期推出的另一项新技术&#xff1a;行为参数化&#xff08;包括函数式接口、Lambda表达式、方法引用等&#xff09;&#xff0c;Java语言吸收了函数式编程的语法特…...

编程日记 2023/3/11 18:16:20

Java基准测试工具JMH高级使用

去年&#xff0c;我们写过一篇关于JMH的入门使用的文章&#xff1a;Java基准测试工具JMH使用&#xff0c;今天我们再来聊一下关于JMH的高阶使用。主要我们会围绕着以下几点来讲&#xff1a; 对称并发测试非对称并发测试阻塞并发测试Map并发测试 关键词 State 在很多时候我们…...

编程日记 2023/3/11 18:15:18

问心 | 再看token、session和cookie

什么是cookie HTTP Cookie&#xff08;也叫 Web Cookie或浏览器 Cookie&#xff09;是服务器发送到用户浏览器并保存在本地的一小块数据&#xff0c;它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上。 什么是session Session 代表着服务器和客户端一次会话…...

编程日记 2023/3/11 18:14:14

Ubuntu 安装 CUDA and Cudnn

文章目录0 查看 nvidia驱动版本1 下载Cuda2 下载cudnn参考&#xff1a;0 查看 nvidia驱动版本 nvidia-smi1 下载Cuda 安装之前先安装 gcc g gdb 官方&#xff1a;https://developer.nvidia.com/cuda-toolkit-archive&#xff0c;与驱动版本进行对应&#xff0c;我这里是12.0…...

编程日记 2023/3/11 18:13:12

【漏洞复现】Grafana任意文件读取（CVE-2021-43798）

docker环境搭建 #进入环境 cd vulhub/grafana/CVE-2021-43798#启动环境&#xff0c;这个过程可能会有点慢&#xff0c;保持网络通畅 docker-compose up -d#查看环境 docker-compose ps直接访问虚拟机 IP地址:3000 目录遍历原理 目录遍历原理&#xff1a;攻击者可以通过将包含…...

编程日记 2023/3/11 18:12:04

磨金石教育摄影技能干货分享｜春之旅拍

春天来一次短暂的旅行&#xff0c;你会选择哪里呢&#xff1f;春天的照片又该如何拍呢&#xff1f;看看下面的照片&#xff0c;或许能给你答案。照片的构图很巧妙&#xff0c;画面被分成两部分&#xff0c;一半湖泊&#xff0c;一半绿色树林。分开这些的是一条斜向的公路&#…...

编程日记 2023/3/11 18:11:03

中断以及 PIC可编程中断控制器

1 中断分为同步中断&#xff08;中断&#xff09;和异步中断&#xff08;异常&#xff09; 1.1 中断和异常的不同 中断由IO设备和定时器产生&#xff0c;用户的一次按键会引起中断。异步。 异常一般由程序错误产生或者由内核必须处理的异常条件产生。同步。缺页异常&#xff…...

编程日记 2023/3/11 18:10:01

SecureCRT 安装并绑定ENSP设备终端

软件下载链接链接&#xff1a;https://pan.baidu.com/s/1WFxmQgaO9bIiUTwBLSR4OA?pwd2023 提取码&#xff1a;2023 CRT安装&#xff1a;软件可以从上面链接进行下载&#xff0c;下载完成后解压如下&#xff1a;首先双击运行scrt-x64.8.5.4 软件&#xff0c;进行安装点击NEXT选…...

编程日记 2023/3/11 18:08:59

ESP32设备驱动-TCS3200颜色传感器驱动

TCS3200颜色传感器驱动 1、TCS3200介绍 TCS3200 和 TCS3210 可编程彩色光频率转换器在单个单片 CMOS 集成电路上结合了可配置的硅光电二极管和电流频率转换器。 输出是方波（50% 占空比），其频率与光强度（辐照度）成正比。 满量程输出频率可以通过两个控制输入引脚按三个预…...

编程日记 2023/3/11 18:07:57

＜ JavaScript小技巧：Array构造函数妙用 ＞

文章目录&#x1f449; Array构造函数 - 基本概念&#x1f449; Array函数技巧用法1. Array.of()2. Array.from()3. Array.reduce()4. (Array | String).includes()5. Array.at()6. Array.flat()7. Array.findIndex()&#x1f4c3; 参考文献往期内容 &#x1f4a8;今天这篇文章…...

编程日记 2023/3/11 18:06:52

【17】组合逻辑 - VL17/VL19/VL20 用3-8译码器 或 4选1多路选择器 实现逻辑函数

VL17 用3-8译码器实现全减器 【本题我的也是绝境】 因为把握到了题目的本质要求【用3-8译码器】来实现全减器。 其实我对全减器也是不大清楚，但是仿照对全加器的理解，全减器就是低位不够减来自低位的借位 和 本单元位不够减向后面一位索要的借位。如此而已，也没有很难理解…...

编程日记 2023/3/11 18:05:44

2023年全国最新二级建造师精选真题及答案19

百分百题库提供二级建造师考试试题、二建考试预测题、二级建造师考试真题、二建证考试题库等&#xff0c;提供在线做题刷题&#xff0c;在线模拟考试&#xff0c;助你考试轻松过关。 37.下列纠纷中&#xff0c;属于劳动争议范围的有()。 A.因劳动保护发生的纠纷 B.家庭与家政…...

编程日记 2023/3/11 18:04:42

Java中的 this 和 super

1 this 关键字 1.1 this 访问本类属性 this 代表对当前对象的一个引用 所谓当前对象&#xff0c;指的是调用当前类中方法或属性的那个对象this只能在方法内部使用&#xff0c;表示对“调用方法的那个对象”的引用this.属性名&#xff0c;表示本对象自己的属性 当对象的属性和…...

编程日记 2023/3/11 18:03:41

ESP32设备驱动-红外寻迹传感器驱动

红外寻迹传感器驱动 1、红外寻迹传感器介绍 红外寻迹传感器具有一对红外线发射管与接收管，发射管发射出一定频率的红外线，当检测方向遇到障碍物（反射面）时，红外线反射回来被接收管接收，经过比较器电路处理之后，输出接口会输出一个数字信号（低电平或高电平，取决于电路…...

编程日记 2023/3/11 18:02:38

初识BFC

初识BFC 先说如何开启BFC&#xff1a; 1.设置display属性&#xff1a;inline-block&#xff0c;flex&#xff0c;grid 2.设置定位属性&#xff1a;absolute&#xff0c;fixed 3.设置overflow属性&#xff1a;hidden&#xff0c;auto&#xff0c;scroll 4.设置浮动&#xf…...

编程日记 2023/3/11 18:01:36

随想录二刷Day17——二叉树

文章目录二叉树9. 二叉树的最大深度10. 二叉树的最小深度11. 完全二叉树的节点个数12. 平衡二叉树二叉树 9. 二叉树的最大深度 104. 二叉树的最大深度 思路1&#xff1a; 递归找左右子树的最大深度&#xff0c;选择最深的 1&#xff08;即加上当前层&#xff09;。 class So…...

编程日记 2023/3/11 18:00:34

Weblogic管理控制台未授权远程命令执行漏洞复现（cve-2020-14882/cve-2020-14883）

目录漏洞描述影响版本漏洞复现权限绕过漏洞远程命令执行声明&#xff1a;本文仅供学习参考&#xff0c;其中涉及的一切资源均来源于网络&#xff0c;请勿用于任何非法行为&#xff0c;否则您将自行承担相应后果&#xff0c;本人不承担任何法律及连带责任。 漏洞描述 Weblogic…...

编程日记 2023/3/11 17:59:32

STM32F103CubeMX定时器

前言定时器作为最重要的内容之一&#xff0c;是每一位嵌入式软件工程师必备的能力。STM32F103的定时器是非常强大的。1&#xff0c;他可以用于精准定时&#xff0c;当成延时函数来使用。不过个人不建议这么使用&#xff0c;因为定时器很强大&#xff0c;这么搞太浪费了。如果想…...

编程日记 2023/3/11 17:58:29

多态且原理

多态 文章目录多态多态的定义和条件协变&#xff08;父类和子类的返回值类型不同&#xff09;函数隐藏和虚函数重写的比较析构函数的重写关键字final和override抽象类多态的原理单继承和多继承的虚函数表单继承下的虚函数表多继承下的虚函数表多态的定义和条件 定义&#xff1…...

编程日记 2023/3/11 17:57:26

动态库(二) 创建动态库

文章目录创建动态库设计动态库ABI兼容动态符号的可见性示例控制符号可见性通过-fvisibility通过strip工具删除指定符号创建动态库 在Linux中创建动态库通过如下过程完成&#xff1a; gcc -fPIC -c first.c second.c gcc -shared first.o second.o -o libdynamiclib.so 按照Li…...

编程日记 2023/3/11 17:56:25

opencv加水印

本文介绍opencv给图片加水印的方法。 目录1、添加水印1.1、铺满1.2、在指定区域添加1.3、一比一铺满1、添加水印 添加水印的原理是调低两张图片的透明度&#xff0c;然后叠加起来。公式如下&#xff1a; dst src1 * opacity src2 * (1 - opacity) gamma; opacity是透明度&a…...

编程日记 2023/3/11 17:55:21

Flume基操

Flume概述 Flume 定义 Flume 是 Cloudera 提供的一个高可用的&#xff0c;高可靠的&#xff0c;分布式的海量日志采集、聚合和传输的系统。Flume 基于流式架构&#xff0c;灵活简单。 Flume最主要的作用就是&#xff0c;实时读取服务器本地磁盘的数据&#xff0c;将数据写入到…...

编程日记 2023/3/11 17:54:16

图文详解红黑树，还有谁不会？

前言在MySQL中&#xff0c;无论是Innodb还是MyIsam&#xff0c;都使用了B树作索引结构(这里不考虑hash等其他索引)。本文将从最普通的二叉查找树开始&#xff0c;逐步说明各种树解决的问题以及面临的新问题&#xff0c;从而说明MySQL为什么选择B树作为索引结构。目录一、二叉查…...

编程日记 2023/3/11 17:53:13

多目标遗传算法NSGA-II原理详解及算法实现

在接触学习多目标优化的问题上&#xff0c;经常会被提及到多目标遗传算法NSGA-II&#xff0c;网上也看到了很多人对该算法的总结&#xff0c;但真正讲解明白的以及配套用算法实现的文章很少&#xff0c;这里也对该算法进行一次详解与总结。会有侧重点的阐述&#xff0c;不会针对…...

编程日记 2023/3/11 17:52:10

Spark 键值对RDD的操作

键值对RDD&#xff08;Pair RDD&#xff09;是指每个RDD元素都是&#xff08;key&#xff0c;value&#xff09;键值对类型&#xff0c;是一种常见的RDD类型&#xff0c;可以应用于很多的应用场景。 一、 键值对RDD的创建 键值对RDD的创建主要有两种方式&#xff1a; &#x…...

编程日记 2023/3/11 17:51:06

【SpringCloud】SpringCloud详解之Feign远程调用

目录前言SpringCloud Feign远程服务调用一.需求二.两个服务的yml配置和访问路径三.使用RestTemplate远程调用(order服务内编写)四.构建Feign(order服务内配置)五.自定义Feign配置(order服务内配置)六.Feign配置日志(oder服务内配置)七.Feign调优(order服务内配置)八.抽离Feign前…...

编程日记 2023/3/11 17:50:04

文档团队怎样使用GIT做版本管理

有不少小型文档团队想转结构化写作和发布&#xff0c;但是因为有限的IT技能和IT资源而受阻。本文为这样的小型文档团队而准备&#xff0c;描述怎样使用Git做内容的版本管理。 - 1 - 为什么需要版本管理 当一个团队进行协同创作内容时&#xff0c;有以下需要&#xff1a; 在对…...

编程日记 2023/3/11 17:49:02

【java】Java中-＞ 是什么意思?

先看一个例子 EventQueue.invokeLater(() -> {JFrame frame new ImageViewerFrame();frame.setTitle("ImageViewer");frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);frame.setVisible(true);}); // 上面那一段可以看成如下: EventQueue.invokeLater(ne…...

编程日记 2023/3/11 17:48:00

网络类型部分实验

1.实验思路&#xff1a; 首先用DHCP 给四台PC配置上地址&#xff0c;配置成功后 其次底层IP地址的下发完成的同时&#xff0c;进行检测是否可以ping通 接着进行R1和R5之间使用PPP的PAP认证&#xff0c;R5为主认证方 主认证方ISP 被认证方R1 其次进行R2和R5使用PPP的CHAP认证&am…...

编程日记 2023/3/11 17:46:57

java教程--函数式接口--lambda表达式--方法引用

函数式接口 介绍 jdk8新特性&#xff0c;只有一个抽象方法的接口我们称之为函数接口。 FunctionalInterface ​ JDK的函数式接口都加上了FunctionalInterface 注解进行标识。但是无论是否加上该注解只要接口中只有一个抽象方法&#xff0c;都是函数式接口。 如在Comparato…...

编程日记 2023/3/11 17:45:50

java——代理

什么是代理&#xff1a; 给目标对象一个代理对象&#xff0c;由代理对象控制着对目标对象的引用 为什么使用代理&#xff1a; ①&#xff1a;功能增强&#xff1a;通过代理业务对原有业务进行增强 ②&#xff1a;用户只能同行过代理对象间接访问目标对象&#xff0c;防止用…...

编程日记 2023/3/11 17:44:49

kubernetes中service探讨

文章目录序言kube-proxy代理模型userspace代理模型iptables代理模型ipvs代理模型修改代理模型Service资源类型ClusterIPNodePortLoadBalancerExternalName应用Service资源应用ClusterIP Service资源应用NodePort Service资源应用LoadBalancer Service资源外部IP序言 在Kuberne…...

编程日记 2023/3/11 17:43:46

Python3实现“美颜”功能

导语利用Python实现美颜。。。这是之前在GitHub上下载的一个项目。。。似乎有些日子了。。。所以暂时找不到原项目的链接了。。。今天抽空看了下它源代码的主要思想&#xff0c;似乎挺简单的。。。于是决定用Python3自己复现一下。。。T_T感觉还是挺有趣的。。。Just have a tr…...

编程日记 2023/3/11 17:42:45