JavaScript 语言2-前端设计_javascript前端设计-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_47358951/article/details/125710440

JavaScript 语言2-前端设计

一、JS 中的自定义对象

1、Object 形式的自定义对象
对象的定义：var 变量名 = new Object();
属性的定义：变量名.属性名 = 值;
函数的定义：变量名.函数名 = function(){}
对象的访问：变量名.属性 / 函数名();

<html lang="en"> 
	<head> 
		<meta charset="UTF-8"> 
		<title>Title</title> 
		<script type="text/javascript"> 
			var obj = new Object(); 
			obj.name = "华仔"; 
			obj.age = 18; 
			obj.fun = function () { 
				alert("姓名：" + this.name + " , 年龄：" + this.age); 
			}
			alert( obj.age ); 
			obj.fun(); 
		</script> 
	</head> 
	<body> 
	</body> 
</html>

2、{} 花括号形式的自定义对象
对象的定义：
var 变量名 = {
属性名：值,
属性名：值,
函数名：function() {}
};
对象的访问：变量名.属性 / 函数名();

<html lang="en"> 
	<head> 
		<meta charset="UTF-8"> 
		<title>Title</title> 
		<script type="text/javascript"> 
			// 对象的定义： 
			var obj = { 
				name:"华仔", 
				age:18, 
				fun : function () { 
					alert("姓名：" + this.name + " , 年龄：" + this.age); 
				} 
			};
			// 对象的访问： 
			alert(obj.name); 
			obj.fun(); 
		</script> 
	</head> 
	<body> 
	</body> 
</html>

二、js 中的事件
1、什么是事件？
事件是电脑输入设备与页面进行交互的响应。我们称之为事件。
2、常用的事件：
onload 加载完成事件：页面加载完成之后，常用于做页面 js 代码初始化操作。

<html lang="en"> 
	<head> 
		<meta charset="UTF-8"> 
		<title>Title</title> 
		<script type="text/javascript"> 
			// onload 事件静态注册
			function onloadFun() { 
				alert('静态注册 onload 事件'); 
			}
			// onload 事件动态注册
			window.onload = function () { 
				alert("动态注册 onload 事件"); 
			} 
		</script> 
	</head> 
	<body> 
	</body> 
</html>

onclick 单击事件：常用于按钮的点击响应操作。

<html lang="en"> 
	<head> 
		<meta charset="UTF-8"> 
		<title>Title</title> 
		<script type="text/javascript"> 
			function onclickFun() { 
				alert("静态注册 onclick 事件"); 
			}
			// 动态注册 onclick 事件 
			window.onload = function () { 
				var btnObj = document.getElementById("btn01"); 
				alert( btnObj ); 
				btnObj.onclick = function () { 
					alert("动态注册 onclick 事件"); 
				} 
			}
		</script> 
	</head> 
	<body> 
		<!--静态注册 onClick 事件--> 
		<button onclick="onclickFun();">按钮 1</button> 
		<button id="btn01">按钮 2</button> 
	</body> 
</html>

onblur 失去焦点事件：常用用于输入框失去焦点后验证其输入内容是否合法。

<html lang="en"> 
	<head> 
		<meta charset="UTF-8"> 
		<title>Title</title> 
		<script type="text/javascript"> 
			// 静态注册失去焦点事件
			function onblurFun() { 
				console.log("静态注册失去焦点事件"); 
			}
			// 动态注册失去焦点事件 
			window.onload = function () { 
				// 1 获取标签对象 
				var passwordObj = document.getElementById("password"); 
				alert(passwordObj); 
				// 2 通过标签对象.事件名 = function() {}; 
				passwordObj.onblur = function () { 
					console.log("动态注册失去焦点事件"); 
				} 
			} 
		</script> 
	</head> 
	<body> 
		用户名:<input type="text" onblur="onblurFun();"><br/> 
		密码:<input id="password" type="text" ><br/> 
	</body> 
</html>

onchange 内容发生改变事件：常用于下拉列表和输入框内容发生改变后操作。

