学习Java的日子 Day48 函数，DOM
Day48
1.流程控制语句
if else
for
for-in(遍历数组时，跟Java是否一样)
While
do while
break 语句用于跳出循环
continue 用于跳过循环中的一个迭代
2.函数
2.1 JavaScript 函数语法
函数就是包裹在花括号中的代码块，前面使用了关键词 function
function 函数名(参数列表){
…代码块…
}
分类：
无参无返回值的函数
带参数的函数
带返回值的方法
注意：函数就是方法
<body>
<script type="text/javascript">//无参无返回值的函数function fun01(){console.log("用良心做教育1");}fun01();//带参数的函数//注意：形参不需要加类型，调用方法时可以传参也可以不传参function fun02(a,b){console.log("用良心做教育2：" + a + " -- " + b);}fun02();fun02(10,20);fun02("xxx","yyy");fun02("abc",12345);//带返回值的方法//注意：JS函数里的返回值不用像Java方法里必须指定返回值类型function fun03(){return "用良心做教育3";}var v = fun03();console.log(v);
</script>
</body>
2.1.1 函数也是数据
函数也是一种数据，我们可以把函数赋值给一个变量
var add = function(a,b,c){return a+b+c;}
2.1.2 函数的重载
注意：JS的函数里没有重载的概念
<body>
<script type="text/javascript">function fun(a,b){alert(a+b);}function fun(a,b,c){alert(a+b+c);}//a - 10//b - 20//c - undefindfun(10,20);
</script>
</body>
2.2.3 函数的递归
注意：递归是一种思想，只要是面向对象的语言都有这个思想
需求：设计一个函数，传入n，求n的阶乘
<body>
<script type="text/javascript">function fun(n){if(n != 1){return fun(n-1)*n;}else{return 1;}}var num = fun(5);alert(num);
</script>
</body>
2.2 系统提供的预定义函数
parseInt()：试图将其收到的任何输入值转换成整数类型，转换失败则返回NaN
parseFloat()：同上类似
isNaN(xxx)：判断是否为非数字
isFinite(xxxx)：判断输入的是否是一个既非Infinity也非NaN的数字
eval()：会将其输入的字符串当作javascript代码来执行 (重要！！！！)
<body>
<script type="text/javascript">console.log("判断参数是否是数字：" + isFinite("abc"));//falseconsole.log("判断参数是否不是数字：" + isNaN("abc"));//trueconsole.log("将字符串转换为整数：" + parseInt("100.123"));//100console.log("将字符串转换为小数：" + parseFloat("100.123"));//100.123var str = "alert('用良心做教育');";eval(str);//认为字符串为js代码去执行</script>
</body>
3.DOM
采用DOM的方式来操作网页的元素
通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。
3.1 HTML DOM （文档对象模型）
当网页被加载时，浏览器会创建页面的文档对象模型
HTML DOM 模型被构造为对象的树。
3.2 HTML DOM 树
通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML
JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应
3.3 查找元素
通常，通过 JavaScript，您需要操作 HTML 元素
为了做到这件事情，您必须首先找到该元素，有三种方法来做这件事：
通过 id 找到 HTML 元素
通过标签名找到 HTML 元素
通过类名找到 HTML 元素
注意：document表示该文档，就是dom树
3.3.1 通过id查找 getElementById
在 DOM 中查找 HTML 元素的最简单的方法，是通过使用元素的 id
注意：getElementById获取到的是单个对象
<body><span id="span01">用良心做教育</span>
<br />
<span>做真实的自己</span><script type="text/javascript">//通过id获取元素var span01 = document.getElementById("span01");//绑定单击事件span01.onclick = function(){//设置内容span01.innerHTML = "做真实的自己";}</script>
</body>
3.3.2 通过标签名查找 getElementsByTagName
通过标签名查找 HTML 元素
注意：getElementsByTagName获取到的是数组，要用[0]，[1]去选择
<body><span>用良心做教育</span>
<br />
<span>做真实的自己</span><script type="text/javascript">//通过标签获取元素数组var span01 = document.getElementsByTagName("span")[0];//绑定单击事件span01.onclick = function(){//设置内容span01.innerHTML = "xxxx";}</script>
</body>
3.3.3 通过class查找 getElementsByClassName
通过class查找 HTML 元素
注意：getElementsByClassName获取到的是数组，要用[0]，[1]去选择
<body><span class="myclass">用良心做教育</span>
<br />
<span class="myclass">做真实的自己</span><script type="text/javascript">//通过class属性获取元素数组var span01 = document.getElementsByClassName("myclass")[0];//绑定单击事件span01.onclick = function(){//设置内容span01.innerHTML = "xxxx";}</script>
</body>
3.3.4 通过name查找 getElementsByName
注意：getElementsByName获取到的是数组，要用[0]，[1]去选择
<body><img name="xxx" src="../../img/小米.jpg" />
<img name="xxx" src="../../img/小米.jpg" /><script type="text/javascript">//通过name属性获取元素数组var img = document.getElementsByName("xxx")[0];//绑定单击事件img.onclick = function(){//设置属性img.src = "../../img/华为.jpg";}</script>
</body>3.4 DOM_HTML 操作元素
3.4.1 操作内容
修改 HTML 内容的最简单的方法时使用 innerHTML 属性
如需改变 HTML 元素的内容，请使用这个语法：
document.getElementById(id).innerHTML=new HTML
<body><button onclick="fun01()">获取内容 - innerText</button>
<button onclick="fun02()">设置内容 - innerText</button>
<br />
<span>用良心做教育</span>
<br /><button onclick="fun03()">获取内容 - innerHTML</button>
<button onclick="fun04()">设置内容 - innerHTML</button>
<br />
<span>用良心做教育</span><script type="text/javascript">var span01 = document.getElementsByTagName("span")[0];var span02 = document.getElementsByTagName("span")[1];function fun01(){console.log(span01.innerText);}function fun02(){span01.innerText = "<h1>做真实的自己</h1>";}function fun03(){console.log(span02.innerHTML);}function fun04(){//把文本当做html标签设置span02.innerHTML = "<h1>做真实的自己</h1>";}</script>
</body>innerHTML，innerText的区别：
innerHTML：把文本当做html标签设置
innerText：文本就是文本
3.4.2 操作属性
如需改变 HTML 元素的属性，请使用这个语法：
document.getElementById(id).attribute=new value
获取属性值：getAttribute
修改属性值：setAttribute
<body><button onclick="fun01()">获取属性</button>
<button onclick="fun02()">设置属性</button>
<br />
<img src="../../img/小米.jpg" width="100px" height="100px" />
<br /><script type="text/javascript">var img1 = document.getElementsByTagName("img")[0];var img2 = document.getElementsByTagName("img")[1];function fun01(){console.log(img2.getAttribute("src"));console.log(img2.getAttribute("width"));console.log(img2.getAttribute("height"));}function fun02(){img2.setAttribute("src","../../img/华为.jpg");img2.setAttribute("width","100%");img2.setAttribute("height","100%");}</script>
</body>3.4.3 操作css样式
如需改变 HTML 元素的css样式，请使用这个语法：
document.getElementById(id).style.property=new style
<body><button onclick="fun01()">获取样式</button>
<button onclick="fun02()">设置样式</button>
<br />
<span>用良心做教育</span><script type="text/javascript">var span = document.getElementsByTagName("span")[0]function fun01(){console.log(span.style.color);console.log(span.style.fontSize);}function fun02(){span.style.color = "red";span.style.fontSize = "50px";}</script>
</body>3.5 事件
对事件做出反应
我们可以在事件发生时执行 JavaScript，比如当用户在 HTML 元素上点击时。
如需在用户点击某个元素时执行代码，请向一个 HTML 事件属性添加 JavaScript 代码：
οnclick=JavaScript
HTML 事件的例子：
l 当用户点击鼠标时
l 当网页已加载时
l 当鼠标移动到元素上时
l 当输入字段被改变时
l 当提交 HTML 表单时
3.5.1 onclick 单击事件
点击之后，更改标题内容
this代表当前被点击的对象
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><h1 onclick="fun01()">用良心做教育</h1><script type="text/javascript">var h1 = document.getElementsByTagName("h1")[0];function fun01(){h1.innerText = "做真实的自己";}</script></body>
</html>换一种写法：
this代表当前被点击的对象
obj是随便写的一个对象
<body><h1 onclick="fun01(this)">用良心做教育</h1><script type="text/javascript">function fun01(obj){obj.innerText = "做真实的自己";}</script>
</body>换一种写法：
<body><h1>用良心做教育</h1><script type="text/javascript">var h1 = document.getElementsByTagName("h1")[0];//绑定单击事件h1.onclick = function(){this.innerText = "做真实的自己";}</script>
</body>3.5.2 onload 页面加载事件
onload 一般可以来做一些网页的环境准备工作
页面加载事件：事件会在页面元素和图像加载完成后立即发生
注意：js是一行一行去执行的
<title></title><script type="text/javascript">//页面加载事件：事件会在页面元素和图像加载完成后立即发生window.onload = function(){var h1 = document.getElementsByTagName("h1")[0];h1.onclick = function(){this.innerText = "做真实的自己";}}</script></head>
<body><h1>用良心做教育</h1> </body>3.5.3 键盘事件
监听器：
onkeydown：键盘按下事件
onkeypress：键盘按下事件 - 功能键(上下左右、删除键…)是不会被触发的
onkeyup：键盘松开事件
<body><input type="text" onkeydown="myDown()"onkeypress="myPress()"onkeyup="myUp()"
/><script type="text/javascript">function myDown(){//键盘按下事件console.log("down");}function myPress(){//键盘按下事件 - 功能键(上下左右、删除键...)是不会被触发的console.log("press");}function myUp(){//键盘松开事件console.log("up");}</script>
</body>案例，设置一个文本框，每敲一个字母，会触发将输入文本转换为大写的函数
<body><input type="text" onkeyup="myUp(this)"
/><script type="text/javascript">function myUp(obj){//获取value属性var v = obj.value;//转大写v = v.toUpperCase();//设置value属性obj.value = v;} </script>
</body>3.5.4 鼠标移动事件
onMouseDown 按下鼠标时触发
onMouseOver 鼠标经过时触发
onMouseUp 按下鼠标松开鼠标时触发
onMouseOut 鼠标移出时触发
onMouseMove 鼠标移动时触
<body><img src="../../img/小米.jpg" width="100px" height="100px"onmousedown="myDown()"onmouseup="myUp()"onmousemove="myMove()"onmouseover="myOver()"onmouseout="myOut()"
/><script type="text/javascript">function myDown(){//鼠标按下事件console.log("down");}function myUp(){//鼠标松开事件console.log("up");}function myMove(){//鼠标移动事件console.log("move");}function myOver(){//鼠标移入事件console.log("over");}function myOut(){//鼠标移出事件console.log("out");}</script>
</body>案例：图片，移入图片中就设置高亮，移出就暗沉
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">img{width: 100px;height: 100px;opacity: 0.3;/*设置透明度*/}</style></head><body><img src="../../img/touxiang01.jpg" /><img src="../../img/touxiang02.jpg" /><img src="../../img/touxiang03.jpg" /><img src="../../img/tx1.jpg" /><img src="../../img/tx2.jpg" /><img src="../../img/tx3.jpg" /><img src="../../img/波多野结衣.jpg" /><script type="text/javascript">//动态绑定事件var imgArr = document.getElementsByTagName("img");for(var i = 0;i<imgArr.length;i++){var img = imgArr[i];img.onmouseover = function(){this.style.opacity = 1;}img.onmouseout = function(){this.style.opacity = 0.3;}}</script></body>
</html>运行结果：
3.5.5 焦点事件 onfocus/onblur
onfocus：获取焦点事件
onblur：失去焦点事件
<body><input type="text"onfocus="myFocus()"onblur="myBlur()"
/><script type="text/javascript">function myFocus(){//获取焦点事件console.log("focus");}function myBlur(){//失去焦点事件console.log("blur");} </script>
</body>案例：写一个注册的文本框，默认显示“请输入账号…”，光标定位到之后，自动将里面的信息清除掉
<body><input type="text"value="请输入账号..."//value的内容可以直接显示在文本框里面οnfοcus="myFocus(this)"οnblur="myBlur(this)"
/><script type="text/javascript">function myFocus(obj){//获取焦点事件if(obj.value == "请输入账号..."){obj.value = "";}}function myBlur(obj){//失去焦点事件//获取该函数里的代码，如果当前浏览器支持该函数，就返回函数里的代码（字符串），如果不支持就返回undefined//alert(obj.value.trim);//判断浏览器是否兼容次方法if(obj.value.trim){if(obj.value.trim() == ""){obj.value = "请输入账号...";}}else{//注意：IE老版本是不支持trim()//将字符串的首尾空格的字符替换成空字符串，以达到去空格的目的if(obj.value.replace(/(^\s+)|(\s+$)/g,"") == ""){obj.value = "请输入账号...";}}}</script>
</body>相关文章：
学习Java的日子 Day48 函数，DOM
Day48 1.流程控制语句 if else for for-in(遍历数组时，跟Java是否一样) While do while break 语句用于跳出循环 continue 用于跳过循环中的一个迭代 2.函数 2.1 JavaScript 函数语法 函数就是包裹在花括号中的代码块，前面使用了关键词 function funct…...
Scikit-Learn朴素贝叶斯
Scikit-Learn朴素贝叶斯 1、朴素贝叶斯1.1、贝叶斯分类1.2、贝叶斯定理1.3、贝叶斯定理的推导1.4、朴素贝叶斯及原理1.5、朴素贝叶斯的优缺点2、Scikit-Learn朴素贝叶斯2.1、Sklearn中的贝叶斯分类器2.2、Scikit-Learn朴素贝叶斯API2.3、Scikit-Learn朴素贝叶斯实践（新闻分类与…...
网页设计步骤总结
第一步：css重置 https://blog.csdn.net/BradenHan/article/details/132122504 第二步：媒体查询不同尺寸加载不同的css文件https://blog.csdn.net/Yi_Lesama/article/details/131184469 <!-- link元素中的CSS媒体查询 --> <link rel"styl…...
第十三期Big Demo Day亮点项目：CCarbon重塑碳交易生态，助力全球绿色发展
第十三期Big Demo Day活动即将于2024年5月28日在香港数码港的CyberArena隆重举行。我们荣幸地宣布，利用区块链技术优化全球碳交易CCarbon项目将亮相，参与精彩的项目路演。本次活动由ZeeprLabs、BiKing Exchange、Gather冠名赞助，Central Rese…...
python基础知识总结（第一节）
一、python简介： Python是一种解释型，面向对象的高级语言。 Pyhton的语法和动态类型，以及解释性语言的本质，使它一跃成为多数平台上写脚本和快速开发应用的编程语言。 python语言百度百科介绍 二、Python基础语法：…...
DOS学习-目录与文件应用操作经典案例-comp
新书上架~👇全国包邮奥~ python实用小工具开发教程http://pythontoolsteach.com/3 欢迎关注我👆，收藏下次不迷路┗|｀O′|┛ 嗷~~ 目录 一.前言 二.使用 三.案例 案例 1: 基本比较 案例 2: 十进制显示差异 案例 3: 字符形式显…...
原神抽卡点名程序教程（直接下载用）
今天我要给大家分享一个在抖音上特别火的视频——原神抽卡点名程序教程。 废话不多说，直接上链接 ：--点击下载原神抽卡程序 步骤1： 步骤2&am…...
gpt-4o继续迭代考场安排程序 一键生成考场清单
接上两篇gpt-4o考场安排-CSDN博客，考场分层次安排，最终exe版-CSDN博客 当然你也可以只看这一篇。 今天又添加了以下功能，程序见后。 1、自动分页，每个考场打印一页 2、添加了打印试场单页眉 3、添加了页脚 第X页，…...
php 设置时区
date_default_timezone_set() 设置所有日期/时间函数使用的默认时区 除了在脚本中使用此函数设置默认时区，还可以使用 INI 设置 date.timezone 设置默认时区。 参数 timezoneId 时区标识符，像 UTC、Africa/Lagos、Asia/Hong_Kong 或 Europe/Lisbon。…...
ArcGIS不同图斑设置不同的透明度
对于设置一个图层的整体的透明度，我们在 ArcGIS制作带蒙版的遥感影像地图http://mp.weixin.qq.com/s?__bizMzIzNjM2NTYxMg&mid2247509080&idx1&sn38dccf0a52bb3bb3758f57114ee38b72&chksme8da161bdfad9f0d363da90959a8524dcf2b60d0e8d999f8ebeef0…...
前端 CSS 经典：图片边框
前言：有这么一个业务，需要边框随着图片宽度的变化而变化，比如一些聊天的气泡框等。 实现原理：使用 border-image 属性 效果图： 实现代码： <!DOCTYPE html> <html lang"en"><he…...
异常有什么，异常类有什么
在Java中，异常（Exception）是一种在程序运行过程中出现的不正常情况。异常机制提供了一种从错误中恢复的途径。异常分为两大类：检查异常（Checked Exception）和运行时异常（Runtime Exception&…...
如何解压忘记了密码的加密zip压缩包？这两个方法收藏好！
加密是一种保护信息不被未经授权访问的重要手段。ZIP压缩包作为一种常见的文件压缩格式，zip文件加密是很多人都回去做的一件事情，那么zip加密文件如何解密？有几种方法可以解密呢？今天介绍几种方法给大家。 一、尝试常用密码 我们…...
java中，怎样用最简单方法实现写word文档
在跨平台环境中实现写word时，如果用现成的库，就会涉及跨平台兼容性问题，比如在安卓与java中实现写word的功能。还有一个问题就是，完全用程序生成word文档，工作量较大。所以采用了模板替换的方法。 docx文档本质就是一…...
大语言模型的工程技巧（三）——分布式计算
相关说明 这篇文章的大部分内容参考自我的新书《解构大语言模型：从线性回归到通用人工智能》，欢迎有兴趣的读者多多支持。 本文将讨论如何利用多台机器进行神经网络的分布式训练。利用多台机器来加速大语言模型的训练，是其获得成功的重要原…...
AI开发初体验：昇腾加持，OrangePi AIpro 开发板
文章目录 一、前言二、板子介绍2.1 拆箱2.2 板子规格2.2.1 常规项目2.2.2 扩展项目2.2.3 操作系统 2.3 点板画面 三、AI程序初体验3.1 新奇的地方3.2 运行第一个AI程序3.2.1 硬件连接3.2.2 串口连接3.2.3 开启外部IP端口3.2.4 查询板子IP地址3.2.5 了解 juypter lab 启动脚本&a…...
微服务架构下Docker容器技术与Kubernetes(K8S)
Kubernetes、微服务和Docker容器技术的结合提供了一个强大、灵活且高效的平台，能够应对现代应用程序的复杂性和动态性。Kubernetes的自动化管理、服务发现、负载均衡和配置管理，与Docker的标准化打包和运行环境相结合，最大化地发挥了微服务架…...
风萧萧兮易水寒，壮士一去兮不复还 的 rm 命令
风萧萧兮易水寒，壮士一去兮不复还 的 rm 命令 风萧萧兮易水寒，壮士一去兮不复还 的 rm语法几个示例/bin/rm Argument list too long – Linux”配合find与xargs完成删除海量文件使用find的delete选项 快速删除大文件 风萧萧兮易水寒，壮士一去…...
How Diffusion Models Work
introduction intuition goal 让神经网络学到图像是什么样的，一种方式是对数据添加不同级别的噪音，让神经网络能够区分细节/总体轮廓 训练一个神经网络去产生精灵 sampling nn 图像恢复 论文 https://zhuanlan.zhihu.com/p/686235079...
antd table列选中效果实现
前言 开发中有一个需要呈现不同时间点各个气象要素的值需求，我觉得一个table可以实现这类数据的展示，只是因为时间点时关注的重点，所以需要列选中效果，清晰的展示时间点下的要素数据。我选择的是antd的table组件，这个…...
龙虎榜——20250610
上证指数放量收阴线，个股多数下跌，盘中受消息影响大幅波动。 深证指数放量收阴线形成顶分型，指数短线有调整的需求，大概需要一两天。 2025年6月10日龙虎榜行业方向分析 1. 金融科技 代表标的：御银股份、雄帝科技 驱动…...
装饰模式（Decorator Pattern）重构java邮件发奖系统实战
前言 现在我们有个如下的需求，设计一个邮件发奖的小系统， 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件 装饰器模式（Decorator Pattern）允许向一个现有的对象添加新的功能，同时又不改变其…...
label-studio的使用教程(导入本地路径)
文章目录 1. 准备环境2. 脚本启动2.1 Windows2.2 Linux 3. 安装label-studio机器学习后端3.1 pip安装(推荐)3.2 GitHub仓库安装 4. 后端配置4.1 yolo环境4.2 引入后端模型4.3 修改脚本4.4 启动后端 5. 标注工程5.1 创建工程5.2 配置图片路径5.3 配置工程类型标签5.4 配置模型5.…...
智慧工地云平台源码，基于微服务架构+Java+Spring Cloud +UniApp +MySql
智慧工地管理云平台系统，智慧工地全套源码，java版智慧工地源码，支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求，提供“平台网络终端”的整体解决方案，提供劳务管理、视频管理、智能监测、绿色施工、安全管…...
AtCoder 第409场初级竞赛 A~E题解
A Conflict 【题目链接】 原题链接：A - Conflict 【考点】 枚举 【题目大意】 找到是否有两人都想要的物品。 【解析】 遍历两端字符串，只有在同时为 o 时输出 Yes 并结束程序，否则输出 No。 【难度】 GESP三级 【代码参考】 #i…...
鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院查看报告小程序
一、开发环境准备 工具安装： 下载安装DevEco Studio 4.0（支持HarmonyOS 5）配置HarmonyOS SDK 5.0确保Node.js版本≥14 项目初始化： ohpm init harmony/hospital-report-app 二、核心功能模块实现 1. 报告列表…...
关于 WASM：1. WASM 基础原理
一、WASM 简介 1.1 WebAssembly 是什么？ WebAssembly（WASM） 是一种能在现代浏览器中高效运行的二进制指令格式，它不是传统的编程语言，而是一种 低级字节码格式，可由高级语言（如 C、C、Rust&am…...
Maven 概述、安装、配置、仓库、私服详解
目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...
微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据
微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据 Power Query 具有大量专门帮助您清理和准备数据以供分析的功能。 您将了解如何简化复杂模型、更改数据类型、重命名对象和透视数据。 您还将了解如何分析列，以便知晓哪些列包含有价值的数据，…...
Java求职者面试指南：Spring、Spring Boot、MyBatis框架与计算机基础问题解析
Java求职者面试指南：Spring、Spring Boot、MyBatis框架与计算机基础问题解析 一、第一轮提问（基础概念问题） 1. 请解释Spring框架的核心容器是什么？它在Spring中起到什么作用？ Spring框架的核心容器是IoC容器&#…...