JavaScript笔记04-优快云博客

博客围绕JavaScript展开，介绍了设置和获取文本框的value，讲解了innerHTML和innerText属性，还提及了js的正则表达以及扩展字符串的trim函数等信息技术相关内容。

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

设置和获取文本框的value

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>DOM编程-获取文本框的value</title>
	</head>
	<body>
		<script type="text/javascript">
			/* 
				1.javaScript包括三大块
					ECMAScript：js的核心语法（ES规范/ECMA-262标准）
					DOM：Document Object从Model（文档对象模型，对网页当中的节点进行增删改的过程）HTML文档被当做一棵DOM树来看待
						var domObject = document.getElementById("id");
					BOM：Browser Object Model（浏览器对象模型）
						关闭浏览器窗口、打开一个新的浏览器窗口、后退、前进、浏览器地址上的地址等，都是BOM编程
				2.DOM和BOM的区别与联系
					BOM的顶级对象是：window
					DOM的顶级对象是：document
					实际上BOM是包括DOM的！！！
				window.onload = function(){
					//var btnElt = window.document.getElementById("btn");
					var btnElt = document.getElementById("btn");
					alert(btnElt);//[object HTMLInputElement]
				}
				<input type="button" id="btn" value="hello" />
			 */
			
			window.onload = function(){
				var btnElt = document.getElementById("btn");
				btnElt.onclick = function(){
					//获取username节点
					/* var usernameElt = document.getElementById("username");
					var username = usernameElt.value;
					alert(username); */
					//简写如下：
					alert(document.getElementById("username").value);
					
					//可以修改它的value
					//document.getElementById("username").value = "张三";
				}
			}
			
			window.onload = function(){
				document.getElementById("setBtn").onclick = function(){
					document.getElementById("username2").value = document.getElementById("username1").value;
				}
			}
			
		</script>
		
		<input type="text" id="username" />
		<input type="button" id="btn" value="获取文本框的value" />
		
		<hr>
		
		<input type="text" id="username1" />
		<input type="text" id="username2" />
		<br>
		<input type="button" id="setBtn" value="将第一个文本框的value赋值到第二个文本框上" />
		
		<!-- blur事件，失去焦点事件 -->
		<!-- 以下代码中的this代表的是当前input节点对象，this.value就是这个节点对象的value属性 -->
		<input type="text" onblur="alert(this.value)" />
	</body>
</html>

innerHTML和innerText属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>innerHTML和innerText</title>
		<style type="text/css">
			#div1{
				background-color: aqua;
				width: 300px;
				height: 300px;
				border: 1px black solid;
				position: absolute;
				top: 100px;
				left: 100px;
			}
		</style>
	</head>
	<body>
		<!-- 
			innerHTML和innerText属性的区别
			相同点：都是设置元素内部的内容
			不同点：
				innerHTML会把后面的“字符串”当做一段HTML代码解释并执行
				innerText，即使后面是一段HTMl代码，也只是将其当做普通的字符串来看待
		 -->
		<script type="text/javascript">
			window.onload = function(){
				document.getElementById("btn");
				btn.onclick = function(){
					//设置div内容
					//第一步：获取div对象
					var divElt = document.getElementById("div1");
					//第二步：使用innerHTML属性来设置元素内部的内容
					//divElt.innerHTML = "qwert";
					
					//divElt.innerHTML = "<font color='red'>用户名不能为空！</font>";
					//输出：用户名不能为空！(字体为红色)
					
					divElt.innerText = "<font color='red'>用户名不能为空！</font>";
					//输出：<font color='red'>用户名不能为空！</font>
				}
			}
		</script>
		
		<input type="button" id="btn" value="设置div中的内容" />
		
		<div id="div1"></div>
	</body>
</html>

