2022版Java web跟学尚硅谷

B/S 软件的结构
HTML的基础标签
- 基础标签
- 页面划分标签
- - frameset
  - iframe
- 总结
CSS
- 基本样式介绍
- 盒子模型
- 绝对定位与相对定位
- 页面布局
- 水果库存界面绘制
javascript
- 数据类型
- 续写水果库存
- 水果库存添加事件[课后作业]
- 总结

B/S 软件的结构

HTML的基础标签

基础标签

<html><head><title>这是我的第一个网页</title><meta charset = "UTF-8"></head><body>hello world!<br/>你好,html!<p>这里是一个段落</p><p>这里是另一个段落</p><img src = "imgs/girl.jpg" width="57" high = "63" title = "这里是一张图片" alt = "假装这里有图片"></img><h1>标题1</h1><h2>标题2</h2><h3>标题3</h3><h4>标题4</h4><h5>标题5</h5><h6>标题6</h6><ol style="margin-left: 20px;" type = "i" start = "3"><li>扫地僧</li><li>乔峰</li><li>慕容博</li><li>虚竹</li><li>阿紫</li></ol><ul type = "square"><li>牛头</li><li>马面</li><li>金角</li><li>银角</li></ul>疯狂<b>星期四</b>是<i>昨天</i>但是今天有<u>麦当劳</u><br/><b><i><u>我喜欢德克士</u></i></b><br/>水分子的化学式: H<sub>2</sub>O<br/>氧气的化学式:O<sub>2</sub><br/>2<sup>2</sup> = 4<br/>5&lt;10<br/>10&gt;5<br/>10&ge;10<br/>注册商标&reg;<br/>版权符号&copy;<br/><span >高圆圆和赵又廷</span><br/><a href = "https://www.baidu.com/" target = "_blank">百度一下</a><br/><div id = "div1">div1</div><div id = "div2">div2</div><div id = "div3">div3</div><style>div{width:200px;height:200px;position:absolute;}#div1{background-color:#AF8;}#div2{background-color:#BCA;left:100px;top:1100px;}#div3{background-color:#FFB;left:200px;top:1200px;}</style><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><table border = "1" width = "600" cellspacing = "0" cellpadding = "4"><tr align = "center"><th>姓名</th><th>球队</th><th>身高</th><th>得分</th><th>篮板</th></tr><tr align = "center"><td>库里</td><!--这里是跨行显示 --><td rowspan = "2">勇士</td><td>1.98</td><td>30.1</td><td>4.5</td></tr><tr align = "center"><td>汤普森</td><td>2.01</td><td>18.7</td><td>6.7</td></tr><tr align = "center"><td>詹姆斯</td><td>湖人</td><td>2.10</td><td>28.5</td><td>7.7</td></tr></table><br/><table border = "1" width = "700" cellspacing = "0" cellpadding = "4"><tr align = "center"><th>球队</th><th>半区</th><th>所在地</th><th>排名</th><th>当家球星</th><th>操作</th></tr><tr align = "center"><td>勇士</td><td>西部</td><td>金州</td><td>8</td><td>库里</td><td><img src = "imgs/del.jpeg" width = "25" height = "25"></img></td></tr><tr align = "center"><td>湖人</td><td>西部</td><td>洛杉矶</td><td>13</td><td>詹姆斯</td><td><img src = "imgs/del.jpeg" width = "25" height = "25"></img></td></tr><tr align = "center"><td>总计</td><td colspan = "5">2</td></tr></table><br/><br/><br/><br/><!--发送方式 method 有 post和get --><form style = "border: 1px solid red;" action = "demo04.html" method = "post">昵称: <input type = "text" name = "name" value = "请输入你的昵称"/><br/>密码: <input type = "password" name = "pwd"/><br/><!-- 这里name 一样的话只能单选 -->性别: <input type = "radio" name = "gender" value = "male" checked = "checked"/>男<input type = "radio" name = "gender" value = "female"/>女<br/><!-- 这里name 不一样的话可以多选 当checked的属性名和属性值相等时，可以不写属性值 -->职业: <input type = "radio" name = "job" value = "mainjob" checked />主职<input type = "radio" name = "job2" value = "subjob"/>兼职<br/>爱好: <input type = "checkbox" name = "hobby" value = "basketball"/>篮球<input type = "checkbox" name = "hobby" value = "sing"/>唱<input type = "checkbox" name = "hobby" value = "jump" checked = "checked"/>跳<br/>星座: <select name = "star"><option value = "1">白羊座</option><option value = "2">水瓶座</option><option value = "3">天蝎座</option><option value = "4">摩羯座</option><option value = "5">巨蟹座</option><option value = "6">狮子座</option><option value = "7">双子座</option><option value = "8" selected>处女座</option></select><br/>备注: <textarea name = "remark" rows = "4" cols = "50"></textarea><br/><input type = "submit" name = "register" value = " 注 册 " ><!-- 恢复到页面的默认状态--><input type = "reset" name = "default" value = " 重置 " ><input type = "button" name = "btn1" value = " 普通按钮 " ></form>          </body>
</html>
<!--
1.html是解释型的语言，不是编译型语言，浏览器是容错的
2.html页面中由一对标签组成:
<html>  开始标签
</html> 结束标签3.标题 <title>
4.<meta charset = "UTF-8"> 可以设置编码格式5.<br/>表示换行,br标签是一个单标签，开始标签和结束标签是同一个，斜杠放在单词的后面
6.<p></p>段落标签
7.<img>图片标签 src图片的路径 title鼠标悬停提示标签  alt 图片加载失败的时候，显示文字
8.路径:(1)相对路径 (2)绝对路径
9.标题:<h1>~<h6>
10.列表标签<o1>有序列表 start 表示从哪儿开始, type表示格式可以写(A、I、i、1默认)<ul>无序列表 type类型可以写(square方块 disc圆饼实心默认 circle圆圈空心)
11.<b>加粗 <u>下划线 <i>斜体
12.<sub>下方缩小 <sup>上方缩小
13.html中的实体:&lt;小于&gt;大于&ge;大于等于&reg;注册商标&copy;版权符号
通过百度搜索"html实体"可以查看更多的API
14.<span>局部做特殊处理
15.超链接 <a> href链接的地址 target中设置:_blank说明新开标签页打开_self说明在当前窗口打开(默认)_parent在父窗口打开_top在顶层窗口打开16.层<div>
17.表格 <table> <tr>表示一行 属性有align (center,left,right)<td>表示列<th>表头列用这个table的属性，虽然淘汰了但是最好了解一下:border = "1" 表格边框的粗细width = "600" 表格宽度cellspacing = "0" 单元格间隙cellpadding = "4"单元格填充rowspan 行合并colspan 列合并18.表单 <form><input type = "text">表示文本框，其中必须要写name属性,否则数据不会发送至服务器<input type = "password">表示密码框<input type = "radio">表示选择按钮,name值保持一致是单选，可以通过checked设置默认值<input type = "checkbox">表示复选框,name值建议保持一致，可以通过checked设置默认值<select>表示下拉列表,每一个选项是option，其中value是发送给服务器的值,selected表示默认选择的值textarea 表示多行文本框，或者文本域,它的值就是标签开始到结束位置之间的内容，所以轻易别换行<input type = "submit">提交按钮<input type = "reset">重置按钮:恢复到页面的默认状态<input type = "button">普通按钮-->

