day1 在今日内容
0 复习昨日
1 本周安排
2 第二阶段介绍
3 HTML
0 复习昨日
1 本周安排 前面的Java知识
类,对象,属性,方法
String,日期操作,包装类操作
集合操作
本周
HTML 1天
CSS 1天
JavaScript 3天
前端知识比后端简单,注意是记单词,要求就是会用
见到别人写的页面要认识
2 第二阶段介绍 第一阶段是java基础,第二阶段是javaweb,我们要是还有第一阶段的知识来完成javaweb项目的开发.即学完第二阶段就可以完成一个简单项目,理解项目开发流程,知道一个项目的请求响应的过程.
第二阶段(五周)
前端
数据库
javaweb知识
项目开发
前端浏览器页面发请求
java代码处理请求,操作数据库
java代码根据数据库结果,做出响应
3 HTML 3.1 HTML介绍 我们进行web开发,web开发中前端页面就是由HTML编写.
html是一种开发页面的编程语言,全称Hypertext Markup Language(超文本标记语言)
超文本,比普通文本功能丰富,图片,动态效果,超链接,多媒体等等
标记,就是标签,HTML语言编程,就是利用各种标签来开发,不同的标签实现不同的效果
语言,一种编程语言
主要作用:
3.2 基本语法
1 html文件,后缀是.html
2 编辑可以使用记事本编辑
3 基本语法
标签是由尖括号组成
标签大部分是由一对标签组成,前面成为开标签,后面的称为闭标签,闭标签有/
在开标签内可以给标签设置属性,
HTML中标签和属性是不区分大小写,但是建议是全部小写
标签可以嵌套
4 基本骨架
1 2 3 4 5 6 7 8 <html > <head > <title > 第一个HTML页面</title > </head > <body > <h1 > hello,world</h1 > </body > </html >
5 运行
3.3 开发工具
VSCode (微软) (我们使用这款)HBuilder (国产)WebStorm (IDEA家族的)
Dreamweaver (考古队)
3.3.1 安装 安装,默认下一步下一步就可以.
建议勾选2345,这样可以在右键时有 一个提示”使用VSCode打开文件”
3.3.2 案装插件 VSCode不装插件,等于白用~~~~
以上几个是非常墙裂建议安装!
在应用商店,输入以上几个的名字即可
Auto rename tag
Chinese (Simplified)(简体中文)
Material lcon Theme
open in browser
Prettier - Code formatter
3.3.3 使用
使用VSCode,最好的方式
先在本地磁盘创建好一个前端项目(文件夹)
使用VSCode打开该文件夹
在内容创建页面文件
也可以
开始编写页面,HTML骨架是固定的,可以一键生成!!!!
如何运行?
1 在磁盘中找到文件,使用浏览器打开
2 或者使用刚才我们安装的插件,有快捷键 alt+b,就会使用电脑的默认浏览器打开
4 HTML标签 4.1 结构标签【重点】 1 2 3 4 5 6 7 8 9 10 11 <html > <head > <title > </title > </head > <body > </body > </html >
4.2 排版标签【重点】
排版标签就是对内容的简单布局.
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 <br > <h1 > 郑州疫情防控新闻发布会上，社区书记称“因防疫错过女儿成人礼”并哽咽，网友热议 </h1 > <h2 > 郑州疫情防控新闻发布会上，社区书记称“因防疫错过女儿成人礼”并哽咽，网友热议 </h2 > <h3 > 郑州疫情防控新闻发布会上，社区书记称“因防疫错过女儿成人礼”并哽咽，网友热议 </h3 > <h4 > 郑州疫情防控新闻发布会上，社区书记称“因防疫错过女儿成人礼”并哽咽，网友热议 </h4 > <h5 > 郑州疫情防控新闻发布会上，社区书记称“因防疫错过女儿成人礼”并哽咽，网友热议 </h5 > <h6 > 郑州疫情防控新闻发布会上，社区书记称“因防疫错过女儿成人礼”并哽咽，网友热议 </h6 > <hr width ="500px" /> <hr width ="50%" size ="50px" color ="red" /> <hr width ="50%" size ="50px" color ="rgb(0,0,255)" /> <hr width ="50%" size ="50px" color ="#000000" /> <hr width ="50%" size ="50px" color ="#0000FF" /> <hr width ="50%" size ="50px" color ="#32CD32" /> <p > 昨日，郑州一场疫情防控发布会上，社区书记刘红英动情讲述： “前几天是我女儿18岁生日，然而我却缺席了她的这场成人礼， 当时她给我发来一段和猫咪的视频，告诉我她很好， 让我多爱自己一点，我把这个视频发到了朋友圈， 当时我们很多志愿者在我的朋友圈里， 他们立刻截图在居民群里广泛转发， 还为我的女儿送来了各种各样的祝福。”</p > <p > 讲到动情处，她开始哽咽……</p > <p > 此事引起了网友的热议，今天下午，#郑州平安街社区的万能的朋友圈#话题词冲上了热搜，另一话题词</p > </body > </html >
4.3 块标签【重点】
块标签是我们将来使用最多的一个标签,可以用来布局页面,得配合后续的CSS来实现.
div
将来可以通过css来调整它的大小,尺寸,位置,完成页面布局
span
1 2 3 4 5 6 7 8 9 10 11 12 13 <body > <div style ="background-color: red" > 这是一个div块标签</div > <span style ="background-color: green" > 这是一个span块</span > </body >
4.4 文字标签 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <body > <font size ="1" color ="red" > 讲到动情处，她开始哽咽……</font > <br /> <font size ="2" color ="rgb(123,123,123)" > 讲到动情处，她开始哽咽……</font ><br /> <font size ="3" color ="#87cc65" > 讲到动情处，她开始哽咽……</font > <br /> <font size ="4" face ="宋体" > 讲到动情处，她开始哽咽……</font > <br /> <font size ="5" face ="楷体" > 讲到动情处，她开始哽咽……</font > <br /> <font size ="6" > 讲到动情处，她开始哽咽……</font > <br /> <font size ="7" > 讲到动情处，她开始<strong > 哽咽</strong > ……</font > <br /> </body >
4.5 列表标签【重点】
列表是一个非常常见的标签
无序列表(最常见)
有序列表(order list)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <body > <ol > <li > 呼市多名公职人员疫情期间聚众饮酒热</li > <li > 暂缓巴基斯坦40亿贷款偿还?中方回应热</li > <li > 70秒带你打卡进博会</li > </ol > <hr /> <ul type ="square" > <li > 八部门：鼓励开放郊野公园提供露营</li > <li > “下饭神器”老干妈不香了？</li > <li > 逃犯到派出所开无犯罪记录证明</li > </ul > </body >
4.6 图片标签 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <body > <img src ="../images/中国地图.jpg" width ="800px" alt ="地图" /> </body >
4.7 超链接标签【重点】
超链接就是一个点击可以跳转到其他页面的一个标签.
1 2 3 4 5 6 7 8 9 10 11 12 13 <body > <a href ="http://www.baidu.com" target ="_self" > 百度一下,你就知道</a > <br /> <a href ="demo4.html" target ="_blank" > 点击跳转demo4</a > <br /> <a href ="./views/demo5.html" > 点击跳转demo5</a > <br /> </body >
5 总结
html
head
title
body
h1-h6
hr
br
p
font
div
span
ol
ul
li
img
a
使用这些标签,可以实现不同的效果
可以设置属性来改变现实效果,但是一般都不会在直接使用HTML的属性来改变效果
后续会实现CSS来改变属性
记住这些标签和功能,HTML标签就好像是人,CSS就好像是化妆师
day2 今日内容
0 复习昨日
1 表格标签
2 表单标签【重要】
3 框架标签
0 复习昨日
Javaweb开发,前端,服务器,数据库
前端,要学习HTML,CSS,JavaScript,JQuery
HTML是用来编写网页的一种编程语言
语法
由各种标签组成,标签是尖括号<>,
一般都是成对儿出现,前面叫做开标签,后面称为闭标签
特别的,有部分单标签,hr,br,img
大小写都行,但是建议是小写
开标签中写属性,属性名=”属性值”
标签可以嵌套
标签
结构标签
排版标签 h1,hr,br,p,font
其中有些值特别注意,长度/宽度/尺寸单位 是px,或者%
颜色写法,1) 颜色单词 2)rgb(0,0,0) 3) 十六进制取色 #000000
块标签 div,span
列表标签 ol,ul,li
图片标签 img ,src属性,重点是路径的写法
超链接 a,
href指定跳转路径
target属性,值1) _self 以自身跳转,2) _blank 以打开一个空白页跳转
1 表格标签
表格标签可以展现一个表格,用来填充数据,以及布局页面
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 <body > <table border ="2px" width ="300px" > <tr > <th > 1-1</th > <th > 1-2</th > <th > 1-3</th > </tr > <tr > <td rowspan ="2" > 2-1</td > <td colspan ="2" > 2-2</td > </tr > <tr > <td > 3-2</td > <td > 3-3</td > </tr > <tr > <td > 4-1</td > <td > 4-2</td > <td > 4-3</td > </tr > </table > </body >
练习: 模仿下图形式(2行,4列,每个单元格是图片,点击图片能跳转)
2 框架标签 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <body > <ul > <li > <a href ="demo1.html" target ="myframe" > 用户管理</a > </li > <li > <a href ="test1.html" target ="myframe" > 角色管理</a > </li > <li > <a href ="test2.html" target ="myframe" > 菜单管理</a > </li > </ul > <iframe name ="myframe" src ="test1.html" width ="1200px" height ="600px" > </iframe > </body >
3 表单标签【重要】
表单用来和服务器交互,可以将数据发送到后台服务器.
表单用来收集数据,比如登录框,注册框,搜索框等等
常用的功能,输入框,下拉框,单选框,多选框,文件上传框,文本域,一些按钮
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 <body > <form action ="/java2217" > 隐藏框<input type ="hidden" name ="money" > <br > 用户名<input type ="text" name ="username" placeholder ="请输入用户名" /> <br > 密码<input type ="password" name ="pwd" /> <br > 性别<input type ="radio" name ="sex" value ="man" /> 男 <input type ="radio" name ="sex" value ="women" /> 女<br > 技能 <input type ="checkbox" name ="skills" value ="javase" /> JavaSE <input type ="checkbox" name ="skills" value ="javaweb" /> JavaWeb <input type ="checkbox" name ="skills" value ="ssm" /> SSM<br > 头像 <input type ="file" name ="touxiang" /> <br > 生日 <input type ="date" name ="birthday" /> <br > 邮箱 <input type ="email" name ="email" value ="11111@qq.com" /> <br > 籍贯 <select name ="jiguan" > <option value ="henan" > 河南</option > <option value ="yunnan" > 云南</option > <option value ="hainan" > 海南</option > </select > <select name ="city" > <option > 郑州</option > <option > 周口</option > <option > 驻马店</option > </select > <br > 个人简历 <textarea > </textarea > <br > <button type ="button" > 按钮</button > <button type ="reset" > 重置</button > <button type ="submit" > 提交</button > <hr > <input type ="button" value ="按钮" /> <input type ="reset" value ="重置" /> <input type ="submit" value ="提交" /> </form > </body >
4 补充 在html敲空格,没有效果!
需要使用
这是一个空格
今日内容
CSS概述
引入方式 (where)
选择器(how)
属性(how)
1 CSS介绍
层叠样式表（cascading style sheet） CSS
用来美化HTML页面,可以让页面更好看,还可以布局页面.
好处
美化页面,布局页面
使用外部css文件,可以实现样式文件和html文件分离,便于维护
使用外部css文件,可以实现样式的复用,提高开发效率
2 语法 1 2 3 4 5 6 7 8 9 10 11 选择器 { 属性名:属性值; 属性名:属性值; } -------- p { color : red; font-size :6px ; } ------- 以上代码就是,1 ) 选择html 页面中的p 标签 2 ) 给p 标签中的内容设置颜色和字体大小
3 引入CSS的方式 3.1 在标签内部使用 1 2 3 4 5 6 7 8 9 10 11 <body > <p style ="color: red;font-size: 20px;" > 移舟泊烟渚，</p > <p > 日暮客愁新。</p > <p > 野旷天低树，</p > <p > 江清月近人。</p > </body >
3.2 标签外,html文件内 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <head > <title > 引入CSS的三种方案</title > <style > p { color : green; font-size : 50px ; } </style > </head > <body > <p style ="color: red;font-size: 20px;" > 移舟泊烟渚，</p > <p > 日暮客愁新。</p > <p > 野旷天低树，</p > <p > 江清月近人。</p > </body >
3.3 独立css文件 1 2 3 4 5 p { color : blue; font-size : 80px ; }
1 2 3 4 5 6 7 8 9 10 <head > <link href ="gushi.css" type ="text/css" rel ="stylesheet" > </head > <body > <p > 绿蚁新醅酒，</p > <p > 红泥小火炉。</p > <p > 晚来天欲雪，</p > <p > 能饮一杯无？</p > </body >
4 选择器 4.1 标签名/元素选择器【重点】
通过标签名,选择所有同名的标签
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <head > <style > p { color : red; } div { font-size : 50px ; } span { background-color : yellowgreen; } </style > </head > <body > <p > 天不生theshy,上单万古如长夜</p > <p > 天不生theshy,上单万古如长夜</p > <p > 天不生theshy,上单万古如长夜</p > <div > 真正的两袖青蛇，是斩心之剑，斩断心中恐惧，才能踏破束缚，去走自己选的路</div > <span > 愿后辈心诚剑士人人都会两袖青蛇，人人皆可剑开天门</span > </body >
4.2 id选择器【重点】
id选择器选择到一个标签.
使用时需要给标签设置一个id属性,然后再css中使用选择器#id,选中
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <head > <meta charset ="UTF-8" > <meta http-equiv ="X-UA-Compatible" content ="IE=edge" > <meta name ="viewport" content ="width=device-width, initial-scale=1.0" > <title > Document</title > <style > p { color : red; } #yyds { font-size : 80px ; } </style > </head > <body > <p class ="bz" > 天不生theshy,上单万古如长夜</p > <p class ="bz" > 天不生faker,中单万古如长夜</p > <p id ="yyds" > 天不生uzi,ADC万古如长夜</p > </body >
4.3 类选择器【重点】
标签名选择器,一次选中所有同名的标签 —>太多啦
id选择器,一次选择一个标签 —> 太少啦
这时可以使用类选择器,将某些标签(可以是任意),归为一类,即给它们设置class属性,然后属性值一样,这样就是一类
1)标签设置class属性
2)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 <head > <meta charset ="UTF-8" > <meta http-equiv ="X-UA-Compatible" content ="IE=edge" > <meta name ="viewport" content ="width=device-width, initial-scale=1.0" > <title > Document</title > <style > p { color : red; } #yyds { font-size : 80px ; } .bz { background-color : black; } div { font-size : 50px ; } span { background-color : yellowgreen; } </style > </head > <body > <p class ="bz" > 天不生theshy,上单万古如长夜</p > <p class ="bz" > 天不生faker,中单万古如长夜</p > <p id ="yyds" > 天不生uzi,ADC万古如长夜</p > <div > 真正的两袖青蛇，是斩心之剑，斩断心中恐惧，才能踏破束缚，去走自己选的路</div > <h1 class ="bz" > 天不生[oner],打野万古如长夜</h1 > <span > 愿后辈心诚剑士人人都会两袖青蛇，人人皆可剑开天门</span > </body >
类选择器可以同时设置多个
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <head > <style > .c1 { color : red; font-size : 50px ; } .c2 { background-color : green; } .c3 { border : 6px black solid; } </style > </head > <body > <p class ="c1 c2 c3" > 真正的两袖青蛇，是斩心之剑，斩断心中恐惧，才能踏破束缚，去走自己选的路</p > </body >
以上三个基本选择器,有优先级
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 <head > <title > 基本选择器优先级</title > <style > p { color : yellow; font-size : 10px ; } .cp { color : green; font-size : 50px ; } #p1 { color : red; font-size : 100px ; } </style > </head > <body > <p id ="p1" class ="cp" > java-yyds</p > </body >
4.4 属性选择器
通过属性和值来选择到标签
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 <head > <title > 属性选择器</title > <style > input [type] { font-size : 100px ; } input [type] { background-color : red; } </style > </head > <body > 用户名<input type ="text" > <br > 密码<input type ="password" > <br > 邮箱<input type ="email" > <br > </body >
4.5 层级选择器
父级选择器 子级选择器
先通过父级选取器,选到一部分标签,再通过子级选择器再选中
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <head > <title > 层级选择器</title > <style > div span { color : red; } </style > </head > <body > <span > span外</span > <div > <span > span内</span > <div > </div > <p > </p > </div > </body >
4.6 伪元素选择器
是对a标签超链接设置不同点击效果
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 <head > <title > 伪元素选择器</title > <style > a :link { color : red; } a :hover { color :chartreuse; } a :active { color : darkorange; } </style > </head > <body > <a href ="demo7.html" > 点击跳转页面有惊喜!!!</a > </body >
5 属性
css属性是美化页面具体手段.
5.1 文字属性
记住font-size属性!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <head > <title > Document</title > <style > p ,div ,span { font-size : 60px ; font-family : '楷体' ; font-style : normal; font-weight : 100 ; } </style > </head > <body > <p > 爱神的箭奥卡福就爱看拉萨市开发 </p > <div > 娃儿到你家是哪哦啊 </div > <span > 我却奥卡菲娜发就发 </span > </body >
5.2 文本属性
其中,颜色属性,文本对齐方式记住!
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 <head > <title > Document</title > <style > p ,div ,span { font-size : 60px ; font-family : '楷体' ; font-style : normal; font-weight : 100 ; } p { color : red; text-indent : 20px ; text-decoration : underline; text-align : center; line-height :120px ; } </style > </head > <body > <p > 爱神的箭奥卡福就爱看拉萨市开发爱神的箭奥卡福就爱爱神的箭奥卡福就爱看拉萨市开发爱神的箭奥卡福就爱神的箭奥卡福就爱看拉萨市开发爱神的箭奥卡福就爱看拉萨市开发爱看拉萨市开发爱神的箭奥卡福就爱看拉萨市开发看拉萨市开发爱神的箭奥卡福就爱看拉萨市开发 </p > <div > 娃儿到你家是哪哦啊 </div > <span > 我却奥卡菲娜发就发 </span > </body >
5.3 背景
记住背景颜色,常用
1 2 3 4 5 6 7 8 9 10 11 <head > body{ background-color: red; background-image: url(lyf.jpg); background-repeat: no-repeat; background-position: center; } </style > </head > <body > </body >
5.4 列表属性 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <head > <title > 属性</title > <style > ul { list-style-image : url (fire.png ); } </style > </head > <body > <ul > <li > 刘亦菲</li > <li > 迪丽热巴</li > <li > 郭碧婷</li > </ul > </body >
5.5 尺寸
重要,记住,调整元素的尺寸
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <head > <title > 属性</title > <style > div { background-color : red; width : 800px ; height : 800px ; } input { width : 500px ; height : 100px ; font-size : 90px ; } </style > </head > <body > <input > <div > div</div > </body >
5.6 显示属性
属性display,值
none,不展示,隐藏
block,展示,行级展示(行级),当前占一行
inline,展示,行内展示(行内),占行内部分空间
记住该属性
1 2 3 4 5 6 7 8 9 10 11 12 13 14 <head > <title > 属性</title > <style > input { width : 500px ; height : 100px ; font-size : 90px ; display : inline; } </style > </head > <body > <input > 男 </body >
day3 今日内容
0 复习昨日
1 css属性
2 盒子模型 【重点】
3 css扩展属性
4 Bootstrap【重点】
0 复习昨日
1 表格标签
table
表格里面有tr , (行)
行内有单元格,td
行合并,rowspan
列合并,colspan
2 写出input标签type属性的值
文件框 file
3 input标签的name属性,用来给值定义名字,将来通过name来获得输入框的值
4 input标签的value属性,是框的默认值
5 CSS是让页面刚好看,HTML只需要写标签,把形式展现出来,其余的样式统统交给CSS来实现
6 引入css的三种方式
标签内使用style属性,写css代码
文件内使用<style>写css代码
单独创建css文件,在html文件中引入
7 写出3个基本选择器的基本语法
8 css属性,各写出一个
标签是否显示
1 2 3 4 5 6 7 8 9 <input type ="hidden" > 只是将输入框隐藏---------------------------------------- <div class ="xianshi" > </div > <p class ="xianshi" > </p > <span class ="xianshi" > </span > .xianshi{ display:none } css属性display是对任何标签都可以设置隐藏和显示
1 盒子模型
通过”盒子模型”对页面进行布局,调整位置,一般将div设置成盒子
盒子有边框border
盒子内容与边框之间有填充padding
盒子与页面的页边距,margin
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 <!DOCTYPE html > <html lang ="en" > <head > <meta charset ="UTF-8" /> <meta http-equiv ="X-UA-Compatible" content ="IE=edge" /> <meta name ="viewport" content ="width=device-width, initial-scale=1.0" /> <title > 盒子模型</title > <style > div { width : 300px ; height : 300px ; border : 2px dashed red; padding : 20px ; margin-left : 550px ; margin-top : 150px ; } </style > </head > <body > <div > 用户名<input /> <br /> 用户名<input /> </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 <!DOCTYPE html > <html lang ="en" > <head > <meta charset ="UTF-8" /> <meta http-equiv ="X-UA-Compatible" content ="IE=edge" /> <meta name ="viewport" content ="width=device-width, initial-scale=1.0" /> <title > 嵌套的盒子</title > <style > #box1 { border : 2px red solid; width : 400px ; height : 400px ; margin-left : 200px ; margin-top : 100px ; } #box2 { border : 2px red solid; width : 100px ; height : 100px ; margin-left : 50px ; margin-top : 50px ; } </style > </head > <body > <div id ="box1" > <div id ="box2" > </div > </div > </body > </html >
2 浮动属性[了解]
盒子模型来定义,有些情况是无法布局实现的.
例如: 让盒子并排在一行
给标签设置css属性,完成浮动
float
left,向左浮动,直到碰到左边的边缘
right,向右浮动
特点:
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 <!DOCTYPE html > <html lang ="en" > <head > <meta charset ="UTF-8" /> <meta http-equiv ="X-UA-Compatible" content ="IE=edge" /> <meta name ="viewport" content ="width=device-width, initial-scale=1.0" /> <title > 浮动</title > <style > div { width : 100px ; height : 100px ; } #box1 { background-color : red; float : right; } #box2 { background-color : green; float : right; } #box3 { background-color : blue; float : right; } </style > </head > <body > <div id ="box1" > box1</div > <div id ="box2" > box2</div > <div id ="box3" > box3</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 <!DOCTYPE html > <html lang ="en" > <head > <meta charset ="UTF-8" /> <meta http-equiv ="X-UA-Compatible" content ="IE=edge" /> <meta name ="viewport" content ="width=device-width, initial-scale=1.0" /> <title > 演示浮动应用</title > <style > body { background-color : #f5f5f5 ; } #box { width : 1000px ; height : 800px ; border : 1px white solid; background-color : white; margin-left : 200px ; } img { float : right; height : 300px ; } </style > </head > <body > <div id ="box" > <img src ="java4.jpg" /> <p > 20世纪90年代，硬件领域出现了单片式计算机系统，这种价格低廉的系统一出现就立即引起了自动控制领域人员的注意，因为使用它可以大幅度提升消费类电子产品（如电视机顶盒、面包烤箱、移动电话等）的智能化程度。Sun公司为了抢占市场先机，在1991年成立了一个称为Green的项目小组，帕特里克、詹姆斯·高斯林、麦克·舍林丹和其他几个工程师一起组成的工作小组在加利福尼亚州门洛帕克市沙丘路的一个小工作室里面研究开发新技术，专攻计算机在家电产品上的嵌入式应用 </p > <p > 由于C++所具有的优势，该项目组的研究人员首先考虑采用C++来编写程序。但对于硬件资源极其匮乏的单片式系统来说，C++程序过于复杂和庞大。另外由于消费电子产品所采用的嵌入式处理器芯片的种类繁杂，如何让编写的程序跨平台运行也是个难题。为了解决困难，他们首先着眼于语言的开发，假设了一种结构简单、符合嵌入式应用需要的硬件平台体系结构并为其制定了相应的规范，其中就定义了这种硬件平台的二进制机器码指令系统（即后来成为“字节码”的指令系统），以待语言开发成功后，能有半导体芯片生产商开发和生产这种硬件平台。对于新语言的设计，Sun公司研发人员并没有开发一种全新的语言，而是根据嵌入式软件的要求，对C++进行了改造，去除了留在C++的一些不太实用及影响安全的成分，并结合嵌入式系统的实时性要求，开发了一种称为Oak的面向对象语言。 </p > </div > </body > </html >
3 定位属性
用于实现页面布局的功能之一.
使用的是css属性position,属性值有
使用了定位属性后,才可以使用css属性,top,bottom,left,right这些属性
3.1 相对定位
语法: position: relative;
特点: 相对于当前原有位置进行移动,原有的位置还在
3.2 绝对定位
语法: position: absolute;
特点: 相对于父元素进行定位(父元素要定位),原有位置会从文档流消失
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 <!DOCTYPE html > <html lang ="en" > <head > <meta charset ="UTF-8" /> <meta http-equiv ="X-UA-Compatible" content ="IE=edge" /> <meta name ="viewport" content ="width=device-width, initial-scale=1.0" /> <title > 定位</title > <style > div { width : 100px ; height : 100px ; } #box1 { background-color : red; } #box2 { background-color : green; position : absolute; left : 100px ; top : 100px ; } #box3 { background-color : blue; } #fu { position : relative; border : 2px red solid; width : 200px ; height : 200px ; left : 100px ; } </style > </head > <body > <div id ="box1" > box1</div > <div id ="fu" > <div id ="box2" > box2</div > </div > <div id ="box3" > box3</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 <!DOCTYPE html > <html lang ="en" > <head > <meta charset ="UTF-8" /> <meta http-equiv ="X-UA-Compatible" content ="IE=edge" /> <meta name ="viewport" content ="width=device-width, initial-scale=1.0" /> <title > Document</title > <style > #login { width : 350px ; height : 400px ; border : 3px red solid; position : absolute; left : 600px ; top : 150px ; font-size : 20px ; } #input { position : absolute; left : 50px ; top : 125px ; } input { width : 200px ; height : 30px ; font-size : 20px ; } #img { position : absolute; left : 75px ; top : 10px ; } </style > </head > <body > <div id ="login" > <div id ="img" > <img src ="new_logo.png" /> </div > <div id ="input" > 用户名<input /> <br /> 密码<input /> <br /> </div > </div > </body > </html >
3.3 固定定位[了解]
固定定位相对于浏览器窗口固定,固定不动!
语法: position: fixed
特点: 相对于当前浏览器窗口固定
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 <!DOCTYPE html > <html lang ="en" > <head > <meta charset ="UTF-8" /> <meta http-equiv ="X-UA-Compatible" content ="IE=edge" /> <meta name ="viewport" content ="width=device-width, initial-scale=1.0" /> <title > 固定定位</title > <style > #fixbox { border : 2px red solid; width : 300px ; font-size : 25px ; position : fixed; background-color : bisque; top : 300px ; right : 0px ; } </style > </head > <body > <div id ="fixbox" > 小小千想和你聊一下~~</div > <p > 您好，欢迎访问千锋教育，专注职业教育11年，已覆盖全国20个城市，大品牌，值得信赖！ </p > <p > 您好，欢迎访问千锋教育，专注职业教育11年，已覆盖全国20个城市，大品牌，值得信赖！ </p > </body > </html >
4 Boostrap
Bootstrap是美国Twitter 公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端 开发框架，使得 Web 开发更加快捷
官网: Bootstrap中文网 (bootcss.com)
4.1 下载
下载 https://github.com/twbs/bootstrap/releases/download/v3.4.1/bootstrap-3.4.1-dist.zip
生产环境版本
是压缩后,不包含源码和文档
文件大小比较小,节省资源
生产环境就是指项目已经开发完成,部署到服务器,为公司产生效益
源码版本
有完整的源码,文档
文件大小较大
一般用于开发环境,即就是在编码阶段
或者可以使用在线版本的
1 2 3 4 5 6 7 8 <link rel ="stylesheet" href ="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity ="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin ="anonymous" > <link rel ="stylesheet" href ="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity ="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin ="anonymous" > <script src ="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity ="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin ="anonymous" > </script >
4.2 文件内容
4.3 入门使用
复制官网的样式,组件,到自己项目即可….
使用Boostrap的样式,组件前,
1.要将下载的boostrap的源码复制粘贴到当前项目文件夹下
2.创建html文件,在文件内引入bootstrap的样式文件
4.3.1 Bootstrap样式
4.3.1.1 栅格
将网页窗口系统会自动分为最多12列
1 2 3 4 <div class ="row" > <div class ="col-md-8" > .col-md-8</div > <div class ="col-md-4" > .col-md-4</div > </div >
可以使用对页面的布局
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 <div class ="row" > <div class ="col-md-1" > .col-md-1</div > <div class ="col-md-1" > .col-md-1</div > <div class ="col-md-1" > .col-md-1</div > <div class ="col-md-1" > .col-md-1</div > <div class ="col-md-1" > .col-md-1</div > <div class ="col-md-1" > .col-md-1</div > <div class ="col-md-1" > .col-md-1</div > <div class ="col-md-1" > .col-md-1</div > <div class ="col-md-1" > .col-md-1</div > <div class ="col-md-1" > .col-md-1</div > <div class ="col-md-1" > .col-md-1</div > <div class ="col-md-1" > .col-md-1</div > </div > <div class ="row" > <div class ="col-md-8" > .col-md-8</div > <div class ="col-md-4" > .col-md-4</div > </div > <div class ="row" > <div class ="col-md-4" > .col-md-4</div > <div class ="col-md-4" > .col-md-4</div > <div class ="col-md-4" > .col-md-4</div > </div > <div class ="row" > <div class ="col-md-6" > .col-md-6</div > <div class ="col-md-6" > .col-md-6</div > </div >
4.3.1.2 表格
写table标签后,只需要给table标签设置class属性,然后使用bootstrap提供的表格样式类,即可出现不同的效果
table
table-striped
table-bordered
table-hover
可以配合栅格系统,调整表格大小
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 <div class ="row" > <div class ="col-md-6" > <table class ="table table-striped table-bordered table-hover" > <tr > <td > 编号</td > <td > 姓名</td > <td > 年龄</td > <td > 邮箱</td > </tr > <tr > <td > 1</td > <td > 张三</td > <td > 18</td > <td > 111@qq.com</td > </tr > <tr > <td > 2</td > <td > 李四</td > <td > 19</td > <td > 222@qq.com</td > </tr > <tr > <td > 3</td > <td > 王王</td > <td > 20</td > <td > 333@qq.com</td > </tr > </table > </div > </div >
4.3.2 Bootstrap组件
4.3.2.1 字体图标
应该创建一个嵌套的 <span> 标签，并将图标类(class)应用到这个 <span> 标签上。
1 2 3 4 5 6 7 8 9 10 11 <head > <link href ="./dist/css/bootstrap.css" rel ="stylesheet" /> </head > <body > <a href ="#" > <span class ="glyphicon glyphicon-heart" > </span > </a > <div > <span class ="glyphicon glyphicon-remove" > </span > </div > </body >
4.3.2.2 导航
4.3.2.3 分页
5 使用Bootstrap的模板
1 找到模板
2 复制模板的html代码
3 读代码,把不用的html标签删除
4 再引入自己项目中的bootstrap样式
5 再通过F12,调出开发者工具,找到源代码[source]
6 在其中找到模板自定义样式,拷贝粘贴到自己项目中的css文件
day4 今日内容
0 复习昨日
1 JS概述
2 JS的引入方式
3 JS语法
0 复习昨日
1 盒子模型
对div进行设置,当盒子
border 边框
内边距/填充 padding
外边距 margin
2 浮动
属性float, 值left,right
用来做布局
经典的使用,可以实现文字环绕图片
还可以实现盒子在一排
3 定位
4 bootstrap
下载源码
导入到当前项目文件
在html文件中使用link引入bootstrap的css样式文件
去官网找css样式,组件复制粘贴就可以啦
1 JavaScript
HTML 写页面展现内容
CSS 用来美化页面
JavaScript 用来让页面有动态效果(轮播图)
JavaScript(JS)是一种脚本语言,主要是配合HTML完成一些页面的动态效果.
脚本: 解释性的,嵌套在其他东西里面的一种
作用是实现动态效果
JavaScript这个语言是弱类型
JavaScript这门技术主要包含
基本语法
DOM(Document Object Model)对象,其实就是操作HTML标签和CSS样式
BOM(Browser Object Model)对象,其实操作浏览器
2 JS的引入 2.1 在标签内写js 1 2 3 4 5 6 7 8 <body > <button onclick ="alert('警告!!!!')" > 按钮</button > </body >
2.2 在文件使用<script>标签引入js
css写样式,需要把style标签写在head标签内
但是写js代码的script标签,可以写在html页面的任何位置,head标签内,body标签内都可,但是一般建议放在后面,越晚加载越好
1 2 3 <script > alert("<script > 标签内执行"); </script >
2.3 独立的js文件
1 创建一个后缀为.js的文件
2 文件内写js代码
3 在html文件内使用<script>标签引入该js文件
4 引入js文件的位置,在html中也是任意的
5 作为引入js文件的<script>标签,不能在其中间写js代码
1 2 3 4 <body > <script src ="tk.js" > </script > </body >
3 JS语法 3.1 变量
变量的使用
声明 , var 变量名;
赋值 , 变量名 = 值;
使用
JavaScript是弱类型语言,声明时不需要设置变量的类型,赋值时就可以赋值任何类型
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <script > var a; a = 1 ; var b = 2 ; b = "a" ; var c = 3.1 ; var d = "四" ; var e = true ; var f = new Date (); console .log ("b = " + b); console .log ("c = " + c); console .log ("d = " + d); console .log ("e = " + e); console .log ("f = " + f); </script >
ps,浏览器控制台
3.2 基本数据类型
基本类型有数字(number),字符串(string),布尔型(boolean),未定义(undefined),空(null)五种
1 2 3 4 5 6 7 8 9 10 11 12 <script > var x = 1 ; var x2 = 1.1 ; var y = "JavaScript" ; var z = true ; console .log (typeof x); console .log (typeof x2); console .log (typeof y); console .log (typeof z); console .log (typeof i); </script >
变量有不同的类型,不同类型使用的作业不一样
number类型,数字,那就可以做算术,逻辑运算等 (后续运算时使用)
boolean类型,那就可以用于逻辑判断,分支语句,循环等 (后续分支循环时使用)
string类型,那就可以使用字符串的方法,对字符串操作(跟java中String操作很像)
完整的string操作,可以查看APIJavaScript 字符串方法 (w3school.com.cn)
1 2 3 4 5 6 7 8 9 10 var y = "Java-Script" ; var j = y.charAt (0 ); console .log (j);console .log (y.indexOf ("a" )); console .log (y.lastIndexOf ("a" )); console .log (y.split ("-" )); console .log (y.substring (5 )); console .log (y.substring (5 , 8 )); console .log (y.length );
3.3 引用类型
其实引用类型是借鉴Java中的对象的思想.
JS中的引用类型其实是JSON,后续学框架,工作中JSON是重中之重!非常常见
今天主要学习JSON(杰森)的语法格式,会用JSON定义一个对象
将来使用JSON在前端后后端之间传输数据的
语法格式
JSON对象使用大括号,{}
大括号内,是键值对,键值对使用是冒号分割.{key:value}
键正常写,值得写法区分数字,字符串,布尔值,数组,对象等
{id:18} 数字直接写
{name:”张三”} 字符串需要双引号
{sex:true} 布尔值直接写
{arr:[1,2,3]} 数组使用[]
{obj:{}} 对象使用{}
大括号内,可以同时写多个键值对,中间使用逗号隔开
大括号id:18,name:”李四”,sex:true大括号
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 var student = { id : 1 , name : "小胡" , sex : true , age : 18 , score : [98 , 99 , 100 ], teacher : { id : 2 , name : "邱哥" , age : 18 , }, }; console .log (student.id );console .log (student.name );console .log (student.sex );console .log (student.age );console .log (student.score );console .log (student.teacher );console .log (student.teacher .name );
3.4 数组类型
数组是用来存储多个数据
创建时可以是空数组,后面也可以继续赋值
数组没有长度限制
数组存储的类型没有限制
创建数组的语法
var 名字 = []
var 名字 = new Array()
取值赋值的语法
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <script > var arr1 = []; var arr2 = [1 , 2 , 3 , 4 ]; var arr3 = [1 , "二" , true , new Date ()]; var arr4 = new Array (); var arr5 = new Array (1 , "二" , true ); console .log (arr1); console .log (arr2); console .log (arr3); console .log (arr4); console .log (arr5); console .log (arr2[0 ]); console .log (arr2[4 ]); arr1[0 ] = 1 ; arr1[1 ] = "贰" ; console .log (arr1); </script >
除了以上基本数组操作之外,JS的数组还有一些方法可以调用
详细可以参考文档JavaScript 数组方法 (w3school.com.cn)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <script > var arr6 = [1 , 2 , 3 , 4 ]; console .log (arr6.length ); console .log (arr6.toString ()); console .log (arr6.join (" - " )); console .log (arr6.pop ()); console .log (arr6); arr6.push (4 ); console .log (arr6); for (var i = 0 ; i < arr6.length ; i++) { console .log (arr6[i]); } </script >
3.5 日期类型
创建日期对象,
日期对象提供了方法可以获得/设置日期信息
详细信息查看文档JavaScript 日期 (w3school.com.cn) ,JavaScript 日期获取方法 (w3school.com.cn) ,JavaScript 日期设置方法 (w3school.com.cn)
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 <script > var date = new Date (); console .log (date); var date2 = new Date (1000 * 60 * 60 * 24 * 40 ); console .log (date2); var date3 = new Date (2022 , 10 , 13 ); console .log (date3); var year = date3.getFullYear (); var month = date3.getMonth () + 1 ; var day = date3.getDate (); var week = date3.getDay (); console .log (year + "/" + month + "/" + day + "周" + week); date.setFullYear (); var dateString = date.toLocaleString (); console .log (dateString); </script >
3.6 运算符
算术运算
关系运算
逻辑运算
三目运算
以上这些运算操作,与java中操作基本一样
算术运算
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <script > console .log (1 + 1 ); console .log (1 + "1" + 1 ); console .log (1 - 1 ); console .log (1 * 10 ); console .log (10 / 2 ); console .log (10 / 3 ); console .log (10 % 3 ); var a = 1 ; a++; console .log (a); var b = 1 ; var c = ++b; console .log (c); var d = 1 ; d += 1 ; console .log (d); </script >
关系运算
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <script > console .log (1 > 0 ); console .log (1 < 0 ); console .log (1 <= 0 ); console .log (1 >= 0 ); console .log ("1 == 1 " + (1 == 1 )); console .log ("1 == '1' " + (1 == "1" )); console .log ("1 === '1' " + (1 === "1" )); console .log ("1 === 1 " + (1 === 1 )); </script >
逻辑运算
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <script > console .log (1 > 0 && 1 > 0 ); var a = 1 ; console .log (1 < 0 && a++ > 1 ); console .log ("a = " + a); console .log (1 < 0 || 1 > 0 ); var b = 1 ; console .log (1 > 0 || b++ > 0 ); console .log (b); console .log (!true ); </script >
三目运算
1 2 3 4 5 6 <script > console .log ("================三目运算=================" ); console .log (1 > 0 ? "111" : "000" ); </script >
3.7 分支
if
ifelse
if-elseif-elseif-else
switch
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <script > var a = 1 ; if (a > 0 ) { console .log ("a > 0" ); } if (a < 0 ) { console .log ("a < 0" ); } else { console .log ("a > 0" ); } if (a > 0 ) { console .log ("a > 0" ); } else if (a < 0 ) { console .log ("a < 0" ); } else { console .log ("a == 0" ); } </script >
3.8 循环
while
dowhile
for
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <script > var i = 1 ; while (i < 11 ) { console .log (i); i++; } var j = 100 ; do { console .log (j); j += 10 ; } while (j <= 200 ); var sum = 0 ; for (var k = 1 ; k <= 100 ; k++) { sum += k; } console .log ("sum = " + sum); </script >
3.9 函数(重点)
函数就是java中方法的概念,用来完成某些功能的.
定义函数的语法
1 2 3 4 5 6 7 8 9 10 function 函数名(参数1 ,参数2 ,...) { }
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 <script > function fun1 ( console .log ("无参无返回值..." ); } fun1 (); function fun2 (a ) { console .log ("fun2执行" ); console .log (a); } fun2 (10 , 20 ); function fun3 ( return 200 ; } var result = fun3 (); console .log (result); </script >
特殊的函数定义:匿名函数
1 2 3 4 var obj = function ( console .log ("匿名函数" ); };
4 常见的弹窗函数 4.1 警告框 1 2 3 4 5 6 <script > function fun1 ( alert ("没有权限!" ); } fun1 (); </script >
4.2 确认框 1 2 3 4 5 6 7 8 9 10 11 12 <script > function fun2 ( if (confirm ("确定要删除?" )) { alert ("删除成功!!" ); } else { alert ("取消删除!" ); } } fun2 (); </script >
4.3 输入框 1 2 3 4 5 6 7 8 9 <script > function fun3 ( var ret = prompt ("请输入身份证号!" ); console .log (ret); } fun3 (); </script >
day5 今日内容
0 复习昨日
0 复习昨日
1 js是让页面能够动态效果,是一种脚本语言,弱类型语言
2 js的引入方式
- 标签内
- `<script>`标签内
- 新建独立的js文件,在任意位置引入
3 变量
声明时不需要写数据类型,写var
值可以写不同类型
4 基本数据类型
number , string,boolean,undefined,null
不同类型有不同的使用方式
string操作字符串,
5 数组
6 日期
7 引用类型
var stu = 大括号name:”张三”,age:18大括号
stu.name
JSON
8 运算符
除法不取整,有小数
== 判断的是值,===判断是值和类型
&& || 与java中一样,有短路效果
9 分支,循环
10 函数
1 2 3 function 函数名(参数1 ,参数1 ) { } var fun = function(){}
11 弹窗函数
1 事件 1.1 事件介绍
事件: 就是发生在浏览器(页面)上一件事,键盘事件,鼠标事件,表单事件,加载事件等等
1.2 事件绑定方式
事件要想发生,就得将事件和标签先绑定
一个完整的事件有三部分
事件绑定,其实就是事件和标签绑定
方式1: 事件源,事件,响应在一起
方式2: 事件源,事件在一起,响应抽取函数
方式3: 事件和响应全部抽取
方式1: 事件源,事件,响应在一起
1 2 3 4 5 6 7 <body > <button type ="button" onclick ="alert('听说你点我了?')" > 按钮</button > </body >
方式2: 事件源,事件在一起,响应抽取函数
1 2 3 4 5 6 7 8 9 10 11 <body > <hr /> <button type ="button" onclick ="dian()" > 按钮</button > <script > function dian ( alert ("你又点我?!" ); } </script > </body >
方式3【重要】: 事件和响应全部抽取
1 2 3 4 5 6 7 8 9 10 <button id ="btn" > 再点一下试试</button > <script > var btn = document .getElementById ("btn" ); btn.onclick = function ( alert ("上瘾了是不是?!" ); }; </script >
练习：练习,div宽高各200,背景颜色red,设计点击事件,点击是出现弹框,并有输出语句 计算,点击次数
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <body > <div id ="d1" style ="width: 200px; height: 200px; background-color: red" > </div > <script > var div = document .getElementById ("d1" ); var count = 0 ; div.onclick = function ( count++; console .log (count); }; </script > </body >
1.3 不同事件的演示
这些事件,都是html中标签的属性,都是以onxxx开头
事件名称
描述
onchange
HTML 元素内容改变
onblur
输入框失去焦点
onfocus
输入框获得焦点
onclick
用户点击 （单击）HTML 元素
ondblclick
用户双击HTML元素
onmouseover
用户将鼠标移入一个HTML元素中
onmousemove
用户在一个HTML元素上移动鼠标
onmouseout
用户从一个HTML元素上移开鼠标
onkeyup
键盘弹起
onkeydown
用户按下键盘按键
onkeypress
按压键盘
onload
浏览器已完成页面的加载
onsubmit
表单提交
1.3.1 鼠标事件 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <script > var box = document .getElementById ("box" ); box.onmousemove = function ( console .log ("鼠标移动" ); }; box.onmouseover = function ( console .log ("鼠标移入" ); }; box.onmouseout = function ( console .log ("鼠标离开" ); }; </script >
1.3.2 键盘事件 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <script > var i = document .getElementById ("i" ); i.onkeydown = function (event ) { if (event.keyCode == 13 ) { console .log ("提交表单" ); } }; i.onkeyup = function ( }; i.onkeypress = function ( }; </script >
ps: 当不知道某个对象是什么的时候,就输出看效果,看内部的内容
1.3.3 表单事件【重点】 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 <body > <div > <form accept ="/java2217" onsubmit ="return tijiao()" > 用户名<input id ="i1" type ="text" name ="username" /> <br /> 密码<input type ="password" name ="password" /> <br /> 籍贯<select id ="jiguan" name ="jigaun" > <option > 河南</option > <option > 河北</option > <option > 北京</option > </select > <input type ="submit" value ="提交" /> </form > <script > var i1 = document .getElementById ("i1" ); i1.onfocus = function ( console .log ("输入框获得焦点" ); }; i1.onblur = function ( console .log ("输入框失去焦点" ); }; var jiguan = document .getElementById ("jiguan" ); jiguan.onchange = function ( console .log ("内容改变" ); }; function tijiao ( console .log ("点击提交按钮" ); return true ; } </script > </div > </body >
1.3.4 加载事件【重点】
浏览器加载页面,是瀑布式加载,即从上之下依次加载执行.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <head > <title > 加载事件</title > <script > window .onload = function ( var btn = document .getElementById ("btn" ); btn.onclick = function ( alert ("试试就试试!" ); }; }; </script > </head > <body > <button id ="btn" > 点我一下试试?!</button > </body >
ps: js代码可以放在页面的任何地方,但是一般建议放后面,越晚加载越好!
2 DOM操作 2.1 概述
DOM,Document Object Model,文档对象模型,将HTML页面当做文档,页面内部有各种标签,标签有平级,有嵌套;标签还有属性,因此document被加载成dom树,树上每个节点就是一个标签
有了DOM树,就可以通过树来查找节点(元素),找到元素就可以对元素进行操作(修改,删除,添加),还可以操作元素的样式
2.2 查找元素
查找元素(标签)有很多方式
通过id查找元素
通过标签名查找元素
通过class查找元素
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 <body > <button id ="btn" > 按钮</button > <ul > <li > 貂蝉</li > <li > 西施</li > <li > 王昭君</li > <li > 杨玉环</li > <li class ="xd" > 黎姿</li > <li class ="xd" > 利智</li > <li class ="xd" > 张曼玉</li > <li class ="xd" > 朱茵</li > </ul > <script > var btn = document .getElementById ("btn" ); var liArr = document .getElementsByTagName ("li" ); for (var i = 0 ; i < liArr.length ; i++) { } var mvArr = document .getElementsByClassName ("xd" ); console .log (mvArr); </script > </body >
2.3 元素内容的查找和设置
元素内容,是指标签开闭之间的内容.
1 2 <p > 这就是内容</p > <p > <span > 这就是内容</span > </p >
查找和设置使用的是相同的属性
innerHTML 获得或设置标签的内容
innerText 获得或设置标签的内容
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 <body > <p id ="p1" > <span > 你好啊,JavaScript</span > </p > <button id ="btn1" > 设置innerHTML</button > <button id ="btn2" > 设置innerText</button > <script > var p1 = document .getElementById ("p1" ); var innerHTML = p1.innerHTML ; console .log (innerHTML); var innerText = p1.innerText ; console .log (innerText); var btn1 = document .getElementById ("btn1" ); btn1.onclick = function ( p1.innerHTML = "<span>你好啊,李焕英</span>" ; }; var btn2 = document .getElementById ("btn2" ); btn2.onclick = function ( p1.innerText = "<span>你好啊,李焕英</span>" ; }; </script > </body >
2.4 元素属性的查找和设置
元素属性,是指开标签内的属性,比如
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <body > <input id ="i1" class ="c1" type ="text" value ="默认值" /> <button id ="btn1" > 点击获得属性值</button > <button id ="btn2" > 点击设置属性值</button > <script > var btn1 = document .getElementById ("btn1" ); var i1 = document .getElementById ("i1" ); btn1.onclick = function ( console .log (i1.id ); console .log (i1.class ); console .log (i1.type ); console .log (i1.value ); }; btn2.onclick = function ( i1.type = "password" ; i1.value = "123456" ; }; </script > </body >
2.5 元素CSS样式的查找和设置
元素css样式的查找和设置,是指标签中style的属性值的获得和设置
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 <body > <div id ="box" style ="width: 200px; height: 200px; background-color: red" > </div > <button id ="btn1" > 获得css样式</button > <button id ="btn2" > 设置css样式</button > <script > var box = document .getElementById ("box" ); var btn1 = document .getElementById ("btn1" ); btn1.onclick = function ( var style = box.style ; console .log (box.style .width ); console .log (box.style .height ); console .log (box.style .backgroundColor ); }; var btn2 = document .getElementById ("btn2" ); btn2.onclick = function ( var width = box.style .width ; var height = box.style .height ; var newWidth2 = box.clientWidth ; var newHeight = box.clientHeight ; box.style .width = newWidth2 + 10 + "px" ; box.style .height = newHeight + 10 + "px" ; }; </script > </body >
2.6 创建元素
通过dom对象可以创建出一个标签
document.createElement(“标签名”)
2.7 创建文本内容
创建出一个文本内容,这个内容是值开闭标签间的文本内容
document.createTextNode(“文本内容”);
2.8 追加元素
在开闭标签内,在末尾追加内容
标签对象.appendChild(元素)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <body > <button id ="btn" > 点击时创建p标签,已经内容</button > <div id ="box" > </div > <script > var btn = document .getElementById ("btn" ); btn.onclick = function ( var p = document .createElement ("p" ); var text = document .createTextNode ("你好啊,Java" ); p.appendChild (text); var box = document .getElementById ("box" ); box.appendChild (p); }; </script > </body >
2.9 删除元素
删除子节点
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <body > <ul id ="ul" > <li > 刘德华</li > <li > 吴彦祖</li > <li > 彭于晏</li > </ul > <button id ="btn" > 点击删除子元素</button > <script > var btn = document .getElementById ("btn" ); btn.onclick = function ( var ul = document .getElementById ("ul" ); var liArr = document .getElementsByTagName ("li" ); for (var i = 0 ; i < liArr.length ; i++) { ul.removeChild (liArr[i]); i--; } }; </script > </body >
3 案例
查找 - document.getElementById
内容 innerHTML
属性 元素对象.属性
样式 元素对象.style.属性
练习1
输入框,点击输入框时,将输入框变高300,宽300,边框蓝色,背景红色.当离开输入框时,样式消失
事件: 获得焦点,失去焦点
要设置css样式
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <input id ="i1" /> <script > var i1 = document .getElementById ("i1" ); i1.onfocus = function ( i1.style .height = "300px" ; i1.style .width = "300px" ; i1.style .border = "30px yellow solid" ; i1.style .backgroundColor = "red" ; }; i1.onblur = function ( i1.style .height = "" ; i1.style .width = "" ; i1.style .border = "" ; i1.style .backgroundColor = "" ; i1.style = "reset" ; }; </script > </body >
设置div,高300宽300,鼠标进入div,div背景变红,离开div背景变绿
1 2 3 4 5 6 7 8 9 10 11 12 13 14 <div id ="box" style ="width: 300px; height: 300px; border: 2px red solid" > </div > <script > var box = document .getElementById ("box" ); box.onmouseover = function ( box.style .backgroundColor = "red" ; }; box.onmouseout = function ( box.style .backgroundColor = "green" ; }; </script >
练习: 设置输入框,输入内容,点击按钮,将内容追加到div后
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <body > 请输入内容:<input id ="i1" /> <button id ="btn" > 追加内容</button > <div id ="box" > </div > <script > var btn = document .getElementById ("btn" ); btn.onclick = function ( var text = document .getElementById ("i1" ).value ; var p = document .createElement ("p" ); var textNode = document .createTextNode (text); p.appendChild (textNode); var box = document .getElementById ("box" ); box.appendChild (p); document .getElementById ("i1" ).value = "" ; }; </script > </body >
day6 今日内容
0 复习昨日
0 复习昨日
1 事件
浏览器上发生的事件,例如鼠标事件,键盘事件,表单事件,加载事件
事件的绑定
事件和响应都写在标签上
事件写在标签上,响应抽取成函数
事件和响应与标签分离
演示事件
表单提交事件
提交的函数中要返回true/false
事件中也要写return
onsubmit=”return tijiao()”
2 DOM
HTML的加载,会将标签在文档流中形成dom树
查找元素
document.getElementById()
document.getElementsByTagName()
document.getElementsByClassgName()
获得/设置元素的内容
获得/设置元素的属性
获得/设置元素的样式
创建标签
document.createElement(‘标签名’)
创建文本内容
document.createTextNode(‘文本’)
追加标签
删除标签
1 BOM
js技术,包含
BOM,Browser Object Mode,浏览器对象模型
详细的BOM操作,可以参考APIJavaScript Window - 浏览器对象模型 (w3school.com.cn)
浏览器对象操作,
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <body > <button id ="btn" > 点击获得location</button > <script > var btn = document .getElementById ("btn" ); btn.onclick = function ( var location = window .location ; var href = window .location .href ; window .location .href = "http://www.baidu.com" ; }; </script > </body >
2 固定时间和间隔时间
固定时间
- setTimeout(函数,时间)
- 在指定时间(毫秒)结束后,去执行参数1 函数,且只执行一次
间隔时间
- setInterval(函数,时间)
- 循环在指定时间结束,执行参数1的函数
2.1 固定时间 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <body > <button id ="btn" > 点击开始倒计时</button > <script > var btn = document .getElementById ("btn" ); btn.onclick = function ( setTimeout (() => { alert ("发射!222" ); }, 3000 ); }; </script > </body >
2.2 间隔时间 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 <body > <button id ="btn" > 点击开始循环</button > <hr /> <div id ="box" style =" width: 300px; height: 100px; border: 20px red solid; text-align: center; font-size: 50px; " > 某某某 </div > <button id ="btn-name" > 点击开始点名</button > <button id ="btn-stop" > 【停】</button > <script > var btn = document .getElementById ("btn" ); btn.onclick = function ( setInterval (function ( console .log (new Date ().toLocaleString ()); }, 3000 ); }; var dianming = document .getElementById ("btn-name" ); var box = document .getElementById ("box" ); var nameArr = ["盼盼" , "谭昊" , "中政" , "顺博" , "九龙" , "克龙" ]; var sj; dianming.onclick = function ( sj = setInterval (() => { var index = parseInt (Math .random () * nameArr.length ); var name = nameArr[index]; box.innerText = name; }, 30 ); }; var stop = document .getElementById ("btn-stop" ); stop.onclick = function ( clearInterval (sj); }; </script > </body >
3 正则表达式 3.1 介绍
正则表达式: 一种匹配文字的语法,常用语校验数据格式.
场景: 注册时表达的输入框中内容要求
- 用户名首字母大小,长度,特殊符号
- 邮箱格式
- 手机号格式
- 身份证格式
正则表达式是由一些符号组成模板,这个模板来匹配一些字符串,通过方法可以判断这些字符串是否符号这个模板
正则表达式的模板的写法
[] 内部写匹配的内容
[abc] 查找方括号之间的任何字符。
[0-9] 查找任何从 0 至 9 的数字。
\d 指数字,就是0-9
n+ 匹配任何包含至少一个 n 的字符串
n* 匹配任何包含零个或多个 n 的字符串。
n? 匹配任何包含零个或一个 n 的字符串。
n{x} 匹配任何包含x个的字符串
n{x,y} 匹配任何包含x-y之间个数的字符串
n{x,} 匹配任何包含x或大于x以上个数的字符串
^ 匹配开头
$ 匹配末尾
. 点在正则表达式中代表所有的意思
正则表达式的方法
test() 它通过模式来搜索字符串，然后根据结果返回 true 或 false。
exec() 它通过指定的模式（pattern）搜索字符串，并返回已找到的文本。
正则表达式的创建
直接写模板
使用new来创建正则表达式
var reg = new RegExp(模板);
3.2 演示【熟悉】 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 <body > 数据<input id ="i1" onblur ="checkData()" /> <script > var i1 = document .getElementById ("i1" ); function checkData ( var val = i1.value ; var reg = /[0-9]/ ; var reg2 = /[a]/ ; var reg3 = /[abc]/ ; var reg4 = /[a-z]/ ; var reg5 = /[A-Z]/ ; var reg6 = /[a-zA-Z]/ ; var reg7 = /[A-z]/ ; var reg8 = /[0-9A-Za-z]/ ; var reg9 = /[\dA-Za-z]/ ; var reg10 = /\d+/ ; var reg11 = /\d*/ ; var reg12 = /\d?/ ; var reg13 = /^\d?$/ ; var reg14 = /^\d{4}$/ ; var reg15 = /^\d{4,6}$/ ; var reg16 = /^\d{4,}$/ ; var reg17 = /^1[35689]\d{9}$/ ; var reg18 = /^[\dA-Za-z]+@[\da-z]+\.[a-z]+$/ ; console .log (reg18.test (val)); } </script > </body >
3.3 实战【重点】
使用正则表达式进行表达校验
用户名,不能为空,长度6-10之间,只能包含数字和字母
密码,不能为空,长度6-10之间
二次确认,两次密码要一致
手机号,不能为空,要符合规则
邮箱,要符合规则
以上校验,如果出错,要给边框变红,并在后面给出红色提示语句,
如果校验合格,给边框变绿,后面给他绿色提示语句
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 <!DOCTYPE html > <html lang ="en" > <head > <meta charset ="UTF-8" /> <meta http-equiv ="X-UA-Compatible" content ="IE=edge" /> <meta name ="viewport" content ="width=device-width, initial-scale=1.0" /> <title > 表单校验</title > <style > body { font-size : 30px ; } input { height : 40px ; font-size : 30px ; } </style > </head > <body > <div > <form > <table > <tr > <td > 用户名</td > <td > <input id ="username" type ="text" /> </td > <td > <span id ="username-span" > </span > </td > </tr > <tr > <td > 密码</td > <td > <input id ="pwd" type ="password" /> </td > <td > <span > </span > </td > </tr > <tr > <td > 二次确认</td > <td > <input id ="pwd2" type ="password" /> </td > <td > <span > </span > </td > </tr > <tr > <td > 邮箱</td > <td > <input id ="email" type ="email" /> </td > <td > <span > </span > </td > </tr > <tr > <td > 手机号</td > <td > <input id ="phone" type ="text" /> </td > <td > <span > </span > </td > </tr > </table > </form > <script > var username = document .getElementById ("username" ); var usernameSpan = document .getElementById ("username-span" ); username.onfocus = function ( username.style = "" ; usernameSpan.style = "" ; usernameSpan.innerText = "" ; }; username.onblur = function ( var value = username.value ; console .log (value.length ); if (value.length == 0 ) { usernameSpan.innerText = "用户名不能为空!" ; usernameSpan.style .color = "red" ; username.style .borderColor = "red" ; } else { var reg = /^[\da-z]{6,10}$/ ; if (reg.test (value)) { usernameSpan.innerText = "用户名可以使用!" ; usernameSpan.style .color = "green" ; } else { usernameSpan.innerText = "用户名不符合要求" ; usernameSpan.style .color = "red" ; username.style .borderColor = "red" ; } } }; </script > </div > </body > </html >
未完,接着写
day7 今日内容
0 复习上周
0 复习上周
1 写出至少15个标签
1 2 h1-h6 p hr br div span font ol ul li img a iframe table tr td form input select option
2 写出至少7个css属性
1 2 3 4 color,text-align,font-size,font-family,background-color,background-image width,height,list-style,display,margin,padding,border,position,top,bottom,left,right,float --- 以上属性的值,要再记忆
3 写出input标签的type的不同属性值以及解释
1 2 3 4 5 6 7 type=text,文本框 type=password,密码框 type=radio,单选框 type=checkbox,复选框 type=file,文件上传 type=email,邮箱 type=date,日期
4 写出js通过id获得dom对象的语句
1 document.getElementById("id")
5 写出js代码:获得input的值
6 写出几个表单事件
1 2 3 4 获得焦点 onfocus 失去焦点 onblur 内容改变 onchange 表单提交 onsubmit
7 form
1 2 3 4 5 6 7 8 9 10 11 action,表单数据提交到后台的路径 ----- 课下,再写一个注册表单,form写上路径,点击提交,观察浏览器路径 demo1.html?username=admin&password=123456&sex=男&skill=Java&skill=HTML&birthday=2022-01-01 ----- 以上路径,发现?前面是服务器路径 ?后面是表单提交的数据,key=value key是表达标签(input,select)要设置name属性 https://www.baidu.com/s?ie=UTF-8&wd=java
8 哪些HTML标签,CSS样式,JS能发出请求?
1 2 3 4 5 6 7 8 9 10 11 12 总结: HTML标签内,有src或者href属性都可以发请求 <a href="路径"> <link href="路径"> <img src="路径"> <form action="路径"> <iframe src="路径"> css中,关于引入图片的属性,也会发请求 background-image:url(路径) js中 window.location.href = "路径"
1 本周安排
周一 JQuery
周二 JQuery
周三 MySQL
周四 MySQL
周五 MySQL
2 JQuery介绍
JQuery是JS的类库,是js的框架,将原来的JS的操作封装,让js操作DOM,BOM等更加方便简洁.优化HTML 文档操作、事件处理、动画设计和AJAX交互。
1 jQuery设计的宗旨是“Write Less，Do More”，即倡导写更少的代码，做更多的事情。
jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等
自己总结,jq是什么,用来干什么
3 JQuery引入
1 JQuery是JS的框架,是第三方技术,是需要在项目中引入JQuery类库
2 在HTML页面中引入JQuery类库
3 以后,就可以在页面中写JQuery代码
3.1 项目中引入JQuery类库
项目中引入js类库,一般都会新建一个文件夹js
一个完整的前端项目目录结构
-项目名
–css
–js
–images
3.2 页面中引入
3.3 使用JQuery 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <body > <button id ="btn" > 点我,使用JQ绑定事件,弹框</button > <script src ="./js/jquery-2.1.0.js" > </script > <script > $("#btn" ).click (function ( alert ("jquery弹框" ); }); </script > </body >
4 JQuery的语法
现在主要学习JQuery的语法是
其他的JS语法,在JQuery是通用的,例如
变量
数据类型
引用类型(JSON,数组,日期,数学等)
运算符
分支选择
循环
4.1 选择器
选择器有很多种,具体查询APIjQuery 参考手册 - 选择器 (w3school.com.cn)
主要学习几个基本即可
标签名选择器
1 2 3 4 5 6 7 8 9 10 11 12 <body > <div > 曹操</div > <div > 曹植</div > <div > 曹丕</div > <span > 曹冲</span > <script src ="./js/jquery-2.1.0.js" > </script > <script > var divArr = $("div" ); console .log (divArr); </script > </body >
id选择器
1 2 3 4 5 6 7 8 9 10 11 12 13 14 <body > <div id ="d1" > 曹操</div > <div id ="d2" > 曹植</div > <div id ="d3" > 曹丕</div > <span id ="d4" > 曹冲</span > <script src ="./js/jquery-2.1.0.js" > </script > <script > var div1 = $("#d1" ); console .log (div1); </script > </body >
类选择器
1 2 3 4 5 6 7 8 9 10 11 12 13 <body > <div id ="d1" > 曹操</div > <div id ="d2" class ="son" > 曹植</div > <div id ="d3" class ="son" > 曹丕</div > <span id ="d4" class ="son" > 曹冲</span > <script src ="./js/jquery-2.1.0.js" > </script > <script > var sonArr = $(".son" ); console .log (sonArr); </script > </body >
其他选择器,笔记中不再记,代码演示一下…
4.2 事件
事件就是发生在浏览器上的事情,键盘事件,鼠标,表单事件,加载事件等
现在这些事件与JS中事件是一样,只不过是代码变成了JQuery的语法格式
事件的写法不一样,与原来HTML事件中少了on
JQuery事件
HTML事件
focus
onfocus
click
onclick
…
…
绑定方式
4.2.1 点击双击 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <body > <button id ="btn-1" > 点单击事件</button > <button id ="btn-2" > 点双击击事件</button > <script src ="./js/jquery-2.1.0.js" > </script > <script > var count = 0 ; $("#btn-1" ).click (function ( count++; console .log ("单击:" + count); }); $("#btn-2" ).dblclick (function ( console .log ("双击" ); }); </script > </body >
4.2.2 鼠标事件 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 <body > <div id ="box" style ="width: 200px; height: 200px; border: 2px red solid" > </div > <script src ="./js/jquery-2.1.0.js" > </script > <script > var count = 0 ; $("#box" ).mouseover (function ( console .log ("鼠标进入" ); }).mouseout (function ( console .log ("鼠标离开" ); }).mousemove (function ( console .log ("鼠标移动" ); }); </script > </body >
4.2.3 键盘事件
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 <body > <input id ="input-1" /> <script src ="./js/jquery-2.1.0.js" > </script > <script > $("#input-1" ) .keydown ((event ) => { console .log ("键盘按下" ); if (event.keyCode == 13 ) { console .log ("按下回车,提交表单" ); } }) .keyup (() => { console .log ("键盘弹起" ); }) .keypress (function ( console .log ("键盘按压" ); }); </script > </body >
4.2.4 表单事件
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 <body > <form accept ="/java2217" > 用户名<input type ="text" name ="username" /> <br /> 密码<input type ="password" name ="password" /> <br /> 技能<input type ="checkbox" name ="skill" value ="Java" /> Java <input type ="checkbox" name ="skill" value ="HTML" /> HTML <input type ="checkbox" name ="skill" value ="MySQL" /> MySQL <br /> <input type ="submit" value ="提交" /> </form > <script src ="./js/jquery-2.1.0.js" > </script > <script > $("input[type=text]" ) .focus (() => { console .log ("用户名输入框获得焦点" ); }) .blur (() => { console .log ("用户名输入框失去焦点" ); }); $("input[type=checkbox]" ).change (() => { console .log ("内容改变" ); }); $("form:first" ).submit (function ( console .log ("提交了" ); return true ; }); </script > </body >
4.2.5 加载事件
加载事件,当页面加载完再触发的事件
js时加载事件是onload
在jquery中ready来加载事件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <html lang ="en" > <head > <script src ="./js/jquery-2.1.0.js" > </script > <script > $(document ).ready (function ( $("#btn" ).click (() => { console .log ("点击" ); }); }); $(function ( $("#btn" ).click (() => { console .log ("点击222" ); }); }); </script > </head > <body > <button id ="btn" > 按钮</button > </body >
5 DOM操作 5.1 获取设置标签内容
js中
jQuery中
html(内容)
text(内容)
val(内容)
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 <body > <div id ="div-1" > <span > 获得设置标签内容</span > </div > <button id ="btn-1" > 点击获得div中html</button > <button id ="btn-2" > 点击获得div中text</button > <hr /> <button id ="btn-3" > 点击设置div中html</button > <button id ="btn-4" > 点击设置div中text</button > <hr /> <input id ="input-1" /> <button id ="btn-5" > 点击获得input中的value</button > <button id ="btn-6" > 点击设置input中的value</button > <script src ="./js/jquery-2.1.0.js" > </script > <script > $("#btn-1" ).click (() => { console .log ($("#div-1" ).html ()); }); $("#btn-2" ).click (() => { console .log ($("#div-1" ).text ()); }); $("#btn-3" ).click (() => { $("#div-1" ).html ("<p style='color:red'>这是重新设置的内容</p>" ); }); $("#btn-4" ).click (() => { $("#div-1" ).text ("<p style='color:red'>这是重新设置的内容</p>" ); }); $("#btn-5" ).click (() => { console .log ($("#input-1" ).val ()); }); $("#btn-6" ).click (() => { $("#input-1" ).val ("黑发不知勤学早,白首方悔读书迟." ); }); </script > </body >
5.2 获取设置标签属性
属性(attribute)操作
attr(name) 获得指定名字的属性
attr(name,value) 给指定属性设置值
attr(properties) 给多个属性设置值
properties其实是json对象
大括号key:value,key:value大括号
removeAttr(name) 移除指定属性的值
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 <body > <input id ="input-1" type ="text" /> <button id ="btn-1" > 获得type的属性值</button > <button id ="btn-2" > 设置type的属性值password</button > <button id ="btn-3" > 设置type的多个属性值</button > <button id ="btn-4" > 移除属性</button > <script src ="./js/jquery-2.1.0.js" > </script > <script > $("#btn-1" ).click (function ( console .log ($("#input-1" ).attr ("type" )); }); $("#btn-2" ).click (function ( $("#input-1" ).attr ("type" , "password" ); }); $("#btn-3" ).click (function ( $("#input-1" ).attr ({ type : "password" , value : "111111" }); }); $("#btn-4" ).click (function ( $("#input-1" ).removeAttr ("type" ); }); </script > </body >
5.3 获取设置标签样式
JQuery操作样式有两种方案
给标签设置class类
给标签的style设置css属性
5.3.1 设置class类
通过给标签设置/删除class类来改变样式
addClass(class)
removeClass(class)
toggleClass(class)
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 <head > <title > 获得设置class类</title > <style > .box1 { width : 100px ; height : 100px ; background-color : red; } .box2 { width : 200px ; height : 200px ; background-color : green; } </style > </head > <body > <div id ="box" class ="box1" > 块</div > <button id ="btn-1" > 设置box2样式类</button > <button id ="btn-2" > 移除box2样式类</button > <button id ="btn-3" > 切换样式</button > <script src ="./js/jquery-2.1.0.js" > </script > <script > $("#btn-1" ).click (() => { $("#box" ).addClass ("box2" ); }); $("#btn-2" ).click (() => { $("#box" ).removeClass ("box2" ); }); $("#btn-3" ).click (() => { $("#box" ).toggleClass ("box2" ); }); </script > </body >
5.3.2 设置获得css属性
设置获得css属性
css(属性) 获得指定css属性值
css(属性,值) 设置指定属性和值
css(properties)
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 <body > <div id ="box" style ="background-color: red" > 块</div > <button id ="btn-1" > 点击获得属性</button > <button id ="btn-2" > 点击设置1个属性</button > <button id ="btn-3" > 点击设置多个属性</button > <script src ="./js/jquery-2.1.0.js" > </script > <script > $("#btn-1" ).click (() => { console .log ($("#box" ).css ("background-color" )); }); $("#btn-2" ).click (() => { $("#box" ).css ("background-color" , "green" ); }); $("#btn-3" ).click (() => { $("#box" ).css ({ backgroundColor : "yellow" , width : "200px" , height : "200px" , }); }); </script > </body >
补充 1 2 3 4 5 6 7 8 9 10 11 <body > 性别 <input type ="radio" name ="sex" value ="1" /> 男 <input type ="radio" name ="sex" value ="2" checked /> 女 <hr /> <input type ="checkbox" name ="skill" value ="java" checked /> java <input type ="checkbox" name ="skill" value ="html" checked /> html <input type ="checkbox" name ="skill" value ="mysql" /> mysql </body >
day8 今日内容
0 复习昨日
0 复习昨日
1 css引入的三种方式
css直接写在标签中
在html页面中使用style标签内写css
创建单独的css文件
2 js引入的三种方式
js代码直接写在标签里面
js代码放在页面中script标签中
创建单独js文件
3 jquery是啥,干啥的
4 jquery的三种基本选择器$("#id")$(".class")$("element")
5 jquery获得输入框的值
1 作业 2 JS和JQuery的互相转换
JS操作是原生js操作,都是对象.属性操作
1 2 3 4 var ele = document .getElementById (id);var val = ele.value ;ele.value = "" ; ele.style = "" ;
JQuery是封装js操作,全是函数操作
1 2 3 $("#id" ).val (); $("#id" ).val ("值" ); $("#id" ).css ("color" ,"red" );
JS和JQuery是不同的
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <body > <button id ="btn" > 按钮</button > <script src ="./js/jquery-2.1.0.js" > </script > <script > var jsBtn = document .getElementById ("btn" ); console .log (jsBtn); var jqBtn = $("#btn" ); console .log (jqBtn); </script > </body >
2.1 将JQuery对象转换成JS对象 1 2 3 var jsObj = jqBtn[0 ];console .log (jsObj);
2.2 将JS对象转成JQuery对象 1 2 3 var jqObj = $(jsObj);console .log (jqObj);
3 DOM 3.1 追加元素
内部追加,追加的元素变成子元素
append 追加,元素内部后面追加
prepend 追加,元素内部前面追加
外部追加,追加的元素变成了兄弟元素
after 追加,元素外部后面追加
before 追加,元素外部全面追加
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 <body > <div id ="box" style ="width: 500px; height: 300px; border: 2px red solid" > <div id ="box-1" style ="width: 100px; height: 100px; background-color: green" > </div > </div > <button id ="btn-1" > 元素内部后面追加</button > <button id ="btn-2" > 元素内部前面追加</button > <button id ="btn-3" > 元素外部后面追加</button > <button id ="btn-4" > 元素外部前面追加</button > <script src ="./js/jquery-2.1.0.js" > </script > <script > $("#btn-1" ).click (() => { $("#box" ).append ( "<div style='width: 100px; height: 100px; background-color: yellow'></div>" ); }); $("#btn-2" ).click (() => { $("#box" ).prepend ( "<div style='width: 100px; height: 100px; background-color: blue'></div>" ); }); $("#btn-3" ).click (() => { $("#box" ).after ( "<div style='width: 100px; height: 100px; background-color: pink'></div>" ); }); $("#btn-4" ).click (() => { $("#box" ).before ( "<div style='width: 100px; height: 100px; background-color: purple'></div>" ); }); </script > </body >
3.2 删除元素
删除元素
empty() 删除子元素及内容,保留自己
remove() 删除全部元素,包括自己
remove(选择器) 删除指定选择器选到的元素
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 <body > <div id ="box" style ="width: 500px; height: 300px; border: 2px red solid" > <div id ="box-1" style ="width: 100px; height: 100px; background-color: green" > </div > </div > <button id ="btn-1" > 元素内部后面追加</button > <button id ="btn-2" > 元素内部前面追加</button > <button id ="btn-3" > 元素外部后面追加</button > <button id ="btn-4" > 元素外部前面追加</button > <button id ="btn-5" > empty删除元素,删除子元素</button > <button id ="btn-6" > remove删除元素,删除所有元素</button > <button id ="btn-7" > remove(选择器)删除元素,删除指定元素</button > <script src ="./js/jquery-2.1.0.js" > </script > <script > $("#btn-1" ).click (() => { $("#box" ).append ( "<div style='width: 100px; height: 100px; background-color: yellow'></div>" ); }); $("#btn-2" ).click (() => { $("#box" ).prepend ( "<div style='width: 100px; height: 100px; background-color: blue'></div>" ); }); $("#btn-3" ).click (() => { $("#box" ).after ( "<div style='width: 100px; height: 100px; background-color: pink'></div>" ); }); $("#btn-4" ).click (() => { $("#box" ).before ( "<div style='width: 100px; height: 100px; background-color: purple'></div>" ); }); $("#btn-5" ).click (() => { $("#box" ).empty (); }); $("#btn-6" ).click (() => { $("#box" ).remove (); }); $("#btn-7" ).click (() => { $("div" ).remove ("#box-1" ); }); </script > </body >
4 效果 4.1 隐藏显示
show 无动画直接显示
show(speed,[callback]) 以指定速度完成显示,动作完成会触发回调函数
三种预定速度之一的字符串(“slow”, “normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
hide 无动画直接隐藏
hide(speed,[callback]) 以指定速度完成隐藏,动作完成会触发回调函数
速度的写法
三种预定速度之一的字符串(“slow”, “normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
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 <body > <div id ="box-1" style ="width: 200px; height: 200px; background-color: red" > </div > <button id ="btn-1" > 无动画直接隐藏</button > <button id ="btn-2" > 有动画隐藏</button > <button id ="btn-3" > 无动画直接显示</button > <button id ="btn-4" > 有动画显示</button > <script src ="./js/jquery-2.1.0.js" > </script > <script > $("#btn-1" ).click (() => { $("#box-1" ).hide (); }); $("#btn-2" ).click (() => { $("#box-1" ).hide (3000 , () => { alert ("动作完成!" ); }); }); $("#btn-3" ).click (() => { $("#box-1" ).show (); }); $("#btn-4" ).click (() => { $("#box-1" ).show (3000 ); }); </script > </body >
4.2 淡入淡出
fadeIn(speed,[callback]) 淡入
fadeOut(speed,[callback]) 淡出
fadeTo(speed,opacity,[callback]) 淡入/淡出到指定透明度
opacity 不透明,参数是数字,值是0-1之间
0是完全透明 1是完全不透明
fadeToggle(speed,[callback]) 淡入/淡出效果切换
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 <body > <div id ="box-1" style ="width: 200px; height: 200px; background-color: red" > </div > <button id ="btn-1" > 淡入-显示</button > <button id ="btn-2" > 淡出-隐藏</button > <button id ="btn-3" > 淡入/淡出到指定程度</button > <button id ="btn-4" > 淡入/淡出切换</button > <script src ="./js/jquery-2.1.0.js" > </script > <script > $("#btn-1" ).click (() => { $("#box-1" ).fadeIn (2000 ); }); $("#btn-2" ).click (() => { $("#box-1" ).fadeOut (2000 ); }); $("#btn-3" ).click (() => { $("#box-1" ).fadeTo (2000 , 0.33 ); }); $("#btn-4" ).click (() => { $("#box-1" ).fadeToggle (2000 ); }); </script > </body >
4.3 滑入滑出
slideDown(speed, [callback]) 从上至下滑入
slideUp(speed, [callback]) 从下至上滑出
slideToggle(speed, [callback]) 切换
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <body > <div id ="box-1" style ="width: 200px; height: 200px; background-color: red" > </div > <button id ="btn-1" > 滑入-显示</button > <button id ="btn-2" > 滑出-隐藏</button > <button id ="btn-3" > 滑入/滑出切换</button > <script src ="./js/jquery-2.1.0.js" > </script > <script > $("#btn-1" ).click (() => { $("#box-1" ).slideDown (2000 ); }); $("#btn-2" ).click (() => { $("#box-1" ).slideUp (2000 ); }); $("#btn-3" ).click (() => { $("#box-1" ).slideToggle (2000 ); }); </script > </body >
4.4 动画
animate(参数1,参数2,参数3)
参数1 样式集合,用json形式写
参数2 速度,用速度单词,或者使用时间,毫秒
参数3 回调函数
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 <body > <button id ="go" > Run</button > <div id ="block" > Hello!</div > <hr /> <button id ="left" > «</button > <button id ="right" > »</button > <button id ="change" > 变形</button > <div class ="block" style ="width: 100px; height: 100px; background-color: red" > </div > <script src ="./js/jquery-2.1.0.js" > </script > <script src ="./js/jquery.color.js" > </script > <script > $("#go" ).click (function ( $("#block" ).animate ( { width : "90%" , height : "100%" , fontSize : "10em" , borderWidth : 10 , }, 2000 ); }); $("#right" ).click (function ( $(".block" ).animate ({ marginLeft : "50px" }, "slow" ); }); $("#left" ).click (function ( $(".block" ).animate ({ marginLeft : "0px" }, "slow" ); }); $("#change" ).click (function ( $(".block" ).animate ( { backgroundColor : "green" , borderRadius : "50px" , marginLeft : "100px" , }, 2000 ); }); </script > </body >
5 JQuery筛选查找 5.1 过滤
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 <body > <div > <p > 第一段</p > <p > 第二段</p > <p class ="p3" > 第三段</p > <p > 第四段</p > </div > <button id ="btn-1" > eq(1)</button > <button id ="btn-2" > first</button > <button id ="btn-3" > last</button > <button id ="btn-4" > filter</button > <button id ="btn-5" > not</button > <script src ="./js/jquery-2.1.0.js" > </script > <script > $("#btn-1" ).click (function ( console .log ($("p" ).eq (1 ).text ()); }); $("#btn-2" ).click (function ( console .log ($("p" ).first ().text ()); }); $("#btn-3" ).click (function ( console .log ($("p" ).last ().text ()); }); $("#btn-4" ).click (function ( console .log ($("p" ).filter (".p3" ).text ()); }); $("#btn-5" ).click (function ( console .log ($("p" ).not (".p3" ).text ()); }); </script > </body >
5.2 查找
查找祖先
parent() 直接父级
parents() 查找所有祖先,包括到html根标签
parentsUntil(元素) 返回所有父级,直到指定元素停止
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 <!DOCTYPE html > <html lang ="en" > <head > <title > 查找</title > <style > div { border : 3px red solid; } </style > </head > <body > <button id ="btn-1" > 找直接祖先</button > <button id ="btn-2" > 找所有祖先</button > <button id ="btn-3" > 找所有祖先,直到body停</button > <div id ="box-1" style ="width: 700px; height: 700px" > box-1 <div id ="box-2" style ="width: 400px; height: 400px" > box-2 <div id ="box-3" style ="width: 100px; height: 100px" > box-3</div > <div id ="box-4" style ="width: 100px; height: 100px" > box-4</div > <div id ="box-5" style ="width: 100px; height: 100px" > box-5</div > </div > </div > <script src ="./js/jquery-2.1.0.js" > </script > <script > $("#btn-1" ).click (() => { $("#box-3" ).parent ().css ("border-color" , "yellow" ); }); $("#btn-2" ).click (() => { console .log ($("#box-3" ).parents ()); }); $("#btn-3" ).click (() => { console .log ($("#box-3" ).parentsUntil ("body" )); }); </script > </body > </html >
查找后代
children() 返回直接后代(子)
find(选择器) 返回所有后代,再跟进指定选择器过滤
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 <!DOCTYPE html > <html lang ="en" > <head > <title > 查找</title > <style > div { border : 3px red solid; } </style > </head > <body > <button id ="btn-4" > 找直接后代</button > <button id ="btn-5" > 找所有后代再过滤</button > <div id ="box-1" style ="width: 700px; height: 700px" > box-1 <div id ="box-2" style ="width: 400px; height: 400px" > box-2 <div id ="box-3" class ="sunzi" style ="width: 100px; height: 100px" > box-3 </div > <div id ="box-4" class ="sunzi" style ="width: 100px; height: 100px" > box-4 </div > <div id ="box-5" class ="sunzi" style ="width: 100px; height: 100px" > box-5 </div > </div > </div > <script src ="./js/jquery-2.1.0.js" > </script > <script > $("#btn-4" ).click (() => { $("#box-1" ).children ().css ("border-color" , "yellow" ); }); $("#btn-5" ).click (() => { $("#box-1" ).find (".sunzi" ).css ("border-color" , "yellow" ); }); </script > </body > </html >
查找兄弟
siblings() 所有兄弟
next() 下一个兄弟
prev() 上一个兄弟
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 <!DOCTYPE html > <html lang ="en" > <head > <title > 查找</title > <style > div { border : 3px red solid; } </style > </head > <body > <button id ="btn-1" > 找直接祖先</button > <button id ="btn-2" > 找所有祖先</button > <button id ="btn-3" > 找所有祖先,直到body停</button > <hr /> <button id ="btn-4" > 找直接后代</button > <button id ="btn-5" > 找所有后代再过滤</button > <hr /> <button id ="btn-6" > 找box-4所有兄弟</button > <button id ="btn-7" > 找box-4前一个兄弟</button > <button id ="btn-8" > 找box-4后一个兄弟</button > <div id ="box-1" style ="width: 700px; height: 700px" > box-1 <div id ="box-2" style ="width: 400px; height: 400px" > box-2 <div id ="box-3" class ="sunzi" style ="width: 100px; height: 100px" > box-3 </div > <div id ="box-4" class ="sunzi" style ="width: 100px; height: 100px" > box-4 </div > <div id ="box-5" class ="sunzi" style ="width: 100px; height: 100px" > box-5 </div > </div > </div > <script src ="./js/jquery-2.1.0.js" > </script > <script > $("#btn-6" ).click (() => { $("#box-4" ).siblings ().css ("border-color" , "green" ); }); $("#btn-7" ).click (() => { $("#box-4" ).prev ().css ("border-color" , "green" ); }); $("#btn-8" ).click (() => { $("#box-4" ).next ().css ("border-color" , "#007acc" ); }); </script > </body > </html >
6 Ajax
ajax 是异步JavaScript和XML(Asynchronous JavaScript and XML)
异步,页面中科院同时进行多个事情经典案例: 注册框,输入完用户名直接提示”已注册”
这就是异步,也就是局部刷新
使用ajax与服务器进行异步交互,向服务器发送数据,接收服务器发来的数据
PS: 因为现在还没有学习服务器,所以今天的AJAX讲基础的使用,后续学完servlet服务器技术,再来使用ajax
6.1 FastMock网站
这个网站是用来模拟一个服务器地址,这个服务器可以提供一些数据,等会儿使用ajax请求这个服务器的数据
1 https://www.fastmock.site/mock/5c9f6e1ec0552bd6a3f2a62cb823edc0/qiushiju/users
6.2 $.get
get请求一般用来从服务器获得数据,一般就是用来查询数据
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 <!DOCTYPE html > <html lang ="en" > <head > <meta charset ="UTF-8" /> <meta http-equiv ="X-UA-Compatible" content ="IE=edge" /> <meta name ="viewport" content ="width=device-width, initial-scale=1.0" /> <title > Document</title > </head > <body > <button id ="btn" > $.get --> go</button > <table border ="2" id ="tb-users" > <tr > <td > 编号</td > <td > 姓名</td > <td > 分数</td > <td > 班号</td > <td > 生日</td > <td > 组号</td > </tr > </table > <script src ="./js/jquery-2.1.0.js" > </script > <script > $("#btn" ).click (function ( $.get ("https://www.fastmock.site/mock/5c9f6e1ec0552bd6a3f2a62cb823edc0/qiushiju/users" , function (ret ) { alert ("发送请求成功!" ); console .log (ret); if (ret.status == 200 ) { var dataArr = ret.data ; for (var i = 0 ; i < dataArr.length ; i++) { var user = dataArr[i]; $("#tb-users" ).append ("<tr>" + "<td>" +user.sid +"</td>" + "<td>" +user.sname +"</td>" + "<td>" +user.score +"</td>" + "<td>" +user.cid +"</td>" + "<td>" +user.sbirthday +"</td>" + "<td>" +user.zid +"</td>" + "</tr>" ) } } } ); }); </script > </body > </html >
6.3 $.post(暂时不讲)
post一般是向服务器发送数据的,一般是用来添加
6.4 $.ajax
$.ajax 向服务器发送请求,这种写法很灵活,可以设置请求中的任何参数
7 作业
关于前端重点
HTML 会一些标签
CSS 会样式(盒子,定位)
原生js后续用的比较少
jquery是重点, 选择器,和dom操作,ajax
1 2 3 4 5 6 7 8 9 10 11 0 昨天没有全部完成，补全 0 重复一遍代码 1 jq实现图书管理 2 使用jq+正则完成表单校验 检验规则： • 帐号：不能为空，长度6~10之间，只能包含数字和字母 • 密码：不能为空，长度6~10 • 确认密码：要与密码一致 • 手机号：不能为空，满足手机号码规则 • 邮箱：不能为空，满足邮箱格式规则 3 预习mysql
day9 今日内容
0 复习昨日
0 复习昨日
1 什么是数据库(Database)? 用来组织,存储,管理数据的仓库
2 什么是数据库管理系统(Database Management System-DBMS)? 用来管理数据库的一个软件
3 数据库分类
关系型数据库,Oracle,Mysql,SqlServer,DB2
非关系数据库,Redis,ElasticSearch,MongoDB,HBase
4 SQL
5 DDL 数据定义
创建数据库 create database 库名
删除库 drop database 库名
创建表 …
删除表 drop table 表名
修改表列名 alter table 表名 change 旧列名 新列名 数据类型(长度);
添加表中一列 alter table 表名 add 列名 数据类型(长度);
删除表中一列 alter table 表名 drop 列名
6 DML 数据操作
1 DML
DML 数据操作语句
插入 insert
更新 update
删除 delete
1.1 更新
语法
1 2 3 4 update 表名 set 字段 = 值 [, 字段2 = 值2 , ... ] [where 字段 = 值];
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 update stu set score = 100 where sid = 2 ;update stu set score = 100 , birthday = '1970-01-01' where sid = 3 ;update stu set score = 100 where sid >= 5 ;update stu set score = 0 ;update stu set age = age + 2 where sname = '贝贝' ;update stu set age = age + 100 ;
1.2 删除
语法
1 2 delete from 表名; delete from 表名 where 字段 = 值;
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 delete from stu where sid = 8 ;delete from stu where sid >= 5 ;delete from stu;
1.3 delete和truncate的区别[面试问] 1 2 3 4 delete from stu;truncate table stu;
delete
truncate
语句类型
DML
DDL
原理
逐条删除数据
删除表结构和数据,重建表
空间
删除数据在内存中有删除后碎片
很干净,没有空间碎片
效率
慢
快
恢复
可以恢复
数据不能恢复
自增
不影响自增顺序
影响,从1开始
2 约束
约束,即限制,就是通过设置约束,可以限制对数据表数据的插入,删除,更新
约束设置的语法,大部分是
1 2 3 4 create table 表名(字段 数据类型(长度) 约束, 字段 数据类型(长度) 约束 );
2.1 数据类型
其实数据类型也是一种约束,例如设置id列为int类型,那就不能乱给id设置字符串或者日期等数据
2.2 主键约束
主键(primary key)约束非常重要,以后开发中基本上每张表都要有主键约束,作用是设置了主键约束的列,有以下效果
一般主键是给id设置的
设置主键方式有三种:
在建表时给列直接指定
在建表语句的最后指定某一列是主键
给以建好的表修改设置主键
Navicat界面操作
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 create table t1 ( id int (11 ) primary key, name varchar (20 ) ); insert into t1 (name) values ('aaa' );insert into t1 (id,name) values (1 ,'aaa' );insert into t1 (id,name) values (1 ,'aaa' );create table t2 ( id int (11 ), name varchar (20 ), age int , primary key(id) ); insert into t2(name,age) values ('cc' ,18 );insert into t2(id,name,age) values (1 ,'cc' ,18 );insert into t2(id,name,age) values (1 ,'cc' ,18 );create table t3( id int , name varchar (20 ) ); insert into t3(name) values ('cc' );alter table t3 add primary key (id);
2.3 自增约束
自增(auto_increment)约束,主要是配合主键使用,防止主键为空,重复
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 create table t4( id int (11 ) primary key auto_increment, name varchar (20 ) ); insert into t4(id,name) values (1 ,'aaa' );insert into t4(name) values ('bbb' );insert into t4(id,name) values (4 ,'ddd' );insert into t4(name) values ('eee' );delete from t4 where id = 5 ;insert into t4(name) values ('fff' );
2.4 唯一约束
唯一(unique)约束,设置了唯一约束的列,的值不能重复
1 2 3 4 5 6 7 8 create table t5( id int , name varchar (20 ) unique ); insert into t5(name) values ('aa' );insert into t5(name) values ('aa' );
2.5 非空约束
非空(not null)约束,设置了非空约束的列的值不能为空
1 2 3 4 5 6 7 8 9 10 11 create table t6( id int , name varchar (20 ) not null ); insert into t6 (id) values (1 );insert into t6 (id,name) values (1 ,'aaa' );insert into t6 (id,name) values (2 ,'aaa' );
2.6 默认值
默认值(default),给列设置默认值约束后,如果该列在插入数据时没有给值,就自动赋值默认值
1 2 3 4 5 6 7 create table t7 ( id int , sex char (1 ) default '男' ); insert into t7 (id) values (1 ); insert into t7 (id,sex) values (2 ,'女' );
2.7 外键约束
外键,是多表之间接的一种关联关系的一种限制.
语法
1 constraint 外键名 foreign key (当前表中的列名) references 表(主键);
设计订单表和商品表,订单表的数据要关联商品表数据
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 create table tb_goods( gid int primary key, gname varchar (20 ), descr varchar (20 ) ); create table tb_order( oid int primary key, order_time datetime, gid int , constraint fk_order_goods foreign key(gid) references tb_goods(gid) ); insert into tb_goods values (2 ,'键盘' ,'敲代码没有bug' );insert into tb_order values (1 ,'2022-11-11' ,1 );delete from tb_order where oid = 1 ;delete from tb_goods where gid = 2 ;delete from tb_goods where gid = 1 ;
RESTRICT：如果想要删除父表的记录时，而在子表中有关联该父表的记录， 则不允许删除父表中的记录；
NO ACTION：同 RESTRICT，也是首先先检查外键；
CASCADE：父表 delete、update 的时候，子表会 delete、update 掉关联记录；
SET NULL：父表 delete、update 的时候，子表会将关联记录的外键字段所在 列设为 null，所以注意在设计子表时外键不能设为 not null；
2.8 练习 自己创建表,设计字段,把所有约束都试一遍
3 DQL
DQL 主要指查询语句,有查询单表数据,也有查多表数据表,今天主要学习单表查询
基本查询
条件查询
模糊查询
排序查询
聚合查询
去重查询
分组查询
限制查询
3.1 数据准备
将发的stu.sql导入到Navicat中
3.2 基本查询
select 字段1,字段2,… from 表名;
查询返回的是一张虚拟表,查询对原表数据没有任何影响,默认查询的全表数据
1 2 3 4 5 6 7 select sid,sname,age,sex,score,cid groupLeaderId from stu;select * from stu;select sid,sname,sex from stu;
3.3 条件查询
条件查询就是在基础查询基础上,再给sql设置条件,只查询部分符合条件的数据
条件语句 : select 字段1,字段2,… from 表名 where 字段 条件 值;
条件运算符
=
><
>=<=
!=
and
or
in
not in
between..and
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 select * from stu where sid = 1001 ;select sid,sname,score from stu where score > 60 ;select * from stu where sex = '女' and age < 50 ;select * from stu where sid = 1001 or sname = '李四' ;select * from stu where sid = 1001 or sid = 1002 or sid = 1003 ;select * from stu where sid in (1001 ,1002 ,1003 );select * from stu where sid >= 1001 and sid <= 1003 ;select * from stu where sid not in (1001 ,1002 ,1003 );select * from stu where sid != 1001 and sid != 1002 and sid != 1003 ;select * from stu where age >= 20 and age <= 40 ;select * from stu where age between 20 and 40 ;select * from stu where sex != '男' ;select * from stu where sex = '女' ;
3.4 模糊查询
模糊查询其实也是条件查询
语法: select 字段1,字段2,… from 表名 where 字段 like '_值%';
1 2 3 4 5 6 7 select * from stu where sname like '张_' ;select * from stu where sname like '张__' ;select * from stu where sname like '张%' ;select * from stu where sname like '%三%' ;
3.5 排序查询
对查询后的数据按照指定字段以及指定规则排序
语法: select 字段1,字段2,… from 表名 order by 字段 [desc|asc];
排序查询写在最后
1 2 3 4 5 6 7 8 9 10 select * from stu order by age asc ;select * from stu order by age;select * from stu order by age desc ;select * from stu order by age asc , sid desc ;select sid,sname,score from stu where score > 60 order by score desc ;
3.6 聚合函数
将查询的结果,聚合运算得到一个结果值,语法特点
聚合运算完,结果只有一行数据其他字段不能和聚合函数同时查询,除非有分组查询
聚合函数分类
count(expr) 计算指定列的不为null的行数
max(expr) 计算指定列的最大值
min(expr) 计算指定列的最小值
avg(expr) 计算指定列的平均数,除以不为null的条数
sum(expr) 计算指定列的和 ,计算不为null的数据
函数中的expr,可以写列名,也可以写函数表达式
语法: select 聚合函数(字段) from 表名;
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 select count (sid),sname from stu;select count (score) from stu;select count (sid) from stu where score > 60 ;select sum (score) from stu;select avg (score) from stu;select sum (score)/ count (sid) from stu;select max (score),min (score) from stu;select max (score) as 最大值,min (score) as '最小值' from stu;select max (score) 最大值,min (score) '最小值' from stu;
3.7 去重函数
可以将某列数据去重查询,distinct,一般不单独使用,配合聚合函数使用
1 2 3 select count (distinct age) from stu;
3.8 分组查询
分组查询,就是将查询的数据分为几组.
语法: select 字段1,字段2,… from 表名 [where 字段 条件 值] group by 字段 having 字段 条件值;
group by 字段,根据指定字段分组
having 字段 值, 分组后再过滤
有个非常重要特点: SQL只要有分组,分成几组,查询结果就只有几行,所以一般配合聚合函数来使用
与聚合函数同时出现的列,必须出现在group by语句中
或者说group by后面的字段可以出现在select后
再或者说,sql语句中有group by,那么前面select后的字段,要么是group by字段,要么就是聚合函数
having和where都是过滤
where是分组前过滤,having是分组后过滤
where后不能使用聚合函数,having可以聚合函数
3.9 限制查询
就是将查询完的数据,可以限制展现条数
语法: limit n – 限制输出指定n条,从第一条开始
limit x,y – 限制输出,从x下标处输出y条,第一条的下标是0
常用于分页操作
1 2 3 select * from stu limit 3 ;select * from stu limit 3 ,2 ;
4 顺序 4.1 书写顺序 1 2 3 4 5 6 7 8 9 10 11 12 13 select * from 表名 where 条件 group by 字段 having 条件 order by limit x,y select cid,sum (score) from stuwhere sid >= 1002 group by cidhaving sum (score) > 100 order by sum (score) desc limit 1
4.2 执行顺序 1 2 3 4 5 6 7 from 获得全部数据where 过滤一部分数据group by 分组having 过滤分组后的数据select 查询展现数据,这里 有聚合的话在此时聚合order 排序limit 限制
day10 今日内容
0 复习昨日
0 复习昨日
1 主键约束特点
自增 auto_increment , 配合主键使用
唯一约束 unique
非空 not null
默认 default
外键 foreign key
2 写出CRUD(增删改查)的语法格式
3 查询sql的书写顺序
4 where和having的区别
5 sql的执行顺序
6 分组查询的特点
7 delete 和 truncate
delete
truncate
数据
能恢复
不能恢复
空间
删除有碎片,删除不彻底
删除没有碎片,比较彻底
原理
逐条删除
删除表,重建表
效率
慢
快
语言类型
数据操作语言DML
数据定义语言DDL
8 聚合函数
将某列的所有行聚合运算得到一个结果
count()
max() , min()
avg()
sum()
小技巧: 重装数据库
将mysql安装路径中的data文件夹备份,就可以安心重装,装好后,把原来data文件中的数据重新放到最新安装的数据库中就可以
1 多表联查 1.1 表之间的关系
表和表的关系有:
一对一 老公 –> 老婆 , 人 —> 身份证/户口本
一对多 皇帝 –> 妻妾 , 人 —> 房/车
多对多 订单 –> 商品
1.2 合并结果集
合并结果集,是将多表查询的结果纵向合并
语法:
1 2 3 select field1,field2 from t1union select field1,field2 from t2
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 create table tb_a( id int , name char (10 ), age int ); create table tb_b( id int , name char (10 ) ); select id,name from tb_aunion all select id,name from tb_b
1.3 连接查询【重要】
连接查询是将多张表数据连接在一起(横向)查询返回,
这个连接是多表的乘积,t1 * t2 , 这就是笛卡尔积
连接查询需要使用表之间的关联关系来过滤数据
连接查询分为以下几种
1.3.1 内连接
数据准备, class表是班级表,stu是学生表, 一个班级对应多个学生
两表的关联列是 学生表(stu)中的cid,引用了班级表(class)中的主键cid
语法:
1 select 字段列表 from 表1 inner join 表2 on 表1. 字段 = 表2. 字段
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 select * from stu inner join class on stu.cid = class.cid;select stu.sid,stu.sname,stu.score,stu.cid,class.cname from stu inner join class on stu.cid = class.cid;select s.sid,s.sname,s.score,s.cid,c.cname from stu sinner join class con s.cid = c.cid;select * from stu inner join class on stu.cid = class.cid;select * from stu s,class c where s.cid = c.cid;
练习
1 2 3 4 5 6 7 8 select * from class c,stu s where c.cid = s.cid and c.cid = 1 ;select * from stu s,class c where s.cid = c.cid and score > 60 ;select c.cid,c.cname,count (sid) from class c,stu s where c.cid = s.cidgroup by c.cid,c.cname
1.3.2 外连接
外连接又分为左外连接,右外连接
法:
1 select 字段列表 from 表1 left | right outer join 表2 on 表1. 字段 = 表2. 字段
内外连接有什么区别?
内连接只查询符合关联添加的数据
外连接会保留不符合条件的数据
1 2 3 4 5 6 7 8 9 10 11 12 13 select * from stu s left outer join class c on s.cid = c.cidselect * from stu s right outer join class c on s.cid = c.cidselect * from stu s left join class c on s.cid = c.cid
1.4 子查询【重要】
子查询(subquery)也叫嵌套查询
将sql语句当表,写在from后面
将sql语句当条件,写在where后面
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 select sid,sname,age from stu where sex = '男' select * from (select sid,sname,age from stu where sex = '男' ) t where t.age > 50 select age from stu where sid = 1001 select * from stu where age > (select age from stu where sid = 1001 )select * from stu where cid = (select cid from stu where sname = '张三' );select * from stuwhere score > (select max (score) from stu where cid = 3 )select * from stu where sid in (select groupLeaderId from stu group by groupLeaderId having count (sid) > 2 )SELECT t1.sid, t1.sname, t1.groupLeaderId, t2.sname FROM stu t1,( SELECT * FROM stu WHERE sid = ( SELECT groupLeaderId FROM stu WHERE sid = 1008 ) ) t2 WHERE t1.sid = 1008 select s.sid,s.sname,s.groupLeaderId,z.sname from stu s,stu z where s.groupLeaderId = z.sid and s.sid = 1008 查询每个学生成绩大于等于60 且成绩总和大于200 的班级编号以及成绩和并根据成绩和升序
2 函数 2.1 字符串函数 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 select charset('abc' ); select charset('abc' ) from dual; select concat('a' ,'1' ,'b' ,'2' ) from dual;select concat('a' ,'1' ,'b' ,'2' ),sid,sname from stu;select concat(sid,sname),sid,sname from stu;select concat('我叫' ,sname,',今年' ,age,'明年' ,age+ 1 ,'岁' ) from stu;select instr('java' ,'c' );select instr(sname,'三' ) from stu;select ucase('abc' ),lcase('abc' );select left ('java' ,2 )select left (sname,1 ) from stu; select length(sname),sname from stu;select length('abc' );select replace('java' ,'av' ,'AV' );select replace(sname,'三' ,'叁' ) from stu;select substring ('java' ,2 ); select substring ('java' ,2 ,2 ); select sname 姓名 ,left (sname,1 ) 姓,substring (sname,2 ) 名 from stu;insert into stu (sname) value ('java' );insert into stu (sname) value (substring ('java' ,2 ,2 ));update stu set sname = left ('史密斯' ,1 ) where sid = 1011
2.2 数学函数 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 select abs (-1 );select abs (1 );select ceiling (10.1 ),floor (10.1 );select format(1.12345 ,3 );select rand();insert into stu (sid) values (rand() * 1000 )select round(5.12645 ,2 );select truncate (5.12645 ,2 );
2.3 日期函数【重要】 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 select sysdate();select now();insert into t10 values (rand()* 1000 ,sysdate());select current_date (); select current_time (); select current_timestamp (); select addtime('17:19:10' ,'01:00:50' )select adddate('2000-01-30' ,interval 2 year );select date_add('2000-01-30' ,interval 2 month );select date_add('2000-01-30' ,interval 2 day );select date_sub('2000-01-30' ,interval 2 month );select datediff('2022-01-01' ,now())select year (now());select month (now());select day (now());select count (* ) from t10 where month (birthday) = month (now())
2.4 日期字符串转换函数【重要】 1 2 3 4 5 6 7 8 9 10 11 12 13 select date_format(now(),'%Y年%m月%d日' )select str_to_date('2022年11月18日' ,'%Y年%m月%d日' )insert into t10 (id,birthday) value (1 ,str_to_date('2020-01-01' ,'%Y-%m-%d' ))
2.5 流程函数【重要！！】 1 2 3 4 5 6 7 8 9 10 11 12 select sid,sname,score,case when score < 60 then '不及格' when score <= 70 then '及格' when score <= 80 then '中等' when score <= 90 then '良好' else '优秀' end as 等级from stu
