java学Web——day04【JavaScript高级篇——DOM】

最新推荐文章于 2024-04-12 11:40:16 发布

Singinwind

最新推荐文章于 2024-04-12 11:40:16 发布

阅读量357

点赞数 2

分类专栏： JavaWeb Java 文章标签： JS web 用户验证 js基础

本文链接：https://blog.csdn.net/u012184326/article/details/80371088

版权

JavaWeb 同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

Java

19 篇文章 0 订阅

订阅专栏

【前言】

强调一下，javaScript 、css、html不是java同学们的核心课程，大部分知识只是做一个了解，能看懂前端代码，能自己制作小页面展示后台数据，这样子就够了。我主要写的是学习心得，汇总知识点什么的，其他博客一搜一堆。这里不再重复啦。

【正文】

今天主要学习了DOM(Document Object Model)文档对象模型。DOM能把HTML文件转换成一个树状结构。整个树状结构由结点Node构成，HTML的标签就是树的一个结点，称之为元素。标签的属性、事件等是结点的值。组成树状结构能够方便快速索引到指定的元素。在做增、删、改、查元素方面具有强大的功能。

今天的核心内容是JS事件和DOM元素操作。

通过今天学习的案例来说明DOM知识点的使用。

这里通过模仿上课视频中的项目需求分析来对所做的案例进行总结。

一、案例1、案例3:表单的本地校验版本2:


1.需求分析:

在一张用户注册表中，校验用户输入的信息是否符合规定。由如下信息输入:用户名、密码、确认密码、Email、户籍信息。请校验用户输入的信息是否正确，并给与方便的提示。校验规则如下:

用户名:不能为空
密码:不能少于6位
确认密码:确认密码与密码需要相同
Email:一个合法的Email字段
户籍信息:当在省份选择框中，选择省份完省份后，在市区选择框中会自动生成该省的所有市区项。

在核对以上信息正确后，点击“注册”按钮提交表单

2.技术分析:

1)实现形式:当用户输入完一个信息后，在输入项后面会显示用户输入的信息所得到的校验结果，字体红色表示不通过，绿色表示通过;
2)实现方法:
(1)通过JS事件机制中的获取焦点事件onfocus和失去焦点事件onblur这两个方法调用JS函数运行。
(2)在JS函数中使用DOM获取元素方法document.getElementById("id")，获取用户输入的信息。与校验规则进行判断。
(3)在HTML中的每项输入框后面添加一个<span>块状标签，其id值设为输入框的id+Span。该<span>标签用来接受校验的结果
(4)在注册提交按钮添加属性onSubmit ="return 校验方法" 所有信息都校验通过时返回ture.表单方可提交。

3.实现细节:

1).输出结果到 span标签:使用innerHTML方法:这个方法是js两个输出方法之一，可以往所指定的标签中输出内容。输出的内容可以是文字，也可以是标签。小代码如下:
document.getElementById(id + "Span").innerHTML = "<font color=" + color + ">" + content + "</font>";
2).在检验两次密码是否相等，居然不能用password.equals(repassword)。。。而是用passowrd == repassword。
3).校验Email字段的时候，使用到了正则表达式。虽然已经不能自己写出来，但是看得懂还是可以的。代码如下:
reg = new RegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$");
email = document.getElementById(id).value;
if(reg.test(email))
{
content = "邮箱正确";
color = "green";
}
else
{
content = "请输入正确的邮箱格式";
color = "red";
}

4.核心代码:户籍输入框的省市联动制作:
1).利用onChange = "函数方法"，当选择框的选项做改动的时候，会触发该事件，进而启动JS代码
2).给<select>标签中的字标签<option>标签添加属性value，每一项设置为0，1，2，3...
3).开始写函数:
(1)获取城市标签:city = document.getElementById("city");
(2)获取<option>的所有标签,有两个做法:
[1.]options = city.getElementsByTagName("option");遍历options[i]
[2.]因为city是选择框，里面自带属性options。所以可以遍历city.options[i]
(3)遍历过程中删除options[i]结点，有多种做法，推荐两种:
[1.]利用父标签city删除:city.removeChild(options[i]);
[2.]把结点清空:while(option.length>=0) options[options.length] =null;利用了options被删除元素后，长度可变的情况。
(4)清空完前面的元素后，接下来是自己创造新的元素了。
[1.]建立城市表:var arrs = Array(4);arrs[0] ={"城市1","城市2","城市3","城市4"}...建立在函数方面作为全局变量。
[2.]遍历
for(i = 0;i<arrs.lenth;i++)
{
for(j = 0;j<arrs[i].length;j++)
{
//这里是创造新元素的代码区
}
}

