-
【javaWeb学习笔记】HTML，CSS，JS
1. HTML基本语法
1.1 基本语法
HTML：超文本标记语言-决定页面上显示什么内容
CSS：页面上的内容显示的风格（决定页面上内容的美观程度）
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
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
html语言是解释型语言，不是编译型
浏览器是容错的html页面中由一对标签组成：
<html></html>
<html>称之为 开始标签
</html>称之为 结束标签
3)
title表示网页的标题
4)
可以在meta标签中设置编码方式
5)
<br/>表示换行 。br标签是一个单标签。单标签：开始标签和结束标签是同一个，斜杠放在单词后面
6)
p表示段落标签
7)
img标签图片标签
src属性表示图片文件的路径
width和height表示图片的大小
alt表示图片的提示
8)
路径的问题：
1. 相对路径
2. 绝对路径
9)h1~h6: 标题标签
10) 列表标签:ol有序列表
start表示从*开始，type显示的类型：A a I i 1(deafult)ul无序列表
type disc(default) , circle , square
11)
u下划线b粗体i斜体
12) 上标sup下标sub
13) HTML中的实体： 小于号<大于等于号≥版权©
14)span不换行的块标记15)
a表示超链接
href链接的地址
target:
_self在本窗口打开
_blank在一个新窗口打开
_parent在父窗口打开
_top在顶层窗口打开16)
div层1.2. HTML表格
-
表格 table
行 tr
列 td
表头列 thtable中有如下属性（虽然已经淘汰，但是最好了解一下）
- border：表格边框的粗细
- width:表格的宽度
- cellspacing：单元格间距
- cellpadding：单元格填充
tr中有一个属性： align -> center , left , right
rowspan : 行合并
colspan : 列合并
<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> <!-- 17) 表格 table 行 tr 列 td 表头列 th table中有如下属性（虽然已经淘汰，但是最好了解一下） - border：表格边框的粗细 - width:表格的宽度 - cellspacing：单元格间距 - cellpadding：单元格填充 tr中有一个属性： align -> center , left , right rowspan : 行合并 colspan : 列合并 -->- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
1.3 表单标签
18) 表单 form19)
input type="text"表示文本框 ，其中 name属性必须要指定，否则这个文本框的数据将来是不会发送给服务器的
input type="password"表示密码框
input type="radio"表示单选按钮。需要注意的是，name属性值保持一致，这样才会有互斥的效果;可以通过checked属性设置默认选中的项
input type="checkbox"表示复选框。name属性值建议保持一致，这样将来我们服务器端获取值的时候获取的是一个数组
select表示下拉列表。每一个选项是option，其中value属性是发送给服务器的值 , selected表示默认选中的项
textarea表示多行文本框（或者称之为文本域）,它的value值就是开始结束标签之间的内容
input type="submit"表示提交按钮
input type="reset"表示重置按钮
input type="button"表示普通按钮<html> <head> <title>表单标签的学习</title> <meta charset="UTF-8"> </head> <body> <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 19) input type="text" 表示文本框 ， 其中 name属性必须要指定，否则这个文本框的数据将来是不会发送给服务器的 input type="password" 表示密码框 input type="radio" 表示单选按钮。需要注意的是，name属性值保持一致，这样才会有互斥的效果;可以通过checked属性设置默认选中的项 input type="checkbox" 表示复选框。name属性值建议保持一致，这样将来我们服务器端获取值的时候获取的是一个数组 select 表示下拉列表。每一个选项是option，其中value属性是发送给服务器的值 , selected表示默认选中的项 textarea 表示多行文本框（或者称之为文本域）,它的value值就是开始结束标签之间的内容 input type="submit" 表示提交按钮 input type="reset" 表示重置按钮 input type="button" 表示普通按钮 -->- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
1.4 frameset and iframe
<html> <head></head> <frameset rows="20%,*" > <!-- frameborder="no" --> <frame src="frames/top.html"/> <frameset cols="15%,*"> <frame src="frames/left.html"/> <frameset rows="80%,*"> <frame src="frames/main.html"/> <frame src="frames/bottom.html"/> </frameset> </frameset> </frameset> </html> <!-- frameset 表示页面框架 ， 这个标签已经淘汰，了解，不需要掌握 frame表示框架中的具体页面引用 iframe -->- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
1.5 总结
1.HTML是解释型的文本标记语言，不区分大小写 2.html,head,title,meta,body,br,p,hr,div,table,form,u,i,b,sup,sub, ,span,ul,ol,li,tr,td,th,h1-h6,a,input,select,textarea,img 2-1. html , head , title , meta , body , br , ul , ol , h1-h6 , a , img , , p , div , span 2-2. table tr , th , td 2-3. form(action='' , method='post') input type='text,pasword,radio,checkbox,submit,button,reset" <select> , <textarea>- 1
- 2
- 3
- 4
- 5
2. CSS
2.1 样式表
层碟式样式表
- 为什么需要CSS
- CSS的最基本的分类: 标签样式表、类样式表、ID样式表
- CSS从位置上的分类：嵌入式样式表、内部样式表、外部样式表
<html> <head> <meta charset="utf-8"> <!-- 内部样式表 --> <style type="text/css"> /* 被style标签包围的范围是CSS环境，可以写CSS代码 */ /* 标签样式表 */ /* 所有p标签，遵循大括号里面的规则 */ p{ color:red; } /* 类样式 */ .f20{ font-size:20px; } /* id样式*/ #p4{ background-color:pink; font-size:24px; font-weight:bolder; font-style:italic; font-family：“华文彩云"; } </style> <!-- 引用外部的CSS样式表文件 --> <link rel="stylesheet" href="css/demo01.css"> </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文档中，尽量保持唯一（虽然重复也不会报错） --> <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> <!-- 1. 为什么需要CSS 2. CSS的最基本的分类: 标签样式表、类样式表、ID样式表 3. CSS从位置上的分类：嵌入式样式表、内部样式表、外部样式表 -->- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
2.2 盒子模型
<html> <head> <meta charset="utf-8"> <style type="text/css"> #div1{ width:400px; height:400px; background-color:greenyellow; /* 1. border 边框样式 */ border-width:1px; /*边框粗细*/ border-style:solid; /*边框样式：solid(实线) , dotted(点状线) ... */ border-color:blue; /*边框颜色*/ /* border:4px double blue;*/ /* border-top : 4px dotted blue;*/ } #div2{ width:150px; height:150px; background-color:darkorange; margin-top:100px; margin-left:100px; /*margin:100px 100px 50px 150px;*/ /* 一个值，四个方向统一；两个值：上下、左右；三个值：上、左右、下；四个值：上右下左 */ /* padding : 填充 */ padding-top:50px; padding-left:50px; } #div3{ width:100px; height:100px; background-color:aquamarine; /* margin-top:50px; margin-left:50px; */ } #div4{ width:200px; height:200px; margin-left:100px; background-color:greenyellow; } body{ margin:0; padding:0; } </style> </head> <body> <div id="div1"> <div id="div2"> <div id="div3"> </div> </div> </div> <div id="div4"> </div> </body> </html> <!-- IE浏览器：实际尺寸 = width chrome浏览器：实际尺寸= width+左右borderwidth+padding CSS盒子模型： 1.border 边框 2.margin 间距 3.padding 填充 -->- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
2.3 CSS布局
position:
absolute – 绝对定位 , 需要配合使用 left , top
relative – 相对定位 , 一般会和 float , margin , padding … 一起使用<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 -->- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
<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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
3. Javascript
客户端的一个脚本语言
js是一门弱类型的语言，变量的数据类型由后面赋的值的类型决定<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是一门弱类型的语言 , 变量的数据类型由后面赋的值的类型决定 -->- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
3.1 鼠标的显示和离开
//当鼠标悬浮时，显示背景颜色 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"; } }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
<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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
3.2 鼠标的显示和离开（js，html分离）
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"; } }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
<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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
3.3 更新单价、小计和总计
需求 点击单价可以进行编辑，并且小计和总结发生相应的变化。
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; //7.绑定删除小图标的点击事件 var img = cells[4].firstChild; if(img && img.tagName=="IMG"){ //绑定单击事件 img.onclick = delFruit ; } } } function delFruit(){ if(event && event.srcElement && event.srcElement.tagName=="IMG"){ //alert表示弹出一个对话框，只有确定按钮 //confirm表示弹出一个对话框，有确定和取消按钮。当点击确定，返回true，否则返回false if(window.confirm("是否确认删除当前库存记录")){ var img = event.srcElement ; var tr = img.parentElement.parentElement ; var fruitTbl = document.getElementById("tbl_fruit"); fruitTbl.deleteRow(tr.rowIndex); updateZJ(); } } } //当鼠标点击单价单元格时进行价格编辑 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 ; //8.在输入框上绑定键盘摁下的事件，此处我需要保证用户输入的是数字 input.onkeydown=ckInput; } } } } //检验键盘摁下的值的方法 function ckInput(){ var kc = event.keyCode ; // 0 ~ 9 : 48~57 //backspace : 8 //enter : 13 //console.log(kc); if(!( ( kc>=48 && kc<=57 ) || kc==8 || kc==13 )){ event.returnValue=false; } if(kc==13){ event.srcElement.blur(); } } //更新单价的方法 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 ; //5. 更新当前行的小计这一个格子的值 //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 ; //6. 更新总计 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"; } }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
- 149
- 150
- 151
- 152
- 153
- 154
- 155
- 156
- 157
- 158
- 159
- 160
- 161
- 162
- 163
- 164
- 165
- 166
- 167
- 168
- 169
- 170
- 171
- 172
- 173
- 174
- 175
- 176
- 177
- 178
- 179
- 180
- 181
3.4 删除指定行
alert 表示弹出一个对话框
confirm表示弹出一个对话框，有确定和取消按钮。当点击确定，返回truewindow.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; //7.绑定删除小图标的点击事件 var img = cells[4].firstChild; if(img && img.tagName=="IMG"){ //绑定单击事件 img.onclick = delFruit ; } } } function delFruit(){ if(event && event.srcElement && event.srcElement.tagName=="IMG"){ //alert表示弹出一个对话框，只有确定按钮 //confirm表示弹出一个对话框，有确定和取消按钮。当点击确定，返回true，否则返回false if(window.confirm("是否确认删除当前库存记录")){ var img = event.srcElement ; var tr = img.parentElement.parentElement ; var fruitTbl = document.getElementById("tbl_fruit"); fruitTbl.deleteRow(tr.rowIndex); updateZJ(); } } }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
3.5 控制键盘的输入
8.在输入框上绑定键盘摁下的事件，此处我需要保证用户输入的是数字
input.οnkeydοwn=ckInput;//当鼠标点击单价单元格时进行价格编辑 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 ; //8.在输入框上绑定键盘摁下的事件，此处我需要保证用户输入的是数字 input.onkeydown=ckInput; } } } }0 //检验键盘摁下的值的方法 function ckInput(){ var kc = event.keyCode ; // 0 ~ 9 : 48~57 //backspace : 8 //enter : 13 //console.log(kc); if(!( ( kc>=48 && kc<=57 ) || kc==8 || kc==13 )){ event.returnValue=false; } if(kc==13){ event.srcElement.blur(); } }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
3.6 添加一行
html
<html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/demo05.css"> <script type="text/javascript" src="js/demo09.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> <hr/> <div id="add_fruit_div"> <table id="add_fruit_tbl"> <tr> <td class="w30">名称：</td> <td><input class="input" type='text' id='fname' value="apple"/></td> </tr> <tr> <td>单价：</td> <td><input class="input" type='text' id='price' value="5"/></td> </tr> <tr> <td>数量：</td> <td><input class="input" type='text' id='fcount' value="100"/></td> </tr> <tr> <th colspan="2"> <input type='button' id="addBtn" class="btn" value="添加"/> <input type='button' class="btn" value="重填"/> </th> </tr> </table> </div> </div> </div> </body> </html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
css
#add_fruit_div{ border:0px solid red; width:40%; margin-left:30%; } #add_fruit_tbl { margin-top:32px; width:80%; margin-left:10%; border-collapse:collapse; } #add_fruit_tbl , #add_fruit_tbl tr , #add_fruit_tbl td{ border:1px solid lightgray; text-align:center; line-height:28px;- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
js
function $(id){ return document.getElementById(id); } window.onload=function(){ updateZJ(); //当页面加载完成，我们需要绑定各种事件 //根据id获取到表格 var fruitTbl = $("tbl_fruit"); //获取表格中的所有的行 var rows = fruitTbl.rows ; for(var i = 1 ; i<rows.length-1 ; i++){ var tr = rows[i]; trBindEvent(tr); } $("addBtn").onclick=addFruit; } //添加水果信息 function addFruit(){ var fname = $("fname").value; var price = parseInt($("price").value); var fcount = parseInt($("fcount").value); var xj = price * fcount ; var fruitTbl = $("tbl_fruit"); var tr = fruitTbl.insertRow(fruitTbl.rows.length-1); var fnameTD = tr.insertCell(); fnameTD.innerText = fname ; var priceTD = tr.insertCell(); priceTD.innerText = price ; var fcountTD = tr.insertCell(); fcountTD.innerText = fcount ; var xjTD = tr.insertCell(); xjTD.innerText = xj ; var imgTD = tr.insertCell(); imgTD.innerHTML = "<img src='imgs/del.jpg' class='delImg'/>"; updateZJ(); trBindEvent(tr); } function trBindEvent(tr){ //1.绑定鼠标悬浮以及离开时设置背景颜色事件 tr.onmouseover=showBGColor; tr.onmouseout=clearBGColor; //获取tr这一行的所有单元格 var cells = tr.cells; var priceTD = cells[1]; //2.绑定鼠标悬浮在单价单元格变手势的事件 priceTD.onmouseover = showHand ; //3.绑定鼠标点击单价单元格的事件 priceTD.onclick=editPrice; //7.绑定删除小图标的点击事件 var img = cells[4].firstChild; if(img && img.tagName=="IMG"){ //绑定单击事件 img.onclick = delFruit ; } }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
总结
思考题
1. 表单的发送方式get和post
-
相关阅读:
若依框架的使用
1、VIVADO软件bit文件和bin文件烧写方法
select/poll/epoll 学习
Vue中的过滤器（管道）
计算机两种体系结构及指令集
一文读懂差分数组~
数据库（MySQL）的存储过程
KaiwuDB 监控组件及辅助 SQL 调优介绍
Redis单线程源码深入解析
机试:成绩排名
- 原文地址：https://blog.csdn.net/prague6695/article/details/124949999