网页前端培训第七课(JS事件)

最新推荐文章于 2024-11-10 22:45:39 发布

Fps-caigou

最新推荐文章于 2024-11-10 22:45:39 发布

阅读量159

点赞数

文章标签：前端 javascript jquery

本文链接：https://blog.csdn.net/ILWEHnever/article/details/122886527

版权

视频：【优极限】 HTML+CSS+JavaScript+jQuery前端必学教程，小白教学，前端基础全套完成版_哔哩哔哩_bilibili

内置对象和对象：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>内置对象和对象</title>
	</head>
	<body>
		<!-- 
			String
				charAt(idx)	返回指定位置处的字符
				indexOf(Chr)	返回指定子字符串的位置,从左到右。找不到返回-1
				substr(m,n)	返回给定字符串中从m位置开始，取n个字符，如果参数n省略，则意味着取到字符串末尾。
				osubstring(m,n)	返回给定字符串中从m位置开始，到n位置结束，如果参数n省略，则意味着取到字符串末尾。
				toLowerCase()	将字符串中的字符全部转化成小写。
				toUpperCase()	将字符串中的字符全部转化成大写。
				length		属性,不是方法，返回字符串的长度。
				
			Math
				Math.random()  随机数
				Math.ceil()	向上取整，大于最大整数
				Math.floor() 	向下取整，小于最小整数String
				
			Date
				1.获取日期
					getFullYear()	年
					getMonth()		月
					getDate()		日
					getHours()		时
					getMinutes()	分
					getSeconds()	秒
				2.设置日期
					setYear ()
					setMonth()
					setDate()
					setHours()
					setMinutes()
					setSeconds()
					toLoacaleString()	转换成本地时间字符串
			
			对象
				对象的创建
					1.字面量形式创建对象
						var 对象名 = {};//空对象
						vaar 对象名 = {
							键:值，
							键:值，
							键:值，
							...
						};
					2.通过nwe Object创建
						var 对象名 = new Object();//空对象
					3.通过Object创建的create方法创建
					var 对象名 = Object.create(null);//空对象
					var 对象名 = Object.creat(对象);
				
				对象的操作
					获取对象的属性(如果属性不存在，则获取undefined)
						对象名.属性名;
					设置对象的属性(如果属性存在，修改属性值；如果属性不存在，则添加属性值)
						对象名.属性名 = 值;
				
				对象的序列化和反序列化
					序列化:将JS对象(JSON对象)转换成JSON字符串
						var 变量名 = JSON.stringify(对象);
					反序列化:将JSON字符串转换成JS对象(JSON对象)
						var 对象名 =JSON.parse(JSON字符串);
				
				this
					谁调用函数，this指代谁。
					1.直接调用函数，this代表的全局的window对象
					2.调用对象中的函数，this代表的是对象本身
		 -->
		 
		 <script type="text/javascript">
			var str = "Hello World";
			console.log(str);
			console.log(str.substring(3));//从下标3开始截取到最后
			console.log(str.substring(3,5));//从下标3开始截取到下标5结束
			
			console.log(str.toLowerCase());
			console.log(str.toUpperCase());
			
			
			// Math.random()  随机数
			console.log(Math.random());
			// Math.ceil()	向上取整，大于最大整数
			console.log(Math.ceil(1.2));
			// Math.floor() 	向下取整，小于最小整数String
			console.log(Math.floor(1.2))
			
			/*获取日期*/
			var date = new Date();
			console.log(date);
			// getFullYear()	年
			console.log(date.getFullYear());
			// getMonth()		月
			console.log(date.getMonth()+1);
			// getDate()		日
			console.log(date.getDate());
			// getHours()		时
			console.log(date.getHours());
			// getMinutes()		分
			console.log(date.getMinutes());
			// getSeconds()		秒
			console.log(date.getSeconds());
			var mstr = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
			var dateStr = date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate()+' '+date.getHours()+':'+date.getMinutes()+':'+date.getSeconds()
			console.log(dateStr);
			
			//时间本地化
			console.log(date.toLocaleDateString());
			
			/*对象的创建*/
			// 字面量形式创建对象
			var obj1 = {};//空对象
			console.log(obj1);
			var obj2 = {
				name:"zhangsan",
				age:18,
			};
			console.log(obj2);
			
			// 通过nwe Object创建
			var obj3 = new Object();//空对象
			console.log(obj3);
			
			// 通过Object创建的create方法创建
			var obj4 = new Object(null);
			console.log(obj4);
			
			var obj5 = Object.create(obj2);
			console.log(obj5);
			
			/*对象的操作*/
			// 获取对象的属性
			//获取不存在的属性
			console.log(obj1.name);//undefined
			//获取存在的属性
			console.log(obj2.name);//zhangsan
			
			console.log(obj3.name);//undefined
			console.log(obj4.name);//undefined
			console.log(obj5.name);//zhangsan
			
			/*设置对象的属性*/
			//存在的属性，修改值
			obj2.age = 20;
			console.log(obj2);
			//不存在的属性，添加值
			obj2.upwd = "123456";
			console.log(obj2);
			
			console.log("-------------------");
			
			/*对象的序列化和反序列化*/
			//序列化
			//JSON对象
			var obj = {
				name:"zhangsan",
				upwd:"123456",
				age:18,
			};
			obj.name = 'lisi';
			console.log(obj);
			//将JSON对象转换为JSON字符串
			var objToStr = JSON.stringify(obj);
			console.log(objToStr);
			console.log("--------------");
			
			//JSON字符串
			var jsonStr = '{"name":"zhangsan","upwd":"123456","age":18}';
			console.log(jsonStr);
			//将JSON字符串转换成JSON对象
			var strToObj = JSON.parse(jsonStr);
			console.log(strToObj);
			
			
			/*this*/
			//1.直接调用函数，this代表的全局的window对象
			function test(){
				console.log("这是一个测试方法...");
				console.log(this);//window对象
			}
			test();
			// 2.调用对象中的函数，this代表的是对象本身
			var o = {
				name:"zhangsan",
				age:18,
				sayHello:function(){
					console.log("你好呀...");
					console.log(this);//当前o对象
				}
			}
			//调用对象中的方法
			o.sayHello();
		 </script>
	</body>
