当前位置： 首页 > news >正文

学习Java的日子 Day49 函数，DOM

news 来源：原创 2024/9/30 6:35:18

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>

相关文章：

  • aws glue配置读取本地kafka数据源
  • 【Linux】关于获取进程退出状态中的core dump标志补充
  • Google Earth Engine（GEE）深度学习入门教程-Python数据读入篇
  • npm build报错Cannot find module ‘html-webpack-plugin‘解决方法
  • 设计模式—23种设计模式重点 表格梳理
  • cherry-markdown公式不好选中的问题
  • 国产PS插件新选择；StartAI平替中的佼佼者！
  • 微软的野望：下一代操作系统
  • 软考结束。有什么要说的
  • 关于Profinet远程IO模块的超详细讲解
  • 前端 JS 经典：构建工具
  • Java 编程入门：从零开始
  • linux学习（六）
  • 【Linux】：Linux 2.6内核 调度队列和调度原理
  • JavaWeb_SpringBootWeb
  • [iOS]Core Data浅析一 -- 启用Core Data
  • 【编码】-360实习笔试编程题（二）-2016.03.29
  • 【挥舞JS】JS实现继承，封装一个extends方法
  • Angular js 常用指令ng-if、ng-class、ng-option、ng-value、ng-click是如何使用的？
  • Idea+maven+scala构建包并在spark on yarn 运行
  • JavaScript的使用你知道几种？(上)
  • Linux下的乱码问题
  • nginx（二）：进阶配置介绍--rewrite用法，压缩，https虚拟主机等
  • Objective-C 中关联引用的概念
  • React16时代，该用什么姿势写 React ?
  • ⭐ Unity 开发bug —— 打包后shader失效或者bug (我这里用Shader做两张图片的合并发现了问题)
  • Vue小说阅读器（仿追书神器）
  • Xmanager 远程桌面 CentOS 7
  • 力扣(LeetCode)965
  • 让你成为前端，后端或全栈开发程序员的进阶指南，一门学到老的技术
  • 容器化应用: 在阿里云搭建多节点 Openshift 集群
  • 如何用vue打造一个移动端音乐播放器
  • 十年未变！安全，谁之责？（下）
  • 使用agvtool更改app version／build
  • 它承受着该等级不该有的简单， leetcode 564 寻找最近的回文数
  • 消息队列系列二（IOT中消息队列的应用）
  • 一起参Ember.js讨论、问答社区。
  •  一套莫尔斯电报听写、翻译系统
  • 用jquery写贪吃蛇
  • 优化 Vue 项目编译文件大小
  • ​LeetCode解法汇总2182. 构造限制重复的字符串
  • ​sqlite3 --- SQLite 数据库 DB-API 2.0 接口模块​
  • ​软考-高级-系统架构设计师教程（清华第2版）【第15章 面向服务架构设计理论与实践（P527~554）-思维导图】​
  • ​十个常见的 Python 脚本 (详细介绍 + 代码举例)
  • ## 临床数据 两两比较 加显著性boxplot加显著性
  • #调用传感器数据_Flink使用函数之监控传感器温度上升提醒
  • #我与Java虚拟机的故事#连载15：完整阅读的第一本技术书籍
  • $con= MySQL有关填空题_2015年计算机二级考试《MySQL》提高练习题(10)
  • $refs 、$nextTic、动态组件、name的使用
  • （02）Unity使用在线AI大模型（调用Python）
  • （3）STL算法之搜索
  • （超详细）2-YOLOV5改进-添加SimAM注意力机制
  • （附源码）springboot太原学院贫困生申请管理系统 毕业设计 101517
  • （附源码）ssm考生评分系统 毕业设计 071114
  • （接上一篇）前端弄一个变量实现点击次数在前端页面实时更新