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

来源：互联网发布：warframe总是端口错误编辑：程序博客网时间：2024/05/22 13:42

本文内容摘自：《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

文档,图像,或对象加载完毕时

onsubmit

表单提交时

<form>

onunload

文档卸载时

实例：复选框全选与取消

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

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

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

<html>

<head>

<!--

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

</body>

</html>

实例：联动菜单

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

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

实现的基本思路：

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

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

</select>

...

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

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

李绪成 CSDN Blog：http://blog.csdn.net/javaeeteacher

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