页面展示：

页面划分标签

frameset

<html><head><title>frameset练习</title></head><frameset rows = "20%,*" frameborder = "yes"><frame src = "frames/top.html" ></frame><frameset cols = "15%,*"><frame src = "frames/left.html"></frame><frameset rows = "80%,*"><frame src = "frames/main.html"></frame><frame src = "frames/bottom.html"></frame></frameset>           <frameset cols = "85%,*"><frame src = "frames/r.html"></frame></frameset></frameset></frameset></html>
<!--
frameset页面框架，这个标签已经淘汰，了解无需掌握
frame表示框架中的具体页面
-->

页面展示

iframe

<html><head><meta charset = "UTF-8"><title>iframe练习</title></head><body>这里是iframe页面<br/><iframe src = "frames/top.html"></iframe></body></html>
<!--
iframe嵌入子页面的部分-->

页面展示

总结

1.HTML是解释型的文本标记语言，不区分大小写
2.整理一下标签
2.1 html,head,title,meta,body,br,ol,ul,h1-h6,a,img,div,span,p
2.2 空格
2.3 table tr th td
2.4 form(action,method) imput type = “text,password,radio,checkbox,submit,reset,button” select textarea

CSS

基本样式介绍

<html><head><meta charset = "UTF-8"><style type = "text/css">/* 被style标签包裹的范围是css环境,可以写css代码  */p{color:red;}/* 类样式 */.f20{font-size:20px;}</style><link rel = "stylesheet" href= "style/demo01.css"></head><body><!-- <p><font color = "red">这里是段落一</font></p><p><font color = "red">这里是段落二</font></p>--><p>这里是段落一</font></p><p>这里是段落二</font></p><p class = "f20">这里是段落三</font></p>/* id在整个html文档中尽量唯一 */<p id = "p4">这里是段落四</font></p><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从位置上的分类:嵌入式样式表、内部样式表、外部样式表-->

