JavaScript基础（BOM对象、DOM节点、表单）
BOM对象
浏览器介绍
BOM：浏览器对象模型
- IE
- Chrome
- Safari
- FireFox
三方
- QQ浏览器
- 360浏览器
window对象
window代表浏览器窗口
window.innerHeight
734
window.innerWidth
71
window.outerHeight
823
window.outerWidth
782
Navigator对象（不常用）
navigator.appName //获得当前应用名
'Netscape'
navigator.appVersion //当前浏览器的版本
'5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36 Edg/133.0.0.0'
navigator.userAgent
'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36 Edg/133.0.0.0'
navigator.platform //获得系统版本
'Win32'
注：navigator对象，可被人为修改，不建议使用这些属性来判断和编写代码
screen代表屏幕的尺寸
screen.width
1536px
screen.height
864px
location代表当前页面的url信息
location
host: "www.baidu.com" //主机
href: "https://www.baidu.com/" //当前位置指向
protocol: "https:" //协议
reload: ƒ reload() //刷新网页方法
//设置新的地址
location.assign('http://xxx.xxx.com')
document当前页面信息
HTML DOM文档树
1.document.title //获得标题信息
2.获取具体的文档树节点
<body>
<dl id="lean"><dt>Java</dt><dd>JavaSE</dd><dd>JavaEE</dd>
</dl>
<script>'use strict'let dl=document.getElementById('lean');
</script>
</body>
3.获取cookie
document.cookie
服务器端可以设置cookie:httpOnly
4.history代表浏览器的历史记录
history.back() //后退
history.forward() //前进
DOM节点
DOM：文档对象模型
浏览器网页就是一个DOM树形结构
- 更新：更新Dom节点
- 遍历Dom节点：得到Dom节点
- 删除：删除一个Dom节点
- 添加：添加一个新的节点
要操作一个Dom节点，就必须先要获得Dom节点
获得Dom节点
document.getElementsByTagName("标签名")
document.getElementById("id名")
document.getElementsByClassName("类名")
<body>
<h1>标题一</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
<script>var h1=document.getElementsByTagName("h1")//获得Hh1标签节点var p1=document.getElementById("p1");//获得id选择器p1的节点var p2=document.getElementsByClassName("p2");//获得类选择器p2的节点
</script>
</body> 
父节点选择器名.children，根据父节点获取子节点
father.children //获取所有子节点
father.firstChild //获取第一个子节点
father.lastChild //获取最后一个子节点
nextSibling //同一树级别上的下一个节点
以上为原生代码，后期使用jQuery
更新DOM节点
innerText：修改文本的值
id1.innerText='459'
innerHTML：可以解析HTML文本标签
id1.innerHTML='<strong>456<strong>'
style：修改样式，需要操作JS
注意：
- 属性值使用字符串
- -转驼峰命名
<body>
<div id="id1"></div>
<script>var id1=document.getElementById('id1');id1.innerText='abc'; //修改id1节点的文本内容为abc
</script>
</body>id1.style.color='red' //将id1节点字体修改为红色
应用:找到id
获取DOM节点，并设置样式
删除DOM节点
删除节点：
- 获取父节点
- 通过父节点删除自己
parentElement:获取父节点
p1.parentElement //通过子节点获取父节点
removeChild（）：删除子节点
father.removeChild(p1) //通过父节点father删除子节点p1
综上：
<body>
<div id="father"><h1>标题一</h1><p id="p1">p1</p><p class="p2">p2</p>
</div>
<script>var p1=document.getElementById("p1");//获得id选择器p1的节点var father=p1.parentElement;//找到p1的父节点并命名为fatherfather.removeChild(p1)//删除父节点father的子节点p1
</script>
</body>法二：通过父节点利用下标找到子节点
若想删除其中某个节点，如第一个节点，如下：
father.removeChild(father.children[0])
注意：删除多个节点时，children是时刻在变，下标会重新排序
插入DOM节点
我们获得某个DOM节点，假设这个DOM节点是空的，我们可以通过inner HTML就可以增加一个元素，若DOM节点原本就存在元素，不可用inner HTML，因为会导致原先的元素被覆盖。
appendChild（）：追加
list.appendChild(js) //将js节点移动到list的子节点中
1.将id选择器js添加到list选择器的子节点中（在已存在的节点中操作）
createElement（）：创建新节点
2.创建新的节点
document.createElement（） //创建新标签
<body>
<p id="js">JavaScript</p>
<div id="list"><p id="se">JavaSE</p><p id="ee">JavaEE</p><p id="me">JavaME</p>
</div>
<script>var list=document.getElementById('list');var newP= document.createElement('p');//创建一个p标签newP.id='newP';//为p标签设置id为newPnewP.innerText='Hello,World！';//为p标签添加文字list.appendChild(newP);//将id为newP节点添加到list节点下
</script>
</body>
创建一个标签节点：通过setAttribute（key,value）属性，可以设置任意的值
利用JS为背景设置颜色
//创建style标签var myStyle=document.createElement('style');//创建空style标签myScript.setAttribute('type','text/css');//设置标签内容myStyle.innerHTML='body{ background-color: red;}';//为body设置红色背景document.getElementsByTagName('head')[0].appendChild(myStyle);//将style节点设置到head节点下
insertBefore(newNode,targetNode)：在目标节点前插入某节点
在list节点下的ee节点前插入js节点
list.insertBefore(js,ee);
<body>
<p id="js">JavaScript</p>
<div id="list"><p id="se">JavaSE</p><p id="ee">JavaEE</p><p id="me">JavaME</p>
</div>
<script >var js=document.getElementById('js');var list=document.getElementById('list');var ee=document.getElementById('ee');
//insertBefore(newNode,targetNode)list.insertBefore(js,ee);
</script>
</body>
操作表单（验证）
表单form也是DOM树内的一个节点
- 文本框 text
- 下拉框 select
- 单选框 radio
- 多选框 checkbbox
- 隐藏域 hidden
- 密码框 password
表单的目的：提交信息
DOM节点.value：获得要提交的信息
input_test.value
给表单赋值：
单选框与多选框取值：
1.错误示范：对于单选框和多选框，boy_radio.value只能取到当前的值
2.只能通过if判断，当单选框被选中时，boy_radio.checked会返回true，如下：
提交表单
未加密情况下，在抓包时，可以看见表单提交的信息
function aaa() {var uname=document.getElementById('username');var upwd=document.getElementById('pwd');console.log(uname.value);console.log(upwd.value);}
1.通过绑定事件onclick被点击，利用MD5加密
<head><meta charset="UTF-8"><title>提交表单</title><!--md5工具类--><script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<form action="#" method="post"><p><span>用户名：<input type="text" id="username" name="username"></span></p><p><span>密码：<input type="password" id="pwd" name="pwd"></span></p><!--绑定事件 onclick 被点击--><button type="submit" onclick="aaa()">提交</button>
</form>
<script>function aaa() {var uname=document.getElementById('username');var upwd=document.getElementById('pwd');console.log(uname.value);console.log(upwd.value);//md5算法pwd.value=md5(pwd.value)console.log(upwd.value);}
</script>
</body>
2.利用onsubmit绑定一个提交检查的函数
onsubmit事件是HTML表单中的一个重要事件，它在表单提交时被触发。这个事件通常用于在发送数据到服务器之前执行JavaScript验证。
jQuery
jQuery库，里面存在大量的JavaScript函数
引入jQueryCDN
在HTML文件中引入
使用方法：
$(CSS选择器).事件（）
辅助文档：http://jquery3.yanzhihui.com/index.html
事件：
鼠标事件、键盘事件、其他 事件等，可在辅助文档 中查看
- mousedown() 按下
- mousemove() 移动
相关文章：
JavaScript基础（BOM对象、DOM节点、表单）
BOM对象 浏览器介绍 BOM：浏览器对象模型 IEChromeSafariFireFox 三方 QQ浏览器360浏览器 window对象 window代表浏览器窗口 window.innerHeight 734 window.innerWidth 71 window.outerHeight 823 window.outerWidth 782 Navigator对象（不常用&am…...
Java Junit框架
JUnit 是一个广泛使用的 Java 单元测试框架，用于编写和运行可重复的测试。它是 xUnit 家族的一部分，专门为 Java 语言设计。JUnit 的主要目标是帮助开发者编写可维护的测试代码，确保代码的正确性和稳定性。 JUnit 的主要特点 注解驱动&…...
23种设计模式之《备忘录模式（Memento）》在c#中的应用及理解
程序设计中的主要设计模式通常分为三大类，共23种： 1. 创建型模式（Creational Patterns） 单例模式（Singleton）：确保一个类只有一个实例，并提供全局访问点。 工厂方法模式࿰…...
Seaborn知识总结
1、简介 （1）高级接口：Seaborn 提供了一组高级函数和方法，可以使得创建常见的统计图表变得简单，例如散点图、线性回归图、箱线图、直方图、核密度估计图、热图等等。无需像 Matplotlib 一样写大量的代码； …...
flowable中用户相关api
springboot引入flowable：高版本mysql报错 <!-- https://mvnrepository.com/artifact/org.flowable/flowable-spring-boot-starter --><dependency><groupId>org.flowable</groupId><artifactId>flowable-spring-boot-starter</art…...
java后端开发day23--面向对象进阶（四）--抽象类、接口、内部类
（以下内容全部来自上述课程） 1.抽象类 父类定义抽象方法后，子类的方法就必须重写，抽象方法在的类就是抽象类。 1.定义 抽象方法 将共性的行为（方法）抽取到父类之后。由于每一个子类执行的内容是不一样…...
安装 Open WebUI
2025.03.01 早上 我已经安装了ollama 和deeseek模型 （本地部署流水账之ollama安装Deepseek安装-CSDN博客），然后需要个与模型沟通的工具（这么说不知道对不对）。 刚开始用的chatbox，安装很方便，…...
Llama 2中的Margin Loss：为何更高的Margin导致更大的Loss和梯度？
Llama 2中的Margin Loss：为何更高的Margin导致更大的Loss和梯度？ 在《Llama 2: Open Foundation and Fine-Tuned Chat Models》论文中，作者在强化学习与人类反馈（RLHF）的Reward Model训练中引入了Margin Loss的概念&a…...
【后端】Docker一本通
长期更新补充，建议关注收藏点赞 目录 Docker概述安装部署Docker基本操作使用docker部署tomcat使用docker部署mysql Docker概述 docker是⼀个应⽤级隔离的虚拟化技术docker三大核心概念 镜像：是具有源的所有特征的⼀个标记⽂件 仓库：存放镜像…...
工程化与框架系列（13）--虚拟DOM实现
虚拟DOM实现 🌳 虚拟DOM（Virtual DOM）是现代前端框架的核心技术之一，它通过在内存中维护UI的虚拟表示来提高渲染性能。本文将深入探讨虚拟DOM的实现原理和关键技术。 虚拟DOM概述 🌟 💡 小知识࿱…...
数据结构之各类排序算法代码及其详解
1. 排序的概念 排序是一种常见的算法概念，用于将一组数据按照特定的顺序进行排列。排序算法的目的是将一组数据按照递增或递减的顺序重新排列。常见的排序算法包括冒泡排序、插入排序、选择排序、快速排序、归并排序等。排序算法的选择通常取决于数据规模、数据分布…...
【洛谷贪心算法】P1090合并果子
为了使消耗的体力最小，每次都应该选择当前重量最小的两堆果子进行合并。可以使用优先队列（小根堆）来实现这个过程，优先队列可以自动维护元素的顺序，每次取出堆顶的两个元素（即最小的两个元素）进…...
【告别双日期面板！一招实现el-date-picker智能联动日期选择】
告别双日期面板！一招实现el-date-picker智能联动日期选择 1.需求背景2.DateTimePicker 现状图3.日期选择器实现代码4.日期选择器实现效果图5.日期时间选择器实现代码6.日期时间选择器实现效果图 1.需求背景 在用户使用时间查询时，我们经常需要按月份筛选…...
现今大语言模型性能（准确率）比较
现今大语言模型性能（准确率）比较 表头信息：表的标题为“大语言模型性能比较结果”（英文：Table 1: Large Language Model Performance Comparison Results），表明该表是用于对比不同大语言模型的性能。列信息： 模型：列出参与比较的不同大语言模型名称，包括LLAMA3（70B）…...
程序诗篇里的灵动笔触：指针绘就数据的梦幻蓝图（水文，勿三）
大家好啊，我是小象٩(๑ω๑)۶ 我的博客：Xiao Xiangζั͡ޓއއ 很高兴见到大家，希望能够和大家一起交流学习，共同进步。 这一节我们来学习指针的相关知识，学习内存和地址，指针变量和地址，包…...
在 UniApp 中实现中间凸起 TabBar 的完整指南
如何在 UniApp 中设置中间 TabBar 凸起效果 在移动应用开发中，TabBar 是常见的导航组件，而中间凸起的 TabBar 按钮则是一种流行的设计风格，常用于突出重要功能（如发布、拍照等）。UniApp 提供了 midButton 属性&#x…...
Redis大key
Redis大key基本概念，影响 Redis 大 key 指在 Redis 中存储了大量数据的键，它会对 Redis 的性能和内存管理产生影响。 大key的定义与value的大小和元素数量有关，但这个定义并不是绝对的，而是相对的，具体取决于系统的使用…...
WPF高级 | WPF 与数据库交互：连接、查询与数据更新
WPF高级 | WPF 与数据库交互：连接、查询与数据更新 前言一、数据库交互基础概念1.1 数据库简介1.2 数据访问技术 二、WPF 与数据库连接2.1 连接字符串2.2 建立连接 三、WPF 中的数据查询3.1 使用ADO.NET进行数据查询3.2 使用 Entity Framework 进行数据查询3.3 使用…...
CogBlobTool工具
CogBlobTool是一款专用于图像斑点检测于分析的 工具，通过灰度值阈值分割和特征过滤，帮助在复杂背景中提取目标区域，并计算几何属性。 效果图 注意：在这里只有一张图像可以不使用模板匹配工具 CogBlobTool工具的功能 斑点检测于…...
C# WinForm程序中如何调试dll接口
公司的SF系统是自主开发的。不同的机种会有不同数据记录保存的需求，尤其是客户SQE更是各种奇思妙想......于是做了一个接口，实践之下效果还不错呢。 每每总是忘记怎么调试接口，特记录下备查。首先要将， 1 DLL项目与WinForms项目…...
eNSP-Cloud(实现本地电脑与eNSP内设备之间通信)
说明： 想象一下，你正在用eNSP搭建一个虚拟的网络世界，里面有虚拟的路由器、交换机、电脑（PC）等等。这些设备都在你的电脑里面“运行”，它们之间可以互相通信，就像一个封闭的小王国。 但是&#…...
基于大模型的 UI 自动化系统
基于大模型的 UI 自动化系统 下面是一个完整的 Python 系统，利用大模型实现智能 UI 自动化，结合计算机视觉和自然语言处理技术，实现"看屏操作"的能力。 系统架构设计 #mermaid-svg-2gn2GRvh5WCP2ktF {font-family:"trebuchet ms",verdana,arial,sans-…...
R语言AI模型部署方案：精准离线运行详解
R语言AI模型部署方案：精准离线运行详解 一、项目概述 本文将构建一个完整的R语言AI部署解决方案，实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点： 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...
逻辑回归：给不确定性划界的分类大师
想象你是一名医生。面对患者的检查报告（肿瘤大小、血液指标），你需要做出一个**决定性判断**：恶性还是良性？这种“非黑即白”的抉择，正是**逻辑回归（Logistic Regression）** 的战场&a…...
Spring Boot+Neo4j知识图谱实战：3步搭建智能关系网络！
一、引言 在数据驱动的背景下，知识图谱凭借其高效的信息组织能力，正逐步成为各行业应用的关键技术。本文聚焦 Spring Boot与Neo4j图数据库的技术结合，探讨知识图谱开发的实现细节，帮助读者掌握该技术栈在实际项目中的落地方法。 …...
Ascend NPU上适配Step-Audio模型
1 概述 1.1 简述 Step-Audio 是业界首个集语音理解与生成控制一体化的产品级开源实时语音对话系统，支持多语言对话（如 中文，英文，日语），语音情感（如 开心，悲伤）&#x…...
（转）什么是DockerCompose?它有什么作用？
一、什么是DockerCompose? DockerCompose可以基于Compose文件帮我们快速的部署分布式应用，而无需手动一个个创建和运行容器。 Compose文件是一个文本文件，通过指令定义集群中的每个容器如何运行。 DockerCompose就是把DockerFile转换成指令去运行。 …...
智能仓储的未来：自动化、AI与数据分析如何重塑物流中心
当仓库学会“思考”，物流的终极形态正在诞生 想象这样的场景： 凌晨3点，某物流中心灯火通明却空无一人。AGV机器人集群根据实时订单动态规划路径；AI视觉系统在0.1秒内扫描包裹信息；数字孪生平台正模拟次日峰值流量压力…...
#Uniapp篇：chrome调试unapp适配
chrome调试设备----使用Android模拟机开发调试移动端页面 Chrome://inspect/#devices MuMu模拟器Edge浏览器：Android原生APP嵌入的H5页面元素定位 chrome://inspect/#devices uniapp单位适配 根路径下 postcss.config.js 需要装这些插件 “postcss”: “^8.5.…...
Java求职者面试指南：计算机基础与源码原理深度解析
Java求职者面试指南：计算机基础与源码原理深度解析 第一轮提问：基础概念问题 1. 请解释什么是进程和线程的区别？ 面试官：进程是程序的一次执行过程，是系统进行资源分配和调度的基本单位；而线程是进程中的…...