JavaScript part2

一.前言

前面我们讲了一下js的基础语法,但是这些还是远远不够的,我们要想操作标签,实现一个动态且好看的页面,就得学会BOM和DOM,这些都是浏览器和页面的,这样我们才能实现一个好看的页面

二.BOM对象

BOM:Broswer object model,即浏览器提供我们开发者在javascript用于操作浏览器的对象。

2.1 window对象

窗口方法:

// js中最大的一个对象.整个浏览器窗口出现的所有东西都是window对象的内容.
console.log( window );

// alert()  弹出一个警告框
window.alert("hello");

//confirm  弹出一个确认框,点击确认,返回true, 点击取消,返回false
var ret = confirm("您确认要删除当前文件么?");
console.log( ret  );

// 弹出一个消息输入框,当点击确认以后,则返回可以接收到用户在输入框填写的内容.如果点击取消,则返回null
var ret = prompt("请输入一个内容","默认值");
console.log( ret );

// close() 关闭当前浏览器窗口
window.close();

//打开一个新的浏览器窗口
window.open("http://www.baidu.com","_blank","width=800px,height=500px,left=200px,top=200px";

这些都很简单,我们看一眼过就行了

定时方法:

setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。而setTimeout是在指定的毫秒数后调用code一次


// 设置循环定时器
var ID = window.setInterval(code,millisec)   // 每millisec毫秒执行一次code
// 取消循环定时器
window.clearInterval(ID);

// 设置单次定时器
var ID = window.setTimeout(code,millisec) // millisec毫秒后执行code一次
// 取消单次定时器
window.clearTimeout(ID);

这个也是非常的简单,但是我们会给大家一个定时器的小案例 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><input id='ID1' type="text">
<button onclick="begin()">开始</button>
<button onclick="end()">暂停</button><script>function showtime(){ele=document.getElementById('ID1')ele.value=new Date().toLocaleString()}var idfunction begin(){if(id===undefined){showtime()id=setInterval(showtime,1000)console.log(id)}}function end(){clearInterval(id)id=undefined;}</script></body>
</html>

最后结果长这样,想知道效果自己去测试就好了,这里为什么要判断一下id===undefined呢,这是为了防止开多个定时器,大家开控制台看打印id就知道了,当然这里有很多看不懂的大家等看完dom就都能学会啦

2.2 Location ( 地址栏)对象

这里给个案例自己品

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<button onclick="func1()">查看Location对象</button>
<button onclick="func2()">跳转到往日情怀酿作酒的博客~</button>
<button onclick="func3()">F5</button>
<script>function func1(){console.log( location );}// 地址栏对象控制和操作地址栏// 所谓的地址就是当前页面所在地址// 地址结构:// 协议://域名:端口/路径/文件名?查询字符串#锚点console.log( `协议=>${location.protocol}` );console.log( `端口=>${location.port}` );console.log( `域名=>${location.hostname}` );console.log( `域名:端口=>${location.host}` );console.log( `路径=>${location.pathname}` );console.log( `查询字符串=>${location.search}` );console.log(`完整的地址信息=>${location.href}`);function func2(){// location.href="https://blog.csdn.net/weixin_74178589?spm=1011.2124.3001.5343"; // 页面跳转location.assign("https://blog.csdn.net/weixin_74178589?spm=1011.2124.3001.5343"); // 页面跳转}function func3(){location.reload(); // 刷新页面}
</script>
</body>
</html>

2.3 本地存储对象 

使用存储对象的过程中, 对象数据会根据域名端口进行保存的,所以 js不能获取当前页面以外其他域名端口保存到本地的数据。也就是说,我们存储对象获取数据只能是自己当前端口或者域名下曾经设置过的数据,一旦端口或者域名改变,则无法获取原来的数据。

localStorage    本地永久存储
  localStorage.setItem("变量名","变量值");   保存一个数据到存储对象
  localStorage.变量名 = 变量值               保存一个数据到存储对象

  localStorage.getItem("变量名")   获取存储对象中保存的指定变量对应的数据
  localStorage.变量名              获取存储对象中保存的指定变量对应的数据

  localStorage.removeItem("变量名")   从存储对象中删除一个指定变量对应的数据
  localStorage.clear()               从存储对象中删除所有数据

sessionStorage  本地会话存储
  sessionStorage.setItem("变量名","变量值");   保存一个数据到存储对象
  sessionStorage.变量名 = 变量值               保存一个数据到存储对象

  sessionStorage.getItem("变量名")   获取存储对象中保存的指定变量对应的数据
  sessionStorage.变量名              获取存储对象中保存的指定变量对应的数据

  sessionStorage.removeItem("变量名")   从存储对象中删除一个指定变量对应的数据
  sessionStorage.clear()               从存储对象中删除所有数据

localStorage和sessionStorage的区别:

1、localStorage和sessionStorage一样都是用来存储客户端临时信息的对象。

2、他们均只能存储字符串类型的对象(虽然规范中可以存储其他原生类型的对象,但是目前为止没有浏览器对其进行实现)。

3、localStorage生命周期是永久,这意味着除非用户显示在浏览器提供的UI上清除localStorage信息,否则这些信息将永远存在。sessionStorage生命周期为当前窗口或标签页,一旦窗口或标签页被永久关闭了,那么所有通过sessionStorage存储的数据也就被清空了。

4、不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的 localStorage(页面属于相同域名和端口),但是不同页面或标签页间无法共享sessionStorage的信息。这里需要注意的是,页面及标 签页仅指顶级窗口,如果一个标签页包含多个iframe标签且他们属于同源页面,那么他们之间是可以共享sessionStorage的。

三.DOM对象(JS核心)

DOM document Object Model 文档对象模型

整个html文档,会保存一个文档对象document
console.log( document ); // 获取当前文档的对象

 3.1 查找标签

直接查找标签:

document.getElementsByTagName("标签名")
document.getElementById("id值")
document.getElementsByClassName("类名")

其中getelement返回的是标签对象,而getelements返回的是数组对象

导航查找标签:

elementNode.parentElement           // 父节点标签元素
elementNode.children                // 所有子标签
elementNode.firstElementChild       // 第一个子标签元素
elementNode.lastElementChild        // 最后一个子标签元素
elementNode.nextElementSibling     // 下一个兄弟标签元素
elementNode.previousElementSibling  // 上一个兄弟标签元素

CSS选择器查找:

document.querySelector("css选择器")  //根据css选择符来获取查找到的第一个元素,返回标签对象(dom对象)
document.querySelectorAll("css选择器"); // 根据css选择符来获取查找到的所有元素,返回数组

3.2 绑定事件

静态绑定 :直接把事件写在标签元素中。

<div id="div" οnclick="foo(this)">click</div>

<script>
    function foo(self){           // 形参不能是this,这个self就代表这个标签
        console.log("foo函数");
        console.log(self);
    }
</script>

 动态绑定:在js中通过代码获取元素对象,然后给这个对象进行后续绑定。

<p id="i1">往日情怀酿作酒</p>

<script>

    var ele=document.getElementById("i1");

    ele.οnclick=function(){
        console.log("ok");
        console.log(this);    // this直接用,代表的就是这个对象
    };

</script>

多个标签绑定事件

<ul>
  <li>请关注</li>
  <li>往日情怀酿作酒</li>
  <li>谢谢</li>
</ul>


<script>

  eles=document.querySelectorAll('ul li')
  for(var i=0;i<eles.length;i++){
    eles[i].οnclick=function (){
      console.log(this.innerHTML)
      // console.log(eles[i].innerHTML) //这个会报错
    }
  }
  // console.log(i) //这里打印i会发现等于3

</script>

这个就能体现出this的重要性

 3.3 操作标签

<标签名 属性1=“属性值1” 属性2=“属性值2”……>文本</标签名> 

文本操作:

<div class="c1"><span>click</span></div><script>var ele =document.querySelector(".c1");ele.onclick = function (){// 查看标签文本console.log(this.innerHTML)console.log(this.innerText)// this.innerText='往日情怀酿作酒'this.innerHTML = "<a href='https://blog.csdn.net/weixin_74178589?spm=1011.2124.3001.5343'>往日情怀酿作酒</a>"}</script>

大家可以测试一下,发现innerText和innerHTML的区别就是,前者是一个纯文本,后者会识别标签,然后把标签给识别上去

value操作:

像input标签,select标签以及textarea标签是没有文本的,但是显示内容由value属性决定  

 

<input id="i1" type="text"><script>ele=document.getElementById('i1');ele.click=function (){console.log(this.value)this.value='往日情怀酿作酒'console.log(this.value)}

这个就是当我们点击文本框的时候文本内容就会改变

css样式操作:

<h1>往日情怀酿作酒</h1><script>ele=document.getElementsByTagName('h1');ele[0].οnclick=function (){this.style.color='red'}</script>

这个就是点击变成红色,其实这个也就是操作了节点里面的style属性

属性操作:

elementNode.setAttribute("属性名","属性值")    
elementNode.getAttribute("属性名")       
elementNode.removeAttribute("属性名"); 

 并不是所有属性都可以像value那样操作。

class属性操作**

elementNode.className
elementNode.classList.add
elementNode.classList.remove

因为class是特殊的一个属性,所以有专门的方法,有了这个就能实现很多功能,例如商品:

 

这个就是这么实现的通过改变class属性实现的

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>*{margin: 0;padding: 0;}.tab{width: 800px;height: 300px;/*border: 1px solid red;*/margin: 200px auto;}.tab ul{list-style: none;}.tab-title{background-color: #f7f7f7;border: 1px solid #eee;border-bottom: 1px solid #e4393c;}.tab .tab-title li{display: inline-block;padding: 10px 25px;font-size: 14px;}li.current {background-color: #e4393c;color: #fff;cursor: default;}.hide{display: none;}</style>
</head>
<body><div class="tab"><ul class="tab-title"><li class="current" index="0">商品介绍</li><li class="" index="1">规格与包装</li><li class="" index="2">售后保障</li><li class="" index="3">商品评价</li></ul><ul class="tab-content"><li>商品介绍...</li><li class="hide">规格与包装...</li><li class="hide">售后保障...</li><li class="hide">商品评价...</li></ul>
</div><script>var titles = document.querySelectorAll(".tab-title li");var contents = document.querySelectorAll(".tab-content li");for (var i = 0;i<titles.length;i++){titles[i].onclick = function () {// (1) 触发事件标签拥有current样式for (var j = 0;j<titles.length;j++){titles[j].classList.remove("current")}console.log(this);this.classList.add("current");// (2) 显示点击title对应的详情内容var index = this.getAttribute("index");// console.log(this.getAttribute("index"));// console.log(contents[index]);for (var z = 0;z<contents.length;z++){contents[z].classList.add("hide");}contents[index].classList.remove("hide");}}</script></body>
</html>

 这个代码直接给大家,就不过多赘述了

节点操作 :

// 创建节点:
document.createElement("标签名")
// 插入节点
somenode.appendChild(newnode)             // 追加一个子节点(作为最后的子节点)
somenode.insertBefore(newnode,某个节点)   // 把增加的节点放到某个节点的前边
// 删除节点
somenode.removeChild():获得要删除的元素,通过父元素调用删除
//替换节点
somenode.replaceChild(newnode, 某个节点);

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>img{display: block;}</style></head>
<body><button class="add_btn">添加节点</button>
<button class="del_btn">删除节点</button>
<button class="replace_btn">替换节点</button>
<div class="c1"><h3 class="c2">往日情怀酿作酒</h3>
</div><script>father=document.querySelector('.c1')add=document.getElementsByClassName('add_btn')[0];del=document.getElementsByClassName('del_btn')[0];replace=document.getElementsByClassName('replace_btn')[0]add.onclick=function (){var ele=document.createElement("h3")ele.innerText='往日情怀酿作酒'console.log(ele)father.appendChild(ele)}del.onclick=function (){ele=document.querySelector('.c1').firstElementChildconsole.log(ele)if(ele){father.removeChild(ele)}}replace.onclick=function (){ele=document.querySelector('.c1 h3:first-of-type')console.log(ele)if(ele){re_ele=document.createElement("img")re_ele.src='https://www.keaitupian.cn/cjpic/frombd/2/253/3246004806/1427273025.jpg'console.log(ele)father.replaceChild(re_ele,ele)}}</script></body>
</html>

这个就是很好的一个替换删除的例子 

 

效果大致如下

3.4 常见事件

onload事件:

这个就是当我们加载完所有的文档之后触发的,举个例子就是当我们把script写在文档的上面,如果涉及了dom操作就会因为找不到标签而报错,但是当我们把所有代码放在onload里面的话就会有问题啦,他会等到加载完文档再执行onload里面的内容

onsubmit事件:

于处理表单提交时的操作。当用户提交一个表单时,可以通过这个事件执行特定的 JavaScript 代码,比如验证输入数据、取消提交等 

 onchange事件

用于在输入元素(如 <input>, <select>, 或 <textarea>)的值发生改变时触发。当用户改变输入的内容并移开焦点时,该事件会被触发

onmouse事件:

onmouse 事件系列是 JavaScript 中用于处理与鼠标相关的交互的事件。这些事件包括 onmouseoveronmouseoutonmousemoveonclickondblclickonmousedownonmouseup

onkey事件: 

onkey 事件系列是 JavaScript 中用于处理与键盘交互的事件。主要的键盘事件包括 onkeydownonkeyuponkeypress

onblur和onfocus事件 :

onbluronfocus 是 JavaScript 中用于处理元素获得或失去焦点的事件。这些事件通常用于表单元素,如输入框和文本区域,以增强用户体验

冒泡事件 :

<div class="c1">
    <div class="c2"></div>
</div>


<script>

    var ele1 = document.querySelector(".c1");
    ele1.onclick = function () {
        alert("c1区域")
    };

    var ele2 = document.querySelector(".c2");
    ele2.onclick = function (event) {
        alert("c2区域");
        
        // 如何阻止事件冒泡
        event.stopPropagation();
    }

</script>

这个就是如果子标签再父标签里面,两个都绑定了同一个事件,当两个同时触发同一个事件的时候,子标签也会触发父标签的内容,这样当我们使用event.stopPropagation()就会阻止冒泡事件

四.总结


 

五.补充 

这里给大家一个前端的员工关系代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.box {width: 80%;height: 270px;margin: 20px auto;}.box td{width: 180px;text-align: center;}.box input{padding: 5px 5px;height: 20px;}</style>
</head>
<body><h3>员工管理系统</h3><div class="box"><table border="1" cellpadding="5px" ><thead><tr><th>姓名</th><th>年龄</th><th>部门</th><th>删除</th><th>编辑</th></tr></thead><tbody class="tbody"><tr><td>张三</td><td>23</td><td>销售</td><td><button onclick="del_tr(this)">删除</button></td><td><button onclick="edit_tr(this)">编辑</button></td></tr><tr><td>李四</td><td>21</td><td>销售</td><td><button onclick="del_tr(this)">删除</button></td><td><button onclick="edit_tr(this)">编辑</button></td></tr><tr><td>王五</td><td>23</td><td>运营</td><td><button onclick="del_tr(this)">删除</button></td><td><button onclick="edit_tr(this)">编辑</button></td></tr></tbody></table>
</div><fieldset class="add-box"><legend>添加员工</legend><p>姓名:<input type="text" class="name"></p><p>年龄:<input type="text" class="age"></p><p>部门:<select name="" id="i1"><option value="销售">销售部</option><option value="运营">运营部</option><option value="财务">财务部</option></select></p><button class="add">添加</button>
</fieldset><script>var add = document.querySelector(".add");var tbody = document.querySelector(".tbody");add.onclick = function () {var inputs = document.querySelectorAll(".add-box input");var tr = document.createElement("tr");for (var i = 0; i < inputs.length; i++) {var td = document.createElement("td"); // <td></td>td.innerHTML = inputs[i].value;tr.appendChild(td);// 清空inputs[i].value = ""}var s = document.querySelector("#i1");td = document.createElement("td");td.innerHTML = s.value;tr.appendChild(td);// 添加删除按钮var button = document.createElement("button");button.innerHTML = "删除";button.setAttribute("onclick", "del_tr(this)");td = document.createElement("td");td.appendChild(button);tr.appendChild(td);// 添加编辑按钮button = document.createElement("button");button.innerHTML = "编辑";button.setAttribute("onclick", "edit_tr(this)");td = document.createElement("td");td.appendChild(button);tr.appendChild(td);tbody.appendChild(tr);};function del_tr(self) {var tr = self.parentElement.parentElement;tbody.removeChild(tr);}function edit_tr(self) {self.innerHTML = "保存";self.setAttribute("onclick","save(this)");console.log(self.parentElement.parentElement.children);var children_td = self.parentElement.parentElement.children;for(var i=0;i<children_td.length-2;i++){var inp = document.createElement("input");inp.setAttribute("type","text");// inp.value = children_td[i].innerHTML;inp.setAttribute("value",children_td[i].innerHTML);console.log("::",inp);children_td[i].innerHTML = "";children_td[i].appendChild(inp);}}function save(self) {self.innerHTML = "编辑";self.setAttribute("onclick","edit_tr(this)");var children_td = self.parentElement.parentElement.children;for(var i=0;i<children_td.length-2;i++){children_td[i].innerHTML = children_td[i].firstElementChild.value}}</script></body>
</html>

 

至此,我们js的基础就全部讲完了,下一节就和大家说jquery,来完善一下我们所学前端的内容

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/56798.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Radar Fields: Frequency-Space Neural Scene Representations for FMCW Radar 笔记

Code 主要思想 文章提出了一种新的神经场表示方法——Radar Fields&#xff0c;用于从FMCW&#xff08;调频连续波&#xff09;雷达数据中恢复场景几何信息。与以往的依赖于光学成像&#xff08;如RGB相机和LiDAR&#xff09;的神经场方法不同&#xff0c;该研究利用了雷达的…

高级网络互联技术:AS3001与AS3000的路由交换方案

✅作者简介&#xff1a;2022年博客新星 第八。热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 &#x1f49e;当前专栏…

基于SSM的智能养生平台管理系统源码带本地搭建教程

技术栈与架构 技术框架&#xff1a;采用SSM&#xff08;Spring Spring MVC MyBatis&#xff09;作为后端开发框架&#xff0c;结合前端技术栈layui、JSP、Bootstrap与jQuery&#xff0c;以及数据库MySQL 5.7&#xff0c;共同构建项目。 运行环境&#xff1a;项目在JDK 8环境…

HarmonyOS 5.0应用开发——应用打包HAP、HAR、HSP

【高心星出品】 目录 应用打包HAP、HAR、HSPModule类型HAPHAR创建HAR建立依赖HAR共享内容 HSP创建HSP建立依赖同上HSP共享内容同上 HAR VS HSP 应用打包HAP、HAR、HSP 一个应用通常会包含多种功能&#xff0c;将不同的功能特性按模块来划分和管理是一种良好的设计方式。在开发…

【mysql】4-2. MySQL存储结构

MySQL存储结构 1 什么是表空间⽂件&#xff1f; 解答问题 表空间⽂件是⽤来存储表中数据的⽂件&#xff0c;表空间⽂件的⼤⼩由存储的数据多少决定&#xff0c;不同的表空间⽂件存储数据的种类也有所不同&#xff0c;在MySQL中表空间分为五类&#xff0c;包括&#xff1a;系统…

Python | Leetcode Python题解之第514题自由之路

题目&#xff1a; 题解&#xff1a; Test "godding" target "d"i 0left i lc 0 right i rc 0while Test[left] ! target:left - 1lc 1if left -1:left len(Test) - 1while Test[right] ! target:right 1rc 1if right len(Test):right 0prin…

vue3报错:找不到模块“element-plus”或其相应的类型说明

1.问题复现 2.首先去检查一下package.json中是否安装了element-plus 3.存在&#xff0c;就是另一个问题&#xff0c;模块没有被导出来 a.此时需要建立一个.d.ts文件&#xff08;在package.json同级目录下&#xff09; 4.写入代码保存&#xff0c;即可解决报错问题 declare mo…

安卓在windows连不上fastboot问题记录

fastboot在windows连不上fastboot 前提是android studio安装 google usb driver 搜索设备管理器 插拔几次找安卓设备 在其他设备 或者串行总线设备会出现安卓 右键更新驱动 下一步下一步然后可以了

计算机前沿技术-人工智能算法-大语言模型-最新研究进展-2024-10-21

计算机前沿技术-人工智能算法-大语言模型-最新研究进展-2024-10-21 目录 文章目录 计算机前沿技术-人工智能算法-大语言模型-最新研究进展-2024-10-21目录1. The Fair Language Model Paradox摘要研究背景问题与挑战如何解决创新点算法模型实验效果重要数据与结论推荐阅读指数&…

海外媒体发稿:如何打造媒体发稿策略

新闻媒体的发稿推广策略对于提升品牌知名度、吸引流量以及增加收入非常重要。本文将介绍一套在21天内打造爆款新闻媒体发稿推广策略的方法。 第一天至第七天&#xff1a;明确目标和定位 在这个阶段&#xff0c;你需要明确你的目标和定位&#xff0c;以便为你的新闻媒体建立一个…

群晖系统基本命令

切换超级管理员 sudo -i 查询系统 运行的所有服务 synoservicecfg --list 启动服务命令(该命令需要使用超级管理员) #老版本群晖使用synoservice命令 synoservice --start 服务名称#新版本群晖使用systemctl命令 systemctl start 服务名称 synoservice所管理的服务配置文…

Spring Cloud微服务

Spring Cloud 是一个专注于微服务架构的一站式解决方案&#xff0c;它通过整合多个优秀的开源框架和工具&#xff0c;为开发者提供了构建、管理和维护微服务系统所需的全方位支持。以下是关于 Spring Cloud 微服务的详细介绍&#xff1a; 基本概念 微服务架构&#xff1a;微服务…

Maven的依赖

一、依赖的基本配置 根元素project下的dependencies可以包含多个 dependence元素&#xff0c;以声明多个依赖。每个依赖都应 该包含以下元素&#xff1a; 1. groupId, artifactId, version : 依赖的基本坐标&#xff0c; 对于任何⼀个依赖来说&#xff0c;基本坐标是最…

【GIT】Visual Studio 中 Git 界面中, 重置 和 还原

在 Visual Studio 的 Git 界面中&#xff0c;“重置” 和 “还原” 是两个常用的 Git 操作。它们的主要区别在于应用场景和影响范围。 1. 重置&#xff08;Reset&#xff09; 重置用于更改当前分支的提交历史&#xff0c;通常用于撤销或删除某些提交。重置操作可能会更改 Git…

Flink CDC系列之:调研应用Flink CDC将 ELT 从 MySQL 流式传输到 StarRocks方案

Flink CDC系列之&#xff1a;调研应用Flink CDC将 ELT 从 MySQL 流式传输到 StarRocks方案 准备准备 Flink Standalone 集群准备 docker compose为 MySQL 准备记录使用 Flink CDC CLI 提交作业 同步架构和数据更改路由变更清理 本教程将展示如何使用 Flink CDC 快速构建从 MySQ…

[Ansible实践笔记]自动化运维工具Ansible(二):Ansible的playbook及角色

Ansible playbook&#xff08;剧本&#xff09; 详情请参考[Ansible实践笔记]自动化运维工具Ansible&#xff08;一&#xff09;&#xff1a;初探ansible&ansible的点对点模式 文章目录 Ansible playbook&#xff08;剧本&#xff09;介绍核心字段环境配置案例&#xff1…

React--》掌握Valtio让状态管理变得轻松优雅

Valtio采用了代理模式&#xff0c;使状态管理变得更加直观和易于使用&#xff0c;同时能够与React等框架无缝集成&#xff0c;本文将深入探讨Valtio的核心概念、使用场景以及其在提升应用性能中的重要作用&#xff0c;帮助你掌握这一强大工具&#xff0c;从而提升开发效率和用户…

【Go语言】

type关键字的用法 定义结构体定义接口定义类型别名类型定义类型判断 别名实际上是为了更好地理解代码/ 这里要分点进行记录 使用传值的例子&#xff0c;当两个类型不一样需要进行类型转换 type Myint int // 自定义类型&#xff0c;基于已有的类型自定义一个类型type Myin…

用kali入侵 DarkHole_2测试

进入kali系统调出root交互式界面 netdiscover -r 000.000.000.000/24 -------局域网探测IP工具 nmap 设备端口扫描 发现两个攻击点一个是80端口的Http 一个是22端口的ssh 发现有许多GIT文件 可能会出现git源码泄露 使用githack URL 命令还原git源文件 打开面板控制命令行 输入…

2.插入排序(斗地主起牌)

一、思想 扑克牌起牌 代码&#xff1a; 二、时间复杂度&#xff1a; 最好情况&#xff08;已经排序好的&#xff09;&#xff1a;T O(N) 最坏情况&#xff08;完全逆序&#xff09;&#xff1a;T O(N^2) 三、优劣&#xff1a; 严格的大小比较之后才进行错位插入&#x…