JavaScript的应用二

JavaScript的应用

一、使用JS完成注册页面表单校验

1.需求分析

之前我们已经使用弹出框的方式实现了表单校验的功能，但是此种方式用户体验效果极差！
我们希望做成如下这种效果：

表单校验.PNG

2.步骤分析

• 第一步：确定事件(onfocus 聚焦事件)并为其绑定一个函数
• 第二步： 书写绑定函数(在输入框的后面给出提示信息)
• 第三步： 确定事件(onblur 离焦事件)并为其绑定一个函数
• 第四步： 书写函数(对数据进行校验， 分别给出提示)

3.代码实现

Html 代码：

JS 代码：

二、使用JS完成表格的一个隔行换色

1.需求分析

我们希望在后台页面中实现一个隔行换色的效果显示所有的用户信息，显示效果如下：

隔行变色.png

2.技术分析

新标签的学习

确定事件(页面加载事件onload)
获取元素：获取表格(document.getElementById()),最终是为了获取表格中tbody里面的行数(长度)。
Tbody里面的行数(rows.length)
JS的遍历(for循环)
获取奇数行和偶数行(对遍历中角标对2取余)
设置背景颜色(.style.backgroundColor)

3.步骤分析

• 第一步：确定事件(onload)并为其绑定一个函数
• 第二步：书写函数(获取表格)
• 第三步：获取tbody里面的行数
• 第四步：对tbody里面的行进行遍历
• 第五步：获取奇数行和偶数行(角标对2取余)
• 第六步：分别对奇数行和偶数行设置背景颜色

4.代码实现

JS代码：

html代码：

给table里面添加一个id=“tbl”,在table里面添加新标签
和

三、使用JS完成表格的高亮显示

分析：

• 第一步：确定事件(onmouseover和onmouseout)并分别为其绑定一个 函数
• 第二步：获取鼠标移上去的那行，对其设置背景颜色

JS代码：

html代码：

        1
        张三
        22

四、使用JS完成全选和全不选操作

1、需求分析

我们希望在后台系统实现一个批量删除的操作(全选所有的复选框)，显示效果如下：

全选全不全.png

2、技术分析

确定事件(鼠标单击事件onclick)，事件绑定到编号前面的复选框里面

获取编号前面的复选框的状态(是否选中)

获取复选框：var checkAllEle = document.getElementById(“id”)
获取复选框的状态：checkAllEle.checked?

获取下面所有的复选框：

document.getElementsByName(“name”);

3、步骤分析

• 第一步：确定事件(onclick)并为其绑定一个函数
• 第二步：书写函数(获取编号前面的复选框，获取其状态)
• 第三步：判断编号前面复选框的状态(如果为选中，获取下面所有的复选框，并将其状态置为选中)
• 第四步：判断编号前面复选框的状态(如果为未选中，获取下面所有的复选框，并将其状态置为未选中)

4、代码实现

JS代码：

HTMl代码：

复选框前面的：

下面所有的复选框：

五、使用JS完成省市二级联动

1、需求分析

我们希望在注册页面中添加一个字段(籍贯)，当用户选择一个具体的省份，在后面的下拉列表中动态加载该省份下所有的城市。显示的效果如下：

省市联动.png

2、技术分析

事件(onchange)
使用一个二维数组来存储省份和城市(二维数组的创建)
获取用户选择的省份(使用方法传参的方式：this.value)
遍历数组(获取省份与用户选择的省份比较，如果相同了，继续遍历该省份下所有的城市)
创建文本节点和元素节点并进行添加操作
createTextNode()
createElement()
appendChild()

3、步骤分析

• 第一步：确定事件(onchange)并为其绑定一个函数
• 第二步：创建一个二维数组用于存储省份和城市
• 第三步：获取用户选择的省份
• 第四步：遍历二维数组中的省份
• 第五步：将遍历的省份与用户选择的省份比较
• 第六步：如果相同，遍历该省份下所有的城市
• 第七步：创建城市文本节点
• 第八步：创建option元素节点
• 第九步：将城市文本节点添加到option元素节点中去
• 第十步：获取第二个下拉列表，并将option元素节点添加进去
• 第十一步：每次操作前清空第二个下拉列表的option内容。

4、代码实现

JS代码：

Html代码：

        --请选择--
        湖北
        湖南
        河北
        河南