超链接：

/* id样式 */#p4{background-color:pink;font-size:24px;font-weight:bolder;font-family:"华文彩云";}div p{color:blue;}div .f32{font-size:32px;font-family:"黑体";}

样式展示

盒子模型

<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:gold;/* 2.border边框距离内嵌 */margin-top:100px;margin-left:100px;/*一个值 四个方向统一*//*两个值 上下  左右*//*三个值 上  左右 下*//*四个值 上 右 下 左*//*margin:100px 100px 150px 50px;*//* 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;background-color:greenyellow;margin-left:100px;}/* 8像素问题 */body{margin:0;padding:0;}</style></head><body><div id="div1"><div id = "div2"><div id = "div3">&nbsp;</div></div></div><div id = "div4"></div></body>
</html><!--
盒子模型
IE浏览器中:实际尺寸 = width
chrome浏览器:实际尺寸 = width + 左右border的width + padding盒子模型
1.border 边框样式
2.margin 间距
3.padding 填充
-->

样式展示

绝对定位与相对定位

<html><head><meta charset = "UTF-8"><style type = "text/css">#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:purple;}#div4{height:200px;height:50px;background-color:aqua;float:left;}#div5{        height:200px;height:50px;background-color:olivedrab;float:left;}div{position:relative;}/* 8像素问题 */body{margin:0;padding:0;}</style></head><body><!--<div id = "div1">&nbsp;</div><div id = "div2">&nbsp;</div>--><div id = "div3"><div id = "div4">&nbsp;</div><div id = "div5">&nbsp;</div></div></body>
</html><!--
position:absolute绝对定位，需要配合使用left right toprelative:相对定位,一般会和float，margin，padding一起使用float-->

样式展示：

页面布局

<html><head><meta charset = "UTF-8"><style type = "text/css">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:blue;height:10%;width:85%;float:left;}#div_container{height:100%;width:80%;border:1px solid blue;margin-left:10%;float:left;}body{margin:0;padding:0;background-color:gray;}</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><!--
position:absolute绝对定位，需要配合使用left right toprelative:相对定位,一般会和float，margin，padding一起使用float-->

水果库存界面绘制

界面布局

<html><head><meta charset = "UTF-8"><link  rel = "stylesheet" href = "style/fruit.css"></link></head><body><div id = "div_container"><div id ="div_fruit_list"><table id = "table_fruit"><tr><th class = "w20">名称</th><th class = "w20">单价</th><th class = "w20">数量</th><th class = "w20">小计</th><th class = "w20">操作</th>            </tr><tr><td>苹果</td><td>5</td><td>20</td><td>100</td><td><img src = "imgs/del.jpeg" class = "delImg">&nbsp;</img></td>           </tr><tr><td>西瓜</td><td>3</td><td>20</td><td>60</td><td><img src = "imgs/del.jpeg" class = "delImg">&nbsp;</img></td>            </tr><tr><td>葡萄</td><td>4</td><td>25</td><td>100</td><td><img src = "imgs/del.jpeg" class = "delImg">&nbsp;</img></td>           </tr><tr><td>香蕉</td><td>3</td><td>50</td><td>150</td><td><img src = "imgs/del.jpeg" class = "delImg">&nbsp;</img></td>           </tr><tr><td>总计</td>        <td colspan = "4">999</td></tr></table></div></div></body>
</html><!--
position:absolute绝对定位，需要配合使用left right toprelative:相对定位,一般会和float，margin，padding一起使用float-->

style文件

