前端-javascript（下）

最新推荐文章于 2022-08-09 10:22:52 发布

阿扎姆王子

最新推荐文章于 2022-08-09 10:22:52 发布

阅读量357

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_45156610/article/details/95020713

版权

前端专栏收录该内容

13 篇文章 2 订阅

订阅专栏

Javascript入门（下）

内容介绍

使用JS完成表单校验
使用JS完成表格的隔行换色
使用JS完成复选框的全选效果
使用JS完成省市联动效果

内容学习目标

使用JS可以编写各种事件(掌握)

使用JS可以获得指定元素(掌握)

使用JS可以创建元素(理解)

使用JS可以对元素的属性进行操作(掌握)

使用JS可以对元素的标签体进行操作(掌握)

课堂笔记

1、完善注册表单校验

1.1、案例介绍

昨天我们已经完成了表单数据校验，整个实现过程存在几处不足的地方：

使用弹出框进行提示，用户体验不友好，可以将错误提示信息显示在对应的表单元素后面。
校验过于简单。
在编写程序时存在多处重复代码，为了达到代码的重复利用，将进行内容抽取成，编写自定义函数。

[外链图片转存失败(img-vitsucdo-1562499453298)(img/1.bmp)]

1.2、相关知识点

1.2.1、 DOM概述

DOM对象：Document Object Model 文档对象模型

作用：通过DOM对象可以访问和操作html文件的每一个标签。

最简单的html文件：

<!DOCTYPE html>
<html>
    <head>
        <title>文档标题</title>
    </head>
    <body>
        <a href="xxxx">我的链接</a>
        <h1>我的标题</h1>
    </body>
</html>

html文件对应的DOM树内存图：

[外链图片转存失败(img-TUYnWDOr-1562499453299)(img/2.bmp)]

说明：

1）document对象表示html整个页面的文档对象，要想获取页面中的某个标签必须使用document对象；

2）最上面的根元素是document对象；

1.2.2、 DOM对象中的属性、方法介绍（重点）

1.2.2.1、标签属性的操作：

属性名	描述
element.getAttribute(属性的名称);	根据标签的属性的名字来获取属性的值
element.setAttribute(属性的名称, 值);	给标签设置一个属性
element.removeAttribute(属性的名称);	根据标签的属性的名字来删除属性
element.children;	获取当前元素（标签）的子元素注意：获取的子级（一层），不管嵌套(不包括孙子，只包括儿子)
element.nodeName/tagName;	获取标签名注意：获取的是大写的字符串的标签名
element.innerHTML;	获取当前元素（标签）的文本内容哈哈

说明：

1）上述element表示具体的元素或者标签。例如：div、p标签等。

2）我们也会将标签叫做节点。

练习一：

<input type="text" name="username" id="txt" value="java" />

需求1：获取属性 name的值

需求2: 给文本框设置一个属性 hello, 值是world

需求3：删除属性 value

代码实现：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		练习一：
		<input type="text" name="username" id="txt" value="java" />
		<!--
			需求1：获取属性 name的值
			需求2: 给文本框设置一个属性 hello, 值是world
			需求3：删除属性 value
		 -->
		 <script type="text/javascript">
		 	//需求1：获取属性 name的值
		 	//获取input标签
		 	var oName=document.getElementById('txt');
		 	var username=oName.getAttribute('name');
		 	console.log(username);//username
			// 需求2: 给文本框设置一个属性 hello, 值是world
			oName.setAttribute('hello','world');
			//获取设置的属性hello的值
			console.log(oName.getAttribute('hello'));//world
			// 需求3：删除属性 value
			oName.removeAttribute('value');
		 </script>
	</body>
</html>

实现效果：

[外链图片转存失败(img-ZnmY81RT-1562499453299)(img/3.bmp)]

练习二：

<div id="div">我是div</div>

需求一：获取标签体的内容

需求二：设置标签体的内容：

<b>我是加粗的</b>

代码示例(标签体的内容)：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="div">我是div</div>
		<!--
			需求一：获取标签体的内容
			需求二：设置标签体的内容：<b>我是加粗的</b>
		-->
		<script type="text/javascript">
			// 获取div标签
			var oDiv = document.getElementById('div');
			// 需求一：获取标签体的内容 
			// innerHTML 区分字母大小写
//			console.log(oDiv.innerHTML);
			// 需求二：设置标签体的内容：<b>我是加粗的</b>
			//说明innerHTML既可以获取文本内容也可以修改文本内容
//			oDiv.innerHTML='div的内容被修改了';
//			console.log(oDiv.innerHTML);
			// 设置标签体的内容：<b>我是加粗的</b>
			oDiv.innerHTML='<b>我是加粗的</b>';
			console.log(oDiv.innerHTML);
		</script>
	</body>
</html>

实现效果：

[外链图片转存失败(img-0vVN88PN-1562499453300)(img/4.bmp)]

练习三：

<ul id="ul1">
	<li>aaa
		<ul>
			<li>111</li>
			<li>222</li>
			<li>333</li>
		</ul>
	</li>
	<li>bbb</li>
</ul>

需求一：获取ID为ul1的所有的子级

需求二：获取ID为ul1下面第一个li的标签名和内容

