投稿
  1. 极客之音首页
  2. 技术随笔

JavaScript-DOM编程

小半 • • 技术随笔 • 阅读 432

导读：本篇文章讲解 JavaScript-DOM编程，希望对大家有帮助，欢迎收藏，转发！站点地址：www.bmabk.com

文章目录

一、innerHTML innerText操作div和span

innerHTML和innerText属性有什么区别？
      相同点：都是设置元素内部的内容
      不同点：
        innerHTML会把后面的“字符串”当做一段HTML代码解释并执行
        innerText，即使后面是一段HTML代码，也只是将其当做普通的字符串来看待

示例代码：

<style type="text/css">
			#div1{
				background-color: aqua;
				width: 300px;
				height: 300px;
				position: absolute;
				left: 100px;
				top: 100px;
			}
		</style>
<script type="text/javascript">
            window.onload = function(){
			var dtnElt = document.getElementById("dtn");
			dtnElt.onclick = function(){
				//设置div的内容
				//第一步:获取div的内容
				var div1Elt = document.getElementById("div1");
				//第二步:使用innerHTML属性来设置元素内部的部分
				// div1Elt.innerHTML = "用户名输入为空！";
				// div1Elt.innerHTML = "<font color='red'>用户名输入为空！</font>";
				div1Elt.innerText = "<font color='red'>用户名输入为空！</font>";
			}
		}
		</script>
		
		<input type="button" value="设置div的属性" id="dtn">
		javascript<div id="div1"></div>

在这里插入图片描述

二、JS的正则表达式（Regular Expression）

1、什么是正则表达式，有什么用？
      正则表达式是一门独立的学科，基本每个语言都支持。
      正则表达式不是JS专属的。不过在JS中使用居多。
      通常使用正则表达式进行字符串格式匹配。

      正则表达式是有一堆特殊的符号组成的一个表达式。
      每一个特殊的符号都有特殊的代表含义。

      例如：
        qq号的正则表达式。
        邮箱地址的正则表达式。

      邮箱地址格式验证：
        程序中有一个邮箱地址的正则表达式。
        用户输入了一个邮箱地址。
        那么邮箱地址的正则表达式和邮箱地址进行匹配，能匹配成功，表示合法，反之表示不合法。

2、对于javascript程序员来说，对于正则表达式掌握到什么程度？
      第一：能够看懂正则表达式
      第二：简单的正则要会写
      第三：要能够独立的从网络当中搜索到你想要的正则表达式（搜索能力要有）
      第四：要会创建JS的正则表达式对象。
      第五：要会调用JS正则表达式对象的方法。

3、常见的正则表达式符号有哪些？
      . 匹配除换行符以外的任意字符
      \w 匹配字母或数字或下划线或汉字
      \s 匹配任意的空白符
      \d 匹配数字
      \b 匹配单词的开始或结束
      ^ 匹配字符串的开始
      $ 匹配字符串的结束

      *重复零次或更多次 0-N次

      +重复一次或更多次 1-N次

      ? 重复零次或一次 0或1次

      {n} 重复n次 n次
      {n,} 重复n次或更多次 n+次
      {n,m} 重复n到m次 n到m次
      注意：数量永远匹配的都是前面的那个字符出现的次数。

      \W 匹配任意不是字母，数字，下划线，汉字的字符
      \S 匹配任意不是空白符的字符
      \D 匹配任意非数字的字符
      \B 匹配不是单词开头或结束的位置
      [a-z]{1} a到z所有的字符中的任意1个。

      [a-zA-Z0-9]{3,} 前面这堆中的任意字符至少出现3个。

      [1-9] 没有指定数量的时候，默认是1个。

5、在JS中怎么创建正则表达式对象呢？

第一种方式：直接量语法
      var regExp = /正则表达式/标记

第二种方式：使用内置类RegExp类。
      var regExp = new RegExp(“正则表达式”, “标记”)

标记是可选项！！！！！都有哪些值可选呢？
      g：全局 global
      i: 忽略大小写 ignorecase
      gi: 全局扫描，并且忽略大小写。

6、正则表达式对象有一个很重要的方法：
      var emailRegExp = /^\w+([-+.]\w+)@\w+([-.]\w+).\w+([-.]\w+)*$/
      var ok = emailRegExp.test(“用户输入的字符串”);
      返回值ok是true表示，匹配成功了。>

其实在JS中，字符串String也是支持正则表达式的。

