Javascript入门（下）

内容介绍

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

内容学习目标

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

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

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

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

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

课堂笔记

1、完善注册表单校验

1.1、案例介绍

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

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

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树内存图：

说明：

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, 值是worldoName.setAttribute('hello','world');//获取设置的属性hello的值console.log(oName.getAttribute('hello'));//world// 需求3：删除属性 valueoName.removeAttribute('value');</script></body>
</html>

实现效果：

练习二：

<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>

实现效果：

练习三：

<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>

实现效果：

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>

实现效果：

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标签的第一个孩子。

实现效果：

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(子级标签名)//获取父级标签ulvar oUl = document.body.children[0];//oUl.children[0] 表示ul的第一个li标签oUl.removeChild(oUl.children[0]);</script></body>
</html>

实现效果：

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上面时触发的。

鼠标移除之后触发的：

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上面时触发的。

鼠标移除之后触发的：

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,数组长度是1var 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字符串的长度是否是6console.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页面中添加错误显示区域

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

分析：该注册页面主要由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,用来验证用户名是否合法。

代码如下：

验证用户名是否满足：用户名必须是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,用来验证密码是否合法。

代码如下：

验证密码是否满足：密码长度必须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,用来验证确认密码是否合法。

代码如下：

验证确认密码是否满足：两次输入密码要一致。的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，代码如下所示：

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

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

效果：

2、表格隔行换色

2.1、案例描述

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

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

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">//获取所有的trvar 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>

实现效果：

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，下面都是falseaCK[i].checked=oCK.checked;}};
</script>

实现效果：

4、省市二级联动

4.1、案例介绍

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

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">//定义一个jsonvar 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”:“北京”}];

实现效果：

注意：标准格式的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、代码实现

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

代码实现：

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

省市联动的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文件复制到编辑工具的目录中：

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。

第四步：在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的valuevar 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");//根据当前下拉框的省加载当前省对应的市//获取当前下拉框的valuevar 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作为valuevar c_id = cityJsonArr[j].c_id;//创建城市的optionvar option = new Option(c_name,c_id);//将城市的option添加到城市的下拉框中oCitySel.appendChild(option);}//找到之后，直接结束for循环break;}}};
</script>

实现效果：

5、总结

= 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)]

前端-javascript（下）相关推荐

Web前端-JavaScript基础教程下
Web前端-JavaScript基础教程下 <script>有6个属性: async对外部脚本有效,可以用来异步操作,下载东西,不妨碍其他操作. charset为src属性指定字符集. d ...
视频教程-主流前端框架下ArcGIS API for JavaScript的开发-其他
主流前端框架下ArcGIS API for JavaScript的开发毕业于中国矿业大学地理信息科学专业.现就任于全球领先的GIS公司,主要担任地理平台研发工作,日常工作任务是ArcGIS JS A ...
Web前端-JavaScript基础教程上
Web前端-JavaScript基础教程将放入菜单栏中,便于阅读! JavaScript是web前端开发的编程语言,大多数网站都使用到了JavaScript,所以我们要进行学习,JavaScript ...
判断字符串正则_(重学前端 - JavaScript(模块一)) 14、引用类型之 RegExp (正则)(详述)...
上一篇文章介绍了 JavaScript 中的 Date 类型,从地理方面的原理知识开始入手,如果大家认真看过上一篇文章,相信 JavaScript 中的 Date 类型已经难不住大家了!!! 但是今天 ...
js html 导出word 不用activexobject,javascript下用ActiveXObject控件替换word书签，将内容导出到word后打印第2/2页...
javascript下用ActiveXObject控件替换word书签,将内容导出到word后打印第2/2页更新时间:2008年06月21日 22:57:31 作者: 由于时间比较紧,没多的时候 ...
Web前端JavaScript笔记（4）节点
如何获取元素节点的属性: 在Web前端JavaScript笔记(3)对象中,介绍了访问行间属性的方法,除此之外,系统还提供了三个方法访问元素的属性: 1. setAttribute: 2. getAt ...
前端 JavaScript 之『节流』的简单代码实现
前戏首先,总结一下上一篇文章--<前端 JavaScript 之『防抖』的简单代码实现>的内容:「防抖」就是在高频率触发事件停止触发后,延时执行某个处理逻辑. 防抖虽然在一定程度上对性能 ...
详解升讯威在线客服系统前端 JavaScript 脚本加密技术（1）
我在业余时间开发维护了一款免费开源的升讯威在线客服系统,也收获了许多用户.对我来说,只要能获得用户的认可,就是我最大的动力. 这段时间有几个技术小伙伴问了我一个有意思的问题:"你的前端脚本是 ...
能在多种前端框架下使用的表格控件
近几年Web前端框架特别流行,比如AngularJS.AngularJS 2.ReactJS.KnockoutJS.VueJS等.表格控件是我们在开发中经常要用到的控件.有没有能够在多种前端控件下都能 ...
浅析微前端架构下的Web性能分析
我们都知道Web性能关乎用户体验,进一步影响用户留存.转化率,显然用户体验不友好,最终导致流失.可见Web页面性能对用户和企业而言,可谓举足轻重. 因此,对Web页面的性能分析相关性能优化,是开发者不 ...

前端-javascript（下）

Javascript入门（下）

内容介绍

内容学习目标

课堂笔记

1、 完善注册表单校验

1.1、 案例介绍

1.2、 相关知识点

1.2.1、 DOM概述

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

1.2.2.1、 标签属性的操作：

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

1.2.3、 事件概述(掌握)

1.2.3.1、 什么是事件

1.2.3.2、 什么是事件驱动

1.1.2、 常用的事件

1.1.3、 事件绑定的方式

1.1.3.1、 静态绑定(了解)

1.1.3.2、 动态绑定(掌握)

1.1.4、 JS中的对象

1.1.4.1、 Array对象（重点）

1.1.4.2、 RegExp对象（重点）

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

**1.4、**案例分析

1.5、 案例实现

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

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

2、 表格隔行换色

2.1、 案例描述

2.2、 案例实现

3、 复选框全选/全不选

3.1、 案例描述

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

3.2.1、 单选/复选选中

3.3、 案例实现

4、 省市二级联动

4.1、 案例介绍

4.2、 相关知识点

4.2.1、 JSON

4.2.2、 下拉框

4.3、 代码实现

5、 总结

5、 总结

前端-javascript（下）相关推荐

最新文章

热门文章

1、完善注册表单校验

1.1、案例介绍

1.2、相关知识点

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

1.2.2.1、标签属性的操作：

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

1.2.3、事件概述(掌握)

1.2.3.1、什么是事件

1.2.3.2、什么是事件驱动

1.1.2、常用的事件

1.1.3、事件绑定的方式

1.1.3.1、静态绑定(了解)

1.1.3.2、动态绑定(掌握)

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

1.4、案例分析

1.5、案例实现

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

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

2、表格隔行换色

2.1、案例描述

2.2、案例实现

3、复选框全选/全不选

3.1、案例描述

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

3.2.1、单选/复选选中

3.3、案例实现

4、省市二级联动

4.1、案例介绍

4.2、相关知识点

4.2.2、下拉框

4.3、代码实现

5、总结

5、总结