<style type = "text/css">div{position:relative;float:left;}#div_container{height:100%;width:80%;border:0px solid blue;margin-left:10%;background-color:honeydew;float:left;border-radius:8px;}#table_fruit{width:60%;/* 边框合并 */border-collapse:collapse;line-height:28px;margin-top:120px;margin-left:20%;}#table_fruit tr,#table_fruit td,#table_fruit th{border:1px solid gray;/* 边框合并 */border-collapse:collapse;text-align:center;font-size:16px;font-family:"黑体";color:"black";}/* 表头字体大一号 */#table_fruit th{font-size:20px;}/* 表格每一列占比设置 */.w20{width:20%;}/* 删除图标样式设置 */.delImg{width:24px;height:24px;margin-top:5px;}body{margin:0;padding:0;background-color:gray;}</style>

界面样式

javascript

数据类型

<html><head></head><meta charset = "UTF-8"><script language = "javascript">//String str = "hello wordl";var str = "hello world";/*alert(typeof str);str = 999;alert(typeof str);*//*var person = new Object();person.pid = "p001";person.pname = "达摩";alert(person.pid + "  "+ person.pname);*/function hello(num1, num2, name){if(num1 > num2){return "hello" + name;}else{alert("Hello");}}hello(2,1,"大哥");</script><body></body>
</html>
<!--
JavaScript:客户端的一个脚本语言
js是一门弱类型的语言 变量数据类型由后面赋值的类型决定-->

续写水果库存

<html><head><meta charset = "UTF-8"><link  rel = "stylesheet" href = "style/fruit.css"></link><script type = "text/javaScript" src = "js/demo01.js"></script></head><body><div id = "div_container"><div id ="div_fruit_list"><table id = "table_fruit"><tr><th class = "w20">名称</th><th class = "w20">单价</th><th class = "w20">数量</th><th class = "w20">小计</th><th class = "w20">操作</th>           </tr><tr onmousemove = "showBGColor()" onmouseout = "clearBGColor()"><td>苹果</td><td onmouseover = "showHand()">5</td><td>20</td><td>100</td><td><img src = "imgs/del.jpeg" class = "delImg">&nbsp;</img></td>         </tr><tr onmousemove = "showBGColor()" onmouseout = "clearBGColor()"><td>西瓜</td><td onmouseover = "showHand()">3</td><td>20</td><td>60</td><td><img src = "imgs/del.jpeg" class = "delImg">&nbsp;</img></td>          </tr><tr onmousemove = "showBGColor()" onmouseout = "clearBGColor()"><td>葡萄</td><td onmouseover = "showHand()">4</td><td>25</td><td>100</td><td><img src = "imgs/del.jpeg" class = "delImg">&nbsp;</img></td>         </tr><tr onmousemove = "showBGColor()" onmouseout = "clearBGColor()"><td>香蕉</td><td onmouseover = "showHand()">3</td><td>50</td><td>150</td><td><img src = "imgs/del.jpeg" class = "delImg">&nbsp;</img></td>         </tr><tr><td>总计</td>        <td colspan = "4">999</td></tr></table></div></div></body>
</html><!--
position:absolute绝对定位，需要配合使用left right toprelative:相对定位,一般会和float，margin，padding一起使用float-->

js事件

// 显示鼠标悬浮时，显示背景颜色
function showBGColor(){// event : 当前发生的事件// event.srcElement事件源//alert(event.srcElement);//alert(event.srcElement.tagName); -->TDif(event && event.srcElement && event.srcElement.tagName == "TD"){var td = event.srcElement;// td.parentElement表示td的复元素TRvar tr = td.parentElement;// 如果想要设置某节点的样式，需要加上.styletr.style.backgroundColor = "navy";// 表示获取tr中的每个单元格var tds = tr.cells;for(var i = 0; i < tds.length; i++){tds[i].style.color = "yellow";}}
}// 鼠标离开时，恢复原始样式
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 = "black";}}}// 当鼠标悬浮在单价单元格的时候，鼠标变成手势
function showHand(){if(event && event.srcElement && event.srcElement.tagName == "TD"){var td = event.srcElement;td.style.cursor = "hand";}}

界面展示

水果库存添加事件[课后作业]

主界面