代码示例（子级）：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<ul id="ul1">
			<li>aaa
				<ul>
					<li>111</li>
					<li>222</li>
					<li>333</li>
				</ul>
			</li>
			<li>bbb</li>
		</ul>
		<!--
			需求一：获取ul的所有的子级
			需求二：获取ID为ul1下面第一个li的标签名和内容
		-->
		<script type="text/javascript">
			// 获取ul标签
			var oUl=document.getElementById('ul1');
			//使用children属性获取ul的所有子集
			console.log(oUl.children);
			//输出数组长度
			console.log(oUl.children.length);//2
			//需求二：获取id为ul1下面第一个li的标签名和内容
			console.log(oUl.children[0].nodeName);//获取标签名 'LI' 大写的
			/*
			 *  aaa
				<ul>
					<li>111</li>
					<li>222</li>
					<li>333</li>
				</ul>
			 */
			console.log(oUl.children[0].innerHTML);//获取标签内容
		</script>
	</body>
</html>

实现效果：

[外链图片转存失败(img-jaXeEMwY-1562499453300)(img/5.bmp)]

1.2.2.2、标签（元素）的操作：

1、获取元素对象（查）

方法名	描述
document.getElementById(id名称);	通过元素（标签）的id属性值获取标签对象，返回的是单个的标签对象注意：只能从document下面去获取
document.getElementsByName(name属性名称);	通过元素（标签）的name属性值获取标签对象，返回的是标签对象的数组。注意：只能从document下面去获取
document/parentNode.getElementsByTagName(标签名);	通过元素（标签）的名称获取标签的对象,返回的是标签对象的数组。注意：可以从document或者某一个父级标签下面去获取
document/parentNode.getElementsByClassName(类名);	通过元素（标签）的class属性获取标签对象，返回的是标签对象的数组。注意：可以从document或者某一个父级标签下面去获取

练习一：

<div class="red">div1</div>
<div>div2</div>
<div class="red">div3</div>

<p>p1</p>
<p class="red">p2</p>
<p>p3</p>

<form action="#">
    用户名：<input type="text" name="username" value="suoge"/>
    密码： <input type="password" name="password" value="123"/>
    性别：<input type="radio" name="gender" value="male" />男
    <input type="radio" name="gender" value="female" />女
    <input type="submit" value="提交" />
</form>

需求1：让页面上所有div字体颜色变蓝色

需求2：让页面上所有class为red的元素背景色变红色

需求3：获取页面上name为 username 和 gender的元素，并输出其value属性的值

代码示例如下所示：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<!--练习一：-->
		<div class="red">div1</div>
		<div>div2</div>
		<div class="red">div3</div>

		<p>p1</p>
		<p class="red">p2</p>
		<p>p3</p>

		<form action="#">
			用户名：<input type="text" name="username" value="suoge"/> 
			密码： <input type="password" name="password" value="123"/> 
			性别：
			<input type="radio" name="gender" value="male" />男
			<input type="radio" name="gender" value="female" />女
			<input type="submit" value="提交" />
		</form>
		<!--需求1：让页面上所有div字体颜色变蓝色 
		需求2：让页面上所有class为red的元素背景色变红色 
		需求3： 获取页面上name为 username 和 gender的元素，并输出其value属性的值-->
		<script type="text/javascript">
			//需求1：让页面上所有div字体颜色变蓝色 
			//获取所有的div标签 获取之后是一个数组
			var aDiv = document.getElementsByTagName('div');
			//遍历数组
			for(var i=0;i < aDiv.length;i++)
			{
				aDiv[i].style.color='blue';
			}
			//需求2：让页面上所有class为red的元素背景色变红色 
			//获取所有的class为red的标签
			var aRed = document.getElementsByClassName('red');
			//遍历数组
			for(var i=0;i<aRed.length;i++)
			{
				aRed[i].style.backgroundColor='red';
			}
			//需求3： 获取页面上name为 username 和 gender的元素，并输出其value属性的值
			//确定页面只有一个name是username的标签可以按照如下方式书写，获取的是input标签
//			var oUsername = document.getElementsByName('username')[0];
			var aUsername = document.getElementsByName('username');
			console.log(aUsername[0].value);
//			console.log(oUsername.value);//根据input标签获取value值
			//获取name是gender的标签
			var aGender = document.getElementsByName('gender');
			console.log(aGender[0].value);
			console.log(aGender[1].value);
		</script>
	</body>
</html>

实现效果：

[外链图片转存失败(img-lfLoRH35-1562499453301)(img/6.bmp)]

2、新增元素（增）

方法名	描述
document.createElement(元素名称)	在页面上根据标签名来创建元素，返回创建的标签（元素）对象注意：只能从document下面去创建元素
parentNode.appendChild(要添加的元素对象);	在某一个父级元素（标签)下面去添加一个元素，每次添加到父级元素的最后面，相当于一个追加的操作
parentNode.insertBefore(要添加的元素对象，在谁的前面添加);	在某一个父级元素（标签)下面去添加一个元素，可以指定在哪一个子元素（标签）的前面添加

练习二：

<ul>
	<li>bbb</li>
</ul>

需求1：创建一个li添加到ul的最后面

需求2：再次添加一个li要求添加到ul的第一个位置

代码示例：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<!--练习二：-->
		<ul>
			<li>bbb</li>
		</ul>
		<!--需求1： 创建一个li添加到ul的最后面 
		     需求2： 再次添加一个li要求添加到ul的第一个位置
		-->
		<script type="text/javascript">
			//需求1： 创建一个li添加到ul的最后面 
			//创建li标签
			var oLi = document.createElement('li');
			//给li标签添加文本
			oLi.innerHTML='ccc';
			//将li标签添加到ul的最后面
			//获取ul标签 
			/*
			 * 在一个页面中无论书写多少个body标签，最后浏览器读取的时候
			 * 都会将所有的内容放到一个body标签中。所以我们可以根据
			 * document对象直接调用body标签来获取body标签。
			 * document.body.children[0] 表示获取body标签的第一个孩子
			 */
			var oUl = document.body.children[0];
			//将上述的li标签添加到ul标签的最后面
			oUl.appendChild(oLi);
			// 需求2： 再次添加一个li要求添加到ul的第一个位置
			//创建li标签
			var oLi2 = document.createElement('li');
			//给li标签添加文本
			oLi2.innerHTML='aaa';
			// 再次添加一个li要求添加到ul的第一个位置
			//父级.insertBefore(要添加的元素，在谁前面添加);
			oUl.insertBefore(oLi2,oUl.children[0]);
		</script>
	</body>