<html lang="en"> 
	<head> 
		<meta charset="UTF-8"> 
		<title>Title</title> 
		<script type="text/javascript"> 
			function onchangeFun() { 
				alert("女神已经改变了"); 
			}
			window.onload = function () { 
				var selObj = document.getElementById("sel01"); 
				alert( selObj ); 
				selObj.onchange = function () { 
					alert("男神已经改变了"); 
				} 
			} 
		</script> 
	</head> 
	<body> 
		请选择你心中的女神： 
		<!--静态注册 onchange 事件--> 
		<select onchange="onchangeFun();"> 
			<option>--女神--</option> 
			<option>芳芳</option> 
			<option>佳佳</option> 
			<option>萌萌</option> 
		</select> 
		请选择你心中的男神： 
		<select id="sel01"> 
			<option>--男神--</option> 
			<option>李琦</option> 
			<option>华仔</option> 
			<option>宋少</option> 
		</select> 
	</body> 
</html>

onsubmit 表单提交事件：常用于表单提交前，验证所有表单项是否合法。

<html>
	<head> 
		<meta charset="UTF-8"> 
		<title>Title</title> 
		<script type="text/javascript" > 
			// 静态注册表单提交事务 
			function onsubmitFun(){ 
				// 要验证所有表单项是否合法，如果，有一个不合法就阻止表单提交 
				alert("静态注册表单提交事件----发现不合法"); 
				return flase; 
			}
			window.onload = function () { 
				var formObj = document.getElementById("form01"); 
				formObj.onsubmit = function () { 
					// 要验证所有表单项是否合法，如果，有一个不合法就阻止表单提交 
					alert("动态注册表单提交事件----发现不合法"); 
					return false; 
				} 
			} 
		</script> 
	</head> 
	<body> 
		<!--return false 可以阻止 表单提交 --> 
		<form action="http://localhost:8080" method="get" onsubmit="return onsubmitFun();"> 
			<input type="submit" value="静态注册"/> 
		</form> 
		<form action="http://localhost:8080" method="get" id="form01"> 
			<input type="submit" value="动态注册"/> 
		</form> 
	</body> 
</html>

3、事件的注册又分为静态注册和动态注册两种：
什么是事件的注册（绑定）？其实就是告诉浏览器，当事件响应后要执行哪些操作代码，叫事件注册或事件绑定。
静态注册事件：通过 html 标签的事件属性直接赋于事件响应后的代码，这种方式我们叫静态注册。
动态注册事件：是指先通过 js 代码得到标签的 dom 对象，然后再通过 dom 对象.事件名 = function() {} 这种形式赋于事件响应后的代码，叫动态注册。
动态注册基本步骤： 1、获取标签对象 2、标签对象.事件名 = fucntion() {}

二、DOM 模型

1、Document 对象的理解：

第一点：Document 它管理了所有的 HTML 文档内容。
第二点：Document 它是一种树结构的文档。有层级关系。
第三点：它让我们把所有的标签都对象化。
第四点：我们可以通过 Document 访问所有的标签对象。

2、Document 对象中的方法介绍

document.getElementById(elementId) ：通过标签的 id 属性查找标签 dom 对象，elementId 是标签的 id 属性值

<html lang="en"> 
	<head> 
	<meta charset="UTF-8"> 
		<title>Title</title> 
		<script type="text/javascript" > 
			// 当用户点击校验按钮，需要获取输出框中的内容。然后验证其是否合法。
			// 验证的规则是：必须由字母，数字，下划线组成，并且长度是 5 到 12 位。 
			function onclickFun() { 
				// 1 当我们要操作一个标签的时候，一定要先获取这个标签对象。 
				var usernameObj = document.getElementById("username"); 
				// [object HTMLInputElement] 它就是 dom 对象 
				var usernameText = usernameObj.value; 
				// 如何验证字符串，符合某个规则 ，需要使用正则表达式技术 
				var patt = /^\w{5,12}$/; 
				// test()方法用于测试某个字符串，是不是匹配我的规则，匹配就返回 true，不匹配就返回 false。
				var usernameSpanObj = document.getElementById("usernameSpan"); 
				// innerHTML 表示起始标签和结束标签中的内容 
				// innerHTML 这个属性可读，可写 
				usernameSpanObj.innerHTML = "冰墩墩真可爱！"; 
				if (patt.test(usernameText)) { 
					alert("用户名合法！"); 
					usernameSpanObj.innerHTML = "用户名合法！"; 
				} else { 
					alert("用户名不合法！"); 
					usernameSpanObj.innerHTML = "用户名不合法！"; 
				} 
			} 
		</script> 
	</head> 
	<body> 
		用户名：<input type="text" id="username" value="wzg"/> 
		<span id="usernameSpan" style="color:red;"> </span> 
		<button onclick="onclickFun()">较验</button>
	</body> 
