Web开发基础学习笔记整理（11）

最新推荐文章于 2024-05-05 14:01:41 发布

Mo*◑

最新推荐文章于 2024-05-05 14:01:41 发布

阅读量152

点赞数

分类专栏： # Web开发基础文章标签： javascript html js css

本文链接：https://blog.csdn.net/qq_44458489/article/details/105176092

版权

Web开发基础专栏收录该内容

16 篇文章 0 订阅

订阅专栏

Array数组对象中的属性和方法

1）属性：length属性

语法：数组名.length
获取数组元素的个数（求数组容器的大小）
2）操作数组中每一个元素内容

语法：数组名[下标]
3）join方法和toString方法

语法：数组名.join(str) 将数组中所有的元素内容输出,每一个元素内容用str连接
数组名.toString() 将数组中所有的元素内容输出，每一个元素内容默认用","连接
4）concat方法

语法：数组名.concat(value1,value2,value3…)
连接数组，将value1,value2,value3的值连接到数组中
5）slice方法

语法：数组名.slice(start) 从原数组中截取一段子数组，从start的下标位置开始，到
末尾结束。
数组名.slice(start, end) 从原数组中截取一段子数组，从start下标开始，到end
下标结束。
强调：包含start，不包含end
6）reverse方法

语法：数组名.reverse() 数组倒序

Array对象思维导图

在这里插入图片描述

Math对象：用于执行数学相关任务

Math.PI 圆周率3.1415926…
Math.sqrt(x) 开平方根
Math.abs(x) 求绝对值 -3–>3 3->3
Math.random() 产生随机数 0~1
Math.round(x) 对x进行四舍五入后最接近的整数

Math对象思维导图

在这里插入图片描述

window对象 – 浏览器窗体对象

使用window对象对浏览器窗体打开和关闭