</html>

说明：

在一个页面中无论书写多少个body标签，最后浏览器读取的时候都会将所有的内容放到一个body标签中。所以我们可以根据document对象直接调用body标签来获取body标签。

document.body.children[0] 表示获取body标签的第一个孩子。

实现效果：

[外链图片转存失败(img-BuFU9RFt-1562499453301)(img/7.bmp)]

3、删除元素（删）

方法名	描述
element.remove();	删除当前的元素（标签）掌握
parentNode.removeChild(要删除的子元素);	通过父级元素（标签）删除子元素（标签）

练习三：

<ul>
			<li>aaa</li>
			<li>bbb</li>
			<li>ccc</li>
</ul>

需求：删除第一个li标签。

代码示例如下所示：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<!--练习三：-->

		<ul>
			<li>aaa</li>
			<li>bbb</li>
			<li>ccc</li>
		</ul>
		<!--需求：删除第一个li标签。-->
		<script type="text/javascript">
			//方式一：直接删除element.remove();
//			document.getElementsByTagName('li')[0].remove();
			//方式二：父级标签.removeChild(子级标签名)
			//获取父级标签ul
			var oUl = document.body.children[0];
			//oUl.children[0] 表示ul的第一个li标签
			oUl.removeChild(oUl.children[0]);
		</script>
	</body>
</html>

实现效果：

[外链图片转存失败(img-DqBIuKyN-1562499453301)(img/8.bmp)]

1.2.3、事件概述(掌握)

JS 是事件驱动的语言。

1.2.3.1、什么是事件

我们在浏览器中做的所有的操作，例如：鼠标的点击、鼠标悬停、敲击键盘等等。简单的理解：事件就是用户的操作。

1.2.3.2、什么是事件驱动

JS中会有内部机制监听这一系列的事件，当这些事件发生，JS会响应并且调用与事件相关的函数去处理该事件。

1.1.2、常用的事件

事件名	描述
onload	某个页面或图像被完全加载之后触发
onsubmit	当表单提交时触发该事件—注意事件源是表单form
onclick	鼠标点击某个对象
ondblclick	鼠标双击某个对象
onblur	元素失去焦点(输入框)
onfocus	元素获得焦点(输入框)
onchange	用户改变域的内容。一般使用在select标签中。
onkeydown	某个键盘的键被按下
onkeypress	某个键盘的键被按下或按住，一直按住
onkeyup	某个键盘的键被松开
onmousedown	某个鼠标按键被按下
onmouseup	某个鼠标按键被松开
onmouseover	鼠标被移到某元素之上
onmouseout	鼠标从某元素移开
onmousemove	鼠标被移动

1.1.3、事件绑定的方式

1.1.3.1、静态绑定(了解)

静态绑定：直接在标签上拿事件名作为标签的属性名，属性名对应的属性值是一个方法。

语法格式：

<标签 事件名 = "函数名()" ... ></标签>
例如：
<div οnclick= "show();"></div>

需求：

1、给div标签绑定单击事件,输出div的文本

2、给div标签绑定鼠标悬浮事件，使其背景颜色变红

3、给div标签绑定鼠标移出事件，使其背景颜色变蓝

说明：定义一个div，并给div设置宽、高和背景颜色灰色：#ccc。

设置div的代码：

<style type="text/css">
			div {
				width: 200px;
				height: 200px;
				background-color: #ccc;/*灰色*/
			}
</style>

Js的代码实现：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				width: 200px;
				height: 200px;
				background-color: #ccc;/*灰色*/
			}
		</style>
	</head>

	<body>
		<!--		
			需求：
			1、给div标签绑定单击事件,输出div的文本
			2、给div标签绑定鼠标悬浮事件，使其背景颜色变红
			3、给div标签绑定鼠标移出事件，使其背景颜色变蓝
			说明：定义一个div，并给div设置宽、高和背景颜色。
			this表示当前函数属于哪个标签，那么这个this就代表哪个标签或者对象
		-->
		<div onclick="show(this);" onmouseover="fnOver(this);" onmouseout="fnOut(this);">我是div</div>
		<script type="text/javascript">
			//1、给div标签绑定单击事件,输出div的文本
			//定义函数，点击div时触发
			function show(obj)
			{
				console.log(obj.innerHTML);
			}
			//2、给div标签绑定鼠标悬浮事件，使其背景颜色变红
			function fnOver(obj)
			{
				obj.style.backgroundColor='red';
			}
			//3、给div标签绑定鼠标移出事件，使其背景颜色变蓝
			function fnOut(obj)
			{
				obj.style.backgroundColor='blue';
			}
		</script>
	</body>
</html>

说明：this表示当前函数属于哪个标签，那么这个this就代表哪个标签或者对象。

实现效果：

鼠标点击div和移到div上面时触发的。

[外链图片转存失败(img-usM6Dlql-1562499453302)(img/9.bmp)]

鼠标移除之后触发的：

[外链图片转存失败(img-6rktOMCj-1562499453302)(img/10.bmp)]