(5)创造新<option>标签的步骤:
//[1.]新元素创造:
var newOption = document.createElement("option");
//[2.]创建一个文本结点接收城市名字:
var textNode = document.createTextNode(arr[i][j]);
//[3.]文本结点textNode装入newOption中
newOption.appendChild(textNode);
//[4.]option选项装入父类中
city.appendChild(newOption);

以下是用户验证案例的参考代码:

<!DOCTYPE html>
<html>

	<head>
		<script src="check_info2.js"></script>
		<link rel="stylesheet" href="register.css" />
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<div class="c1">
			<div class="c2"></div>
			<!--中间导航层-->
			<div class="c3">
				<!--左边导航-->
				<div class="c31">
					<ul>
						<li>
							<a href="#">首页</a>
						</li>
						<li>
							<a href="#">电脑办公</a>
						</li>
						<li>
							<a href="#">手机数码</a>
						</li>
						<li>
							<a href="#">宠物食品</a>
						</li>
						<li>
							<a href="#">水水水水</a>
						</li>
					</ul>
				</div>
			</div>
			<!--中间内容层-->
			<div class="c4">
				<!--注册框-->
				<div class="c41">
					<!--注册表-->
					<form action="index.html" method="get" οnsubmit="return check_info()">
						<div class="c411">
							<p>
								<font style="font-size:18px;color:#3164af;">会员注册</font> <span style="font-size: 13px;">USER REGESTER</span></p>
							<!--用户名输入-->
							<div class="c411_frame">
								<p class="register_font" style="float: left;">用户名</p>
								<div class="register_input_style"><input type="text" id="username" name="username" value="" style="border: none;outline: none;" οnfοcus="tips('username')" οnblur="tips('username')" />
								</div>
								<span id="usernameSpan" style=""></span>
							</div>
							<!--密码输入-->
							<div class="c411_frame">
								<p class="register_font" style="float: left;">密码</p>
								<div class="register_input_style"><input type="password" id="password" name="password" style="border: none;outline: none;" οnfοcus="password_tips('password')" οnblur="password_tips('password')" />
								</div>
								<span id="passwordSpan" style=""></span>
							</div>
							
							<!--确认密码-->
							<div class="c411_frame">
								<p class="register_font" style="float: left;">确认密码</p>
								<div class="register_input_style"><input type="password" id="repassword" name="repassword" value="" style="border: none;outline: none;" οnfοcus="repassword_tips('repassword')" οnblur="repassword_tips('repassword')"/>
								</div>
								<span id="repasswordSpan"></span>
							</div>
							<!--Email-->
							<div class="c411_frame">
								<p class="register_font" style="float: left;">Email</p>
								<div class="register_input_style"><input type="text" id="email" name="email" style="border: none;outline: none;" οnfοcus="email_tips('email')" οnblur="email_tips('email')"/></div>
								<span id="emailSpan"></span>
							</div>
							<!--性别-->
							<div class="c411_frame">
								<p class="register_font" style="float: left;">性别</p>
								<div class="register_input_style" style="border: none; padding-top: 6px;"><input type="radio" name="gender" value="男" checked="checked"/>男   <input type="radio" name="gender" value="女" />女</div>
							</div>
							<!--籍贯-->
							<div class="c411_frame">
								<p class="register_font" style="float: left;">籍贯</p>
								<div class="register_input_style">
									<select id="province" name="province" οnchange="changeCity(this.value)">
										<option value="">省份</option>
										<option value="0">浙江省</option>
										<option value="1">江苏省</option>
										<option value="2">湖北省</option>
										<option value="3">河北省</option>
										<option value="4">吉林省</option>
									</select>
									<select id="city" name="city">
										<option>-请选择-</option>
									</select>
								</div>
							</div>

							<div class="c411_frame">
								<input type="submit" href = "#" value="注册" />
							</div>
						</div>
					</form>
				</div>
			</div>
			<!--售后层-->
			<div class="c5"></div>
		</div>

	</body>