打开
window.open() 打开空白浏览器窗体
window.open(“http://www.baidu.com”) 打开百度页面的浏览器窗体
关闭
window.close();

window对象思维导图

在这里插入图片描述

document对象

document.getElementById(“id的值”) 根据id的值查找body体中的标记的

JS中的事件

οnclick=”” 单击事件
οndblclick=”” 双击事件
οnmοuseοver=”” 鼠标进入事件
οnmοuseοut=”” 鼠标离开事件

代码部分：

part1：

<html>
	<head>
		<title>Array内置对象</title>
		<script>
			function test(){
				//创建数组对象
				//下标               0 1 2 3 4
				var arr1 = new Array(5);
				//下标                0    1
				var arr2 = new Array("a", "b");
				//下标      0  1  2
				var arr3 = [1, 2, 3];
				
				/*
				//1)length属性，语法：数组名.length
				alert(arr1.length); //5
				alert(arr2.length); //2
				alert(arr3.length); //3
				*/
				
				/*
				//2)操作数组中每一个元素内容，语法：数组名[下标]
				alert(arr1[0]); //undefined
				alert(arr1[1]); //undefined
				//因为arr1数组只是定义了大小为5，并没有往arr1数组中存储内容
				//所以arr1数组中每一个下标对应的内容都是undefined
				alert(arr3[0]); //1
				alert(arr3[1]); //2
				alert(arr2[0]); //a
				alert(arr2[1]); //b
				*/
				
				/*
				//3)join方法或者toString方法
				alert(arr1.join("-")); // ----
				alert(arr1.toString()); // ,,,,
				alert(arr2.join("-")); //a-b
				alert(arr2.toString()); //a,b
				alert(arr3.join("*")); //1*2*3
				alert(arr3.toString()); //1,2,3
				*/
				
				//4)concat方法
				var arr4 = arr3.concat(4, 5, "a", "b", "c");
				//alert("原数组为：" + arr3.toString()); //原数组为：1,2,3
				//alert("连接后数组为：" + arr4.toString()); //连接后数组为：1,2,3,4,5,a,b,c
				//alert(arr4.concat("d")[0]); //1
				
				/*
				//5)slice方法
				//arr4 --> 1,2,3,4,5,a,b,c
				//下标     0 1 2 3 4 5 6 7
				var arr5 = arr4.slice(3);
				alert(arr5.toString()); //4,5,a,b,c
				var arr6 = arr4.slice(3,6);
				//arr6 = arr6.slice
				alert(arr6); //4,5,a
				*/
				
				//6)reverse方法
				var arr7 = [32, 12, 111, 444];
				alert("原数组为：" + arr7);
				arr7.reverse(); //将数组中的内容进行反向处理
				alert("反向后的数组为：" + arr7); //反向后的数组为：444,111,12,32
			}
		</script>
	</head>
	<body>
		<input type="button" name="btn" value="点我" onclick="test()"/>
	</body>
</html>

效果图：

在这里插入图片描述

part2：

<html>
	<head>
		<title>Math内置对象</title>
		<script>
			function test(){
				//alert(Math.PI); //3.141592653589793
				//alert(Math.sqrt(4)); //2
				//alert(Math.sqrt(9)); //3
				//alert(Math.abs(-3)); //3
				//alert(Math.round(20.7)); //21
				//alert(Math.round(20.1)); //20
				//alert(Math.round(-20.1)); //-20
				//alert(Math.random()); //产生0-1之间的随机小数
				//产生0-100之间的随机小数
				//alert(Math.random()*100); //0-1 * 100 --> 0-100
				//随机数四舍五入取整
				//alert(Math.round(Math.random()*100));
				//parseInt()方法 --丢掉小数部分，只保留整数部分
				alert(parseInt(3.14)); //3
				alert(parseInt(3.95)); //3
			}
		</script>
	</head>
	<body>
		<input type="button" name="btn" value="确定" onclick="test()"/>
	</body>
</html>

效果图：

在这里插入图片描述

part3：

<html>
	<head>
		<title>window内置对象</title>
		<script>
			function test(){
				//关闭浏览器窗体
				//window.close(); //直接关闭
				//打开浏览器窗体
				//window.open(); //保留，打开空白
				window.open("http://www.baidu.com"); //保留，打开网址
			}
		</script>
	</head>
	<body>
		<input type="button" name="btn" value="确定" onclick="test()"/>
	</body>
</html>

效果图：

在这里插入图片描述

part4：

<html>
	<head>
		<title>document内置对象--图片显示隐藏案例</title>
		<script>
			function btnShow(){
				//1.先找到body体中的<img>标记图片
				//image是别名，表示根据id的值m找到的<img>标记图片
				var image = document.getElementById("m");
				//2.修改<img>标记中style属性里visibility的值为visible
				image.style.visibility="visible";
			}
			//点击隐藏按钮，执行该函数，该函数的功能是：实现图片的隐藏
			function btnHid(){
				//1.先找到body体中的<img>标记图片
				//image是别名，表示根据id的值m找到的<img>标记图片
				var image = document.getElementById("m");
				//2.修改<img>标记中style属性里visibility的值为hidden
				image.style.visibility="hidden";
			}
		</script>
	</head>
	<body>
		<input type="button" name="b1" value="显示" onclick="btnShow()" />
		<input type="button" name="b2" value="隐藏" onclick="btnHid()" />
		<!-- <input type="button" name="b2" value="隐藏" οndblclick="btnHid()" /> -->
		<!-- <input type="button" name="b2" value="隐藏" οnmοuseοver="btnHid()" /> -->
		<!-- <input type="button" name="b2" value="隐藏" οnmοuseοut="btnHid()" /> -->
		<br/>
		<br/>
		<!--
			visibility:hidden 占位隐藏
			visibility:visible 显示
		-->
		<img src="玫瑰.jpg" width="300" height="200" style="visibility:hidden" id="m"/>
	</body>
</html>

效果图：

在这里插入图片描述
点击显示：

点击隐藏：

Mo*◑

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Web开发基础学习笔记整理（11）

Array数组对象中的属性和方法1）属性：length属性语法：数组名.length获取数组元素的个数（求数组容器的大小）2）操作数组中每一个元素内容语法：数组名[下标]3）join方法和toString方法语法：数组名.join(str) 将数组中所有的元素内容输出,每一个元素内容用str连接数组名.toString() 将数组中所有的元素内容输出，每一个...
复制链接

扫一扫

专栏目录