webAPI中的排他思想、自定义属性操作、节点操作（配大量案例练习）
一、排他操作
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.给当前的元素设置样式 注意顺序能不能颠倒，首先清除全部样式，再设置自己当前的…...
101、QT摄像头录制视频问题
视频和音频录制类QMediaRecorder QMediaRecorder 通过摄像头和音频输入设备进行录像。 注意: 使用Qt多媒体模块的摄像头相关类无法在Windows平台上进行视频录制，只能进行静态图片抓取但是在Linux平台上可以实现静态图片抓取和视频录制。 Qt多媒体模块的功能实现是依…...
FairGuard游戏加固全面适配纯血鸿蒙NEXT
2024年10月8日，华为正式宣布其原生鸿蒙操作系统 HarmonyOS NEXT 进入公测阶段，标志着其自有生态构建的重要里程碑。 作为游戏安全领域领先的第三方服务商，FairGuard游戏加固在早期就加入了鸿蒙生态的开发，基于多项独家技术与十余年…...
鲸信私有化即时通信如何平衡安全性与易用性之间的关系？
即时通信已经成为我们生活中不可或缺的一部分。从日常沟通到工作协作，每一个信息的传递都承载着信任与效率。然而，随着网络安全威胁日益严峻，如何在享受即时通信便捷的同时，确保信息的私密性与安全性，成为了摆在我们面…...
vivado 接口带宽验证
存储器接口 使用赛灵思存储器 IP 时需要更多的 I/O 管脚分配步骤。自定义 IP 之后，您可采用 Vivado IDE 中的细化 (elaborated) 或综 合 (synthesized) 设计分配顶层 IP 端口到物理封装引脚。同每一个存储器 IP 关联的所有端口都被纳入一个 I/O 端口接口…...
Qt中使用线程之QThread
使用Qt中自带的线程类QThread时 1、需要定义一个子类继承自QThread 2、重写run()方法，在run方法中编写业务逻辑 3、子类支持信号槽 4、子类的构造函数的执行是在主线程进行的，而run方法的执行是在子线程中进行的 常用方法 静态方法 获取线程id 可…...
多IP连接
一.关闭防火墙 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:（浏…...
Linux重点yum源配置
1.配置在线源 2.配置本地源 3.安装软件包 4.测试yum源配置 5.卸载软件包...
289.生命游戏
目录 题目解法代码说明： 每一个各自去搜寻他周围的信息，肯定存在冗余，如何优化这个过程？如何遍历每一个元素的邻域？方向数组如何表示方向？ auto dir : directions这是什么用法board[i][j]一共有几种状态&am…...
如何保证Redis和数据库的数据一致性
文章目录 0. 前言1. 补充知识：CP和AP2. 什么情况下会出现Redis与数据库数据不一致3. 更新缓存还是删除缓存4. 先操作缓存还是先操作数据库4.1 先操作缓存4.1.1 数据不一致的问题是如何产生的4.1.2 解决方法（延迟双删）4.1.3 最终一致性和强一致…...
Android Framework AMS（06）startActivity分析-3(补充：onPause和onStop相关流程解读)
该系列文章总纲链接：专题总纲目录 Android Framework 总纲 本章关键点总结 & 说明： 说明：本章节主要解读AMS通过startActivity启动Activity的整个流程的补充，更新了startActivity流程分析部分。 一般来说，有Activ…...
【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模型的少样…...
动态规划-子数组系列——1567.乘积为正数的最长子数组
1.题目解析 题目来源：1567.乘积为正数的最长子数组——力扣 测试用例 2.算法原理 1.状态表示 因为数组中存在正数与负数，如果求乘积为正数的最长子数组，那么存在两种情况使得乘积为正数，第一种就是正数乘以正数，第…...
Linux 运行执行文件并将日志输出保存到文本文件中
在 Linux 系统中运行可执行文件并将日志输出保存到文本文件中，可以使用以下几种方法： 方法一：使用重定向符号 > 或 >> 覆盖写入（>）： ./your_executable > logfile.txt这会将可执行文件的输…...
注册安全分析报告：北外网校
前言 由于网站注册入口容易被黑客攻击，存在如下安全问题： 暴力破解密码，造成用户信息泄露短信盗刷的安全问题，影响业务及导致用户投诉带来经济损失，尤其是后付费客户，风险巨大，造成亏损无底洞…...
预警期刊命运逆袭到毕业好刊，仅45天！闭眼冲速度，发文量暴增！
选刊发表不迷路，就找科检易学术 期刊官网：Sustainability | An Open Access Journal from MDPI 1、期刊信息 期刊简介： Sustainability 是一本国际性的、同行评审的开放获取期刊，由MDPI出版社每半月在线出版。该期刊专注于人类…...
【LeetCode每日一题】——523.连续的子数组和
文章目录 一【题目类别】二【题目难度】三【题目编号】四【题目描述】五【题目示例】六【题目提示】七【解题思路】八【时间频度】九【代码实现】十【提交结果】 一【题目类别】 前缀和 二【题目难度】 中等 三【题目编号】 523.连续的子数组和 四【题目描述】 给你一个…...
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,…...
全方面熟悉Maven项目管理工具（三）认识mvn的各类构建命令并创建、打包Web工程
1. POM（核心概念） 1.1 含义 POM： Project Object Model，项目对象模型。 DOM： Document Object Model，文档对象模型，和 POM 类似 它们都是模型化思想的具体体现 1.2 模型化思想 POM 表示将…...
MySQL中查询语句的执行流程
文章目录 前言流程图概述最后 前言 你好，我是醉墨居士，今天我们一起探讨一下执行一条查询的SQL语句在MySQL内部都发生了什么，让你对MySQL内部的架构具备一个宏观上的了解 流程图 概述 对于查询语句的SQL的执行流程，主要可以分为…...
【代码随想录Day47】单调栈Part02
42. 接雨水 题目链接/文章讲解：代码随想录 视频讲解：单调栈，经典来袭！LeetCode:42.接雨水_哔哩哔哩_bilibili 思路概述 问题理解：我们需要计算在给定柱子高度之间可以接住的雨水总量。雨水的量取决于柱子的高度和它们…...
Java全栈经典面试题剖析3】JavaSE面向对象2
目录 面试题2.12 Overload和Override的区别 面试题2.13 Overload方法是否可以改变返回值的类型？ 面试题2.14 为什么方法不能根据返回类型来区分重载？ 面试题2.15 构造器可不可以被重载或重写？ 面试题2.16 在 Java 中定义⼀个不做事且没有…...
@JsonIgnoreProperties做接口对接时使用带来的好处
最近看到有个同事，在代码里面加了JsonIgnoreProperties这个注解，以前还真没有经常去用过，接口对接尤其是跟金蝶、用友等第三方，这个注解在接收数据是非常好用的；接下来带大家一起了解下具体的特性和使用方式 JsonIgno…...
SpringBoot整合mybatisPlus实现批量插入并获取ID
背景：需要实现批量插入并且得到插入后的ID。 使用for循环进行insert这里就不说了，在海量数据下其性能是最慢的。数据量小的情况下，没什么区别。 【1】saveBatch(一万条数据总耗时：2478ms) mybatisplus扩展包提供的：…...
实战RAG第一天——llama_index向量索引，查询引擎，搜索知识库问答，全部代码，保姆级教学
一、llama_index简介 llama_index（以前称为 GPT Index）是一个用于构建、查询、索引大型文档和数据集的开源框架。它的核心功能是帮助开发者将大语言模型（LLM）与自己的数据集无缝集成，从而进行知识库的构建、查询等任务。llama_index 使用 Python 编写，并结合了多种大语言…...
大数据治理
大数据治理是指对大数据的管理和控制，以确保数据的质量、可用性、安全性和合规性。随着大数据技术的不断发展，企业和组织面临着越来越多的数据管理挑战，如数据质量问题、数据安全问题、数据合规问题等。大数据治理成为了企业和组织应对这些挑战的重要手段。 一、大数据治理…...
云计算作业
关闭防火墙 停用Linux 挂载 下载nginx程序 启动nginx程序 连接网卡配置文件并且修改 更改模式为静态手动，并且分别修改ip地址，网关地址，dns 激活 创建自定义文件 定义server模块 监听地址 设置目录 匹配 激活网址根目录 创建目录文…...
复制文件到U盘提示：对于目标文件系统，文件过大
查看U盘属性的文件系统是否为FAT32，需将其改为NTFS 方法一 Win R 输入cmd打开命令行，输入以下命令（注：f为U盘盘符） convert f: /fs:ntfs /x方法二 格式化U盘，右键点击U盘进行格式化，文件系…...
SpringBoot+Swagger2.7.0实现汉化（2.8.0不行）
场景 SpringBootSwagger2实现可视化API文档流程： SpringBootSwagger2实现可视化API文档流程_swagger 可视化端口-CSDN博客 上面SpringBoot中使用swagger的效果 上面使用的是swagger2.8.0,且在线API是英文的。现在要将其进行汉化。 汉化效果 实现 首先打开sprin…...
c++ 散列表
散列表（Hash Table）是一种高效的数据结构，广泛用于实现快速的键值对存储。 基本概念 散列表使用哈希函数将键映射到数组的索引。其主要优点在于平均情况下提供常数时间复杂度的查找、插入和删除操作。 哈希函数: 将键映射到一个固定大小的…...