<html><head><meta charset = "UTF-8"><link  rel = "stylesheet" href = "style/fruitdemo03.css"></link><script type = "text/javaScript" src = "js/demo03.js"></script></head><body><div id = "div_container"><div id ="div_fruit_list"><table id = "table_fruit"><tr><th class = "w20">名称</th><th class = "w20">单价</th><th class = "w20">数量</th><th class = "w20">小计</th><th class = "w20">操作</th>         </tr><tr><td>苹果</td><td>5</td><td>20</td><td>100</td><td><img src = "imgs/del.jpeg" class = "delImg">&nbsp;</img></td>          </tr><tr><td>西瓜</td><td>3</td><td>20</td><td>60</td><td><img src = "imgs/del.jpeg" class = "delImg">&nbsp;</img></td>           </tr><tr><td>葡萄</td><td>4</td><td>25</td><td>100</td><td><img src = "imgs/del.jpeg" class = "delImg">&nbsp;</img></td>          </tr><tr><td>香蕉</td><td>3</td><td>50</td><td>150</td><td><img src = "imgs/del.jpeg" class = "delImg">&nbsp;</img></td>          </tr><tr><td>总计</td>        <td colspan = "4">999</td></tr></table><!-- <hr/>是直线  --><!--<hr/>--><div id = "div_add_fruit"><table id = "table_add_fruit"><tr><td>名称</td><td><input type = "text" id = "fname"></input></td></tr><tr><td>单价</td><td><input type = "text" id = "fprice"></input></td></tr><tr><td>数量</td><td><input type = "text" id = "fcout"></input></td></tr><!--<tr><td>小计</td><td><input type = "text" id = "fxj"></input></td></tr>--><tr><th><input type = "button" id = "addBtn" value = "添加" class = "btn_add"></input></th><th><input type = "button" id = "resetBtn" value = "重置" class = "btn_reset"></input></th></tr></table></div></div></div></body>
</html><!--
position:absolute绝对定位，需要配合使用left right toprelative:相对定位,一般会和float，margin，padding一起使用float-->

事件

