js学习笔记07--常用对象方法和事件机制_对象里的方法为啥都会被触发-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44552215/article/details/99646399

本文深入探讨JavaScript中的核心对象如String、Date、Math及Global的使用方法，并详细讲解了事件机制，包括单双击、鼠标、键盘、焦点和页面加载事件的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

13 js的常用对象和方法

<html>
	<head>
		<title>js的常用对象和方法</title>
		<meta charset="UTF-8"/>
		<!--
			常用的对象和方法：
				1、String
				2、Date
				3、Math
				4、Global
		-->
		<!--声明js代码域-->
		<script type="text/javascript">
			//1、String对象学习
				var str=new String("abcdefg");//声明String对象存储字符串
				var  str2="MNP";//简写形式
				//alert(str);
				//字符串大小写的转换
					//alert(str.toUpperCase());//将字符串转换为大写
					//alert(str2.toLowerCase());//将字符串转换为小写
				//字符串的切割
//					var s="哈哈,嘿嘿,呵呵";
//					var s1=s.split(",");//按照指定的字符切割字符串，返回数组。
//					alert(s1.length);
				//字符串的截取
//					var s="abcdef";
//					alert(s.substr(1,3));//从指定的开始位置截取指定长度的子字符串
//					alert(s.substring(1,3));//从指定的开始位置和指定的结束位置截取子字符串，含头不含尾。
				//查找子字符串第一次出现的角标
//					var s="abcdefg";
//					alert(s.indexOf("dd"));//返回指定子字符串第一次出现的角标，没有则返回-1;
			//2、Date对象
				//1、创建Date对象
					var d=new Date();
					//alert(d);
				//获取当前年份
//					alert(d.getYear());//返回的是1900年开始距今的年分数
//					alert(d.getFullYear());//返回的是当前的年份
//					alert(d.getMonth()+1);//返回的当前月份的角标值，需要+1
//					alert(d.getDate());//返回的是当前的日期数
//					alert(d.getDay());//返回的是当前的星期数，但是周天会返回值为0;
//					alert(d.getHours());//返回当前时间的小时数
//					alert(d.getMinutes());//返回当前时间的分钟数
//					alert(d.getSeconds());//返回当前时间的秒数
					
					//alert(d.getHours()+":"+d.getMinutes()+":"+d.getSeconds());
			//3、Math对象学习
				//1、Math在使用的时候不能new，使用Math.方法名调用即可。
					//创建随机数字
//						alert("Math.random():"+Math.random());//返回0-1之间的随机数字，含0不含1。
//						alert(1000+Math.random()*9000);
					//向下取整
//						alert(Math.floor(1000+Math.random()*9000));
					//向上取整
//						alert(Math.ceil("12.34"));
					//四舍五入
//						alert(Math.round(12.12));
//						alert(Math.round(12.65));
					//数值比较:求取最小值，求取最大值
//						alert(Math.min(12,13,5,78));//获取最小值
//						alert(Math.max(12,3,4,56));//获取最大值
			//4、Global对象学习
					//1、改对象从不直接使用并且不能new，也是就直接写方法名调用即可。
						//使用eval将字符串转换为可执行的js代码
							var str="var a=123";
							eval(str);
							alert(a);
						//使用isNaN判断是否值NaN
							alert(isNaN("123"));
						//获取字符中的浮点数
							alert(parseFloat("12.34a34a"));
		</script>
	</head>
	<body>
		
	</body>
</html>

14 js的事件机制学习1

<html>
	<head>
		<title>js的事件机制学习1</title>
		<meta charset="UTF-8"/>
		<!--
			js的事件机制：
				解释：当我们的行为动作满足了一定的条件后，会触发某类事务的执行。
				作用：主要是结合js的函数来使用。
				内容:
					1、单双击事件
						单击：onclick    		当鼠标单击的时候会触发
						双击：ondblclick		当鼠标双击的时候会被触发
					2、鼠标事件
						onmouseover			当鼠标悬停在某个HTML元素上的时候触发
						onmousemove			当鼠标在某个HTML元素上移动的时候触发
						onmouseout			当鼠标在某个HTML元素上移出的时候触发
					3、键盘事件
						onkeyup				当键盘在某个HTML元素上弹起的时候触发
						onkeydown			当键盘在某个HTML元素上下压的时候触发
					4、焦点事件
						onfocus				当某个HTML元素获取焦点的时候触发
						onblur				当某个HTML元素失去焦点的时候触发
					5、页面加载事件			
						onload				当页面加载成功后触发。
				注意:
					js中添加事件的第一种方式：
						在HTML上直接使用事件属性进行添加，属性值为所监听执行的函数。
					js中的事件只有在当前HTML元素上有效。
					一个HTML元素可以添加多个不同的事件。
					一个事件可以监听触发多个函数的执行,但是不同的函数要使用分号间隔
		-->
		<!--声明js代码域-->
		<script type="text/javascript">
			/*声明js函数*/
				//单击事件
					function testOnclick(){
						alert("我是单击");
					}
				//测试双击
					function testOndblclick(){
						alert("我是双击");
					}
				//鼠标事件
					function testOnmouseover(){
						alert("我是鼠标悬停事件");
					}
					
					function testOnmousemove(){
						alert("我被移动了");
					}
					
					function testOnmouseout(){
						alert("我被移出了");
					}
				//键盘事件
					function testOnkeyup(){
						alert("我是键盘弹起事件");
					}
					
					function testOnkeydown(){
						alert("我是键盘按下事件");
					}
				//焦点事件
					function testOnfocus(){
						document.getElementById("showdiv").innerHTML="哈哈";
						alert("我是获取焦点事件");
					}
					
					function testOnblur(){
						alert("我是失去焦点事件");
					}
				//页面加载
					function testOnload(){
						alert("我是页面加载事件");
					}
				//测试
					function test(){
						alert("测试一个事件的多个函数执行");
					}
		</script>
		<style type="text/css">
			#showdiv{
				width: 300px;
				height: 300px;
				border: solid 1px;
			}
		</style>
	</head>
	<body onload="testOnload()">
		<h3>js的事件机制学习1</h3>
		<hr />
		<input type="button" name="" id="" value="测试单击" onclick="testOnclick();test();" />
		<input type="button" name="" id="" value="测试双击" ondblclick="testOndblclick();" />
		<hr />
		<br /><br />
		<div id="showdiv" onmouseover="testOnmouseover();" onmousemove="testOnmousemove()" onmouseout="testOnmouseout()">
			
		</div>
		<hr />
		键盘事件学习：	<br />
			键盘弹起事件：<input type="text" name="" id="" value="" onkeyup="testOnkeyup();"/><br /><br />
			键盘下压事件： <input type="text" name="" id="" value="" onkeydown="testOnkeydown()"/>
		<hr />
			焦点事件学习：<br />
				获取焦点： <input type="text" name="" id="" value="" onfocus="testOnfocus();"/><br /><br />
				失去焦点： <input type="text" name="" id="" value=""  onblur="testOnblur();"/>
	</body>
</html>