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

webAPI中的排他思想、自定义属性操作、节点操作（配大量案例练习）

news 2025/7/8 18:40:19

一、排他操作

1.排他思想

如果有同一组元素，我们想要某一个元素实现某种样式，需要用到循环的排他思想算法：

1.所有的元素全部清除样式

2.给当前的元素设置样式

注意顺序能不能颠倒，首先清除全部样式，再设置自己当前的样式

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>01排他思想</title>
</head>
<body><button class="btn">按钮1</button><button class="btn">按钮2</button><button class="btn">按钮3</button><button class="btn">按钮4</button><button class="btn">按钮5</button><script>//1.获取到所有的元素var btns = document.getElementsByClassName('btn');//console.log(btns);//2.遍历  btns是一个数组（有length和根据索引获取元素，但是不具备数据中push等方法）for(var i = 0; i < btns.length; i++){//给所有的button都注册点击事件btns[i].onclick = function(){//alert('ok');//1)清除所有按钮的样式(重新再遍历一遍所有的btns)for(var j = 0; j < btns.length; j++){btns[j].style.backgroundColor = '';}//2)添加样式this.style.backgroundColor = 'pink';}}</script>
</body>
</html>

2.案例

案例一

百度换肤

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>02百度换肤</title><style>*{margin: 0; padding: 0;}body{background: url(images/1.jpg) no-repeat center top;}li{list-style: none;}.baidu{overflow: hidden;margin: 100px auto;background-color: #fff;width: 410px;padding-top: 3px;}.baidu li{float: left;}.baidu img{width: 100px;}.baidu:hover{cursor: pointer; /*手的形状*/}</style>
</head>
<body><ul class="baidu" id="baidu"><li><img src="images/1.jpg" alt=""></li><li><img src="images/2.jpg" alt=""></li><li><img src="images/3.jpg" alt=""></li><li><img src="images/4.jpg" alt=""></li></ul><script>//1.获取元素//1-1 获取到ul (通过id获取，就是只获取了一个对象)var ulObj = document.getElementById('baidu');//1-2 通过ul对象，找ul中的imgvar imgs = ulObj.getElementsByTagName('img')//console.log(imgs);//2.循环imgsfor(var i = 0; i < imgs.length; i++){//给每一个都注册事件imgs[i].onclick = function(){//console.log(this.src);document.body.style.backgroundImage = 'url('+this.src+')'}}</script>
</body>
</html>

案例二：隔行变色

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>03隔行变色</title><style>*{margin: 0; padding: 0;}table{width: 800px;margin: 100px auto;text-align: center;border-collapse: collapse;font-size: 14px;}thead tr {height: 30px;background-color: skyblue;}tbody tr{height: 30px;}tbody tr td{border-bottom: 1px solid #d7d7d7;font-size: 12px;color: blue;}.bg {background-color: #999;}</style>
</head>
<body><table id="mytable"><thead><tr><th>代码</th><th>名称</th><th>最近公布净产值</th><th>净产值增长率</th></tr></thead><tbody><tr><td>0121213</td><td>农银金穗3个月订气开放债券</td><td>1.09</td><td>1.09</td></tr><tr><td>0121213</td><td>农银金穗3个月订气开放债券</td><td>1.09</td><td>1.09</td></tr><tr><td>0121213</td><td>农银金穗3个月订气开放债券</td><td>1.09</td><td>1.09</td></tr><tr><td>0121213</td><td>农银金穗3个月订气开放债券</td><td>1.09</td><td>1.09</td></tr><tr><td>0121213</td><td>农银金穗3个月订气开放债券</td><td>1.09</td><td>1.09</td></tr><tr><td>0121213</td><td>农银金穗3个月订气开放债券</td><td>1.09</td><td>1.09</td></tr><tr><td>0121213</td><td>农银金穗3个月订气开放债券</td><td>1.09</td><td>1.09</td></tr><tr><td>0121213</td><td>农银金穗3个月订气开放债券</td><td>1.09</td><td>1.09</td></tr></tbody></table><script>//1.获取到所有的tr（每一个tr就是一行）var mytable = document.getElementById('mytable');var trs = mytable.getElementsByTagName('tr');//console.log(trs);//2.遍历trfor(var i = 0; i < trs.length; i++){//隔行变色// if(i != 0 && i % 2 ==0){ //偶数//     trs[i].style.backgroundColor ='pink'// }if(i== 0){continue}//鼠标放在tr上，有一个背景颜色,给每个tr都注册一个鼠标放上去的事件trs[i].onmouseover = function(){this.className = 'bg';}//鼠标移开，移除背景样式trs[i].onmouseout = function(){this.className = ''}}</script>
</body>
</html>

案例三：全选全不选

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>04全选和全部选</title><style>*{margin: 0; padding: 0;}.wrap {width: 300px;margin: 100px auto;}table {border-spacing: 0;border: 1px solid #c0c0c0;}th,td{border: 1px solid #d0d0d0;color: #404040;padding: 10px;}th{background-color: #09c;font: bold 16px "微软雅黑";color: #fff;}td{font: 14px "微软雅黑";}tbody tr{background-color: #f0f0f0;}tbody tr:hover{cursor: pointer;background-color: #fafafa;}</style>
</head>
<body><table class="wrap"><thead><tr><th><input type="checkbox" id="j_chAll" /></th><th>商品</th><th>价格</th></tr></thead><tbody><tr><td><input type="checkbox" class="other"/></td><td>Iphone16</td><td>8000</td></tr><tr><td><input type="checkbox" class="other"/></td><td>华为mate70</td><td>9000</td></tr><tr><td><input type="checkbox" class="other"/></td><td>小米17</td><td>5000</td></tr><tr><td><input type="checkbox" class="other"/></td><td>vivo</td><td>4000</td></tr></tbody></table><script>//1.获取元素//1-1 全选复选框var all = document.getElementById('j_chAll');//1-2 所有的其它复选框var others = document.getElementsByClassName('other');//通过复选框对象.checked可以获取到复选框的状态，true是勾选状态，false取消勾选的状态//通过复选框对象.checked = true/false 可以设置复选框的状态//给全选和全部选复选框注册点击事件all.onclick = function(){var flag = all.checked; //复选框的状态console.log(flag);//2.遍历所有的其它复选框for(var i = 0; i < others.length; i++){others[i].checked = flag; //设置复选框的状态}}// //看看all复选框，点击的时候发生了什么// var flag = all.checked;// console.log(flag);// all.onclick = function(){//     var flag = all.checked;//     console.log(flag);// }</script>
</body>
</html>

升级

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>05全选和全部选升级</title><style>*{margin: 0; padding: 0;}.wrap {width: 300px;margin: 100px auto;}table {border-spacing: 0;border: 1px solid #c0c0c0;}th,td{border: 1px solid #d0d0d0;color: #404040;padding: 10px;}th{background-color: #09c;font: bold 16px "微软雅黑";color: #fff;}td{font: 14px "微软雅黑";}tbody tr{background-color: #f0f0f0;}tbody tr:hover{cursor: pointer;background-color: #fafafa;}</style>
</head>
<body><table class="wrap"><thead><tr><th><input type="checkbox" id="j_chAll" /></th><th>商品</th><th>价格</th></tr></thead><tbody><tr><td><input type="checkbox" class="other"/></td><td>Iphone16</td><td>8000</td></tr><tr><td><input type="checkbox" class="other"/></td><td>华为mate70</td><td>9000</td></tr><tr><td><input type="checkbox" class="other"/></td><td>小米17</td><td>5000</td></tr><tr><td><input type="checkbox" class="other"/></td><td>vivo</td><td>4000</td></tr></tbody></table><script>//1.获取元素//1-1 全选复选框var all = document.getElementById('j_chAll');//1-2 所有的其它复选框var others = document.getElementsByClassName('other');//通过复选框对象.checked可以获取到复选框的状态，true是勾选状态，false取消勾选的状态//通过复选框对象.checked = true/false 可以设置复选框的状态//给全选和全部选复选框注册点击事件all.onclick = function(){var flag = all.checked; //复选框的状态console.log(flag);//2.遍历所有的其它复选框for(var i = 0; i < others.length; i++){others[i].checked = flag; //设置复选框的状态}}//2.遍历所有的其它复选框for(var i = 0; i < others.length; i++){others[i].onclick = function(){var ch = checkCheckbox(others); //会返回一个truefalse//console.log(ch);all.checked = ch;//给全选或全部选复选框设置值}}//检查其它的复选框的状态，如果全选就返回true，只要有一个不选就返回falsefunction checkCheckbox(chks){var ch = true;// 遍历for(var i = 0; i < chks.length; i++){//检查每一个的状态if(chks[i].checked == false){ch = false;break}}return ch;}// //看看all复选框，点击的时候发生了什么// var flag = all.checked;// console.log(flag);// all.onclick = function(){//     var flag = all.checked;//     console.log(flag);// }</script>
</body>
</html>

二、自定义属性操作

1.获取属性值

有两种方式：

element.属性，就可以获取到该元素属性的值
element.getAttribute(‘属性’)

区别：

element.属性，获取内置属性值（元素本身自带的属性）
element.getAttribute(‘属性’)；主要是获取自定义属性（我们程序自定义的属性）

2.设置属性的值

有两种方式：

element.属性 = 值
element.setAttribute(‘属性名’,'属性值);

区别：

element.属性 = 值设置内置属性的值
element.setAttribute(‘属性名’,'属性值); 主要设置自定义属性的值

3.移除属性

element.removeAttribute(‘属性’);

4.案例

案例一：讲课案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>06.获取属性值</title>
</head>
<body><div id="demo" index="1" class="nav">123</div><script>//1.获取到div对象。根据id获取是获取到一个对象var div = document.getElementById('demo');console.log(div.id);    //获取div对象中id属性的值console.log(div.getAttribute('id')); //获取div这个对象中id这个属性的值console.log(div.index);    //***获取失败，对象.属性名只能获取本身自有属性，不能获取自定义属性console.log(div.getAttribute('index')); //获取div这个对象中index这个属性的值//2.设置对象的属性值值//2-1 element.属性 = '值'div.id = 'test'console.log(div.id);div.className = 'navs'console.log(div.className);//2-2 element.setAttribute('属性名','值').主要针对的是自定义属性div.setAttribute('index',222)console.log(div.getAttribute('index'));div.setAttribute('class','abded')console.log(div.className);//3.移除自定义属性    removeAttribute('属性名')div.removeAttribute('index')div.removeAttribute('class');</script>
</body>
</html>

案例二：tab栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>07tab</title><style>*{margin: 0; padding: 0;}ul li{list-style: none;}.tab{width: 978px;margin: 100px auto;}.tab_list{height: 39px;border: 1px solid #ccc;background-color: #f1f1f1;}.tab_list li{float: left;height: 39px;line-height: 39px;padding: 0px 20px;text-align: center;cursor: pointer;}.tab_list .current {background-color: #c81623;color: #fff;}.item {display: none;}</style>
</head>
<body><div class="tab"><div class="tab_list" id="tab_list"><ul><li class="current">商品介绍</li><li>规格与包装</li><li>售后保障</li><li>商品评价（50000）</li><li>手机社区</li></ul></div><div class="tab_con"><div class="item" style="display: block;">商品介绍模块</div><div class="item">规格与包装模块内容</div><div class="item">售后保障内容：京东商城向您保证所售商品均为正品行货，京东自营商品开具机打发票或电子发票。</div><div class="item">手机收到了。特别特别棒，货比三家才买的，店主人很好，回答问题很有耐心，也很详细，有需要还会再来的</div><div class="item">手机社区：心中疑惑就问问买过此商品的同学吧~我要提问</div></div></div><script>//1.获取元素var tab_list = document.getElementById('tab_list');var lis = tab_list.getElementsByTagName('li');var items = document.getElementsByClassName('item');//console.log(lis);//2.利用for循环给li绑定点击事件for(var i = 0; i < lis.length; i++){//给每个li设置一个索引号lis[i].setAttribute('index',i);//注册事件lis[i].onclick = function(){//2-1 li点击有红色样式//其它要干掉for(var j = 0; j < lis.length; j++){lis[j].className = '';}//给当前点击的红色样式this.className = 'current'//2-2 点击li下面显示的内容模块变化var index = this.getAttribute('index');console.log(index);//其它的要隐藏for(var k = 0; k < items.length; k++){items[k].style.display = 'none'}items[index].style.display = 'block'}}</script>
</body>
</html>

5.H5自定义属性

自定义属性目的：是为了保存并使用数据。有些数据可以保存在页面中而不用保存在数据库中

自定义一属性获取是通过getAttribute(‘属性名’) 获取

但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性。

h5给我们新增了自定义属性

设置自定义属性
h5规定自定义属性data- 开头作为属性名并赋值
如：
设置：element.setAttribute(‘data-index’,1);

获取自定义属性
兼容属性获取：element.getAttribute(‘data-index’);
h5新增了获取方式：element.dataset.index 或者 element.dataset(‘index’)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>08.H5自定义属性</title>
</head>
<body><div id="my" getTime="20" data-index="2" data-list-name="admin"></div><script>//1.获取元素var div = document.getElementById('my');console.log(div.getAttribute('getTime'));//设置一个h5属性div.setAttribute('data-time',20);console.log(div.getAttribute('data-time'));//h5新增的自定义属性的方法(  只能是data-  开头)//dataset：是一个集合里面存放了所有以data开头的自定义属性console.log(div.dataset);console.log(div.dataset.index); //2console.log(div.dataset['index']); //2//如果自定义属性里面有多个链接的单词，我们获得时候采用驼峰写法console.log(div.dataset.listName);console.log(div.dataset['listName']);</script>
</body>
</html>

三、节点操作

1.节点概述

节点：网页中所有的内容都是节点（标签、属性、文本、注释等等），在DOM中，节点使用node表示

html DOM 树种所有的节点都可以通过javaScript来进行访问，所有的HTML元素（节点）均可被修改，也可以创建或删除

一般地：节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个基本属性

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>09节点概述</title>
</head>
<body><div>我是div</div><span>我是span</span><ul><li>我是li</li><li>我是li</li><li>我是li</li><li>我是li</li></ul><div id="box"><span class="erweima">我是二维码</span></div><script>var box = document.getElementById('box');console.dir(box);</script>
</body>
</html>

在这里插入图片描述

元素节点 nodeType 为 1
元素节点 nodeType 为 2
元素节点 nodeType 为 3 (文本节点内包含文字、空格、换行等等)

我们实际开发种，节点操作主要是操作元素节点

2.父节点

node.parentNode

属性可以返回某节点的父节点，注意是最近的一个父节点

如果指定的节点没有父节点，返回null

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>10父节点</title>
</head>
<body><div>我是div</div><span>我是span</span><ul><li>我是li</li><li>我是li</li><li>我是li</li><li>我是li</li></ul><div id="box"><span class="erweima" id="erweima">我是二维码</span></div><script>//获取到二维码对象var erweima = document.getElementById('erweima');//node.parentNode 得到的是离元素最近的父节点，如果找不到父节点就返回nullconsole.dir(erweima.parentNode);  //div#box</script>
</body>
</html>

3.子节点

所有的子节点：

parentNode.childNodes

返回的是包含指定节点的子节点的集合，该集合即时更新的集合

**注意：**返回值里面包含了所有的子节点，包括元素节点、文本节点等

如果只需要获取到里面的元素节点，则需要专门的处理，所以我们一般不提倡使用childNodes

parentNode.children

是一个只读属性，返回的是所有的子元素节点，它只返回子元素节点，其它节点不返回（终点掌握这个）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>11子节点</title>
</head>
<body><div>我是div</div><span>我是span</span><ul id="ul"><li>我是li</li><li>我是li</li><li>我是li</li><li>我是li</li></ul><div id="box"><span class="erweima" id="erweima">我是二维码</span></div><script>//获取ulvar ul = document.getElementById('ul');//获取ul中所有的li//var lis = ul.getElementsByTagName('li');var lis = ul.childrenconsole.log(lis);//1.字节点console.log(ul.childNodes);console.log(ul.childNodes[0].nodeType); //3console.log(ul.childNodes[1].nodeType); //1console.log(ul.children);</script>
</body>
</html>

3.1 获取子节点

第一个节点和最后一个

parentNode.firstNode ;返回第一个子节点，找不到就返回null，通过也页包含所有的节点

parentNode.firstElementNode: 返回一个子元素节点，找不到就是null

parentNode.lastChild :最后一个子节点

parentNode.lastElementChild: 返回最后一个子元素节点，找不到就是null

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>13.新浪下拉菜单</title><style>*{margin: 0; padding: 0;}li{list-style: none;}a{text-decoration: none;font-size: 14px;}#nav{margin: 100px;}#nav>li{position: relative;float: left;width: 80px;height: 40px;text-align: center;}#nav li a{display: block;width: 100%;height: 100%;line-height: 40px;color: #333;}#nav ul{display: none;}#nav>li>a:hover{background-color: #eee;}#nav ul li a:hover{background-color: #fff5da;}</style>
</head>
<body><ul id="nav"><li><a href="#">微博</a><ul><li><a href="#">私信</a></li><li><a href="#">评论</a></li><li><a href="#">@我</a></li></ul></li><li><a href="#">微博</a><ul><li><a href="#">私信</a></li><li><a href="#">评论</a></li><li><a href="#">@我</a></li></ul></li><li><a href="#">微博</a><ul><li><a href="#">私信</a></li><li><a href="#">评论</a></li><li><a href="#">@我</a></li></ul></li><li><a href="#">微博</a><ul><li><a href="#">私信</a></li><li><a href="#">评论</a></li><li><a href="#">@我</a></li></ul></li></ul><script>//1.获取元素var nav = document.getElementById('nav');//2.获取livar lis = nav.children;console.log(lis);//3.循环注册事件for(var i = 0;i < lis.length; i++){lis[i].onmouseover = function(){//this.children[1] 表示当前这个li种的ulthis.children[1].style.display = 'block'}lis[i].onmouseout = function(){this.children[1].style.display = 'none'}}</script>
</body>
</html>

3.2 兄弟节点

下一个兄弟 : nextElementSibling

上一个兄弟 : previousElementSibling

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><h2>我是h2</h2><div id="div">我是div</div><span>我是span</span><script>var div = document.getElementById('div');//1.nextSibling   下一个兄弟节点，包含了元素节点或者是文本节点等等  (了解)console.log(div.nextSibling); //下一个console.log(div.previousSibling); //上一个//2.nextElementSibling 下一个兄弟  previousElementSibling 上一个兄弟  [掌握]div.nextElementSibling.style.backgroundColor='pink'console.log(div.nextElementSibling); //下一个console.log(div.previousElementSibling); //上一个div.previousElementSibling.style.backgroundColor = 'red'</script>
</body>
</html>

4.创建添加节点

创建节点：docuemnt.createElement(tagName’);
java添加节点：node.appendChild(child);

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><ul id="ul"><li>123</li></ul><script>//1.创建节点var li = document.createElement('li');//2.添加节点到父节点var ul = document.getElementById('ul');//加入到父节点里子元素的最后ul.appendChild(li);//ul.children[1].innerHTML = '456'//添加节点var li2 = document.createElement('li');//用insertBefore(参数一是创建的新元素，参数二添加的位置)ul.insertBefore(li2,ul.children[0]); //将新的节点，加入到ul的第一个孩子的位置console.log(li);</script>
</body>
</html>

5.案例

发布留言

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>16.留言板</title><style>*{margin: 0; padding: 0;}body{padding: 100px;}textarea{width: 200px;height: 100px;border: 1px solid pink;outline: none;resize: none;  /*不让修改大小*/}ul{width: 300px;padding: 5px;background-color: rgb(245,209,243);color: #fff;font-size: 14px;margin: 15px 0;}</style>
</head>
<body><textarea name="" id="comment"></textarea><br/><button id="btn">发布</button><ul id="ul"></ul><script>//1.获取元素var btn = document.getElementById('btn');var comment = document.getElementById('comment');var ul = document.getElementById('ul');//2.注册事件btn.onclick = function(){//判断是否有输入内容if(comment.value == ''){alert('请输入内容');return false;} else {//2-1 创建元素var li = document.createElement('li');//设置内容li.innerHTML = comment.value//2-2 添加元素//ul.appendChild(li); //添加到后面ul.insertBefore(li,ul.children[0]);//添加完成后清除输入框种的内容comment.value = ''}}</script>
</body>
</html>

webAPI中的排他思想、自定义属性操作、节点操作（配大量案例练习）

一、排他操作 1.排他思想如果有同一组元素，我们想要某一个元素实现某种样式，需要用到循环的排他思想算法： 1.所有的元素全部清除样式 2.给当前的元素设置样式注意顺序能不能颠倒，首先清除全部样式，再设置自己当前的…...

编程日记 2024/10/21 23:14:00

101、QT摄像头录制视频问题

视频和音频录制类QMediaRecorder QMediaRecorder 通过摄像头和音频输入设备进行录像。注意: 使用Qt多媒体模块的摄像头相关类无法在Windows平台上进行视频录制，只能进行静态图片抓取但是在Linux平台上可以实现静态图片抓取和视频录制。 Qt多媒体模块的功能实现是依…...

编程日记 2024/10/21 23:08:52

FairGuard游戏加固全面适配纯血鸿蒙NEXT

2024年10月8日，华为正式宣布其原生鸿蒙操作系统 HarmonyOS NEXT 进入公测阶段，标志着其自有生态构建的重要里程碑。作为游戏安全领域领先的第三方服务商，FairGuard游戏加固在早期就加入了鸿蒙生态的开发，基于多项独家技术与十余年…...

编程日记 2024/10/21 23:06:49

鲸信私有化即时通信如何平衡安全性与易用性之间的关系？

即时通信已经成为我们生活中不可或缺的一部分。从日常沟通到工作协作，每一个信息的传递都承载着信任与效率。然而，随着网络安全威胁日益严峻，如何在享受即时通信便捷的同时，确保信息的私密性与安全性，成为了摆在我们面…...

编程日记 2024/10/21 23:05:48

vivado 接口带宽验证

存储器接口使用赛灵思存储器 IP 时需要更多的 I/O 管脚分配步骤。自定义 IP 之后，您可采用 Vivado IDE 中的细化 (elaborated) 或综合 (synthesized) 设计分配顶层 IP 端口到物理封装引脚。同每一个存储器 IP 关联的所有端口都被纳入一个 I/O 端口接口…...

编程日记 2024/10/21 23:04:40

Qt中使用线程之QThread

使用Qt中自带的线程类QThread时 1、需要定义一个子类继承自QThread 2、重写run()方法，在run方法中编写业务逻辑 3、子类支持信号槽 4、子类的构造函数的执行是在主线程进行的，而run方法的执行是在子线程中进行的常用方法静态方法获取线程id 可…...

编程日记 2024/10/21 23:03:39

一.关闭防火墙 systemctl stop firewalld setenforce 0 二.挂在mnt mount /dev/sr0 /mnt 三.下载nginx dnf install nginx -y 四.启动nginx协议 systemctl start nginx 五.修改协议 vim /etc/nginx/nginx.conf 在root前加#并且下一行添加 root /www:（浏…...

编程日记 2024/10/21 23:02:36

Linux重点yum源配置

1.配置在线源 2.配置本地源 3.安装软件包 4.测试yum源配置 5.卸载软件包...

编程日记 2024/10/21 22:59:33

289.生命游戏

目录题目解法代码说明： 每一个各自去搜寻他周围的信息，肯定存在冗余，如何优化这个过程？如何遍历每一个元素的邻域？方向数组如何表示方向？ auto dir : directions这是什么用法board[i][j]一共有几种状态&am…...

编程日记 2024/10/21 22:58:32

如何保证Redis和数据库的数据一致性

文章目录 0. 前言1. 补充知识：CP和AP2. 什么情况下会出现Redis与数据库数据不一致3. 更新缓存还是删除缓存4. 先操作缓存还是先操作数据库4.1 先操作缓存4.1.1 数据不一致的问题是如何产生的4.1.2 解决方法（延迟双删）4.1.3 最终一致性和强一致…...

编程日记 2024/10/21 22:57:31

Android Framework AMS（06）startActivity分析-3(补充：onPause和onStop相关流程解读)

该系列文章总纲链接：专题总纲目录 Android Framework 总纲本章关键点总结 & 说明： 说明：本章节主要解读AMS通过startActivity启动Activity的整个流程的补充，更新了startActivity流程分析部分。一般来说，有Activ…...

编程日记 2024/10/21 22:54:27

【LangChain系列2】【Model I/O详解】

目录前言一、LangChain1-1、介绍1-2、LangChain抽象出来的核心模块1-3、特点1-4、langchain解决的一些行业痛点1-5、安装二、Model I/O模块2-0、Model I/O模块概要2-1、Format（Prompts Template）2-1-1、Few-shot prompt templates2-1-2、Chat模型的少样…...

编程日记 2024/10/21 22:53:25

动态规划-子数组系列——1567.乘积为正数的最长子数组

1.题目解析题目来源：1567.乘积为正数的最长子数组——力扣测试用例 2.算法原理 1.状态表示因为数组中存在正数与负数，如果求乘积为正数的最长子数组，那么存在两种情况使得乘积为正数，第一种就是正数乘以正数，第…...

编程日记 2024/10/21 22:51:23

Linux 运行执行文件并将日志输出保存到文本文件中

在 Linux 系统中运行可执行文件并将日志输出保存到文本文件中，可以使用以下几种方法： 方法一：使用重定向符号 > 或 >> 覆盖写入（>）： ./your_executable > logfile.txt这会将可执行文件的输…...

编程日记 2024/10/21 22:50:21

注册安全分析报告：北外网校

前言由于网站注册入口容易被黑客攻击，存在如下安全问题： 暴力破解密码，造成用户信息泄露短信盗刷的安全问题，影响业务及导致用户投诉带来经济损失，尤其是后付费客户，风险巨大，造成亏损无底洞…...

编程日记 2024/10/21 22:49:18

预警期刊命运逆袭到毕业好刊，仅45天！闭眼冲速度，发文量暴增！

选刊发表不迷路，就找科检易学术期刊官网：Sustainability | An Open Access Journal from MDPI 1、期刊信息期刊简介： Sustainability 是一本国际性的、同行评审的开放获取期刊，由MDPI出版社每半月在线出版。该期刊专注于人类…...

编程日记 2024/10/21 22:48:15

【LeetCode每日一题】——523.连续的子数组和

文章目录一【题目类别】二【题目难度】三【题目编号】四【题目描述】五【题目示例】六【题目提示】七【解题思路】八【时间频度】九【代码实现】十【提交结果】一【题目类别】前缀和二【题目难度】中等三【题目编号】 523.连续的子数组和四【题目描述】给你一个…...

编程日记 2024/10/21 22:47:14

leetcode54:螺旋矩阵

给你一个 m 行 n 列的矩阵 matrix ，请按照顺时针螺旋顺序 ，返回矩阵中的所有元素。示例 1： 输入：matrix [[1,2,3],[4,5,6],[7,8,9]] 输出：[1,2,3,6,9,8,7,4,5]示例 2： 输入：matrix [[1,2,3,…...

编程日记 2024/10/21 22:45:12

全方面熟悉Maven项目管理工具（三）认识mvn的各类构建命令并创建、打包Web工程

1. POM（核心概念） 1.1 含义 POM： Project Object Model，项目对象模型。 DOM： Document Object Model，文档对象模型，和 POM 类似它们都是模型化思想的具体体现 1.2 模型化思想 POM 表示将…...

编程日记 2024/10/21 22:43:10

MySQL中查询语句的执行流程

文章目录前言流程图概述最后前言你好，我是醉墨居士，今天我们一起探讨一下执行一条查询的SQL语句在MySQL内部都发生了什么，让你对MySQL内部的架构具备一个宏观上的了解流程图概述对于查询语句的SQL的执行流程，主要可以分为…...

编程日记 2024/10/21 22:42:09

stm32G473的flash模式是单bank还是双bank？

今天突然有人stm32G473的flash模式是单bank还是双bank？由于时间太久，我真忘记了。搜搜发现，还真有人和我一样。见下面的链接：https://shequ.stmicroelectronics.cn/forum.php?modviewthread&tid644563 根据STM32G4系列参考手…...

编程新知 2025/7/8 7:08:25

1.3 VSCode安装与环境配置

进入网址Visual Studio Code - Code Editing. Redefined下载.deb文件，然后打开终端，进入下载文件夹，键入命令 sudo dpkg -i code_1.100.3-1748872405_amd64.deb 在终端键入命令code即启动vscode 需要安装插件列表 1.Chinese简化 2.ros …...

编程新知 2025/7/8 13:46:50

2021-03-15 iview一些问题

1.iview 在使用tree组件时，发现没有set类的方法，只有get，那么要改变tree值，只能遍历treeData，递归修改treeData的checked，发现无法更改，原因在于check模式下，子元素的勾选状态跟父节…...

编程新知 2025/7/6 21:12:40

【配置 YOLOX 用于按目录分类的图片数据集】

现在的图标点选越来越多，如何一步解决，采用 YOLOX 目标检测模式则可以轻松解决要在 YOLOX 中使用按目录分类的图片数据集（每个目录代表一个类别，目录下是该类别的所有图片），你需要进行以下配置步骤&#x…...

编程新知 2025/7/6 22:03:48

汇编常见指令

汇编常见指令一、数据传送指令指令功能示例说明MOV数据传送MOV EAX, 10将立即数 10 送入 EAXMOV [EBX], EAX将 EAX 值存入 EBX 指向的内存LEA加载有效地址LEA EAX, [EBX4]将 EBX4 的地址存入 EAX（不访问内存）XCHG交换数据XCHG EAX, EBX交换 EAX 和 EB…...

编程新知 2025/7/4 10:27:56