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

最新推荐文章于 2021-04-08 08:59:16 发布
最新推荐文章于 2021-04-08 08:59:16 发布
阅读量2.1k 收藏
点赞数
文章标签： javascript java web button function servlet
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JavaEETeacher/article/details/6483248
版权

本文内容摘自：《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>   
...
李绪成 CSDN Blog ： http://blog.csdn.net/javaeeteacher
老李-大连
关注
Java Web基础入门第八十六讲 在线网上书店(一)——搭建开发环境
李阿昀的博客
06-07 1585
前言 为了巩固之前所学Java Web基础，特做一个还算是比较完整的小项目——在线网上书店。 成果图 在线网上书店这个项目包含了两个部分，前台和后台。前台用于向用户显示商品（这里是书籍）信息，如下图所示。 后台由管理员进行管理，后台分为分类管理模块、图书管理模块、订单管理模块以及数据库管理模块等4个模块，如下图所示。 搭建开发环境 导入开发包和创建包结构 在Eclipse中新创建一个myboo...
Java Web基础入门第三十讲 基于Servlet+JSP+JavaBean开发模式的购物车
李阿昀的博客
08-04 2万+
上一篇以一个最常用的用户登录注册程序来讲解Servlet+JSP+JavaBean开发模式，所以我们也初步了解了Servlet+JSP+JavaBean(MVC)模式。现在我们以一个网上购物时的购物车程序来重新回顾这种开发模式。创建MVC架构的Web项目在Eclipse中新创建一个day10项目，导入项目所需要的开发包(jar包)，创建项目所需要的包，在java开发中，架构的层次是以包的形式体现出来
《代码大全》学习笔记——第十八章，表驱动法
常高伟的专栏
09-18 2506
Normal 0 7.8 磅 0 2 false false false MicrosoftInternetExplorer4 <!-- /* Font D
JavaSE学习 第十八章 JDBC编程[详解]
09-08 199
1.数据库简介 数据库（DB，Data Base ） 数据库管理系统（DBMS，Data Base Management System） 关系型数据库（RDB） 关系型数据库管理系统（RDBMS） SQL语言（Structured Query Language）：使用关系模型的数据库语言，用于和各类数据库的交互，提供通用的数据管理和查询功能。 常用SQL指令：（CURD） ...
select联动菜单(点第一个select里面的值的时候，第二个select随着第一个的点击而发生变化)
笑到世界都狼狈的博客
09-11 3390
这两天项目中有个查询功能是要做联动菜单，既：我点击第一个下拉列表的查询条件的时候，第二个下拉列表中的内容要变成第一个下拉列表当前值所对应的选项。 思考了几分钟，想到的最简单的方法就是对第二个下拉列表做显示隐藏，当第一个列表发生变化的时候显示该显示的列表，隐藏其他的下拉列表。 在写的过程中遇到一个问题就是select的点击事件没有用，上网查了一个发现select支持onchange事件，不支持c...
根据省份选择城市的功能（连接数据库的）
老白干的zone
12-24 2887
根据http://blog.csdn.net/huangzhe10/archive/2010/08/18/5819802.aspx建立两个表，分别为省份表tb_province，城市表tb_city。如上图所示布局，左侧ComboBox显示省份列表，右侧ComboBox显示城市列表双击form的空白处首先把省份的列表加载到ComboBox里来方法一： using (SqlConnection conn = new SqlConnection(@"Data Source=./SQLEXP
完整版Java web开发教程PPT课件 Java开发进阶教程 第09章 jstl、EL、Bean（共18页）.pptx
12-25
通过学习这个完整的Java Web开发教程，开发者可以系统地掌握从基础的JavaScript语法、DOM操作，到服务器端的Servlet、JSP，再到现代Web框架如Spring MVC和MyBatis的使用，从而具备开发专业级别的Java Web应用的能力...
0 基础 Java 自学之路（2021年最新版）
热门推荐
程序员囧辉
04-08 40万+
屌丝逆袭之路
Java Web从入门到精通光盘18-21
11-29
【Java Web从入门到精通光盘18-21】是一个涵盖了Java Web开发基础到进阶的教程资源，旨在帮助初学者系统学习并掌握这一领域。在这个光盘中，你可能会遇到一系列关于Web应用程序开发的知识点，包括但不限于以下内容：...
如何实现下拉选择省份后，后续单元格能选择对应的城市和县区
sinat_39566400的博客
08-22 1万+
利用excel制作一个三级菜单，算是比较经典的一个案例了，今天，小编就细细的给大家说下如何制作三级菜单 1. 首先准备一个省份划分区域 2. 选择A3:C5区域—公式—根据所选内容创建—只勾选“首行” 3. 选择A10:C12区域—公式—根据所选内容创建—只勾选“首行”。我们点开公式选项卡的名称管理器，发现省份和城市都已经创建好了。比如成都是由C11：C12组成的 4. 在D1
JavaEE企业级应用开发第18章 BOOT客户管理系统的分享
qq_44692189的博客
06-09 4299
文章目录前言：系统功能及架构介绍分享源代码及数据库文件 前言： 最近自己动手做了一个用户管理系统的项目跟大家分享一下。 系统功能及架构介绍 具体的架构设计如下： 文件架构如下： 分享源代码及数据库文件 ==》》点击 百度网盘链接 提取码：kztx ----》》点击 项目详细解读的PPT：从以下五个部分介绍，主要通过一个BOOT客户管理系统来讲解SSM框架的实际使用。首先对系统的功能、结构等进行了简单的介绍，然后讲解了系统所使用的数据库表。接下来,详细的讲解了系统的环境搭建工作。最后，讲解了系统用户
Collection集合的总结以及如果选择适合的集合（包括对List和Set的对比）
Hunaiyo-黄奕为
08-05 1467
Collection |--List 有序,可重复 |--ArrayList 底层数据结构是数组，查询快，增删慢。 线程不安全，效率高 |--Vector 底层数据结构是数组，查询快，增删慢。 线程安全，效率低 |--LinkedList 底层数据结构是链表，查询慢，增删快。 线程不安全，效率高 |--Set 无序,唯一 |--HashSet 底层数据结构是哈希表。 如何保证元素唯一性的呢? 依赖两个方
根据选择下拉框选择省份动态显示城市
lengxin337的专栏
03-22 1万+
//ajax获取城市 public function ajaxfindcity(){ $province =intval($_GET['province']); $citylist = $GLOBALS['db']->getAll(" select * from ".DB_PREFIX."area where parent_id=$province"); $str = "=请选
Java基础教程：从入门到精通
15. **第十五章：JavaScript语言** - 这同样不属于Java，但在Java web开发中常与Java交互，理解JavaScript有助于理解客户端脚本。 16. **第十六章：DOM** - Document Object Model，讲解如何通过JavaScript操作HTML...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值