html之JS
1、JS的引入
<!-- 内嵌 --><!-- <script>alert(4)</script> --><!-- 外引 --><!-- 内嵌和外引同时有的时候，内嵌被覆盖 --><script src="js/index.js" defer></script>//defer 延迟执行2、js的变量使用
//一、定义变量，var声明变量的关键字 a为变量名
//定义的时候不区分类型，使用的时候有类型
//变量类型：基本类型和复合类型
//基本类型：字符串、数字、布尔类型（true/false）、undefined类型（未下定义的）、null(涉及一个量，但是这个量本身不存在)
var a = 10
var b = 10.5
var c = "hello"
var d = 'S'
var e = true
// 复合类型：数组、对象、函数
// 1、定义数组
var arr = [10,"sdf",true,12.3,undefined,function(){alert("数组") return "wancheng"},[11,'a']]
console.log(arr)
// 通过下标直接访问
console.log(arr[3])
console.log(arr[5]())
console.log(arr[6][0])
// 2、定义对象
var obj = {name:"小丽",age:29,dance:function(){alert("hanshu")return "调用完成"}
}
console.log(obj.age)
console.log(obj.dance())
//3、定义函数
//命名函数
function f(a,b){alert("hello")
}
//匿名函数（推荐），如果把一个函数赋值给某个变量，变量会完全代替函数
var hh = function(a,b){alert("hello")
}
//命名函数调用
f()
//匿名函数调用
hh(11,12)//二、变量使用
// 弹框显示，类似于打印
alert(a)
//控制台打印
console.log(arr)
// onclick 单击
// ondblclick 双击
// onmouseenter 鼠标放上去
// onmouseleave 鼠标离开
document.onclick=function(){alert("单击执行")
}
var hh = function(){alert("hhhhh")return 10
}
document.ondblclick=hh
// 如果是hh()，相当于=10，仅得到返回值，如果是hh相当于整个函数console.log(document)
// 以对象形式打印
console.dir(document)3、dom操作
// dom操作 document object model
//1、查找---指定查找
// getElementById() 根据id获取元素，返回值是符合条件的第一个对象
var aa = document.getElementById("a")
// getElementsByClassName() 根据class名称获取元素，返回值是所有符合条件的对象组成的数组
var aa = document.getElementsByClassName("b")
for(var i=0; i<aa.length;i++){aa[i].onclick=function(){this.style.background="red"}
}
//getElementsByTagName() 根据元素名称获取元素，返回值是所有符合条件的对象组成的数组
var a1 = document.getElementsByTagName("div")
//querySelector() 根据选择器获取元素，返回符合条件的第一个对象
var a2 = document.querySelector(".b")
//querySelectorAll() 根据选择器获取元素，返回符合条件的对象组成的数组
var a3 = document.querySelectorAll(".b")
// 2、关系查找
// parentElement/parentNode获取父级元素
//childNodes 获取所有子节点们 children 获取所有子元素节点
//previousSibling 获取上一个节点 previousElementSibling 获取上一个元素节点
//nextSibling 获取下一个节点 nextElementSibling 获取下一个元素节点
var aa = document.getElementById("a")
console.log(aa.previousSibling)
//3、修改
//修改内容：供显示元素的内容 ： innerHTML把修改的内容当作标签处理 innerText把修改的内容当作文本处理
// 供收集用户信息显示的内容：value
var aa = document.getElementById("a")
aa.innerHTML = "<a>点击</a>"
aa.innerText = "gai"
//修改属性
//原生属性直接获取获修改 id className src alt
//自定义属性 获取属性 getAttribute(属性名) 设置属性 setAttribute(属性名，属性值) 也可用于原生属性
var aa = document.getElementById("a")
aa.id='hhh'
aa.setAttribute('hhh','xxx')
//修改样式 style.样式属性 style.cssText 设置多个样式属性
//给元素设置属性，结合CSS改变样式
var aa = document.getElementById("a")
aa.style.color="pink"
aa.style.cssText="background:res;color:pink;font-size;30px"
//4、增加
//创建元素 document.createElement()
var ele = document.createElement("li")
//添加元素 父级元素.appendChild 在元素的最后子元素位置添加
// 父级元素.insertBefore(新元素，插入哪个元素) 在元素的某个位置前添加，第二个参数为null,表示在最后插入
var aa = document.getElementById("a")
aa.appendChild(ele)
aa.insertBefore(ele)
//复制元素 cloneNode(false), 默认false，浅复制，只复制标签；true，复制标签和内容
aa.cloneNode()
//5、删除 父级元素.removeChild(删除元素)
var li = document.getElementById("b")
aa.removeChild()//延迟加载
window.onload4、按钮控制页面切换
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{padding: 0;margin: 0;}.container{width: 500px;height: 200px atuo;margin: 0 auto;margin-top: 20px;background: palegoldenrod;}.tab_title{display: flex;justify-content: center;}.tab_title li{list-style: none;border: 2px solid gray;padding: 4px 6px;margin-right: 5px;cursor: pointer;border-bottom: none;}.tab_title .cur{color: aliceblue;background-color: palevioletred;}.tab_content{border: 2px solid palevioletred;min-height: 240px;padding: 10px;text-align: center;}.tab_content div{display: none;}.tab_content div:first-child{display: block;}</style><script src="js/index.js" defer></script>
</head>
<body><div class="container"><ul class="tab_title"><li class="cur">按钮1</li><li>按钮2</li><li>按钮3</li><li>按钮4</li></ul><div class="tab_content"><div>这是第一个页面</div><div>这是第二个页面</div><div>这是第三个页面</div><div>这是第四个页面</div></div></div></body>
</html>
var tab_title = document.querySelectorAll(".tab_title li")
var tab_content = document.querySelectorAll(".tab_content>div")
console.log(tab_content)
console.log(tab_title)
for(var i=0; i<tab_title.length; i++){tab_title[i].setAttribute("index",i)tab_title[i].onclick = function(){for(var k=0; k<tab_title.length;k++){tab_title[k].className=""}//样式切换this.className='cur'var index = this.getAttribute("index")//内容区域切换for(var j=0; j<tab_content.length; j++){if(j==index){tab_content[j].style.display="block"}else{tab_content[j].style.display="none"}}}
}5、下拉菜单
var container = document.querySelectorAll(".container")
for(var i=0; i<container.length; i++){var tab_title = container[i].querySelectorAll(".tab_title li")for(var j=0; j<tab_title.length; j++){//初始化index属性tab_title[j].setAttribute("index",j)//绑定点击事件tab_title[j].onclick=function(){var cur = this.parentElement.querySelectorAll("li")for(var k=0; k<cur.length; k++){cur[k].className=""}this.className='cur'var index = this.getAttribute("index")var tab_content = this.parentElement.nextElementSibling.querySelectorAll("div")for(var h=0; h<tab_content.length;h++){if(h==index){tab_content[h].style.display="block"}else{tab_content[h].style.display="none"}}}}
}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{padding: 0;margin: 0;list-style: none;text-decoration: none;}.container{background-color: aliceblue;margin: 100px 0;background-color: plum;}.container .main{margin: 0 auto;width: 80%;display: flex;justify-content: space-between;}.container .main>li{text-align: center;position: relative;width: 100%;}.container .main>li ul{position: absolute;}.container .main>li>a{color: white;display: block;padding: 5px 0px;width: 100%;}.container .main>li a:hover{background-color: aqua;}.container .main>li>ul{/* display: none; */height: 0px;overflow: hidden;position: absolute;width: 100%;background-color: plum; }.container .main>li>ul a{color: white;display: block;padding: 5px 0px;width: 100%;}</style><script src="js/demo.js" defer></script>
</head>
<body><div class="container"><ul class="main"><li><a href="#">首页</a></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><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><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><li><a href="#">专业信息</a></li></ul></li><li><a href="#">学位点建设</a><ul><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><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><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></div>
</body>
</html>相关文章：
html之JS
1、JS的引入 <!-- 内嵌 --><!-- <script>alert(4)</script> --><!-- 外引 --><!-- 内嵌和外引同时有的时候，内嵌被覆盖 --><script src"js/index.js" defer></script>//defer 延迟执行 2、js的变量使用…...
SQL Server的安装和首个库的创建
一、熟悉SQL Server的安装环境； 1.安装Microsoft的数据库管理系统SQL Server 2022 先把SQL Server 2022下载好后进行解压后出现以下界面然后点击基本进行安装 然后会出现以下界面： 一步步按照提示往下走即可，把SQL Server 2022安装完成后再…...
STM32下载程序的五种方法
刚开始学习 STM32 的时候，很多小伙伴满怀热情买好了各种设备，但很快就遇到了第一个拦路虎——如何将写好的代码烧进去这个黑乎乎的芯片～ STM32 的烧录方式多样且灵活，可以根据实际需求选择适合的方式来将程序烧录到芯片中。本文将…...
基于springboot + vue大学生竞赛管理系统
qq（2829419543）获取源码 开发语言：Java Java开发工具：JDK1.8 后端框架：springboot 前端：采用vue技术开发 数据库：MySQL5.7和Navicat管理工具结合 服务器：Tomcat8.5 开发软件…...
【详解】Spark数据倾斜问题由基础到深入详解-完美理解-费元星
数据倾斜定义：顾名思义，就是大量相似或相同数据聚集在一个块的节点里，导致计算和资源分配不均导致的计算缓慢（长尾）问题。 数据倾斜原因： count(distinct field) group by NULL 空值 Shuffle (概率最…...
xss漏洞后端进行html消毒
import org.jsoup.Jsoup;public static String sanitizeHtml(String input) {// 使用 Jsoup 消毒 HTMLreturn Jsoup.clean(input, Safelist.relaxed());}public static void main(String[] args) {String userInput "<p><script>alert(1)</script>Safe…...
[论文精读]利用大语言模型对扩散模型进行自我修正
本博客是一篇最新论文的精读，论文为UC伯克利大学相关研究者新近(2023.11.27)在arxiv上上传的《Self-correcting LLM-controlled Diffusion Models》 。 内容提要: 现有的基于扩散的文本到图像生成模型在生成与复杂提示精确对齐的图像时仍然存在困难,尤其是需要数值和…...
CTF特训日记day（4-6）
来复现一下2022QWB决赛的RDP题目 这两天腰疼去了趟医院 题目要求我们攻击XRDP程序，从而达到本地提权的效果。 首先观察XRDP程序的版本信息 rootRDP:/home/rdp/Desktop# xrdp-sesman -version xrdp-sesman 0.9.18The xrdp session managerCopyright (C) 2004-2020…...
【深度学习笔记】09 权重衰减
09 权重衰减 范数和权重衰减利用高维线性回归实现权重衰减初始化模型参数定义 L 2 L_2 L2范数惩罚定义训练代码实现忽略正则化直接训练使用权重衰减 权重衰减的简洁实现 范数和权重衰减 在训练参数化机器学习模型时，权重衰减（decay weight）…...
三大兼容 | 人大金仓兼容+优化MySQL用户变量特性
目前，KingbaseES对MySQL的兼容性，已从功能兼容阶段过渡到强性能兼容、生态全面兼容阶段，针对客户常常遇到的用户变量问题，KingbaseES在兼容MySQL用户变量功能的基础上，优化了MySQL用户变量的一些原生问题，使…...
Git介绍与安装使用
目录 1.Git初识 1.1提出问题 1.2如何解决--版本控制器 1.3注意事项 2.Git安装 2.1Linux-centos安装 2.2Linux-ubuntu安装 2.3Windows安装 3.Git基本操作 3.1创建Git本地仓库 3.2配置Git 4.认识⼯作区、暂存区、版本库 1.Git初识 1.1提出问题 不知道你工作或学习时…...
理解DuLinkList L中的“”引用符号
在C中，DuLinkList &L 这种形式的参数表示 L 是一个 DuLinkList 类型的引用。这里的 & 符号表示引用。 引用是C的一个特性，它提供了一种方式来访问已存在的变量的别名。当你对引用进行操作时，实际上是在操作它所引用的变量。如果你在…...
前端并发多个请求并失败重发
const MAX_RETRIES 3;// 模拟请求 function makeRequest(url) {return new Promise((resolve, reject) > {setTimeout(() > {Math.random() < 0.75 ? resolve(${url} 成功) : reject(${url} 失败); // 随机决定请求是否成功}, Math.random() * 2000); // 随机延时执…...
【Qt开发流程】之对象模型2：属性系统
描述 Qt提供了一个复杂的属性系统，类似于一些编译器供应商提供的属性系统。然而，作为一个独立于编译器和平台的库，Qt不依赖于非标准的编译器特性，如__property或[property]。 Qt解决方案适用于Qt支持的所有平台上的任何标准c编译…...
PHP之curl详细讲解
cURL（全称为Client for URLs）是一个功能强大的开源库，用于在多种协议上进行数据传输、发送HTTP请求和获取响应。它支持多种协议，包括HTTP、HTTPS、FTP、SMTP等，并且能够与各种服务器进行通信。 cURL库可以通过命令行工…...
R语言30分钟上手
文章目录 1. 环境&安装1.1. rstudio保存工作空间 2. 创建数据集2.1. 数据集概念2.2. 向量、矩阵2.3. 数据框2.3.1. 创建数据框2.3.2. 创建新变量2.3.3. 变量的重编码2.3.4. 列重命名2.3.5. 缺失值2.3.6. 日期值2.3.7. 数据框排序2.3.8. 数据框合并(合并沪深300和中证500收盘…...
上下拉电阻会增强驱动能力吗？
最近看到一个关于上下拉电阻的问题，发现不少人认为上下拉电阻能够增强驱动能力。随后跟几个朋友讨论了一下，大家一致认为不存在上下拉电阻增强驱动能力这回事，因为除了OC输出这类特殊结构外，上下拉电阻就是负载，只会减…...
题目：小明的彩灯（蓝桥OJ 1276）
题目描述： 解题思路： 一段连续区间加减，采用差分。最终每个元素结果与0比较大小，比0小即负数输出0。 题解： #include<bits/stdc.h> using namespace std;using ll long long; const int N 1e5 10; ll a[N],…...
换元法求不定积分
1.一般步骤：选取换元对象（不一定是式子中的值，也可以是式子中的最小公倍数或者最大公因数），然后将dx换为dt*t的导数，再用t将原式表示，化简计算即可 2. 3. 4. 5. 6....
在Docker容器中启用SSH服务，实现外部访问的详细教程
目录 步骤 1: 安装 SSH 服务器 步骤 2: 配置 SSH 服务器 步骤 3: 设置 SSH 用户 步骤 4: 重启 SSH 服务器 步骤 5: 映射容器端口 步骤 6: 使用 SSH 连接到容器 要在Docker容器中启用SSH服务，以便从外部访问，您需要执行以下步骤： 步骤 …...
Kubernetes集群的高可用性设计与实践：从理论到落地
Kubernetes集群的高可用性设计与实践：从理论到落地 🔥 硬核开场 各位技术老铁们，今天咱们来聊聊Kubernetes集群的高可用性设计。别跟我说你的K8s集群就一个master节点，那都不叫生产环境！在生产环境中，高可用…...
低成本搭建厘米级定位：用树莓派+ZED-F9P+开源电台DIY你的RTK移动站
低成本搭建厘米级RTK定位系统：树莓派与开源硬件的完美组合 在无人机航测、农业自动导航和机器人开发领域，厘米级定位不再是遥不可及的梦想。如今，借助开源硬件和软件生态，个人开发者完全可以用不到专业设备十分之一的成本搭建属于…...
MPU6050的DMP采样率到底怎么调？从200Hz到5ms延迟的配置避坑指南
MPU6050的DMP采样率到底怎么调？从200Hz到5ms延迟的配置避坑指南 当你在手势识别项目中配置MPU6050时，是否遇到过这样的困惑：明明在代码里设置了mpu_set_sample_rate(200)，但用示波器测量中断引脚却发现间隔忽长忽短？或…...
计算机视觉中的图像识别与理解
计算机视觉中的图像识别与理解 在人工智能飞速发展的今天，计算机视觉已成为最受关注的技术领域之一。图像识别与理解作为其核心任务，旨在让机器像人类一样“看懂”图像内容，并从中提取有价值的信息。从智能手机的人脸解锁到自动驾驶的环境感…...
【限免解密】：2026奇点大会未发布PPT节选——AGI生成艺术的版权归属、伦理红线与法律真空地带（仅开放72小时）
第一章：2026奇点智能技术大会：AGI与艺术创作 2026奇点智能技术大会(https://ml-summit.org) 本届大会首次设立“AGI原生艺术工坊”，聚焦具备自主意图建模与跨模态反思能力的通用人工智能系统在视觉、音乐与叙事创作中的前沿实践。多位研究者…...
大语言模型技术指南：temperature、top-k、top-p、repeat penalty 到底怎么调？生成参数实战详解
大语言模型技术指南：temperature、top-k、top-p、repeat penalty 到底怎么调？生成参数实战详解 前面几篇，我们已经把这条主线往前推进到了这里：Transformer 为什么能成为大模型基础架构预训练到底在学什么SFT、RLHF、DPO 这类对齐…...
黎阳之光：全域实景立体管控，重构智慧电厂与变电站数字孪生新范式
在中国制造2025与新型电力系统建设双重驱动下，发电、变电、配电环节正加速迈向全域可视、智能协同、无人值守的数字化新阶段 。传统电厂/变电站普遍存在视频割裂、定位不准、巡检低效、数据孤岛、应急滞后等痛点，已难以支撑精细化、现代化管控要求。北京…...
Claude Code 官方安装指南（智谱AI配置）
Claude Code 官方安装指南（智谱AI配置） 概述 本文档介绍如何安装官方Claude Code CLI工具，并配置为使用智谱AI的GLM模型API。 前置要求 Node.js 18 (建议使用nvm管理)智谱AI API Key 安装步骤 1. 获取智谱AI API Key 访问 智谱AI开放平…...
因果推断利器：工具变量法原理、实战与产业全景
因果推断利器：工具变量法原理、实战与产业全景当数据告诉你“相关性”，而你需要的是“因果性”时，工具变量法可能就是那把关键的钥匙。引言：从相关性到因果性，为什么需要工具变量？ 在数据驱动的时代&#x…...
【数字信号去噪】猫头鹰搜索算法OSA优化变分模态分解SDO-VMD数字信号去噪（优化K值 alpha值 综合指标 适应度函数包络熵）【含Matlab源码 15355期】
💥💥💥💥💥💥💥💥💞💞💞💞💞💞💞💞💞Matlab武动乾坤博客之家💞…...