学习Java的日子 Day48 函数,DOM

news2024/11/17 7:42:27

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 - undefind
	fun(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"));//false
	console.log("判断参数是否不是数字:" + isNaN("abc"));//true
	console.log("将字符串转换为整数:" + parseInt("100.123"));//100
	console.log("将字符串转换为小数:" + parseFloat("100.123"));//100.123
		
	var 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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1716906.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

GD32F103系列单片机片上FLASH和ARM介绍

本文章基于兆易创新GD32 MCU所提供的2.2.4版本库函数开发 后续项目主要在下面该专栏中发布&#xff1a; 手把手教你嵌入式国产化_不及你的温柔的博客-CSDN博客 感兴趣的点个关注收藏一下吧! 电机驱动开发可以跳转&#xff1a; 手把手教你嵌入式国产化-实战项目-无刷电机驱动&am…

Java常见集合类二(Set)

一、Collection接口及其常见实现子类、子接口 1. List接口 2. Set 接口 Set 集合时无序&#xff0c;不可重复的&#xff0c;此处的无序指插入的顺序和遍历得到的顺序不一定相同&#xff1b;Set 最大的功能就是对集合中的元素进行去重&#xff0c;由于Set 继承自 Collection …

我想说这12张是可视化大屏颜值天花板,谁赞成?谁反对?

分享12张可视化大屏&#xff0c;都是大厂出品的&#xff0c;果真是非同凡响。

Simulink从0搭建模型07-P8for循环的使用

Simulink从0搭建模型07-P8for循环的使用 今日学习内容1. For Iterator Subsystem模块介绍1.1. 累加器1.2. For Iterator1.3.小结 2. states介绍3. Set next i&#xff08;相当break)学习心得 今日学习内容 b站视频 【Simulink 0基础入门教程 P8 for循环的使用 For Itrator Sub…

【精品】typescript 数组去重

简单数组去重 <script lang"ts" setup> const array [1, 2, 1, 3, 3, 4, 1, 5];const set new Set(array); const res1 [...set]; console.info(res1); const res2 Array.from(set); console.info(res2); </script>结果&#xff1a; 类声明 inte…

【ai】livekit:Agents 4: livekit-plugins-openai和LiveKit Plugins Silero安装与分析

先提高下性能然后本文 继续按照 上一篇【ai】livekit:Agents 3 : pythonsdk和livekit-agent的可编辑模式下的安装构建 livekit-gent的插件。pycharm 工程 配置Microsoft Defender 排除列表 livekit-plugins-openai 本地安装

3D模型展示适合哪些类型的产品?

3D模型展示特别适合那些需要全面展示产品细节和特性的商品&#xff0c;产品3D交互展示具有直观性、动态性、交互性等显著优势&#xff0c;可以通过51建模网一站式完成商品3D建模、3D展示、3D定制、AR试穿等功能&#xff0c;以下是一些适合使用3D模型展示的产品类型&#xff1a;…

【实战JVM】-基础篇-01-JVM通识-字节码详解

【实战JVM】-基础篇-01-JVM通识-字节码详解-类的声明周期-加载器 1 初识JVM1.1 什么是JVM1.2 JVM的功能1.2.1 即时编译 1.3 常见JVM 2 字节码文件详解2.1 Java虚拟机的组成2.2 字节码文件的组成2.2.1 正确打开字节码文件2.2.2 字节码组成2.2.3 基础信息2.2.3.1 魔数2.2.3.1 主副…

Reddit是什么?跨境独立站卖家如何用Reddit营销?

在互联网时代&#xff0c;社交媒体营销已成为品牌推广的重要手段。Reddit&#xff0c;作为一个充满活力的社区平台&#xff0c;正逐渐受到越来越多跨境独立站卖家的关注。如果你在独立站引流方面遇到瓶颈&#xff0c;不妨了解一下Reddit这个平台。本文将介绍Reddit是什么&#…

如何让物理服务器可以运行多个虚拟机:VMware ESXi系统安装-详细介绍

目录 一、虚拟机&#xff08;比如VMware ESXi上的虚拟机&#xff09;及其优势 &#xff08;一&#xff09;虚拟机 &#xff08;二&#xff09;虚拟机应用和优势 1、硬件资源利用率提升 2、灵活性和可扩展性 3、高可用性 4、简化管理 5、绿色节能 6、快速响应业务需求 …

【Unity AR开发插件】五、运行示例程序

专栏 本专栏将介绍如何使用这个支持热更的AR开发插件&#xff0c;快速地开发AR应用。 链接&#xff1a; Unity开发AR系列 热更数据制作&#xff1a;制作热更数据-AR图片识别场景 插件简介 通过热更技术实现动态地加载AR场景&#xff0c;简化了AR开发流程&#xff0c;让用户可…

SOLIDWORKS 2024:零件亮点的升级与突破

随着科技的不断发展&#xff0c;工程设计软件也在持续进步&#xff0c;以更好地满足工程师和设计师的需求。SOLIDWORKS&#xff0c;作为一款广泛使用的三维CAD软件&#xff0c;一直在不断地推出新版本&#xff0c;以提供更强大、更便捷的功能。今天&#xff0c;我们将深入探讨S…

AI绘画原理是什么?现阶段好用的AI绘画软件又有哪些呢?

AI绘画工具是一种基于人工智能技术&#xff0c;通过计算机程序自动生成艺术作品的软件。这些工具能够根据用户的输入或预设的条件&#xff0c;创作出具有艺术感的图像&#xff0c;极大地降低了绘画和设计的门槛&#xff0c;提高了创作效率和质量。 AI绘画的原理是什么呢&#…

static静态变量

概述 static是静态的意思&#xff0c;我的理解就是在一个类中创建一个变量或者方法&#xff0c;而这个变量或者方法是属于公共的可以直接通过这个类访问这个变量或者这个方法。 访问的方式 类名.static的变量名 类名.static的方法名 static变量 这里我写了一个小demo用来调…

车辆相关识别API优化您的车辆系统

车辆相关识别API是开发者们所需的重要工具&#xff0c;它们基于先进的计算机视觉和深度学习技术&#xff0c;提供了强大的车辆识别和分类能力。这些API能够从图像或视频中快速准确地识别和提取车辆的关键信息&#xff0c;如车辆型号、品牌、颜色等。对于开发者而言&#xff0c;…

在 iCloud.com 上导入、导出或打印联系人

想将iPhone上的电话本备份一份到本地电脑上&#xff0c;发现iTunes好像只是音乐播放了&#xff0c;不再支持像电话本等功能&#xff0c;也不想通过其他第三方软件&#xff0c;好在可以通过iCloud进行导入导出。下面只是对操作过程进行一个图片记录而已&#xff0c;文字说明可以…

元宇宙vr工业产品展示空间降低研发成本

元宇宙产品虚拟展厅搭建编辑器为您提供了一个自助式元宇宙场景搭建的绝佳平台。无论您是设计公司、摄影公司、营销公司还是教育机构&#xff0c;我们都能为您量身打造专属的元宇宙解决方案&#xff0c;满足您的多样化需求。 元宇宙产品虚拟展厅搭建编辑器具备强大的3D编辑功能&…

nacos 2.3.3 Windows系统安装详细版

1&#xff0c;下载 https://github.com/alibaba/nacos/releases 2&#xff0c;解压 3&#xff0c;将nacos的内置库(derby)&#xff0c;修改为我们自己的 mysql 3.1 创建一个数据库 3.2 连接数据库 3.3 执行mysql 脚本&#xff0c;在nacos的conf 目录下 mysql-schema.sql 执…

计算机图形学入门03:基本变换

变换(Transformation)可分为模型(Model)变换和视图(Viewing)变换。在3D虚拟场景中相机的移动和旋转&#xff0c;角色人物动画都需要变换&#xff0c;用来描述物体运动。将三维世界投影变换到2D屏幕上成像出来&#xff0c;也需要变换。 1.二维变换 1.1缩放变换 如上图所示&…

单片机编程的code关键字的诠释

在单片机编程中&#xff0c;code 是一个关键字&#xff0c;用于指示编译器将变量存储在程序存储器中&#xff0c;而不是在数据存储器中。通常情况下&#xff0c;程序存储器的速度比数据存储器的速度更快&#xff0c;而且程序存储器的容量较小&#xff0c;适合存储常量数据和程序…