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>
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值