1.1.3.2、动态绑定(掌握)

通过静态绑定事件，我们发现html代码和js事件放到一起了，耦合性强。所以我们在开发中一般很少使用静态绑定，我们一般都使用动态绑定。

动态绑定：事件不是直接写到标签中，即不是拿事件作为标签的属性名了。而是通过DOM技术来获取元素（标签），然后直接给标签添加事件，而事件一般后面跟着一个匿名函数。

语法结构：

var oDiv = document.getElementById(“div”);
oDiv.onclick = function() {
	// JS逻辑代码
};

需求：使用动态绑定完成。

1、给div标签绑定单击事件,输出div的文本

2、给div标签绑定鼠标悬浮事件，使其背景颜色变红

3、给div标签绑定鼠标移出事件，使其背景颜色变蓝

说明：定义一个div，并给div设置宽、高和背景颜色。

设置div的代码：

<style type="text/css">
			div {
				width: 200px;
				height: 200px;
				background-color: #ccc;/*灰色*/
			}
</style>

示例代码：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div {
				width: 200px;
				height: 200px;
				background-color: #ccc;/*灰色*/
			}
		</style>
	</head>

	<body>
		<div>我是div</div>
		<!--
			需求：使用动态绑定完成。
			1、给div标签绑定单击事件,输出div的文本
			2、给div标签绑定鼠标悬浮事件，使其背景颜色变红
			3、给div标签绑定鼠标移出事件，使其背景颜色变蓝
			说明：定义一个div，并给div设置宽、高和背景颜色。
		-->
		<script type="text/javascript">
			//获取div标签
			var oDiv = document.getElementsByTagName('div')[0];
			//1、给div标签绑定单击事件,输出div的文本
			//由于使用oDiv对象调用onclick事件，所以这里的this就表示oDiv对象
			oDiv.onclick = function(){
				console.log(this.innerHTML);
			};
			//2、给div标签绑定鼠标悬浮事件，使其背景颜色变红
			oDiv.onmouseover = function(){
				this.style.backgroundColor='red';
			};
			//3、给div标签绑定鼠标移出事件，使其背景颜色变蓝
			oDiv.onmouseout = function(){
				this.style.backgroundColor='blue';
			};
		</script>
	</body>
</html>

说明：由于使用oDiv对象调用onclick事件，所以这里的this就表示oDiv对象。

实现效果：

鼠标点击div和移到div上面时触发的。

[外链图片转存失败(img-oQV32aTB-1562499453303)(img/11.bmp)]

鼠标移除之后触发的：

[外链图片转存失败(img-4y1zhJWw-1562499453303)(img/12.bmp)]

1.1.4、 JS中的对象

1.1.4.1、 Array对象（重点）

Array对象是数组对象，跟java中的数组一个意思，但是使用语法上稍微有些区别。

说明：java属于强类型语言，而js属于弱类型语言。

1、创建数组对象的方式：

1）创建一个空数组： var arr = new Array(); var arr = []; √

2）创建一个指定大小的数组： var arr = new Array(size);举例：var arr = new Array(5);创建数组大小是5的数组。

var arr2=[10];//这里的10表示arr2数组中的数据，数组长度是1

3）创建数组并填充元素： var arr = new Array(element0, element1, …, elementn);

4）直接创建元素数组： var arr = [element0, element1, …, elementn]; √

2、数组中元素的获取：

跟java一样通过索引和数组名的方式获得数组中的元素：

获得数组中的一个元素：arr[下标] 从0开始

遍历获得数组中的所有元素：

for(var i=0;i<arr.length;i++){

alert(arr[i]);

}

数组的代码演示如下所示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			//定义一个数组
//			var arr=new Array(10);//这里的10表示arr数组中的长度
			var arr=new Array('a');//这里表示数组arr中的数据是a,数组长度是1
			var arr2=[10];//这里的10表示arr2数组中的数据
			console.log(arr.length);//10
//			console.log(arr2.length);//1
			//定义数组
			var arr3=['aaa','bbb','ccc'];
			//遍历数组
			for(var i=0;i<arr3.length;i++)
			{
				console.log(arr3[i]);
			}
		</script>
	</body>
</html>

1.1.4.2、 RegExp对象（重点）

创建正则表达式：regulation expression

第一种方式：var reg = new RegExp(“正则表达式”); 
第二种方式：var reg = /正则表达式/; √

使用正则对象调用的验证字符串的方法：

reg.test(字符串); 
验证通过返回true 
验证不通过返回false

说明：正则表达式一般需要加上 ^ $ 行首和行尾表示要从头到尾匹配。

补充：^ 表示以什么开始 $ 以什么结束

需求：使用正则表达式验证指定的字符串是否满足长度是6.

次数：

？ 0 1

* 0 1 n

+ 1 n

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			/*
			 * 需求：使用正则表达式验证指定的字符串是否满足长度是6.
			 * 说明：在js中正则表达式的开头使用^  结尾使用$ 表示边界词
			 * regExp.test(str) 验证字符串的合法性
			 * 如果合法，返回true。如果不合法，返回false
			 */
			//定义字符串
			var str='abcdef';
//			方式一:创建正则表达式对象 .
//			var reg = new RegExp('^[0-9a-zA-Z]{6}$');
			//方式二：创建正则表达式对象 
			var reg=/^[0-9a-zA-Z]{6}$/;
			//调用方法判断str字符串的长度是否是6
			console.log(reg.test(str));
		</script>
	</body>
</html>

1.3、注册验证案例相关事件

事件名	描述
onsubmit	提交表单时被触发
onblur	元素失去焦点时触发

1.4、案例分析

