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项目…...
深度学习在微纳光子学中的应用
深度学习在微纳光子学中的主要应用方向 深度学习与微纳光子学的结合主要集中在以下几个方向： 逆向设计 通过神经网络快速预测微纳结构的光学响应，替代传统耗时的数值模拟方法。例如设计超表面、光子晶体等结构。 特征提取与优化 从复杂的光学数据中自…...
多云管理“拦路虎”：深入解析网络互联、身份同步与成本可视化的技术复杂度
一、引言：多云环境的技术复杂性本质 企业采用多云策略已从技术选型升维至生存刚需。当业务系统分散部署在多个云平台时，基础设施的技术债呈现指数级积累。网络连接、身份认证、成本管理这三大核心挑战相互嵌套：跨云网络构建数据…...
Golang 面试经典题：map 的 key 可以是什么类型？哪些不可以？
Golang 面试经典题：map 的 key 可以是什么类型？哪些不可以？ 在 Golang 的面试中，map 类型的使用是一个常见的考点，其中对 key 类型的合法性 是一道常被提及的基础却很容易被忽视的问题。本文将带你深入理解 Golang 中…...
IGP（Interior Gateway Protocol，内部网关协议）
IGP（Interior Gateway Protocol，内部网关协议） 是一种用于在一个自治系统（AS）内部传递路由信息的路由协议，主要用于在一个组织或机构的内部网络中决定数据包的最佳路径。与用于自治系统之间通信的 EGP&…...
线程与协程
1. 线程与协程 1.1. “函数调用级别”的切换、上下文切换 1. 函数调用级别的切换 “函数调用级别的切换”是指：像函数调用/返回一样轻量地完成任务切换。 举例说明： 当你在程序中写一个函数调用： funcA() 然后 funcA 执行完后返回&…...
大数据零基础学习day1之环境准备和大数据初步理解
学习大数据会使用到多台Linux服务器。 一、环境准备 1、VMware 基于VMware构建Linux虚拟机 是大数据从业者或者IT从业者的必备技能之一也是成本低廉的方案 所以VMware虚拟机方案是必须要学习的。 （1）设置网关 打开VMware虚拟机，点击编辑…...
如何在看板中有效管理突发紧急任务
在看板中有效管理突发紧急任务需要：设立专门的紧急任务通道、重新调整任务优先级、保持适度的WIP（Work-in-Progress）弹性、优化任务处理流程、提高团队应对突发情况的敏捷性。其中，设立专门的紧急任务通道尤为重要，这能…...
（二）原型模式
原型的功能是将一个已经存在的对象作为源目标，其余对象都是通过这个源目标创建。发挥复制的作用就是原型模式的核心思想。 一、源型模式的定义 原型模式是指第二次创建对象可以通过复制已经存在的原型对象来实现，忽略对象创建过程中的其它细节。 📌 核心特点： 避免重复初…...
OkHttp 中实现断点续传 demo
在 OkHttp 中实现断点续传主要通过以下步骤完成，核心是利用 HTTP 协议的 Range 请求头指定下载范围： 实现原理 Range 请求头：向服务器请求文件的特定字节范围（如 Range: bytes1024-） 本地文件记录：保存已…...
多种风格导航菜单 HTML 实现（附源码）
下面我将为您展示 6 种不同风格的导航菜单实现，每种都包含完整 HTML、CSS 和 JavaScript 代码。 1. 简约水平导航栏 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport&qu…...