7、正则表达式对象的test()方法
      true / false = 正则表达式对象.test(用户填写的字符串)；
      true ： 字符串格式匹配成功
      false ： 字符串格式匹配失败

三、去除字符串前后空白trim函数

示例代码：

<body>
		<script type="text/javascript">
			
			//自定义去除前后空白方法
			String.prototype.trim = function(){
				
				return 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" />
		<br>
		<input type="button" value="获取用户名" id="btn" />
	</body>

在这里插入图片描述

四、表单验证

满足条件

（1）用户名不能为空
（2）用户名必须在6-14位之间
（3）用户名只能有数字和字母组成，不能含有其它符号（正则表达式）
（4）密码和确认密码一致
（5）统一失去焦点验证
（6）错误提示信息统一在span标签中提示，并且要求字体12号，红色。
（7）文本框再次获得焦点后，清空错误提示信息
（8）最终表单中所有项均合法方可提交

示例代码：

<body>
		<script type="text/javascript">
		window.onload = function(){
				var usernameErrorElt = document.getElementById("usernameError");
				var usernameElt = document.getElementById("username");
				//失去焦点事件
				usernameElt.onblur = function(){
					//获取用户输入的用户名值
					var username = usernameElt.value;
					//去除前后空格
					username = username.trim();
	                //alert("-->" + username + "<--");
					//判断输入的用户名是否为空
					if(username === ""){
						//用户名为空时执行此逻辑
						usernameErrorElt.innerText = "用户名不能为空！";
					}else{
						//用户名不为空时执行此逻辑
						//用户名必须在[6-14]位之间
						if(username.length < 6 || username.length >14){
							//此时输入长度不符
							usernameErrorElt.innerText = "用户名的长度必须是6-14之间";
						}else{
							var regExp = /^[A-Za-z0-9]+$/;
							var ok = regExp.test(username);
							if(!ok){
								//表示不符合规则
								usernameErrorElt.innerText = "用户名只能有数字和字母组成，不能含有其它符号";
							}
								usernameErrorElt.innerText = "";
						}
					}
				}
				//获得焦点事件
				usernameElt.onfocus = function(){//出错点,函数内的逻辑（不包含在if语句)肯定会执行!,if判断语句一定要在前!!!!!
					//当用户名文本框获得焦点时,清空文本框非法内容
					if(usernameErrorElt.innerText != ""){
						usernameElt.value = "";
					}
					//当用户名文本框获得焦点时span清空
					usernameErrorElt.innerText = "";
				}
				//获取密码验证标签
				var userpwdErrorElt = document.getElementById("userpwdError");
				//获取确认密码标签
				var userpwd2Elt = document.getElementById("userpwd2");
				//失去焦点事件
				userpwd2Elt.onblur = function(){
					//获取密码标签
					var userpwdElt = document.getElementById("userpwd");
					//获取值
					var userpwd = userpwdElt.value;
					var userpwd2 = userpwd2Elt.value;
					if(userpwd === userpwd2){
						userpwdErrorElt.innerText = "";
					}else{
						userpwdErrorElt.innerText = "密码输入错误";
					}
				}
				//绑定获得焦点事件
				userpwd2Elt.onfocus = function(){
					if(userpwdErrorElt.innerText != ""){
						userpwd2.value = "";
					}
					//当用户名文本框获得焦点时span清空
					userpwdErrorElt.innerText = "";
				} 
				//获取邮箱验证标签
				var emailErrorElt = document.getElementById("emailError");
				//获取邮箱标签
				var emailElt = document.getElementById("email");
				//绑定邮箱失去焦点事件
				emailElt.onblur = function(){
					//获取值
					var email = emailElt.value;
					var emailRegExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
					var ok = emailRegExp.test(email);
					if(ok){
						emailErrorElt.innerText = "";
					}else{
						emailErrorElt.innerText = "邮箱输入格式不对！";
					}
				}
				//绑定邮箱获得焦点事件
				emailElt.onfocus = function(){
					if(emailErrorElt.innerText != ""){
						emailElt.value = "";
					}
					emailErrorElt.innerText = "";
				}
				//获取注册按钮标签
				var btnElt = document.getElementById("btn");
				//定义鼠标单击事件
				btnElt.onclick = function(){
					//系统自动获取和失去焦点,先获得焦点再失去焦点
					usernameElt.focus();
					usernameElt.blur()
					
					userpwd2Elt.focus();
					userpwd2Elt.blur();
					
					emailElt.focus();
					emailElt.blur();
					
					if(usernameErrorElt.innerText == "" && userpwdErrorElt.innerText == "" &&  emailErrorElt.innerText == ""){//如果数据合法就跳转
					//获取表单标签
					var userformElt = document.getElementById("userform");
					// formElt.action = "http://localhost:8080/jd/save";
					//专用方法,提交表单
					userformElt.submit();
					}
				}
			}
		</script>
		<!-- 这个表单提交应该使用post，这里为了检测，所以使用get -->
		<form id="userform" action = "http://localhost:8080/jd/save" method="get">
		        用户名： <input type="text" name="username" id="username" /><span id="usernameError"></span>
		        <br>
		        密码：  <input type="text" name="userpwd" id="userpwd" />
		        <br>
		        确认密码：<input type="text" id="userpwd2" /><span id="userpwdError"></span>
		        <br>
		        邮箱：  <input type="text" name="email" id="email" /><span id="emailError"></span>
		        <br>
		        <!-- <input type="submit " value="注册" /> -->
		        <input type="button" value="注册" id="btn">
		        <input type="reset " value="重置" />
		</form>
	</body>

注意：此程序表单提交如果要跳转页面需要使用后台服务器，如果没服务器，页面不会跳转

在这里插入图片描述
在这里插入图片描述

页面跳转（没有服务器时）：

在这里插入图片描述

五、复选框全选和取消全选

document.getElementById()
document.getElementsByName()
document.getElementsByTagName()

示例代码：

	<body>
		<script type="text/javascript">
			window.onload = function(){
				//获取多选框数组
				var aihaos = document.getElementsByName("aihao");
				//获取多选框标签
				var firstChkElt = document.getElementById("firstChk");
				//设置鼠标单击事件
				firstChkElt.onclick = function(){
						for(var i=0;i<aihaos.length;i++){
							//每个多选框都和头部多选框保持一致
							aihaos[i].checked = firstChkElt.checked;
					    }
			      }
				  
				 for(var i=0;i<aihaos.length;i++){
					 //给所有多选框设置鼠标单击事件
					 var all = aihaos.length;
					 aihaos[i].onclick = function(){
						 var checkedCount = 0;
						 //总数量和多选框数量相同的时候,第一个复选框选中
						 for(var i=0;i<aihaos.length;i++){
							 if(aihaos[i].checked){
								 checkedCount++
							 }
						 }
						 firstChkElt.checked = (all == checkedCount);
					 }
				 } 
			}
		</script>
		<input type="checkbox" id="firstChk" /><br>
		<input type="checkbox" name="aihao" value="smoke" />抽烟<br>
		<input type="checkbox" name="aihao" value="drink" />喝酒<br>
		<input type="checkbox" name="aihao" value="tt" />烫头
	</body>

六、获取下拉列表项中项的value

change事件

示例代码：

<body>
		<!-- 第一种方式 -->
		<!-- <select onchange="alert(this.value)">
			<option value="001">河南省</option>
			<option value="002">河北省</option>
			<option value="003">山东省</option>
			<option value="004">山西省</option>
		</select> -->
		
		<!-- 第二种方式 -->
		<script type="text/javascript">
			window.onload = function(){
				//获取下拉标签
				var firstOptionElt = document.getElementById("firstOption");
				firstOptionElt.change = function(){
					alert(firstOptionElt.value);
				}
			}
		</script>
		<select id="firstOption" onchange="alert(this.value)">
			<option value="001">河南省</option>
			<option value="002">河北省</option>
			<option value="003">山东省</option>
			<option value="004">山西省</option>
		</select>
	</body>

在这里插入图片描述

七、显示网页时钟

window.setInterval()
window.clearInterval()
主要两个函数

示例代码：

<body>
<script type="text/javascript">
				//出错点,start不能放在onload里!!!!!!!!!
				function displayTime(){
				var time = new Date();
				var strTime = time.toLocaleString();
				document.getElementById("div").innerHTML = strTime;
				 }
				
				//设置显示的事件一直会变化
				function start(){
					v = window.setInterval("displayTime()",1000);
				}
				
				function stop(){
					window.clearInterval(v);
				}
        </script>
		<input type="button" value="显示系统当前时间"  onclick="start();" />
		<input type="button" value="时间停止" onclick="stop();" />
		<div id="div"></div>
</body>

在这里插入图片描述

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/94220.html

赞 (0)
小半的头像小半
0 0

相关推荐

极客之音——专业性很强的中文编程技术网站，欢迎收藏到浏览器，订阅我们！