</html>

		* {
			margin-left: 0px;
			margin-top: 0px;
		}
		
		a {
			text-decoration: none;
		}
		
		.c1 {
			margin-left: auto;
			margin-right: auto;
			background-color: #228B22;
			width: 96%;
			height: 1500px;
		}
		
		.c2 {
			background-color: #000000;
			width: 100%;
			height: 58px;
			float: left;
		}
		
		.c3 {
			float: left;
			background-color: red;
			width: 100%;
			height: 52px;
		}
		
		.c31 ul li {
			color: #FFFFFF;
			list-style-type: none;
			float: left;
			margin-left: 5px;
		}
		
		.c31 ul li a {
			color: #FFFFFF;
		}
		
		.c31 ul li a:link {
			color: #FFFFFF;
		}
		
		.c31 ul li a:hover {
			color: green;
		}
		/*.c31 ul li a:visited
		{
			color:yellow;
		}*/
		/*中间内容层*/
		
		.c4 {
			margin-top: 20px;
			float: left;
			background-color: cyan;
			width: 100%;
			height: 620px;
			background-image: url(img/regist_bg.jpg);
		}
		/*注册框*/
		
		.c41 {
			margin-top: 30px;
			margin-left: auto;
			margin-right: auto;
			width: 887px;
			height: 550px;
			background-color: #FFFFFF;
			border: 5px solid #ccc;
		}
		/*注册表*/
		
		.c411 {
			width: 100%;
			height: 450px;
			border: 1px solid lightskyblue;
			margin-top: 40px;
			margin-left: 90px;
		}
		
		.c411_frame {
			height: 37px;
			width: 100%;
			margin-top: 15px;
		}
		
		.register_input_style {
			align-content: center;
			float: left;
			margin-left: 30px;
			width:377px ;
			height: 34px;
			border: 1px solid darkgray;
			box-shadow: #337AB7;
			border-radius: 5px;
		}
		
		.register_font {
			
			margin-top:8px ;
			width: 60px;
			text-align: right;
			font-weight: bold;
			font-size: 14px;
			line-height: 20px;
		}
		/*售后层*/
		
		.c5 {
			margin-top: 60px;
			float: left;
			background-color: blue;
			width: 100%;
			height: 78px;
		}

function tips(id) {
	var username = document.getElementById(id).value;
	var content;
	var color;
	if(username == "") {
		content = "用户名不为空";
		color = "red";
	} else {
		content = "用户名合法";
		color = "green";
	}
	document.getElementById(id + "Span").innerHTML = "<font color=" + color + ">" + content + "</font>";

}

function password_tips(id) {
	password = document.getElementById(id).value;
	if(password.length < 6) {
		content = "密码不能少于6位";
		color = "red";
	} else {
		content = "密码格式正确";
		color = "green";
	}
	document.getElementById(id + "Span").innerHTML = "<font color=" + color + ">" + content + "</font>";
	
}

function repassword_tips(id) {
	
	repassword = document.getElementById(id).value;
	password2 = document.getElementById("password").value;

	if(!(repassword == password2)) {
		content = "两次密码不一致";
		color = "red";
	} else if(repassword == password2) {
		content = "两次密码正确";
		color = "green";
	}
	document.getElementById(id + "Span").innerHTML = "<font color=" + color + ">" + content + "</font>";
}

function email_tips(id) {
	reg = new RegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$");
	email = document.getElementById(id).value;
	if(reg.test(email))
	{
		content = "邮箱正确";
		color = "green";
	}
	else
	{
		content = "请输入正确的邮箱格式";
		color = "red";
	}
	document.getElementById(id+"Span").innerHTML = "<font color ="+color+">"+content+"</font>";
}

//这是制作选择框省市联动的方法

var arrs = new Array(5);
			arrs[0] = new Array("杭州市","绍兴市","温州市","义乌市","嘉兴市");
			arrs[1] = new Array("南京市","苏州市","扬州市","无锡市");
			arrs[2] = new Array("武汉市","襄阳市","荆州市","宜昌市","恩施");
			arrs[3] = new Array("石家庄市","唐山市","保定市","邢台市","廊坊市");
			arrs[4] = new Array("长春市","吉林市","四平市","延边市");
			
function changeCity(value)
{
	
			
	var city = document.getElementById("city");
	for(var i = city.options.length-1;i>0;i--)
	{
		city.options[i] = null;
	}
	
	for(var i = 0;i<arrs.length;i++)
	{
		if(i == value)
		{
			for(j = 0;j<arrs[i].length;j++)
			{
				//创建元素
				var opEl = document.createElement("option");
				//创建文本节点
				var textNode = document.createTextNode(arrs[i][j]);
				opEl.appendChild(textNode);
				city.appendChild(opEl);
			}
		}
	}
}

Singinwind

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
3
评论
java学Web——day04【JavaScript高级篇——DOM】

【前言】强调一下，javaScript 、css、html不是java同学们的核心课程，大部分知识只是做一个了解，能看懂前端代码，能自己制作小页面展示后台数据，这样子就够了。我主要写的是学习心得，汇总知识点什么的，其他博客一搜一堆。这里不再重复啦。【正文】今天主要学习了DOM(Document Object Model)文档对象模型。DOM能把HTML文件转换成一个树状结构。整个树...
复制链接

扫一扫

专栏目录