编写步骤：

1、添加错误提示显示区域

例如：

<span id="usernamespan"></span> 校验不通过，红色字体提示

2、失去焦点时判断用户输入的信息是否合法

3、点击注册按钮验证所有项

要求：

1、用户名必须是6-10位的字母或者数字

2、密码长度必须6位任意字符

3、两次输入密码要一致

1.5、案例实现

1.5.1、书写注册页面的html，并在html页面中添加错误显示区域

浏览器中显示的页面如下图所示：

[外链图片转存失败(img-uGusgRip-1562499453304)(img/13.bmp)]

分析：该注册页面主要由6行2列的table组成。

具体的html代码如下所示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--注册页面-->
		<form action="#" method="post">
			<!--6行2列-->
			<table>
				<tr>
					<td>用户名</td>
					<td><input type="text" name="username" id="username"/></td>
					<!--接收用户名的错误信息-->
					<td><span id="usernamespan"></span></td>
				</tr>
				<tr>
					<td>密码</td>
					<td><input type="password" name="password" id="password"/></td>
					<!--接收密码的错误信息-->
					<td><span id="passwordspan"></span></td>
				</tr>
				<tr>
					<td>确认密码</td>
					<td><input type="password" name="repassword" id="repassword"/></td>
					<!--接收确认密码的错误信息-->
					<td><span id="repasswordspan"></span></td>
				</tr>
				<tr>
					<td>性别</td>
					<td>
						<input type="radio" name="gender" value="male" />男
						<input type="radio" name="gender" value="female" />女
					</td>
					<!--接收性别的错误信息-->
					<td><span id="genderspan"></span></td>
				</tr>
				<tr>
					<td>爱好</td>
					<td>
						<input type="checkbox" name="hobby" value="sing" />唱歌
						<input type="checkbox" name="hobby" value="dance" />跳舞
						<input type="checkbox" name="hobby" value="code" />写代码
					</td>
					<!--接收爱好的错误信息-->
					<td><span id="hobbyspan"></span></td>
				</tr>
				<tr>
					<td></td>
					<td>
						<input type="submit" value="注册" />
						<input type="reset" value="重置" />
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>

1.5.2、使用JS代码开始验证注册页面

1）校验用户名是否合法。—》用户名必须是6-10位的字母或者数字。

当鼠标离开文本输入框的时候就会触发的事件，所以我们需要在用户名的input标签中添加一个离焦事件onblur,用来验证用户名是否合法。

代码如下：

[外链图片转存失败(img-iqcIvNrt-1562499453304)(img/14.bmp)]

验证用户名是否满足：用户名必须是6-10位的字母或者数字。的js代码如下所示：

<script type="text/javascript">
			//定义函数根据任意标签的id获取标签，防止根据标签id获取标签的代码重复
			function getId(id)
			{
				return document.getElementById(id);
			}
			//定义函数用来验证用户名是否合法
			//用户名必须是6-10位的字母或者数字
			function checkUser()
			{
//				alert("haha");
				//鼠标离开时获取用户名的值
				var userVal=getId('username').value;
				//获取正则表达式对象，6-10位的字母或者数字
				var reg=/^[0-9a-zA-Z]{6,10}$/;
				//判断用户输入的用户名是否符合上述正则表达式对象
				if(reg.test(userVal))
				{
					//返回true，说明符合，输入正确 合法
					getId('usernamespan').innerHTML='';
					//这里返回true，提交表单的时候要使用
					return true;
				}else{
					//非法
					getId('usernamespan').innerHTML='用户名必须是6-10位的字母或者数字';
					//提示信息是红色的
					getId('usernamespan').style.color='red';
					//提交表单的时候要使用
					return false;
				}
			}
</script>

2）验证密码。密码长度必须6位的任意字符。

当鼠标离开文本输入框的时候就会触发的事件，所以我们需要在密码的input标签中添加一个离焦事件onblur,用来验证密码是否合法。

代码如下：

[外链图片转存失败(img-ZkIUiqJ0-1562499453305)(img/15.bmp)]

验证密码是否满足：密码长度必须6位的任意字符。的js代码如下所示：

//验证密码 --->密码长度必须6位的任意字符
			function checkPassword()
			{
				//鼠标离开时获取密码的值
				var passwordVal=getId('password').value;
				//获取正则表达式对象，密码长度必须6位的任意字符
				var reg=/^.{6}$/;
				//判断用户输入的密码是否符合上述正则表达式对象
				if(reg.test(passwordVal))
				{
					//返回true，说明符合，输入正确 合法
					getId('passwordspan').innerHTML='';
					//这里返回true，提交表单的时候要使用
					return true;
				}else{
					//非法
					getId('passwordspan').innerHTML='密码长度必须6位的任意字符';
					//提示信息是红色的
					getId('passwordspan').style.color='red';
					//提交表单的时候要使用
					return false;
				}
		}

3）验证确认密码。两次输入密码要一致。

当鼠标离开文本输入框的时候就会触发的事件，所以我们需要在确认密码的input标签中添加一个离焦事件onblur,用来验证确认密码是否合法。

代码如下：

[外链图片转存失败(img-4jBXWAcd-1562499453305)(img/16.bmp)]

验证确认密码是否满足：两次输入密码要一致。的js代码如下所示：