</html>

document.getElementsByName(elementName) ：通过标签的 name 属性查找标签 dom 对象，elementName 标签的 name 属性值

<html lang="en"> 
	<head> 
		<meta charset="UTF-8"> 
		<title>Title</title> 
		<script type="text/javascript"> 
		// 全选 
		function checkAll() { 
			// 让所有复选框都选中 
			var hobbies = document.getElementsByName("hobby"); 
			// checked 表示复选框的选中状态。如果选中是 true，不选中是 false 
			// checked 这个属性可读，可写 
			for (var i = 0; i < hobbies.length; i++){ 
				hobbies[i].checked = true; 
			} 
		}
		//全不选 
		function checkNo() { 
			var hobbies = document.getElementsByName("hobby"); 
			for (var i = 0; i < hobbies.length; i++){ 
				hobbies[i].checked = false; 
			} 
		}
		// 反选 
		function checkReverse() { 
			var hobbies = document.getElementsByName("hobby"); 
			for (var i = 0; i < hobbies.length; i++) { 
				hobbies[i].checked = !hobbies[i].checked; 
				if (hobbies[i].checked) { 
					hobbies[i].checked = false;  
				}else { 
					hobbies[i].checked = true; 
				}
			} 
		} 
		</script> 
	</head> 
	<body> 
		兴趣爱好： 
		<input type="checkbox" name="hobby" value="cpp" checked="checked"> C++ 
		<input type="checkbox" name="hobby" value="java"> Java 
		<input type="checkbox" name="hobby" value="js"> JavaScript 
		<br/> 
		<button onclick="checkAll()">全选</button> 
		<button onclick="checkNo()">全不选</button> 
		<button onclick="checkReverse()">反选</button> 
	</body> 
</html>

document.getElementsByTagName(tagname) ：通过标签名查找标签 dom 对象。tagname 是标签名

<html lang="en"> 
	<head> 
		<meta charset="UTF-8"> 
		<title>Title</title> 
		<script type="text/javascript"> 
			// 全选 
			function checkAll() { 
				var inputs = document.getElementsByTagName("input"); 
				for (var i = 0; i < inputs.length; i++){ 
					inputs[i].checked = true; 
				} 
			} 
		</script> 
	</head> 
	<body> 
		兴趣爱好： <input type="checkbox" value="cpp" checked="checked">C++ 				
		<input type="checkbox" value="java">Java 
		<input type="checkbox" value="js">JavaScript
		<br/> 
		<button onclick="checkAll()">全选</button> 
	</body> 
</html>

document.createElement( tagName) ：通过给定的标签名，创建一个标签对象。tagName 是要创建的标签名

<html lang="en"> 
	<head> 
		<meta charset="UTF-8"> 
		<title>Title</title> 
		<script type="text/javascript"> 
			window.onload = function () { 
				// 现在需要我们使用 js 代码来创建 html 标签，并显示在页面上 
				var divObj = document.createElement("div"); 
				// 在内存中 <div></div> 
				var textNodeObj = document.createTextNode("冰墩墩，卡哇伊！");
				// 添加子元素  
				divObj.appendChild(textNodeObj); 
				document.body.appendChild(divObj); 
			} 
		</script>
	</head> 
	<body> 
	</body> 
</html>

注：document 对象的三个查询方法，
如果有 id 属性，优先使用 getElementById 方法来进行查询
如果没有 id 属性，则优先使用 getElementsByName 方法来进行查询
如果 id 属性和 name 属性都没有最后再按标签名查 getElementsByTagName
以上三个方法，一定要在页面加载完成之后执行，才能查询到标签对象。

3、节点的常用属性和方法

节点就是标签对象
方法：通过具体的元素实现节点调用
getElementsByTagName() 方法，获取当前节点的指定标签名孩子节点
appendChild( ChildNode ) 方法，可以添加一个子节点，ChildNode 是要添加的孩子节点
属性：
childNodes 属性，获取当前节点的所有子节点
firstChild 属性，获取当前节点的第一个子节点
lastChild 属性，获取当前节点的最后一个子节点
parentNode 属性，获取当前节点的父节点
nextSibling 属性，获取当前节点的下一个节点
previousSibling 属性，获取当前节点的上一个节点
className 用于获取或设置标签的 class 属性值
innerHTML 属性，表示获取或设置起始标签和结束标签中的内容
innerText 属性，表示获取或设置起始标签和结束标签中的文本