学习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组件,这个…...
uniapp 对接腾讯云IM群组成员管理(增删改查)
UniApp 实战:腾讯云IM群组成员管理(增删改查) 一、前言 在社交类App开发中,群组成员管理是核心功能之一。本文将基于UniApp框架,结合腾讯云IM SDK,详细讲解如何实现群组成员的增删改查全流程。 权限校验…...
LeetCode - 199. 二叉树的右视图
题目 199. 二叉树的右视图 - 力扣(LeetCode) 思路 右视图是指从树的右侧看,对于每一层,只能看到该层最右边的节点。实现思路是: 使用深度优先搜索(DFS)按照"根-右-左"的顺序遍历树记录每个节点的深度对于…...
适应性Java用于现代 API:REST、GraphQL 和事件驱动
在快速发展的软件开发领域,REST、GraphQL 和事件驱动架构等新的 API 标准对于构建可扩展、高效的系统至关重要。Java 在现代 API 方面以其在企业应用中的稳定性而闻名,不断适应这些现代范式的需求。随着不断发展的生态系统,Java 在现代 API 方…...
「全栈技术解析」推客小程序系统开发:从架构设计到裂变增长的完整解决方案
在移动互联网营销竞争白热化的当下,推客小程序系统凭借其裂变传播、精准营销等特性,成为企业抢占市场的利器。本文将深度解析推客小程序系统开发的核心技术与实现路径,助力开发者打造具有市场竞争力的营销工具。 一、系统核心功能架构&…...
Kafka主题运维全指南:从基础配置到故障处理
#作者:张桐瑞 文章目录 主题日常管理1. 修改主题分区。2. 修改主题级别参数。3. 变更副本数。4. 修改主题限速。5.主题分区迁移。6. 常见主题错误处理常见错误1:主题删除失败。常见错误2:__consumer_offsets占用太多的磁盘。 主题日常管理 …...

springboot 日志类切面,接口成功记录日志,失败不记录
springboot 日志类切面,接口成功记录日志,失败不记录 自定义一个注解方法 import java.lang.annotation.ElementType; import java.lang.annotation.Retention; import java.lang.annotation.RetentionPolicy; import java.lang.annotation.Target;/***…...

Elastic 获得 AWS 教育 ISV 合作伙伴资质,进一步增强教育解决方案产品组合
作者:来自 Elastic Udayasimha Theepireddy (Uday), Brian Bergholm, Marianna Jonsdottir 通过搜索 AI 和云创新推动教育领域的数字化转型。 我们非常高兴地宣布,Elastic 已获得 AWS 教育 ISV 合作伙伴资质。这一重要认证表明,Elastic 作为 …...
加密通信 + 行为分析:运营商行业安全防御体系重构
在数字经济蓬勃发展的时代,运营商作为信息通信网络的核心枢纽,承载着海量用户数据与关键业务传输,其安全防御体系的可靠性直接关乎国家安全、社会稳定与企业发展。随着网络攻击手段的不断升级,传统安全防护体系逐渐暴露出局限性&a…...
ThreadLocal 源码
ThreadLocal 源码 此类提供线程局部变量。这些变量不同于它们的普通对应物,因为每个访问一个线程局部变量的线程(通过其 get 或 set 方法)都有自己独立初始化的变量副本。ThreadLocal 实例通常是类中的私有静态字段,这些类希望将…...
算法250609 高精度
加法 #include<stdio.h> #include<iostream> #include<string.h> #include<math.h> #include<algorithm> using namespace std; char input1[205]; char input2[205]; int main(){while(scanf("%s%s",input1,input2)!EOF){int a[205]…...