js的正则表达

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>正则表达式</title>
	</head>
	<body>
		<script type="text/javascript">
			/* 
				1.什么是正则表达式，有何用？
					正则表达式：Regular Expression
					正则表达式主要用在字符串格式匹配方面
				2.正则表达式实际上是一门独立的学科，大部分编程语言都支持正则表达式
				3.对于JavaScript编程来说需要掌握哪些正则表达式
					(1):常见的正则表达式符合要认识
					(2):简单的正则表达式要会写
					(3):他人编写的正则表达式要看得懂
					(4):在JavaScript当中，怎么创建正则表达式对象（new对象）
					(5):在JavaScript当中，正则表达式对象有哪些方法（调方法）
					(6):要能够快速的从网络上找到自己需要的正则表达式，并且测试其有效性
				4.常见的正则表达式符号
					. 匹配除换行符以外的任意字符
					\w 匹配字母或数字或下划线或汉字
					\s 匹配任意的空白字符
					\d 匹配数字
					\b 匹配单词的开始或结束
					^ 匹配字符串的开始
					$ 匹配字符串的结束
					
					* 重复零次或更多次
					+ 重复一次或更多次
					? 重复零次或一次
					{n} 重复n次
					{n,} 重复n次或更多次
					{n,m} 重复n到m次
					
					\W 匹配任意不是字母，数字，下划线，汉字的内容
					\S 匹配任意不是空白符的字符
					\D 匹配任意非数字的字符
					\B 匹配不是单词开头或结束的字符
					[^x] 匹配除了x以外的任意字符
					[^aeiou] 匹配除了aeiou这几个字符以外的任意字符
					
					正则表达式当中的小括号()优先级较高
					[1-9] 表示1到9的任意1个数字(次数是1次)
					[A-Za-z0-9] 表示A-Za-z0-9中的任意1个字符
					[A-Za-z0-9-] 表示A-Z、a-z、0-9，-，以上所有字符中的任意1个字符
					
					| 表示或者
					
				5.简单的正则表达式要会写
					QQ号的正则表达式：[1-9][0-9]{4,}$
				6.他人编写的正则表达式要能看懂
					email的正则表达式：^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$
					du+jubin@zhang-san.com.cn
				7.如何创建正则表达式对象，如何调用正则表达式对象的方法
					第一种创建方式：
						var regExp = /正则表达式/flags;
					第二种创建方式：
						var regExp = new RegExp("正则表达式","flags");
					
					关于flags：
						g：全局匹配
						i：忽略大小写
						m：多行搜索（ES规范制定之后i偶才支持m）当前面是正则表达式的时候，m不能用，只有当前面是普通字符串的时候，m才能使用
					正则表达式对象的test()方法
						true/false = 正则表达式.test(用户填写的字符串);
						true：字符串格式匹配成功
						false：字符串格式匹配失败
			 */
			window.onload = function(){
				//给按钮绑定click
				document.getElementById("btn").onclick = function(){
					var email = document.getElementById("email").value;
					var emailRegExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
					var ok = emailRegExp.test(email);
					if(ok){//合法
						document.getElementById("emailError").innerText = "邮箱地址合法";
					}else{//不合法
						document.getElementById("emailError").innerText = "邮箱地址不合法";
					}
				}
				//给文本框绑定focus
				document.getElementById("email").onfocus = function(){
					document.getElementById("emailError").innerText = "";
				}
			}
		</script>
		
		<input type="text" id="email" />
		<span id="emailError" style="color: red; font-size: 12px;"></span>
		<br>
		<input type="button" id="btn" value="验证邮箱" />
	</body>
</html>

扩展字符串的trim函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>去除字符串前后空白</title>
	</head>
	<body>
		<script type="text/javascript">
			//低版本IE浏览器不支持字符串的trim()函数怎么办？
			//可以自己对String类扩展一个全新的trim()函数
			/* 
				String.prototype.trim = function(){
				//去除当前字符串的前后空白
				//在当前的方法中的this代表的就是当前字符串
				this.replace(/^\s+/,"").replace(/\s+$/,"");
			} 
			*/
			window.onload = function(){
				document.getElementById("btn").onclick = function(){
					//获取用户名
					var username = document.getElementById("username").value;
					//去除前后空白
					username = username.trim();
					//测试
					alert("--->" + username + "<---");
                    /* 
					输入：   阿波     
					输出：--->阿波<---
				  */
				}
			}
		</script>
		<input type="text" id="username" />
		<input type="button" id="btn" value="获取用户名" />
	</body>
</html>