JavaScript的应用二

JavaScript的应用

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

1.需求分析

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

2.步骤分析

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

3.代码实现

Html 代码：

<input type="text" name="user" size="34px" id="user"
onfocus="showTips('user',' 用户名必填！')"
onblur="check('user',' 用户名不能为空！')"/><span
id="userspan"></span>

JS 代码：

<script>        
    function showTips(id,info){
        document.getElementById(id+"span").innerHTML="<font color='gray'>"+info+"</font>";
    }

    function check(id,info){
        //1.获取用户输入的用户名数据
        var uValue = document.getElementById(id).value;
        //2.进行校验
        if(uValue==""){
            document.getElementById(id+"span").innerHTML="<font color='red'>"+info+"</font>";
        }else{
            document.getElementById(id+"span").innerHTML="";
        }
    }
</script>

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

1.需求分析

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

2.技术分析

新标签的学习

<thead>
        <tr>
            <th></th>
        </tr>
</thead>
    <tbody>
        <tr>
            <td></td>
        </tr>
</tbody>

确定事件(页面加载事件onload)

获取元素：获取表格(document.getElementById()),最终是为了获取表格中tbody里面的行数(长度)。

Tbody里面的行数(rows.length)

JS的遍历(for循环)

获取奇数行和偶数行(对遍历中角标对2取余)

设置背景颜色(.style.backgroundColor)

3.步骤分析

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

4.代码实现

JS代码：

<script>
    window.onload = function(){
        //1.获取表格
        var tblEle = document.getElementById("tbl");
        //2.获取表格中tbody里面的行数(长度)
        var len = tblEle.tBodies[0].rows.length;
        //alert(len);
        //3.对tbody里面的行进行遍历
        for(var i=0;i<len;i++){
            if(i%2==0){
                //4.对偶数行设置背景颜色
                tblEle.tBodies[0].rows[i].style.backgroundColor="pink";
            }else{
                //5.对奇数行设置背景颜色
                tblEle.tBodies[0].rows[i].style.backgroundColor="gold";
            }
        }
    }
</script>

html代码：

给table里面添加一个id=“tbl”,在table里面添加新标签
<thead></thead>和<tbody></tbody>

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

分析：

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

JS代码：

<script>
    function changeColor(id,flag){
        if(flag=="over"){
            document.getElementById(id).style.backgroundColor="red";
        }else if(flag=="out"){
            document.getElementById(id).style.backgroundColor="white";
        }
    }
</script>

html代码：

<tr onmouseover="changeColor('tr1','over')" id="tr1" onmouseout="changeColor('tr1','out')">
        <td>1</td>
        <td>张三</td>
        <td>22</td>
</tr>

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

1、需求分析

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

2、技术分析

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

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

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

获取下面所有的复选框：

document.getElementsByName(“name”);

3、步骤分析

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

4、代码实现

JS代码：

<script>
    function checkAll(){
        //1.获取编号前面的复选框
        var checkAllEle = document.getElementById("checkAll");
        //2.对编号前面复选框的状态进行判断
        if(checkAllEle.checked==true){
            //3.获取下面所有的复选框
            var checkOnes = document.getElementsByName("checkOne");
            //4.对获取的所有复选框进行遍历
            for(var i=0;i<checkOnes.length;i++){
                //5.拿到每一个复选框，并将其状态置为选中
                checkOnes[i].checked=true;
            }
        }else{
            //6.获取下面所有的复选框
            var checkOnes = document.getElementsByName("checkOne");
            //7.对获取的所有复选框进行遍历
            for(var i=0;i<checkOnes.length;i++){
                //8.拿到每一个复选框，并将其状态置为未选中
                checkOnes[i].checked=false;
            }
        }
    }
</script>

HTMl代码：

复选框前面的：

<th><input type="checkbox" onclick="checkAll()" id="checkAll"/></th>

下面所有的复选框：

<td><input type="checkbox" name="checkOne"/></td>

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

1、需求分析

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

2、技术分析

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

3、步骤分析

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

4、代码实现

JS代码：

<script>
    //1.创建一个二维数组用于存储省份和城市
    var cities = new Array(3);
    cities[0] = new Array("武汉市","黄冈市","襄阳市","荆州市");
    cities[1] = new Array("长沙市","郴州市","株洲市","岳阳市");
    cities[2] = new Array("石家庄市","邯郸市","廊坊市","保定市");
    cities[3] = new Array("郑州市","洛阳市","开封市","安阳市");

    function changeCity(val){

        //7.获取第二个下拉列表
        var cityEle = document.getElementById("city");

        //9.清空第二个下拉列表的option内容
        cityEle.options.length=0;

        //2.遍历二维数组中的省份
        for(var i=0;i<cities.length;i++){
            //注意，比较的是角标
            if(val==i){
                //3.遍历用户选择的省份下的城市
                for(var j=0;j<cities[i].length;j++){
                    //alert(cities[i][j]);
                    //4.创建城市的文本节点
                    var textNode = document.createTextNode(cities[i][j]);
                    //5.创建option元素节点
                    var opEle = document.createElement("option");
                    //6.将城市的文本节点添加到option元素节点
                    opEle.appendChild(textNode);
                    //8.将option元素节点添加到第二个下拉列表中去
                    cityEle.appendChild(opEle);
                }
            }
        }
    }
</script>

Html代码：

<select onchange="changeCity(this.value)">
        <option>--请选择--</option>
        <option value="0">湖北</option>
        <option value="1">湖南</option>
        <option value="2">河北</option>
        <option value="3">河南</option>
    </select>
    <select id="city">      
</select>