//验证确认密码。两次输入密码要一致。
			function checkRpassword()
			{
				//鼠标离开时获取确认密码的值
				var rePasswordVal=getId('repassword').value;
				//获取密码的值
				var passwordVal=getId('password').value;
				//判断两次输入的密码是否一致
				if(rePasswordVal != passwordVal)
				{
					//不一致
					//非法
					getId('repasswordspan').innerHTML='两次输入密码不一致';
					//提示信息是红色的
					getId('repasswordspan').style.color='red';
					//提交表单的时候要使用
					return false;
				}else
				{
					//一致
					//返回true，说明符合，输入正确 合法
					getId('repasswordspan').innerHTML='';
					//这里返回true，提交表单的时候要使用
					return true;
				}
				
	}

4）校验表单是否可以提交。如果上述条件都满足，才可以提交表单，只要有一个不满足就不能提交表单。

那么如何验证表单是否可以提交呢？在js中有一个事件叫做onsubmit事件可以验证，该事件是在提交form表单按钮时触发。

给form表单添加一个id，代码如下所示：

[外链图片转存失败(img-vTwARCSI-1562499453305)(img/17.bmp)]

验证表单是否可以提交的代码如下所示：

//验证表单是否可以提交
			getId('registerForm').onsubmit = function()
			{
//				alert('haha');
				if(checkUser() && checkPassword() && checkRpassword())
				{
					//可以提交表单，返回true
					return true;
				}else{
					//不可以提交
					return false;
				}
			}

效果：

[外链图片转存失败(img-mWAUqYRb-1562499453306)(img/18.bmp)]

2、表格隔行换色

2.1、案例描述

开发中，需要使用表格陈列数据，数据过多不易查看，通常使用隔行换色进行表示。

[外链图片转存失败(img-HmXgSIas-1562499453306)(img/19.bmp)]

说明：一般表头不会换颜色。

2.2、案例实现

将下面的html复制到页面中，完成隔行换色即可。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body style="margin: 50px;">
		<table border="1" width="1000">
			<tr style="background-color: #999;">
				<th><input type="checkbox"></th>
				<th>分类ID</th>
				<th>分类名称</th>
				<th>分类描述</th>
				<th>操作</th>
			</tr>
			<tr>
				<td align="center"><input type="checkbox" name="chekbox"></td>
				<td>1</td>
				<td>手机数码</td>
				<td>手机数码类商品</td>
				<td><a href="">修改</a>|<a href="">删除</a></td>
			</tr>
			<tr>
				<td align="center"><input type="checkbox" name="chekbox"></td>
				<td>2</td>
				<td>电脑办公</td>
				<td>电脑办公类商品</td>
				<td><a href="">修改</a>|<a href="">删除</a></td>
			</tr>
			<tr>
				<td align="center"><input type="checkbox" name="chekbox"></td>
				<td>3</td>
				<td>鞋靴箱包</td>
				<td>鞋靴箱包类商品</td>
				<td><a href="">修改</a>|<a href="">删除</a></td>
			</tr>
			<tr>
				<td align="center"><input type="checkbox" name="chekbox"></td>
				<td>4</td>
				<td>家居饰品</td>
				<td>家居饰品类商品</td>
				<td><a href="">修改</a>|<a href="">删除</a></td>
			</tr>
		</table>
	</body>
</html>

Js代码实现如下：

分析：通过上述结果观察出，第一行表头不需要变颜色，所以获取到所有的tr之后，索引i需要从1开始，i是奇数时行的背景是白色，i是偶数时，行的背景是蓝色。

<script type="text/javascript">
			//获取所有的tr
			var aTr = document.getElementsByTagName('tr');
			//遍历数组 表头不用换颜色，所以i从1开始
			for(var i=1;i<aTr.length;i++)
			{
				//是奇数时是白色，i是偶数时是蓝色
				if(i%2 == 1)
				{
					//奇数 背景颜色是白色
					aTr[i].style.backgroundColor='white';
				}else
				{
					//偶数 背景颜色是蓝色
					aTr[i].style.backgroundColor='blue';
				}
			}
</script>

实现效果：

[外链图片转存失败(img-dDUNulLq-1562499453306)(img/20.bmp)]

3、复选框全选/全不选

3.1、案例描述

开发中，经常需要对表格数据进行“批量处理”，就需要快速的对列表项进行操作，本案例我们来完成“全选和全不选”。

3.2、案例相关的JS属性介绍

3.2.1、单选/复选选中

ele.checked：  表示元素是否选中
true： 表示选中
false： 表示没有选中
例如：ele.checked = true;   // 设置元素被选中。

3.3、案例实现

书写html页面，一个复选框和一个div，并在div中书写多个复选框。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="checkbox" id="ck" />
		<hr />
		<div id="div">
			<input type="checkbox"/><br />
			<input type="checkbox" /><br />
			<input type="checkbox" /><br />
			<input type="checkbox" /><br />
			<input type="checkbox" />
		</div>
	</body>
</html>

使用js来实现复选框的全选和全不选的功能。

分析：

我们希望当我们选择最上面的复选框时，下面的所有复选框全部选择。如果最上面的复选框没有选择，那么下面所有的复选框也不会全选。

问题：怎样确定最上面的复选框是选择的呢？

在复选框的标签中有个属性checked=‘checked’，表示复选框勾选。并且当checked='checked’时，输出的结果是true。

如果最上面复选框选择，则下面所有都选择，如果最上面不选择，则下面不选择。也就是说最上面的oCK.checked 是true，那么下面所有的checked值都是true。反之上面是false，下面都是false。

<script type="text/javascript">
			//获取最上面的复选框
			var oCK = document.getElementById('ck');
			//获取div中的所有复选框
			var aCK = document.getElementById('div').getElementsByTagName('input');
			/*
			 * 分析：
			 * 我们希望当我们选择最上面的复选框时，下面的所有复选框全部选择
			 * 如果最上面的复选框没有选择，那么下面所有的复选框也不会全选
			 * 问题：怎样确定最上面的复选框是选择的呢？
			 * 在复选框的标签中有个属性checked='checked'，表示复选框勾选
			 * 并且当checked='checked'时，输出的结果是true
			 */