// window当前对象
window.onload=function(){// alert("helloworld");// 更新总价updateZJ();// 当页面加载完成，我们需要绑定各种事件// 根据id获取tablevar fruitTbl = document.getElementById("table_fruit");// 获取表格中的所有的行var rows = fruitTbl.rows;for(var i = 1; i < rows.length - 1; i ++){var tr = rows[i];trBindEvent(tr);}// 调用鼠标单击事件,添加方法$("addBtn").onclick = btnAdd;// 调用鼠标单击事件,重置方法$("resetBtn").onclick = btnReset;}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;}
}// 显示鼠标悬浮时，显示背景颜色
function showBGColor(){// event : 当前发生的事件// event.srcElement事件源//alert(event.srcElement);//alert(event.srcElement.tagName); -->TDif(event && event.srcElement && event.srcElement.tagName == "TD"){var td = event.srcElement;// td.parentElement表示td的复元素TRvar tr = td.parentElement;// 如果想要设置某节点的样式，需要加上.styletr.style.backgroundColor = "navy";// 表示获取tr中的每个单元格var tds = tr.cells;for(var i = 0; i < tds.length; i++){tds[i].style.color = "yellow";}}
}// 鼠标离开时，恢复原始样式
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 = "black";}}}// 当鼠标悬浮在单价单元格的时候，鼠标变成手势
function showHand(){if(event && event.srcElement && event.srcElement.tagName == "TD"){var td = event.srcElement;td.style.cursor = "hand";}}// 当鼠标单击单价的时候，更改单价
function editPrice(){if(event && event.srcElement && event.srcElement.tagName == "TD"){var priceTD = event.srcElement;// 目的是判断当前priceTD有子节点，并且第一个子节点是文本节点，TextNode(文本节点) 3  ElementNode(元素节点)1if(priceTD.firstChild && priceTD.firstChild.nodeType == "3"){// 文本结点// 表示设置或者获取当前节点的内部文本var oldPrice = priceTD.innerText;// innerHTML 表示设置当前节点内部的HTMLpriceTD.innerHTML = "<input type = 'text' size = '4'/>";var input = priceTD.firstChild;if(input.tagName == "INPUT" ){input.value = oldPrice;// 选中输入框内部的文本input.select();// 4.绑定输入框失焦后，更新单价和总结input.onblur = updatePrice;// 8.绑定键盘按下的事件,此处需要保证按下的是数字input.onkeydown = checkInput;}}}
}function updatePrice(){if(event && event.srcElement && event.srcElement.tagName == "INPUT"){var input = event.srcElement;var newPrice = input.value;// input结点的父结点是tdvar priceTD = input.parentElement;priceTD.innerText = newPrice;//priceTD.parentElement是tr// 5.更新当前行的小计updateXj(priceTD.parentElement);}
}
// 更新当前行的小计
function updateXj(tr){if(tr && tr.cells){var tds = tr.cells;// 单价var priceTD = tds[1].innerText;// 数量var numsTD = tds[2].innerText;// innerText获取到的值是字符串类型，需要parseInt转换成数字类型var xj = parseInt(priceTD) * parseInt(numsTD);tds[3].innerText = xj;//6.更新总计updateZJ();}}// 更新总计
function updateZJ(){var fruitTable = document.getElementById("table_fruit");var rows = fruitTable.rows;var sum = 0;for(var i = 1; i < rows.length - 1; i ++){var tr = rows[i];var xj = parseInt(tr.cells[3].innerText);sum = sum + xj;}rows[rows.length - 1].cells[1].innerText = parseInt(sum);// NAN not a number表示结果不是一个数字}
// 删除当前所选行的库存
function delFruit(){if(event && event.srcElement && event.srcElement.tagName == "IMG"){// confirm表示对话框:确定/取消，点击确定返回trueif(confirm("是否要删除当前行的库存记录?")){var img = event.srcElement;var tr = img.parentElement.parentElement;var fruitTable = document.getElementById("table_fruit");fruitTable.deleteRow(tr.rowIndex);updateZJ();}}
}// 检验键盘按下的值的方法
function checkInput(){var kc = event.keyCode;console.log(kc);// 数字(0 ~ 9) 对应ascii码 48~57// backspace   对应ascii码值 8// 回车        对应ascii码值 13// 不符合的情况if(!((kc >= 8 && kc <= 57) || kc == 8 || kc == 13)){event.returnValue = false;}if (kc == 13){event.srcElement.blur();}}// 添加按钮
function btnAdd(){var fruitaddTable = $("table_add_fruit");var rows = fruitaddTable.rows;var fname = $("fname").value;if(fname == null || "" == fname){alert("名称为空，请输入后添加");return;}var fprice = $("fprice").value;if(fprice == null || "" == fprice){alert("单价为空，请输入后添加");return;}var fcout = $("fcout").value;if(fcout == null || "" == fcout){alert("数量为空，请输入后添加");return;}var table_fruit = $("table_fruit");var tr = table_fruit.insertRow(rows.length + 1);var fnameTD = tr.insertCell();fnameTD.innerText = fname;var fpriceTD = tr.insertCell();fpriceTD.innerText = parseInt(fprice);var fcoutTD = tr.insertCell();fcoutTD.innerText = parseInt(fcout);var xjTD = tr.insertCell();xjTD.innerText = parseInt(fprice * fcout);var delTD = tr.insertCell();delTD.innerHTML = "<img src = 'imgs/del.jpeg' class = 'delImg'/>";updateZJ();trBindEvent(tr);}function $(id){return document.getElementById(id);
}// 鼠标单击后重置
function btnReset(){$("fname").value = "";$("fprice").value = "";$("fcout").value = "";
}

样式

<style type = "text/css">div{position:relative;float:left;}#div_container{height:100%;width:80%;border:0px solid blue;margin-left:10%;background-color:honeydew;float:left;border-radius:8px;}#table_fruit{width:60%;/* 边框合并 */border-collapse:collapse;line-height:28px;margin-top:120px;margin-left:20%;}#table_fruit tr,#table_fruit td,#table_fruit th{border:1px solid gray;/* 边框合并 */border-collapse:collapse;text-align:center;font-size:16px;font-family:"黑体";color:"black";}/* 表头字体大一号 */#table_fruit th{font-size:20px;}/* 表格每一列占比设置 */.w20{width:20%;}/* 删除图标样式设置 */.delImg{width:24px;height:24px;margin-top:5px;}body{margin:0;padding:0;background-color:gray;}#table_add_fruit,#table_add_fruit td{border:1px solid gray;border-collapse:collapse;text-align:center;width:60%;line-height:28px;margin-top:30px;margin-left:20%;}#table_add_fruit th{text-align:center;line-height:100px;}.btn_add{width:60px;}.btn_reset{width:60px;}</style>

界面展示

总结

1.CSS
(1)CSS的角色：页面显示的美观风格
(2)CSS的基本语法：标签样式：类样式：ID样式；组合样式；嵌入式样式表；内部样式表；外部样式表
(3)盒子模型 border margin padding
(4)定位和浮动 positon float div + css布局

2.JS
(1)JS是客户端(浏览器端)运行的脚本语言，语法风格和java比较类似
(2)JS是弱类型的语言 var 后面的数据类型是根据后面的值来确定的
(3)JS支持面向对象 new可以创建对象
(4)JS的函数 function hello(){}
(5)DOM技术：鼠标悬浮 onmouseover,event.srcElement,事件传递,parentElement,style.backgroundColor
鼠标离开 ommouseout
鼠标点击 onclick, td.innerText,td.innerHTML = “” td.firstChild.value = oldPrice
失去焦点 onblur, input.parentElement.innerText = newPrice
更新小计:input = event.srcElement,tr = input.parentElement; tr.cells;parseInt
更新总计:document.getElementById(“fruit_table”);fruitTable.rows
删除一行:img,img.parentElement.parentElement.rowIndex,table.deleteRow(rowIndex)

Java web 2022跟学尚硅谷(一) 前端基础相关推荐

Java web 2022跟学尚硅谷(十) 后端基础书城
Java web 2022跟学尚硅谷十后端基础书城验证码kaptcha和缓存cookie 简单了解cookie 步骤简单创建cookie的样例代码 CookieServlet01 hello ...
Java web 2022跟学尚硅谷书城项目完整开源分享
Java web 2022跟学尚硅谷书城项目完整开源分享项目介绍项目类图 sql建表和添加数据界面展示用户登录界面用户注册界面首页添加购物车我的购物车我的订单功能说明项目介绍跟 ...
尚硅谷h5前端开发视频
尚硅谷h5前端开发视频尚硅谷h5前端开发视频尚硅谷h5前端开发视频下载地址:百度网盘
（Java高级教程）第四章必备前端基础知识-第二节1：CSS概述和选择器
文章目录一:CSS概述 (1)概述 (2)语法规范 (3)CSS引入方式二:选择器 (1)基础选择器 ①:标签选择器 ②:类选择器 ③:id选择器 ④:通配符选择器总结 (2)复合选择器 ①:后 ...
java培训班教程视频最新尚硅谷Java培训全套教程
尚硅谷Bank项目–0 5.尚硅谷全套JAVA教程–面试阶段–0 4.尚硅谷全套JAVA教程–JavaEE阶段–0 3.尚硅谷全套JAVA教程–JavaWEB阶段–0 2.尚硅谷全套JAVA教 ...
学java web需要学php吗_学JAVA WEB要先学什么
最近许多刚刚初学Java Web开发的童鞋问小编为神马要学这么多东东,我们有必要来从更高层次看看我们所学的东西都是干什么的,所以今天讲讲开始学习Java Web开发之前你需要了解的知识. 互联网简介在 ...
学习java web感想_学了近一个月的java web 感想
对于每天学习的新知识进行一定的总结,是有必要的. 之前我学的每一门知识,我都没有怎么总结自己的问题,也没有怎么去想想该怎样才能学的更好,把知识掌握的更牢固.从现在开始呢,我会每半个月,或每一个月总结总 ...
《Java Web开发速学宝典》样章（共3章）
下载地址: 第4章 Servlet开发基础第8章 Java Web国际化第10章简单标签李宁编著博客:http://nokiaguy.blogjava.net 本书源代码:http://ww ...
【视频分享】尚硅谷HTML5前端视频_Vue核心技术视频
本视频基于Vue2.5录制, 涵盖Vue开发所需技术: 模板.数据绑定.声明式渲染.计算属性.事件处理.过渡动画.指令.自定义Vue插件.组件化开发.组件间通信.Ajax前后台交互.Vue-Route ...

Java web 2022跟学尚硅谷(一) 前端基础

2022版Java web跟学尚硅谷

B/S 软件的结构

HTML的基础标签

基础标签

页面划分标签

frameset

iframe

总结

CSS

基本样式介绍

盒子模型

绝对定位与相对定位

页面布局

水果库存界面绘制

javascript

数据类型

续写水果库存

水果库存添加事件[课后作业]

总结

Java web 2022跟学尚硅谷(一) 前端基础相关推荐

最新文章

热门文章