本文内容摘自：《Java Web开发教程——入门与提高篇（JSP+Servlet）》
作为一门语言，JavaSript
的功能非常强大。下面通过几个常用的例子来展示一下JavaScript
在客户端的处理。
处理的基本过程如下：
l
根据要完成的功能编写相应的方法；
l
在相应的元素上添加事件关联代码，例如
<body οnlοad="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="
全选
" οnclick="selectAll('f1', 'interest')">
<input type="button" value="
取消全选
" οnclick="unSelectAll('f1', 'interest')">
</form>
</body>
</html>
实例：联动菜单
应用背景：在页面中有多个下拉菜单，某个菜单的值的变化会影响其他菜单的值的变化。
典型例子：地址的选择通常是先选择省份，再选择城市。类型的选择通常先选择大的分类，然后再选择小的分类。
实现的基本思路：
l
为主菜单添加onchange
事件，这样在主菜单中选项发生改变的时候，调用JavaScript
函数来修改被动菜单的选项，代码中的
οnchange="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" οnchange="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>
...
上一讲：第十七讲 业务处理概述
扫一扫
1585
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