//			console.log(oCK.checked);//false
//	         oCk.οnclick=function () {
//上面复选框被选中输出true，没被选中输出false
//	              console.log(oCk.checked);
//            }

			//给oCK绑定点击事件
			oCK.onclick=function()
			{
				//循环div中的所有复选框
				for(var i=0;i<aCK.length;i++)
				{
					//如果最上面复选框选择，则下面所有都选择，如果最上面不选择，则下面不选择
					//也就是说最上面的oCK.checked 是true，那么下面所有的checked值都是true
					//反之上面是false，下面都是false
					aCK[i].checked=oCK.checked;
				}
			};
</script>

实现效果：

[外链图片转存失败(img-KhjvUSes-1562499453307)(img/21.bmp)]

4、省市二级联动

4.1、案例介绍

在日常应用中，我们需要完善个人信息，“所在地”要求选择省市，当选择省时，该省对应的市将自动的更新。

[外链图片转存失败(img-hWgHYmjV-1562499453307)(img/22.bmp)]

4.2、相关知识点

4.2.1、 JSON

JSON 英文全称 JavaScript Object Notation(标记、格式)。JSON 是一种轻量级的数据交换格式。JSON 是用于存储和传输数据的格式。JSON 通常用于服务端和网页之间传递数据的。 JSON 使用 JavaScript 语法，但是 JSON 格式仅仅是一个文本。文本可以被任何编程语言读取以及作为数据格式传递。

JSON在JS里面其实就是一个对象：

定义JSON：

var json = { key1: value1, key2:value2…};

说明：按照语法规则，key如何书写都可以，但是为了规范，key最好写在双引号中，这样，在后面我们使用的时候便不会出现获取数据的问题。

使用JSON：

json.key1 来访问键对应的值

演示JSON的代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			//定义一个json
			var json={"name":"锁哥","age":18,"address":"上海"};
			//输出年龄
//			console.log(json.age);//18
			//上述只是存储一个人的信息，如果存储多个人的信息，可以使用数组进行存储
			var jsonArray = [{"name":"锁哥","age":18,"address":"上海"},
							 {"name":"黑旋风","age":19,"address":"黑龙江"},
							 {"name":"助教","age":29,"address":"北京"}
							 ];
			//访问黑旋风的地址address 由于是数组，所以索引从0开始
			console.log(jsonArray[1].address);//黑龙江
		</script>
	</body>
</html>

说明：

如果存储多个人的信息：

var jsonArray = [{“name”:“锁哥”,“age”:18,“address”:“上海”},{“name”:“黑旋风”,“age”:19,“address”:“黑龙江”},{“name”:“助教”,“age”:29,“address”:“北京”}];

实现效果：

[外链图片转存失败(img-BVqFzhJ7-1562499453307)(img/23.bmp)]

注意：标准格式的JSON键要用双引号引起来，值如果是字符串也必须要双引号引起来。我们后面做数据交互的时候一定要书写标准格式的JSON

4.2.2、下拉框

下拉框代码：

<select id="province" name="province">
		<option value="">--请选择省--</option>
        <option value="sh">上海</option>
</select>

事件：

onchange : 当下拉框的内容发生改变的时候触发的事件。

获取下拉框的所有option:

oSel.options
说明：oSel表示父标签select对象

动态创建option ：

var option = new Option(文本，value);
例如：
var option = new Option(‘上海’，‘sh’);

添加option：oProSel.appendChild(option);

oSel.appendChild(option);//将子标签option添加到父标签oSel上

4.3、代码实现

因为需要加载一些省市，所以已经给大家在课前资料准备好了一份：

[外链图片转存失败(img-DHKKdKFf-1562499453308)(img/24.bmp)]

代码实现：

第一步：新建一个html页面：

[外链图片转存失败(img-t6QfFNeK-1562499453309)(img/25.bmp)]

省市联动的html代码如下所示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<select id="province" name="province">
			 <option value=''>--请选择省--</option>
		</select>
		<select id="city" name="city">
			 <option value=''>--请选择市--</option>
		</select>
	</body>
</html>

第二步：将之前准备好的cities.js文件复制到编辑工具的目录中：

[外链图片转存失败(img-UDrGtj2m-1562499453309)(img/26.bmp)]

cities.js文件中的代码如下所示：

var china = [
    {
        "p_name": "吉林省",
        "p_id": "jl",
        "cities": [
            {
                "c_name": "长春",
                "c_id": "cc"
            },
            {
                "c_name": "四平",
                "c_id": "sp"
            },
            {
                "c_name": "通化",
                "c_id": "th"
            },
            {
                "c_name": "松原",
                "c_id": "sy"
            }
        ]
    },
    {
        "p_name": "辽宁省",
        "p_id": "ln",
        "cities": [
            {
                "c_name": "沈阳",
                "c_id": "sy"
            },
            {
                "c_name": "大连",
                "c_id": "dl"
            },
            {
                "c_name": "抚顺",
                "c_id": "fs"
            },
            {
                "c_name": "铁岭",
                "c_id": "tl"
            }
        ]
        
    },
    {
        "p_name": "山东省",
        "p_id": "sd",
        "cities": [
            {
                "c_name": "济南",
                "c_id": "jn"
            },
            {
                "c_name": "青岛",
                "c_id": "qd"
            },
            {
                "c_name": "威海",
                "c_id": "wh"
            },
            {
                "c_name": "烟台",
                "c_id": "yt"
            }
        ]
        
    },
    {
        "p_name": "上海市",
        "p_id": "sh",
        "cities": [
            {
                "c_name": "闵行区",
                "c_id": "mh"
            },
            {
                "c_name": "徐汇区",
                "c_id": "xh"
            },
            {
                "c_name": "黄浦区",
                "c_id": "hp"
            },
            {
                "c_name": "浦东新区",
                "c_id": "pd"
            }
        ]
        
    }
];

