Java Web基础：第十八讲 JavaScript处理（一）

本文内容摘自：《Java Web开发教程——入门与提高篇（JSP+Servlet）》

作为一门语言，JavaSript 的功能非常强大。下面通过几个常用的例子来展示一下JavaScript 在客户端的处理。

处理的基本过程如下：

l         根据要完成的功能编写相应的方法；

l         在相应的元素上添加事件关联代码，例如 <body onload="init()"> 就表示加载 body 的时候调用 init 方法 。常用的事件如表4.1 所示：

表4.1 JavaScript 事件及对应的方法

事件对应的方法	事件	支持的页面元素
onclick	鼠标单击时	所有元素
ondbclick	鼠标双击时	所有元素
onchange	显示的值改变时	表单元素
onfocus	窗口或元素获得焦点时	<body> 和表单元素
onblur	窗口或元素失去焦点时	<body> 和表单元素
onload	文档, 图像, 或对象加载完毕时	<body>, <frameset>, <img>, <iframe>, <object>
onsubmit	表单提交时	<form>
onunload	文档卸载时	<body>, <frameset>

实例：复选框全选与取消

应用背景：页面中有多个复选矿。希望快速选择所有，都不选择。

典型例子：基于Web 的邮件客户端，在管理邮件的时候，可以选择所有邮件，或者取消选择。

实现的基本思路：得到所有的复选框，使用他们的checked 属性，设置为true （全选）或者false （不选）。

<html>

<head>

 

<script language="JavaScript">

<!--

//CheckBox 全选

function selectAll(formName, cbName) {

    var o = document.forms(formName).item(cbName);

    if (o.length) {// 判断是否只有一项

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

           document.forms(formName).item(cbName)[i].checked = true;

       }

    } else {

       o.checked = true;

    }

}

//CheckBox 取消全选

function unSelectAll(formName, cbName) {

    var o = document.forms(formName).item(cbName);

    if (o.length) {// 判断是否只有一项

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

           document.forms(formName).item(cbName)[i].checked = false;

       }

    } else {

       o.checked = false;

    }

}

 

//-->

</script>

</head>

 

<body>

<form name="f1">

<input type="checkbox" name="interest" value="1"> 旅游 <br>

<input type="checkbox" name="interest" value="2"> 音乐 <br>

<input type="checkbox" name="interest" value="3"> 运动 <br>

<input type="button" value=" 全选 " onclick="selectAll('f1', 'interest')">

<input type="button" value=" 取消全选 " onclick="unSelectAll('f1', 'interest')">

</form>

</body>

</html>

实例：联动菜单

应用背景：在页面中有多个下拉菜单，某个菜单的值的变化会影响其他菜单的值的变化。

典型例子：地址的选择通常是先选择省份，再选择城市。类型的选择通常先选择大的分类，然后再选择小的分类。

实现的基本思路：

l         为主菜单添加onchange 事件，这样在主菜单中选项发生改变的时候，调用JavaScript 函数来修改被动菜单的选项，代码中的 onchange="changeCity()" 完成该功能 ；

l         在JavaScript 函数中根据主菜单的选项确定被动菜单的选项，主要是动态赋值，参见代码中的注释。

...

 <script language="javascript" type="text/javascript">

 function changeCity(){

     // 定义主菜单的内容

     var province = [" 辽宁 "," 陕西 "," 山东 "];

     // 定义被动菜单可能的内容

     var citys = [[" 沈阳 "," 大连 "," 鞍山 "],[" 西安 "," 咸阳 "," 宝鸡 "," 汉中 "],[" 青岛 "," 济南 "," 烟台 "," 威海 "," 泰安 "]];

     // 获取主菜单中被选择的项

     selected = document.getElementById("province").value;

     // 设置被动菜单的选项个数

     city.length=citys[selected-1].length;

     // 为被动菜单的每个选项赋值

     for(i=0;i<citys[selected-1].length;i++)

     {

        city.options[i].value = i+1; // 显示信息

        city.options[i].text = citys[selected-1][i]; // 值

     }

 }

</script>

...

    请选择您所在的城市：

    <select name="province" onchange="changeCity()">

       <option value="1" selected> 辽宁 </option>

       <option value="2"> 陕西 </option>

       <option value="3"> 山东 </option>

    </select>

    <select name="city">

       <option value="1" selected> 沈阳 </option>

       <option value="2"> 大连 </option>

       <option value="3"> 鞍山 </option>      

    </select>   

...

上一讲：第十七讲 业务处理概述

下一讲：第十九讲 JavaScript处理（二）

李绪成 优快云 Blog ： http://blog.youkuaiyun.com/javaeeteacher

邀请您为好友： http://student.youkuaiyun.com/invite.php?u=124362&c=7be8ba2b6f3b6cc5