文章目录
前言
回顾之前的学习，javase，mysql，jdbc，我们了解到java对面向对象有什么样的支持，了解到除了最基本的语法规范，java有许多逻辑结构上的设计，可能一开始不理解为什么这样设计，但还是可以用我在JAVASE写的那句话来解释，先把代码量提升几个数量级，你就会发现这些设计是必不可少的
体系
一. HTML前端
网页不是画出来的，是代码写出来的（有些图形化编程，自动生成代码）
web2.0对网页开发提出了新的规范，高内聚，低耦合
（1）结构：由HTML实现，负责管理网页的内容。将来网页上不管是静态还是动态的数据都是填写到HTML的标签里
（2）表现：由CSS实现，负责管理网页内容的表现形式。比如：颜色、尺寸、位置、层级等等。也就是给数据穿上一身漂亮的衣服
（3）行为：由JavaScript实现，负责实现网页的动态交互效果。比如：轮播图、表单验证、鼠标滑过显示下拉菜单、鼠标滑过改变背景颜色等等
基础标签
非常枯燥，贼烦前端
真就完全是个工具，只管使用，完全不知道是如何实现的。就感觉是在背一个大字典，一个大的哈希表
<html>
<head>
<title>这是我的第一个网页</title>
<meta charset="UTF-8">
</head>
<body>
<!--
HELLO WORLD!<br/>你好，HTML！
<p>这里是一个段落</p>
<p>这里是第二个段落</p>
<img src="D:\sgg2021\0927_javaweb\1109\02.代码\imgs\girl.jpg" width="57" height="73" alt="这里是一张图片"/>
<h1>标题一</h1>
<h2>标题一</h2>
<h3>标题一</h3>
<h4>标题一</h4>
<h5>标题一</h5>
<h6>标题一</h6>
-->
武林高手排行榜:
<ol type="i" start="3">
<li>扫地僧</li>
<li>萧远山</li>
<li>慕容博</li>
<li>虚竹</li>
<li>阿紫</li>
</ol>
武林大会人员名单：
<ul type="circle">
<li>乔峰</li>
<li>阿朱</li>
<li>马夫人</li>
<li>白世镜</li>
</ul>
你是<b><i><u>喜欢</u></i></b>是<b>甜</b>月饼还是<i>咸</i><u>月饼</u>？
<br/>
水分子的化学式： H<sub>2</sub>O <br/>
氧气的化学式： O<sup>2</sup><br/>
5<10
10>5
5≤10
10≥5
注册商标 ®
版权符号 ©
<span>赵又廷</span>，夺妻之仇。
<a href="http://www.baidu.com" target="_self">百度一下</a>
</body>
</html>
<!--
1)
html语言是解释型语言，不是编译型.比如说<h7></h7>,html没有h7，于是html将其解释为普通的文字
浏览器是容错的
2)
html页面中由一对标签组成：<html></html>
<html> 称之为 开始标签
</html>称之为 结束标签
<head>表示这个区域内部是网页的标题，还可以设置编码方式
<body></body>网页的内容写在body之中
3)
title 表示网页的标题
4)
可以在meta标签中设置编码方式 <meta charset="utf-8">
5)
<br/>表示换行 。br标签是一个单标签。单标签：开始标签和结束标签是同一个，斜杠放在单词后面,相当于做了融合<br></br> = <br/>
6)
<p></p>表示段落标签，p表示paragraph
7)
<img src="D:\sgg2021\0927_javaweb\1109\02.代码\imgs\girl.jpg" width="57" height="73" alt="这里是一张图片"/>
也是一个单标签 <img></img>=<img/>
img 标签图片标签
src属性表示图片文件的路径
width和height表示图片的大小
alt表示图片的提示
8)
路径的问题：
1. 相对路径
2. 绝对路径
9)
h1~h6 : 标题标签
10)
列表标签:
- ol 有序列表
start 表示从*开始，type 显示的类型：A a I i 1(deafult)
<ol type="i" start="3">
<li>扫地僧</li>
其中<li>中的li表示list item
type="a",表示从i开始
start="3",表示从i的后面3-1位开始，也就是c
- ul 无序列表
type disc(圆饼)(default) , circle(圆圈) , square(方框)
11) u(underline) 下划线 b(bold) 粗体 i(italic) 斜体
12) 上标 sup(superscript) 下标 sub(subscript)
13) HTML中的实体(非常多)： 小于号 <(and less than); 大于等于号 &ge(and greater equal); 版权 ©
注册商标®(and register)
14) span 不换行的块标记 <span>赵又廷</span>将来对这个数据进行修饰
15) a 表示超链接
<a href="http://www.baidu.com" target="_self">百度一下</a>
href 链接的地址 hyper reference超链接
target:
_self 在本窗口打开(default)
_blank 在一个新窗口打开
_parent 在父窗口打开
_top 在顶层窗口打开
16) div 层
-->
table标签
<html>
<head>
<title>表格标签的学习</title>
<meta charset="UTF-8">
</head>
<body>
<table border="1" width="600" cellspacing="0" cellpadding="4">
<tr align="center">
<th>姓名</th>
<th>门派</th>
<th>成名绝技</th>
<th>内功值</th>
</tr>
<tr align="center">
<td>乔峰</td>
<td>丐帮</td>
<td>少林长拳</td>
<td>5000</td>
</tr>
<tr align="center">
<td>虚竹</td>
<td>灵鹫宫</td>
<td>北冥神功</td>
<td>15000</td>
</tr>
<tr align="center">
<td>扫地僧</td>
<td>少林寺</td>
<td>七十二绝技</td>
<td>未知</td>
</tr>
</table>
<hr/>
<table border="1" cellspacing="0" cellpadding="4" width="600">
<tr>
<th>名称</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
<th>操作</th>
</tr>
<tr align="center">
<td>苹果</td>
<td rowspan="2">5</td>
<td>20</td>
<td>100</td>
<td><img src="imgs/del.jpg" width="24" height="24"/></td>
</tr>
<tr align="center">
<td>菠萝</td>
<td>15</td>
<td>45</td>
<td><img src="imgs/del.jpg" width="24" height="24"/></td>
</tr>
<tr align="center">
<td>西瓜</td>
<td>6</td>
<td>6</td>
<td>36</td>
<td><img src="imgs/del.jpg" width="24" height="24"/></td>
</tr>
<tr align="center">
<td>总计</td>
<td colspan="4">181</td>
</tr>
</table>
</body>
</html>
<!--
<table></table>也是写在body里面的
17) 表格 table
行 tr(table row)
列 td(table column)
表头列 th(table head)表格的第一行
<tr align="center">
<th>姓名</th>
<th>门派</th>
<th>成名绝技</th>
<th>内功值</th>
</tr>
一行一行的写，每一行里边有很多列，每一列都要写。上面的示例就是一行四列的表格
table中有如下属性（虽然已经淘汰，但是最好了解一下）由CSS负责了
- border：表格边框的粗细
- width:表格的宽度
- cellspacing：单元格间距
- cellpadding：单元格填充
<table border="1" width="600" cellspacing="0" cellpadding="4">
tr中有一个属性： align -> center , left , right align（调整，使一致）
span:时间跨度，一段时间
rowspan : 行合并
colspan : 列合并
-->
rowspan的效果
closapn的效果
表单标签form
从形式上讲，表格得有各自，讲行列，每一行遵从相同的格式；表单更像是文本，一条一条的记录，每条记录很多时候各自独立
在代码层面，表格和表单是两种结构，拥有不同额属性
select 表示下拉列表。每一个选项是option，其中value属性是发送给服务器的值 , selected表示默认选中的项<select><option></option></select>
textarea 表示多行文本框（或者称之为文本域）,它的value值就是开始结束标签之间的内容 <textarea></textarea> <textarea name="remark" rows="4" cols="50"></textarea><br/>
<html>
<head>
<title>表单标签的学习</title>
<meta charset="UTF-8">
</head>
<body>
//以post的发送方式发送给demo04.html,action这个属性有很多值
//如果是一个.html文件，那就是请求页面
//如果是add.do(自定义的操作)，那可能就是请求向服务器端写数据
//其效果是，我点一下页面，就会跳转到demo04.html
<form action="demo04.html" method="post">
昵称：<input type="text" value="请输入你的昵称"/><br/>
密码：<input type="password" name="pwd"/><br/>
性别：<input type="radio" name="gender" value="male"/>男
<input type="radio" name="gender" value="female" checked/>女<br/>
爱好：<input type="checkbox" name="hobby" value="basketball"/>篮球
<input type="checkbox" name="hobby" value="football" checked/>足球
<input type="checkbox" name="hobby" value="earth" checked/>地球<br/>
星座：<select name="star">
<option value="1">白羊座</option>
<option value="2" selected>金牛座</option>
<option value="3">双子座</option>
<option value="4">天蝎座</option>
<option value="5">天秤座</option>
</select><br/>
备注：<textarea name="remark" rows="4" cols="50"></textarea><br/>
<input type="submit" value=" 注 册 "/>
<input type="reset" value="重置"/>
<input type="button" value="这是一个普通按钮"/>
</form>
</body>
</html>
<!--
18) 表单 form <form></form>
19)
<input/>也是单标签
input type="text" 表示文本框 ， 其中 name属性必须要指定，否则这个文本框的数据将来是不会发送给服务器的
昵称：<input type="text" value="请输入你的昵称"/><br/>
input type="password" 表示密码框
input type="radio" 表示单选按钮。需要注意的是，name属性值保持一致，这样才会有互斥的效果;可以通过checked属性设置默认选中的项
input type="checkbox" 表示复选框。name属性值建议保持一致，这样将来我们服务器端获取值的时候获取的是一个数组
select 表示下拉列表。每一个选项是option，其中value属性是发送给服务器的值 , selected表示默认选中的项
<select><option></option></select>
textarea 表示多行文本框（或者称之为文本域）,它的value值就是开始结束标签之间的内容
<textarea></textarea> <textarea name="remark" rows="4" cols="50"></textarea><br/>
input type="submit" 表示提交按钮,配合<form>标签里的action,action是提交的目的地，一个网址。也就是跳转到action表示的页面
<form>标签还有一个属性method，表示表单的发送方式。method = "post"安全
input type="reset" 表示重置按钮，表示恢复到默认情况，不是清空数据
input type="button" 表示普通按钮
-->
点击注册以后，那么表单就发送给了服务器，服务器收到的是什么数据呢？？
以键值对的形式来看上面的数据，key就是html代码中的属性name，value就是html代码中的value。真的很恶心
frameset和iframe
一个网页可能由多个子网页组成
前端的逻辑是将浏览器的页面逻辑上等同于一张表格，通过设置行列所占的比例来确定一个页面的大小。从左上开始
<html>
<head></head>
将原始页面从上往下分配原页面的行的20%给top
<frameset rows="20%,*" > <!-- frameborder="no" -->
<frame src="frames/top.html"/>
将剩余页面从左往右分配原页面的列的15%给left
<frameset cols="15%,*">
<frame src="frames/left.html"/>
将剩余页面从上往下分配原页面的行的80%给main
为什么bottom还占了一部分？？？？？？
<frameset rows="80%,*">
<frame src="frames/main.html"/>
<frame src="frames/bottom.html"/>
</frameset>
</frameset>
</frameset>
</html>
<!--
frameset 表示页面框架 ， 这个标签已经淘汰，了解，不需要掌握
frame表示框架中的具体页面引用
iframe
二. CSS-表现-特效
web2.0对网页开发提出了新的规范，高内聚，低耦合
（1）结构：由HTML实现，负责管理网页的内容。将来网页上不管是静态还是动态的数据都是填写到HTML的标签里
（2）表现：由CSS实现，负责管理网页内容的表现形式。比如：颜色、尺寸、位置、层级等等。也就是给数据穿上一身漂亮的衣服
（3）行为：由JavaScript实现，负责实现网页的动态交互效果。比如：轮播图、表单验证、鼠标滑过显示下拉菜单、鼠标滑过改变背景颜色等等
CSS：Cascading Style Sheets，层叠样式表
<p><font color="red">这里是段落一</font></p>
<p><font color="red">这里是段落二</font></p>
如果要将上面两个段落的文字都变成红色，每个段落都需要加上<font>标签，加入有10个，50个呢，这个效率是很低的
环境（html环境，css环境）
这里要先放大视角，在标签<html></html>中，表示代码在html环境中
要使用css的命令，就需要在css的环境中，使用<style></style>标签
<head>
<!-- 内部样式表 -->
<style type="text/css">
//p为标签样式表
p{
color:red;
}
</style>
</head>
<p><font color="red">这里是段落一</font></p>
<p><font color="red">这里是段落二</font></p>
在css环境中，我们就可以设置标签的属性（不严谨）。如上所示，css中使用的标签p，就是下面我们想要修改属性额那个<p>
还可以指定某个标签额字号大小，背景颜色
标签样式表不能自定义，需要和html环境中目标标签保持一致
类样式和id样式可以自定义，类以及id都是html环境中标签的属性，<p>段落标签就有class属性和id属性
<html>
<head>
<meta charset="utf-8">
<!-- 内部样式表 -->
<style type="text/css">
/* 被style标签包围的范围是CSS环境，可以写CSS代码 */
/* 标签样式表 */
p{
color:red;
}
/* 类样式 */
.f20{
font-size:20px;
}
/* id样式*/
#p4{
background-color:pink;
font-size:24px;
font-weight:bolder;
}
</style>
</head>
<body>
<!--
<p><font color="red">这里是段落一</font></p>
<p><font color="red">这里是段落二</font></p>
-->
<p>这里是段落一</p>
<p>这里是段落二</p>
<p class="f20">这里是段落三</p>
<p id="p4">这里是段落四</p> <!-- id属性在整个HTML文档中，尽量保持唯一（虽然重复也不会报错） -->
</body>
</html>
样式表
上面的代码提到了三种样式表，标签样式表，类样式表，id样式表，而CSS叫啥来着，层叠样式表
样式表，按照一般的理解，这个表里面装的就是各种样式，比如color，width,height等
<div>
<p><span style="font-size:60px;font-weight:bolder;color:yellow;">HELLO</span></p>
<span class="f32">World</span>
<p class="f32">!!!</p>
</div>
<div>标签内部的标签也是可以用css修饰的，使用组合样式，组合样式又可以嵌套前面的样式，成为组合标签样式表，组合类样式表，组合id样式表
//在css环境中
div p{
color:blue;
}
div class.f32{
font-size:32px;
}
<div>
<p><span style="font-size:60px;font-weight:bolder;color:yellow;">HELLO</span></p>
<span class="f32">World</span>
<p class="f32">!!!</p>
</div>
CSS的最基本的分类: 标签样式表、类样式表、ID样式表
CSS从位置上的分类：嵌入式样式表、内部样式表、外部样式表
当css环境中的代码太多，我们可以将其迁移到.css文件中进行管理，然后在html环境中导入这个.css文件
.css文件不需要声明是在css环境
/* ID样式 */
#p4{
background-color:pink;
font-size:24px;
font-weight:bolder;
font-style:italic;
font-family:"华文彩云";
}
/* 组合样式 */
div p{
color:blue;
}
div .f32{
font-size:32px;
font-family:"黑体";
}
html环境中直接导入即可，也不需要在<style>标签中声明css环境
<html>
<head>
<!-- 引用外部的CSS样式表文件 -->
<link rel="stylesheet" href="css/demo01.css">
</head>
<body>
<p>这里是段落一</p>
<p>这里是段落二</p>
<p class="f20">这里是段落三</p>
<p id="p4">这里是段落四</p> <!-- id属性在整个HTML文档中，尽量保持唯一（虽然重复也不会报错） -->
<div>
<p><span style="font-size:60px;font-weight:bolder;color:yellow;">HELLO</span></p>
<span class="f32">World</span>
<p class="f32">!!!</p>
</div>
</body>
</html>
盒子模型
<div>相当于造了一个盒子，div是division的缩写，division本意是指分隔，隔开。好像也可以叫容器
为了修饰盒子，用了四个样式分别修饰上下左右边框，border-top,border-bottom,border-left,border-right
每个盒子还可以向内进行填充，使用四个样式来修饰，padding-top, padding-bottom
描述河西的尺寸有两个样式，height,width
d<div>可以嵌套，为了控制子容器的位置,由有四个样式用来控制位置，margin-top,margin-left,margin的本意是指页边空白
CSS盒子模型：
1.border 边框：容器
2.margin 间距：父子容器之间
3.padding 填充：容器
也可以针对<body>标签在css环境中设置标签样式表，将body部分的margin，padding进行设置
body{
margin:0;
padding:0;
}
body是网页，前面不是也提到子网页的事儿吗
CSS布局
这个布局前面也提到过，将浏览器的页面逻辑上等同于一张表格，通过设置行列所占的比例来确定一个页面的大小
或者说坐标系，原点在页面左上，x轴向右，y轴向下，两轴都以1pixel为单位
子父容器
这样的逻辑概念出现在某些标签嵌套的时候
比如说<div>嵌套在<body>中，body是父容器，div是子容器
又比如说div自己嵌套，外层的是父容器，里层的是子容器
body，div都可以是容器
相对位置与绝对位置
样式表中有一个position样式，用以控制容器的位置
如果是绝对位置，表示容器相对于原点的位置
如果是相对位置，表示容器相对于其父容器的位置
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
body{
margin:0;
padding:0;
}
#div1{
width:200px;
height:50px;
background-color:greenyellow;
/* 绝对定位 */
position:absolute;
left:100px;
top:100px;
}
#div2{
width:200px;
height:50px;
background-color:pink;
position:relative;
float:left;
margin-left:20px;
}
#div3{
height:50px;
background-color:darkorange;
}
#div4{
width:200px;
height:50px;
background-color:aqua;
float:left;
}
#div5{
width:200px;
height:50px;
background-color:olivedrab;
float:left;
}
div{
position:relative;
}
</style>
</head>
<body>
<!--
<div id="div1"> </div>
<div id="div2"> </div>
-->
<div id="div3">
<div id="div4"> </div>
<div id="div5"> </div>
</div>
</body>
</html>
<!--
position: absolute -- 绝对定位 , 需要配合使用 left , top
relative -- 相对定位 , 一般会和 float , margin , padding .... 一起使用
float
-->
使用CSS布局将页面分块
有两块内容：
（1）每个盒子的大小如何计算
（2）每个盒子的位置如何计算
在实际的代码中，大小和位置是同时完成计算的
先确定每个盒子的位置应该按照相对位置还是绝对位置来计算
再确定每个盒子的高宽，是否浮动
没整明白
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
body{
margin:0;
padding:0;
background-color:#808080;
}
div{
position:relative;
}
#div_top{
background-color: orange;
height:20%;
}
#div_left{
background-color: greenyellow;
height:80%;
width:15%;
float:left;
}
#div_main{
background-color: whitesmoke;
height:70%;
float:left;
width:85%;
}
#div_bottom{
background-color: sandybrown;
height:10%;
width:85%;
float:left;
}
#div_container{
width:80%;
height:100%;
border:0px solid blue;
margin-left:10%;
float:left;
}
</style>
</head>
<body>
<div id="div_container">
<div id="div_top">div_top</div>
<div id="div_left">div_left</div>
<div id="div_main">div_main</div>
<div id="div_bottom">div_bottom</div>
</div>
</body>
</html>
CSS实现静态页面
id样式表和标签可以合并，形成组合样式表，很奇怪说实话
#tbl_fruit tr,#tbl_fruit th, #tbl_fruit td{}
id样式表名写在标签前面，之前见过的是标签写在前面，类样式表名写后面
div class.f32{}
到底哪种是对的呢？？？？？？？？？？？？？？？？？
像标签样式表，是否意味着这个标签内都符合这个样式
像id样式表，类样式表，是否意味着像<div><p><span><table> 等标签可以直接使用他们进行修饰
*{
color: threeddarkshadow;
}
body{
margin:0;
padding:0;
background-color:#808080;
}
div{
position:relative;
float:left;
}
#div_container{
width:80%;
height:100%;
border:0px solid blue;
margin-left:10%;
float:left;
background-color: honeydew;
border-radius:8px;
}
#div_fruit_list{
width:100%;
border:0px solid red;
}
#tbl_fruit{
width:60%;
line-height:28px;
margin-top:120px;
margin-left:20%;
}
#tbl_fruit , #tbl_fruit tr , #tbl_fruit th , #tbl_fruit td{
border:1px solid gray;
border-collapse:collapse;
text-align:center;
font-size:16px;
font-family:"黑体";
font-weight:lighter;
}
.w20{
width:20%;
}
.delImg{
width:24px;
height:24px;
}
.btn{
border:1px solid lightgray;
width:80px;
height:24px;
}
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/demo05.css">
</head>
<body>
<div id="div_container">
<div id="div_fruit_list">
<table id="tbl_fruit">
<tr>
<th class="w20">名称</th>
<th class="w20">单价</th>
<th class="w20">数量</th>
<th class="w20">小计</th>
<th>操作</th>
</tr>
<tr>
<td>苹果</td>
<td>5</td>
<td>20</td>
<td>100</td>
<td><img src="imgs/del.jpg" class="delImg"/></td>
</tr>
<tr>
<td>西瓜</td>
<td>3</td>
<td>20</td>
<td>60</td>
<td><img src="imgs/del.jpg" class="delImg"/></td>
</tr>
<tr>
<td>菠萝</td>
<td>4</td>
<td>25</td>
<td>100</td>
<td><img src="imgs/del.jpg" class="delImg"/></td>
</tr>
<tr>
<td>榴莲</td>
<td>3</td>
<td>30</td>
<td>90</td>
<td><img src="imgs/del.jpg" class="delImg"/></td>
</tr>
<tr>
<td>总计</td>
<td colspan="4">999</td>
</tr>
</table>
</div>
</div>
</body>
</html>
三. js
和前面提到的html环境，css环境一样，js需要javascript环境
js的语法几乎和java一样，api也差不多
（1）结构：由HTML实现，负责管理网页的内容。将来网页上不管是静态还是动态的数据都是填写到HTML的标签里
（2）表现：由CSS实现，负责管理网页内容的表现形式。比如：颜色、尺寸、位置、层级等等。也就是给数据穿上一身漂亮的衣服
（3）行为：由JavaScript实现，负责实现网页的动态交互效果。比如：轮播图、表单验证、鼠标滑过显示下拉菜单、鼠标滑过改变背景颜色等等
js环境
js环境声明的位置可以在<head>标签里面，也可以在<body>标签里面
<html>
<head>
<meta charset="utf-8">
<script language="javascript">
</script>
</head>
<body>
</body>
</html>
Javascript : 客户端的一个脚本语言
js是一门弱类型的语言 , 变量的数据类型由后面赋的值的类型决定，写法上很像python
<html>
<head>
<meta charset="utf-8">
<script language="javascript">
// String str = "hello world" ;
/*
var str = "hello world";
alert(typeof str);
str = 9999 ;
alert(typeof str);
*/
/*
var person = new Object();
person.pid = "p001";
person.pname="鸠摩智";
alert(person.pid+"_"+person.pname);
*/
//java 方法
public String hello(String name){
return "hello to " + name ;
}
//js 方法
function hello(num1 , num2 , name){
if(num1>num2){
return "hello to" + name ;
}else{
alert("HELLO");
}
}
</script>
</head>
<body>
</body>
</html>
<!--
Javascript : 客户端的一个脚本语言
js是一门弱类型的语言 , 变量的数据类型由后面赋的值的类型决定
-->
鼠标悬浮和离开
js的代码也可以像css一样，通过引入.js文件的方式引入js代码
引入css代码，创建css环境
引入文件
<link rel="stylesheet" href="css/demo05.css">
创建环境
<style type="text/css"></style>
引入js代码，创建js环境
引入文件
<script type="text/javascript" src="js/demo07.js"></script>
创建环境
<script language="javascript"></script>
挺恶心的，两种写法还不一样
var表示变量，不是类型，variable
.js文件
//当鼠标悬浮时，显示背景颜色
function showBGColor(){
//event : 当前发生的事件
//event.srcElement : 事件源
//alert(event.srcElement);
//alert(event.srcElement.tagName); --> TD
if(event && event.srcElement && event.srcElement.tagName=="TD"){
var td = event.srcElement ;
//td.parentElement 表示获取td的父元素 -> TR
var tr = td.parentElement ;
//如果想要通过js代码设置某节点的样式，则需要加上 .style
tr.style.backgroundColor = "navy" ;
//tr.cells表示获取这个tr中的所有的单元格
var tds = tr.cells;
for(var i = 0 ; i<tds.length ; i++){
tds[i].style.color="white";
}
}
}
//当鼠标离开时，恢复原始样式
function clearBGColor(){
if(event && event.srcElement && event.srcElement.tagName=="TD"){
var td = event.srcElement ;
var tr = td.parentElement ;
tr.style.backgroundColor="transparent";
var tds = tr.cells;
for(var i = 0 ; i<tds.length ; i++){
tds[i].style.color="threeddarkshadow";
}
}
}
//当鼠标悬浮在单价单元格时，显示手势
function showHand(){
if(event && event.srcElement && event.srcElement.tagName=="TD"){
var td = event.srcElement ;
//cursor : 光标
td.style.cursor="hand";
}
}
.html文件
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/demo05.css">
<script type="text/javascript" src="js/demo07.js"></script>
</head>
<body>
<div id="div_container">
<div id="div_fruit_list">
<table id="tbl_fruit">
<tr>
<th class="w20">名称</th>
<th class="w20">单价</th>
<th class="w20">数量</th>
<th class="w20">小计</th>
<th>操作</th>
</tr>
<tr onmouseover="showBGColor()" onmouseout="clearBGColor()">
<td>苹果</td>
<td onmouseover="showHand()">5</td>
<td>20</td>
<td>100</td>
<td><img src="imgs/del.jpg" class="delImg"/></td>
</tr>
<tr onmouseover="showBGColor()" onmouseout="clearBGColor()">
<td>西瓜</td>
<td onmouseover="showHand()">3</td>
<td>20</td>
<td>60</td>
<td><img src="imgs/del.jpg" class="delImg"/></td>
</tr>
<tr onmouseover="showBGColor()" onmouseout="clearBGColor()">
<td>菠萝</td>
<td onmouseover="showHand()">4</td>
<td>25</td>
<td>100</td>
<td><img src="imgs/del.jpg" class="delImg"/></td>
</tr>
<tr onmouseover="showBGColor()" onmouseout="clearBGColor()">
<td>榴莲</td>
<td onmouseover="showHand()">3</td>
<td>30</td>
<td>90</td>
<td><img src="imgs/del.jpg" class="delImg"/></td>
</tr>
<tr>
<td>总计</td>
<td colspan="4">999</td>
</tr>
</table>
</div>
</div>
</body>
</html>
优化
我们不希望标签里边出现.js文件里面的元素，比如说tr<tr onmouseover="showBGColor()" onmouseout="clearBGColor()">
那么在.js文件里边去修改
window.onload=function(){
updateZJ();
//当页面加载完成，我们需要绑定各种事件
//根据id获取到表格
var fruitTbl = document.getElementById("tbl_fruit");
//获取表格中的所有的行
var rows = fruitTbl.rows ;
for(var i = 1 ; i<rows.length-1 ; i++){
var tr = rows[i];
//1.绑定鼠标悬浮以及离开时设置背景颜色事件
tr.onmouseover=showBGColor;
tr.onmouseout=clearBGColor;
//获取tr这一行的所有单元格
var cells = tr.cells;
var priceTD = cells[1];
//2.绑定鼠标悬浮在单价单元格变手势的事件
priceTD.onmouseover = showHand ;
//3.绑定鼠标点击单价单元格的事件
priceTD.onclick=editPrice;
}
}
//当鼠标点击单价单元格时进行价格编辑
function editPrice(){
if(event && event.srcElement && event.srcElement.tagName=="TD"){
var priceTD = event.srcElement ;
//目的是判断当前priceTD有子节点，而且第一个子节点是文本节点 ， TextNode对应的是3 ElementNode对应的是1
if(priceTD.firstChild && priceTD.firstChild.nodeType==3){
//innerText 表示设置或者获取当前节点的内部文本
var oldPrice = priceTD.innerText ;
//innerHTML 表示设置当前节点的内部HTML
priceTD.innerHTML="<input type='text' size='4'/>";
// <td><input type='text' size='4'/></td>
var input = priceTD.firstChild;
if(input.tagName=="INPUT"){
input.value = oldPrice ;
//选中输入框内部的文本
input.select();
//4.绑定输入框失去焦点事件 , 失去焦点，更新单价
input.onblur=updatePrice ;
}
}
}
}
function updatePrice(){
if(event && event.srcElement && event.srcElement.tagName=="INPUT"){
var input = event.srcElement ;
var newPrice = input.value ;
//input节点的父节点是td
var priceTD = input.parentElement ;
priceTD.innerText = newPrice ;
//更新当前行的小计这一个格子的值
//priceTD.parentElement td的父元素是tr
updateXJ(priceTD.parentElement);
}
}
//更新指定行的小计
function updateXJ(tr){
if(tr && tr.tagName=="TR"){
var tds = tr.cells;
var price = tds[1].innerText ;
var count = tds[2].innerText ;
//innerText获取到的值的类型是字符串类型，因此需要类型转换，才能进行数学运算
var xj = parseInt(price) * parseInt(count);
tds[3].innerText = xj ;
//更新总计
updateZJ();
}
}
//更新总计
function updateZJ(){
var fruitTbl = document.getElementById("tbl_fruit");
var rows = fruitTbl.rows ;
var sum = 0 ;
for(var i = 1; i<rows.length-1 ; i++){
var tr = rows[i];
var xj = parseInt(tr.cells[3].innerText); //NaN not a number 不是一个数字
sum = sum + xj ;
}
rows[rows.length-1].cells[1].innerText = sum ;
}
//当鼠标悬浮时，显示背景颜色
function showBGColor(){
//event : 当前发生的事件
//event.srcElement : 事件源
//alert(event.srcElement);
//alert(event.srcElement.tagName); --> TD
if(event && event.srcElement && event.srcElement.tagName=="TD"){
var td = event.srcElement ;
//td.parentElement 表示获取td的父元素 -> TR
var tr = td.parentElement ;
//如果想要通过js代码设置某节点的样式，则需要加上 .style
tr.style.backgroundColor = "navy" ;
//tr.cells表示获取这个tr中的所有的单元格
var tds = tr.cells;
for(var i = 0 ; i<tds.length ; i++){
tds[i].style.color="white";
}
}
}
//当鼠标离开时，恢复原始样式
function clearBGColor(){
if(event && event.srcElement && event.srcElement.tagName=="TD"){
var td = event.srcElement ;
var tr = td.parentElement ;
tr.style.backgroundColor="transparent";
var tds = tr.cells;
for(var i = 0 ; i<tds.length ; i++){
tds[i].style.color="threeddarkshadow";
}
}
}
//当鼠标悬浮在单价单元格时，显示手势
function showHand(){
if(event && event.srcElement && event.srcElement.tagName=="TD"){
var td = event.srcElement ;
//cursor : 光标
td.style.cursor="hand";
}
}
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/demo05.css">
<script type="text/javascript" src="js/demo08.js"></script>
</head>
<body>
<div id="div_container">
<div id="div_fruit_list">
<table id="tbl_fruit">
<tr>
<th class="w20">名称</th>
<th class="w20">单价</th>
<th class="w20">数量</th>
<th class="w20">小计</th>
<th>操作</th>
</tr>
<tr>
<td>苹果</td>
<td>5</td>
<td>20</td>
<td>100</td>
<td><img src="imgs/del.jpg" class="delImg"/></td>
</tr>
<tr>
<td>西瓜</td>
<td>3</td>
<td>20</td>
<td>60</td>
<td><img src="imgs/del.jpg" class="delImg"/></td>
</tr>
<tr>
<td>菠萝</td>
<td>4</td>
<td>25</td>
<td>100</td>
<td><img src="imgs/del.jpg" class="delImg"/></td>
</tr>
<tr>
<td>榴莲</td>
<td>3</td>
<td>30</td>
<td>90</td>
<td><img src="imgs/del.jpg" class="delImg"/></td>
</tr>
<tr>
<td>总计</td>
<td colspan="4">999</td>
</tr>
</table>
</div>
</div>
</body>
</html>
245
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