说明：上述js文件中的数据以json格式存储的。

第三步：在html页面中导入cities.js。

[外链图片转存失败(img-x7ZfF23y-1562499453310)(img/27.bmp)]

第四步：在html页面书写js代码完成二级联动的功能。

分析：

<script type="text/javascript">
			//书写js代码完成二级联动
			//获取省的下拉框
			var oProSel = document.getElementById('province');
			//获取市的下拉框
			var oCitySel = document.getElementById('city');
			//页面在加载的时候获取省，并将省添加到省的下拉框中
			//循环china数组获取省
			for(var i=0;i<china.length;i++)
			{
				//获取省的名字作为option的文本
				var p_name=china[i].p_name;//吉林省
				//获取省的id作为option的value
				var p_id=china[i].p_id;//jl
				//创建省的option var option=new Option(文本,value);
				var option=new Option(p_name,p_id);
				//将上述option添加到省的下拉框中
				oProSel.appendChild(option);
			}
			
			//每次更改省的时候改变对应省的市
			//所以我们给省的下拉框添加一个onchange事件，每次改变省的下拉框就会触发
			oProSel.onchange = function()
			{
				//每次改变省加载市的时候先清空市的下拉框
//				oCitySel.innerHTML="<option value=''>--请选择市--</option>";
				oCitySel.options.length = 1;//只有一个option：<option value=’’>--请选择市--</option>
//				alert("haha");
				//根据当前下拉框的省加载当前省对应的市
				//获取当前下拉框的value
				var p_id = this.value;//jl
				//遍历china数组
				for(var i=0;i<china.length;i++)
				{
					//判断取出的p_id是否和当前省获取的p_id是否相等
					if(p_id == china[i].p_id)
					{
						//找到省了，获取对应的城市
						var cityJsonArr = china[i].cities;
						//遍历城市的数组，依次取出城市
						for(var j=0;j<cityJsonArr.length;j++)
						{
							//取出城市的c_name作为文本
							var c_name = cityJsonArr[j].c_name;
							//取出城市的c_id作为value
							var c_id = cityJsonArr[j].c_id;
							//创建城市的option
							var option = new Option(c_name,c_id);
							//将城市的option添加到城市的下拉框中
							oCitySel.appendChild(option);
						}
						//找到之后，直接结束for循环
						break;
					}
					
				}
				
			};
</script>

实现效果：

[外链图片转存失败(img-1jDjtnRm-1562499453310)(img/28.bmp)]

5、总结

[外链图片转存失败(img-oUhh6Duf-1562499453310)(img/29.bmp)]

= document.getElementById(‘province’);
//获取市的下拉框
var oCitySel = document.getElementById(‘city’);
//页面在加载的时候获取省，并将省添加到省的下拉框中
//循环china数组获取省
for(var i=0;i<china.length;i++)
{
//获取省的名字作为option的文本
var p_name=china[i].p_name;//吉林省
//获取省的id作为option的value
var p_id=china[i].p_id;//jl
//创建省的option var option=new Option(文本,value);
var option=new Option(p_name,p_id);
//将上述option添加到省的下拉框中
oProSel.appendChild(option);
}

		//每次更改省的时候改变对应省的市
		//所以我们给省的下拉框添加一个onchange事件，每次改变省的下拉框就会触发
		oProSel.onchange = function()
		{
			//每次改变省加载市的时候先清空市的下拉框

// oCitySel.innerHTML="–请选择市–";
oCitySel.options.length = 1;//只有一个option：–请选择市–
// alert(“haha”);
//根据当前下拉框的省加载当前省对应的市
//获取当前下拉框的value
var p_id = this.value;//jl
//遍历china数组
for(var i=0;i<china.length;i++)
{
//判断取出的p_id是否和当前省获取的p_id是否相等
if(p_id == china[i].p_id)
{
//找到省了，获取对应的城市
var cityJsonArr = china[i].cities;
//遍历城市的数组，依次取出城市
for(var j=0;j<cityJsonArr.length;j++)
{
//取出城市的c_name作为文本
var c_name = cityJsonArr[j].c_name;
//取出城市的c_id作为value
var c_id = cityJsonArr[j].c_id;
//创建城市的option
var option = new Option(c_name,c_id);
//将城市的option添加到城市的下拉框中
oCitySel.appendChild(option);
}
//找到之后，直接结束for循环
break;
}

			}
			
		};

```

实现效果：

[外链图片转存中…(img-1jDjtnRm-1562499453310)]

5、总结

[外链图片转存中…(img-oUhh6Duf-1562499453310)]

阿扎姆王子

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端-javascript（下）

Javascript入门（下）今日内容介绍使用JS完成表单校验使用JS完成表格的隔行换色使用JS完成复选框的全选效果使用JS完成省市联动效果今日内容学习目标使用JS可以编写各种事件(掌握)使用JS可以获得指定元素(掌握)使用JS可以创建元素(理解)使用JS可以对元素的属性进行操作(掌握)使用JS可以对元素的标签体进行操作(掌握)课堂笔记1、完善注册表...
复制链接

扫一扫