</html>

事件：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件</title>
	</head>
	<!-- 
		onload事件:当文档(HTML页面)加载完毕后执行
	 -->
	 <!-- 
		事件
			事件中的几个名词:
				事件源:给什么元素/标签绑定事件
				事件名:绑定什么事件
				事件监听:浏览器窗口
				执行函数:事件触发后需要执行什么代码
			
			常用的事件类型
				onload:当页面或图像加载完后立即触发
				onblur:元素失去焦点
				onfocus:元素获得焦点
				onclick:鼠标点击某个对象
				onchange:用户改变域的内容
				onmouseover:鼠标移动到某个元素上
				onmouseout:鼠标从某个元素上离开
				onkeyup:某个键盘的键被松开
				onkeydown:某个键盘的键被按下
			
			事件流
				事件冒泡:事件开始时由最具体的元素接受，然后逐级向上传播到较为不具体的节点(文档)
				事件捕获:事件开始时由文档节点接受，然后逐级向下传播到具体的元素节点
			
			事件处理程序(事件绑定方式)
				1.HTML事件处理程序
					直接在html元素上绑定事件
				2.DOM0级事件
					先获取事件源，再给事件源绑定事件
					不能同时给元素绑定相同事件多次
				3.DOM2级事件
					事件源.addEventListener("事件类型",执行函数,true);
				
				注:通过id属性值获取节点对象
				document.getElementById("id属性值");
	 -->
	
	<body onload="loadWindow()">
		<!-- 
			onlick事件:点击事件(单击事件)
			onmouseout:鼠标移开事件
		 -->
		<button onclick="test()" onmouseout="outButton()">按钮</button>

		<!-- 常用事件类型 -->
		<!-- 
			onblur事件:失焦事件
			onfocus事件:聚焦事件
		-->
		姓名:<input type="text" onblur="aa()" onfocus="bb()">
		城市:<select onchange="changeCity()">
				<option value ="">北京</option>
				<option value ="">上海</option>
				<option value ="">深圳</option>
			</select>
		
		<hr >
		<!-- HTML事件处理程序 -->
		<button type="button" onclick="alert('Hello')">按钮1</button>
		<!-- DOM0级事件 -->
		<button type="button" id="btn2">按钮2</button>
		<!-- DOM2级事件 -->
		<button type="button" id="btn3">按钮3</button>
		
	</body>
	<script type="text/javascript">
		function loadWindow() {
			console.log("文档加载完毕");
		}

		function test() {
			console.log("按钮被点击了...");
		}

		function aa() {
			console.log("失焦了...");
		}

		function bb() {
			console.log("聚焦了...");
		}

		function changeCity() {
			console.log("值改变了...");
		}
		
		function outButton(){
			console.log("鼠标离开按钮了...");
		}
		
		/*DOM0级事件*/
		//1.事件源:获取事件源(按钮)
		var btn2 = document.getElementById("btn2");
		//2.事件类型:给事件源绑定事件		//3.指定函数:事件触发后要执行的代码
		btn2.onclick = function(){
			console.log("按钮2被点击了...")
		}
		
		/*DOM2级事件*/
		//1.事件源:获取事件源(按钮)
		var btn2 = document.getElementById("btn3");
		//2.添加事件监听
		btn3.addEventListener("click",function(){
			console.log("按钮3被点击了...");
		},false);
		
		btn3.addEventListener("mouseout",btnFunction,false);
		function btnFunction(){
			console.log("鼠标离开按钮3了...");
		}
	</script>
</html>