前端知识点
HTML:网页的股价 没有任何样式
css:给骨架添加各种样式
js:控制网页的动态效果
前端框架：BOOTSTRAP、JQuery、Vue
提前封装好了操作，只需要按照固定语法调用即可
HTTP协议
是什么
超文本传输协议 用来规定服务端和浏览器之间的数据交互格式
该协议可以不遵守，但自己的服务端就不能被浏览器正常访问，除非自己写个客户端给客户用
为什么要有
"""
1、浏览器朝服务端发送请求
2、服务端接收请求(请求百度)
3、服务端返回响应的响应(返回一个百度首页)
4、浏览器接收响应 更具特定的规则渲染界面给客户看
"""
浏览器可以充当多个服务端的客户端
百度 腾讯视频 优酷视频...
如何做到浏览器和多个客户端进行数据交互
1、浏览器牛逼，能自动识别不同服务端做不同处理
2、指定一个统一标准，如果想要写的服务端能够更客户端之间做正常的数据交互，那么必须要遵守一些规则
# 四大特性
1、基于请求响应
2、基于TCP/IP作用与应用层之上的协议
3、无状态
不保存用户的信息
eg:一个人来了一千次都记不住，每次都当他如初见
由于HTTP协议是无状态的，所以后续出现了一些专门用来将记录用户状态的技术
cokkie、session、token...
4、无/短链接
请求来一次我响应一次，之后我们两个就没有任何连接和关系了
(补丁)长连接：双方建立连接之后默认不断开 websocket
# 请求数据格式
请求首行(标识HTTP协议版本，当前请求方式)
请求头(一大堆k,v键值对)
\r\n(换行)
请求体(不是所有的请求方法都有，get没有post有，存放的是post请求提交的敏感数据)
# 响应数据格式
响应首行(标识HTTP协议版本，响应状态码)
响应头(一大堆k,v键值对)
\r\n(换行)
响应体(返回给浏览器展示给用户看的数据)
# 响应状态码
用一串简单的数据来标识一些复杂的状态或者描述性信息
1xx:服务端以及成功接收到了数据正在处理，我们可以继续提交额外的数据
2xx:服务端成功响应了你想要的数据(200 ok请求成功)
3xx:重定向(比如访问一个需要登录之后才能看的页面，会自动跳转到登录页面)
4xx:请求错误
404:请求资源不存在
403:当前请求不合法或者不符合访问资源的条件
5xx:服务器内部错误(500 服务器炸了。。)
# 请求方式
1、get请求
朝服务端要数据
eg:输入网址获取对应的内容
2、post请求
朝服务端提交数据
eg:用户登录 输入用户名和密码之后，提交到服务端后端做身份认证
# url:统一资源定位符(网址)
HTML
html前言
是什么
如果想要浏览器能够渲染出写的画面，那么必须遵循html语法
浏览器看到的页面，内部都是html代码
HTML就是书写网页的标准
"""
# 注释：注释就是代码之母
<!--单行注释-->
<!--
多行注释1
多行注释2
-->
由于HTML代码非常杂乱无章，所以我们习惯用注释划定区域方便后续查找
<!--导航条开始-->
导航条所有html代码
<!--导航条结束-->
HTML文档结构
<html>
<head></head>:head内的标签不是给用户看的，是定义一些配置给浏览器看
<body></body>:body内的标签，写什么浏览器就渲染什么，用户就能看到什么
<\html>
标签的分类
<h1></h1>
<a href="https://www.mzitu.com"></a>
<img/>
1、双标签
2、单标签(自闭和标签)
1、块级标签：独占一行
h1-h6 p div
1、块级标签可以修改长宽，行内标签不可以
2、块级标签内部可以嵌套容易的块级标签和行内标签
总结：
只要是块级标签都可以嵌套任意的块级标签和行内标签
但是p标签只能嵌套行内标签
2、行内标签：自身文本多大就占多大
i u s b span
行内标签不能嵌套块级标签，可以嵌套行内标签
head内常用标签
<title>Title</title> 网页标题
<style>
h1 {
color:greenyellow;
}
</style> 内部用来书写css代码
<script>
alert(123123)
</script> 内部用来书写js代码
<script src=""></script> 还可以引入外部js文件
<link rel="stylesheet" href="mycss.css"> 引入外部css文件
<meta http-equiv="refresh" content="2;URL=https://www.baidu.com"> 两秒后跳转百度
<meta name="keywords" content="Bilibili,哔哩哔哩,哔哩哔哩动画,哔哩哔哩弹幕网,弹幕视频,B站,弹幕"> 浏览器搜索的时候，只要输入了keywords后面指定的关键字，都可能被百度搜索出来展现给用户
<meta name="description" content="bilibili是国内知名的视频弹幕网站，这里有及时的动漫新番，活跃的ACG氛围，有创意的Up主。大家可以在这里找到许多欢乐。"> 网页的描述信息
body内常用标签
基本标签
<h1>我是h1</h1> #标题标签1-6级标题
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除线</s>
<p>段落标签</p>
<br> 换行
<hr> 水平分割线
特殊符号
空格
> 大于号
< 小于号
& &
¥ ￥
© © 版权
® ® 商标
常用标签
<div>div</div> 块级标签
div可以把他看成一块区域，可以用div来提前划定所有的区域，之后往该区域划定内容即可
<span>span</span> 行内标签
普通的文本先用span标签占位，之后可以再加样式
img标签
# 图片标签
<img src="" alt="" title="" height="" width="">
src:
1、图片的路径
2、url 自动朝url地址发送get请求
alt:
标识当图片加载不出来的时候给描述
title:
当鼠标悬浮到图片上的时候显示的提示
height="800px":
高度
width:
高度和宽度当只修改一个的时候，另一个参数会等比例缩放
如果修改了两个参数，没有考虑比例，图片就会失真
a标签
# 链接标签
<a href="" target="_self"></a>
href:
1、放url，用户点击则跳转
2、放其他a标签的id值，点击即可跳转到标签对应位置
target:
默认a标签是在当前页面完成跳转 _self
也可以修改为新建页面跳转 _blank
# a标签的锚点功能
eg: 点击一个文本标题，页面自动跳转到标题响应的内容
<a href="" id="d1">hello</a>
<h1 id="d2">asd</h1>
<a href="#d1">跳转到hello</a>
<a href="#d2">跳转到asd</a>
标签具有的两个重要属性
1、id值
类似于标签的身份证号，在同一个html页面上id值不能重复
2、class值
该值有点类似于面向对象里面的基础，一个标签可以继承多个class值
标签即可以有默认的书写也可以有自定义的书写
<p id="d1" class="c1" username="jason" password="123"></p>
列表标签
1、无序列表（较多）
<ul>
<li>第一项</li>
<li>第二项</li>
</ul>
虽然u1标签简陋，但是在页面布局的时候，只要排版一致的几行数据基本上都是lu套li
2、有序列表（了解）
<ol type="1" start="5">
<li>啊</li>
<li>吧</li>
<li>从</li>
</ol>
3、标题列表
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dt>标题2</dt>
<dd>内容2</dd>
<dt>标题3</dt>
<dd>内容3</dd>
</dl>
表格标签
<table>
<thead> 表头（字段信息）
<tr> 一个tr就表示一行
<th>username</th> 加粗文本
<td>username</td> 正常文本
</tr>
</thead>
<tbody> 表单（数据信息）
<tr>
<td>hongwei</td>
<td>123</td>
<td>read</td>
</tr>
<tr>
<td>egon</td>
<td>123</td>
<td>DBJ</td>
</tr>
</tbody>
</table>
<table border="1" > 加外边框
<td colspan="2">egon</td> 水平方向占多行
<td rowspan="2">DBJ</td> 竖直方向占多行
表单标签(重点)
有啥用？
获取前端用户数据（用户输入，用户选择，用户上传...）基于网络发送给后端服务器
# 写一个注册功能
<form action=""></form> 在form标签内部写的获取用户的数据都会被form标签提交到后端，我们写的数据都要在表单form里才能提交到后端
action：用来控制数据提交的后端路径(给那个服务端提交数据)
1、什么都不写，默认就是朝当前页面所在的url提交数据
2、写全路径：https://www.baidu.com
3、只写路径后缀action='/index/'
自动识别出当前服务端的ip和port拼接到前面
host:port/index/
一、input标签：
<label for="d1">username:<input type="text" id="d1"></label>
1、label：鼠标点击username，光标自动跳转到输入框
lebel 和 input都是行内标签，可以用p标签来换行
2、type 属性
1）text：普通文本
2）password：密文
3）date：日期
4）submit：默认为提交，可以通过加 value="注册"来更改
5）button：就是一个按钮，本身没有任何功能，学完js之后可以自定义各种功能
6）reset：充值内容
7）radio：单选
设置默认功能要加上checked="checked"
<input type="radio" name="gender" checked="checked">男
8）checkbox:多选
默认选中变量和变量名一样时可以简写
<input type="checkbox" checked>read
9）file: 获取文件
加multiple上传多个
<input type="file" multiple>
10）hidden：隐藏，可以隐藏输入框
<input type="hidden">
# 能够触发form表单提交数据的标签有那些
1、<input type="submit">
2、<button>点我</button>
# 所有获取用户输入的标签，都应该有name属性
name就属于字典的key
用户输入的数据就类似于字典的value
<p>gender:
<input type="radio" name="gender">男
<input type="radio" name="gender">女
<input type="radio" name="gender">其他
</p>
二、select标签： 默认是单选，可以加mutiple变多选，默认为selected
<p>province:
<select name="" id="">
<option value="">上海</option>
<option value="">北京</option>
<option value="" selected="selected">深圳</option>
</select>
</p>
<p>前女友：
<select name="" id="" multiple>
<option value="">葵司</option>
<option value="">明日花</option>
<option value="" selected>可怜</option>
</select>
</p>
三、textarea标签：获取大段文本
<textarea name="" id="" cols="30" rows="10"></textarea>
四、补充
# form表单默认提交数据的方式是get请求，数据是直接放在url后面的
https://127.0.0.1:5000/index/?username=sadasd&gender=on
# 还可以通过method指定提交方式，携带的数据是放在请求体里面的
<form action="http://127.0.0.1:5000/index/" method="post">
"""
form表单提交文件需要注意
1、method必须是post
2、enctype="multipart/form-data"
entype类似于数据提交的编码格式
默认是urlencoded 只能提交普通文本数据
formdata 就可以支持提交文件数据
"""
<form action="http://127.0.0.1:5000/index/" method="post" enctype="multipart/form-data">
# 补充
# 正对用户输入的标签，如果加了value 那就是默认值
<label for="d1">username:<input type="text" id="d1" value="默认值"></label>
disable 禁用
readonly 只读
验证form表单提交数据
# 接下来的框架代码，无须掌握，楼一眼就可以
pip3 install FLASK
# form表单默认提交数据的方式是get请求，数据是直接放在url后面的
https://127.0.0.1:5000/index/?username=sadasd&gender=on
# 还可以通过method指定提交方式，携带的数据是放在请求体里面的
<form action="http://127.0.0.1:5000/index/" method="post">
# 正对用户选择的标签，用户可以不需要输入内容，但前提是要为这些标签添加内容value值
<p>gender:
<input type="radio" name="gender" checked="checked" value="male">男
<input type="radio" name="gender" value="female">女
<input type="radio" name="gender" value="others">其他
</p>
"""
form表单提交文件需要注意
1、method必须是post
2、enctype="multipart/form-data"
entype类似于数据提交的编码格式
默认是urlencoded 只能提交普通文本数据
formdata 就可以支持提交文件数据
"""
<form action="http://127.0.0.1:5000/index/" method="post" enctype="multipart/form-data">
"""下面代码无须掌握"""
from flask import Flask, request
app = Flask(__name__)
# 当前url既可以支持get请求也可以支持post请求，如果不写默认只能支持get请求
@app.route('/index/',methods=['GET','POST'])
def index():
print(request.form) # 获取表单提交熬过来的非文件数据
print(request.files) # 获取文件数据
file_obj = request.files.get('myfile.png')
file_obj.save(file_obj.name)
return 'OK'
app.run
# 补充
# 正对用户输入的标签，如果加了value 那就是默认值
<label for="d1">username:<input type="text" id="d1" value="默认值"></label>
disable 禁用
readonly 只读
CSS
css前言
层叠样式表：就是给HTML标签添加样式的，让它变的更加好看
# 注释
/*单行注释*/
/*
多行注释1
多行注释2
*/
在写css样式的时候会用注释来划定区域
/*顶部导航样式*/
....
/*低部导航样式*/
....
# css的语法结构
选择器{
属性1:值1；
属性2:值2；
}
# css的三种引入方式
1、style标签内直接书写
<style>
h1 {
color: burlywood;
}
</style>
2、link标签引入外部css文件（最正规的方式，解耦合）
<link rel="stylesheet" href="2.css">
3、行内式(一般不用)
<h1 style="color: green">老板要上课吗</h1>
学习流程：
1、先学如何找到标签
2、之后在学如何添加样式
css选择器（查找标签）
基本选择器
# id选择器(常用)
<style>
/*id选择器*/
#d1 {/* 找到id是d1的标签，将文本颜色变为红色*/
color: red;
}
</style>
# 类选择器(常用)
<style>
.c1 { /*找到class值里包含c1的标签*/
color: red;
}
</style>
# 元素/标签选择器
<style>
span { /*找到所有span标签*/
color: red;
}
</style>
# 通用选择器
<style>
* { /*将html页面上所有的标签找到*/
color: red;
}
</style>
组合选择器
# 后代选择器
<style>
/*后代选择器*/
div span { /*div 内部所有span*/
color: red;
}
</style>
# 儿子选择器
<style>
/*儿子*/
div>span { /*内部第一层嵌套（儿子）*/
color: red;
}
</style>
# 毗邻选择器
<style>
/*毗邻*/
div+span { /*div 同级别紧挨着下面的第一个标签*/
color: red;
}
</style>
# 弟弟选择器
<style>
/*毗邻*/
div+span { /*div 同级别紧挨着下面的第一个span*/
color: red;
}
</style>
属性选择器
1、含有某个属性
<style>
[username] {/*将所有含有属性名是username的标签背景改为红色*/
color: red;
}
</style>
2、含有某个属性并且有某个值
<style>
[username='jason'] {/*将所有含有属性名是username并且值为jason的标签背景改为红色*/
color: red;
}
</style>
3、含有某个属性
<style>
input[username='jason'] {/*将所有含有属性名是username并且值为jason的input标签背景改为红色*/
color: red;
}
</style>
分组与嵌套
分组选择器
<style>
div,p,span{
color: red;
}
</style>
嵌套选择器
<style>
#d1 .c2 span{<!--d1里面的c2类，里面的span-->
color: red;
}
</style>
伪类选择器
<style>
a:link{ /*访问之前的状态*/
color: red;
}
a:hover{
color: aqua; /*鼠标悬浮态 需要记住*/
}
a:active{
color: black; /*鼠标点击不松开，激活态*/
}
a:visited{
color: darkgray; /*访问之后的状态*/
}
input:focus{ /*input框获取焦点(鼠标点了input框)*/
background-color: red;
}
</style>
伪元素选择器
<style>
p:first-letter{ /*开头第一个字*/
font-size: 48px;
color: orange;
}
p:before{/*在文本开头，用css添加内容*/
content: "啊实打实的";
color: green;
}
p:after{/*文本结尾，用css添加内容*/
content: '雨露均沾';
color: orange;
}
</style>
ps:before和after通常都是用来清除浮动带来的影响：父标签塌陷的问题
选择器优先级
1、id选择器
2、类选择器
3、标签选择器
4、行内式
<head>
<meta charset="UTF-8">
<style>
/*
1、选择器相同 书写顺序不同
就近原则，谁离标签最顶就听谁的
2、选择器不同
行内 > id选择器 > 类选择器> 标签选择器
精确度越高越有效
*/
#d1{
color: aqua;
}
.c1{
color: orange;
}
p{
color: red;
}
</style>
<!--<link rel="stylesheet" href="2.css">-->
</head>
<body>
<p id="d1" class="c1" style="color: blue">十大奇</p>
</body>
css属性相关
文字属性
设置长宽
<style>
p{
background-color: red;
height: 200px;
width: 400px;
}
span{
background-color: green;
height: 200px;
width: 400px;
/* 行内标签无法设置长宽 */
}
</style>
字体属性
<style>
p{
/*font-family: "Arial Black","微软雅黑"; 字体样式，第一个不生效第二个会生效*/
/*font-size: 24px; 字体大小*/
/*font-weight: inherit; bolder变粗，lighter变细 inherit继承父元素的粗细*/
/*color: red; 直接写颜色*/
/*color: #eeeeee; 颜色编号*/
/*color: rgb(123,23,45); 三基色数字，范围0-255*/
/*color: rgba(123,23,45,0.1); 基于上面的多了个透明度*/
}
</style>
文字属性
<style>
p{
/*text-align: center; 剧中*/
/*text-align: right; 右对其*/
/*text-align: left; 左对其*/
/*text-align: justify;两端对其*/
/*text-decoration: underline; 下划线*/
/*text-decoration: overline; 上划线*/
/*text-decoration: line-through; 删除线*/
/*text-decoration: none; 没有如何样式*/
/*font-size: 16px;*/
/*text-indent: 32px; 首行缩进32px*/
}
a{
/*text-decoration: none; 给a标签去掉自带的下划线*/
}
</style>
背景属性
<style>
div{
height: 600px;
width: 600px;
/*background-color: red; !*设置颜色*!*/
/*background-image: url("111.png"); !*默认全部要铺满*!*/
/*background-repeat: no-repeat; !*不平铺*!*/
/* 浏览器不是一个平面，是一个三维立体结构，z轴指向用户，越大离用户越近 */
/*background-repeat: repeat-x; !*x轴铺*!*/
/*background-repeat: repeat-y; !*y轴铺*!*/
/*background-position: center center; 剧中，第一个左，第二个上*/
/*如果出现了多个属性的前缀名一般可以简写，只写前缀*/
background: url("111.png") red no-repeat center;
}
</style>
边框
<style>
p{
background-color: red;
/*border-width: 5px; 宽度*/
/*border-style: solid; 边框样式*/
/*border-color: green; 边框颜色*/
}
div{
/*border-left-width: 5px; 左边*/
/*border-left-color: red;*/
/*border-left-style: dotted;*/
/*border-right-width: 5px; 上面*/
/*border-right-color: red;*/
/*border-right-style: dotted;*/
/*border-top-width: 5px; 右边*/
/*border-top-color: red;*/
/*border-top-style: dotted;*/
/*border-bottom-width: 5px; 下面*/
/*border-bottom-color: red;*/
/*border-bottom-style: dotted;*/
/*border: 3px solid yellow; 默认四周*/
}
#d2{
/*画园*/
height: 500px;
width: 500px;
background-color: red;
border-radius: 50%;
}
</style>
display
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
#d1{
/*display: none; 隐藏标签不展示到前端页面，并且原来的位置也不在占有*/
display: inline; /*将标签设置为行内标签的特点*/
}
#d2{
display: inline;
}
#c1{
display: block; /*将标签设置为块级标签的特点*/
}
#c2{
display: block;
}
#d1{
display: inline-block; /*既可以在一行显示又可以设置长宽*/
}
#d2{
display: inline-block;
}
</style>
</head>
<body>
<div style="display: none">div1</div>
<div>div2</div>
<div style="visibility:hidden ">单纯的隐藏位置还在</div>
<div>div4</div>
<div id="d1" style="height: 100px;width: 100px;background-color: red">01</div>
<div id="d2" style="height: 100px;width: 100px;background-color: yellow">02</div>
<span id="c1" style="height: 100px;width: 100px;background-color: red">span</span>
<span id="c2" style="height: 100px;width: 100px;background-color: yellow">span</span>
</body>
</html>
盒子模型
是什么？
就以快递盒为例
快递盒与快递盒之间的距离(标签与标签之间的距离 margin外边距)
盒子的厚度(标签的边框 border)
盒子里面的物体到盒子的距离(内容到边框的距离 padding内边距)
物体的大小(内容 content)
如果需要调整标签与标签之间的距离，就可以调整margin
浏览器body里面会自带8px的margin，所以一般情况下，我们在写页面的时候，上来就会把body的margin去除
margin:
<style>
body{
margin: 0; /*上下左右全是0*/
/*margin: 50px 60px; 第一个上下，第二个左右*/
/*margin: 10px 20px 30px; 第一个上 第二个左右 第三个下*/
/*margin: 10px 20px 30px 40px; 上 右 下 左*/
}
p{
margin-left: 0;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
}
</style>
padding:
<style>
p{
border: 3px solid red;
padding: 10px ;
/*padding: 10px 20px;*/
/*padding: 10px 20px 30px; */
/*padding: 10px 20px 30px 40px;*/
/*规律和margin一摸一样*/
}
</style>
浮动float
浮动的元素没有块儿级一说，本身多大浮起来就只能占多大
只要涉及到页面的布局，一般都是用浮动提前规划好
左右布局
body{
margin: 0;
}
#d1{
height: 1000px;
width: 20%;
background-color: #4e4e4e;
float: left; /*浮动 浮到空中往左飘*/
}
#d2{
width: 80%;
height: 2000px;
background-color: yellow;
float: right; /*浮动 浮到空中往右飘*/
}
解决浮动带来的影响
# 浮动带来的影响
会造成父标签塌陷
解决方法：
1、自己加一个div设置高度
2、利用clear属性
#d4{
/*height: 100px;*/
clear: left; /*该标签的左边(地面和空中)不能有浮动的元素*/
}
3、通用的解决浮动带来影响的方法
再写html之前先提前写好处理浮动带来影响的css代码
.clearfix:after{
content: ''; /*内容为空*/
display: block; /*将空的标签变为块级标签（独占一行）*/
clear: both; /*左右两侧都不能有浮动元素*/
}
之后只要标签出现了塌陷问题就给该塌陷的标签加一个clearfix属性即可
溢出属性
是什么？
当在dev固定范围内，数字太多则会溢出标签
解决方法：
p{
height: 100px;
width: 100px;
border: 3px solid red;
/*overflow: visible; !*默认就是可见，溢出还是展示*!*/
/*overflow: hidden; !*溢出部分直接隐藏*!*/
/*overflow: scroll; !*设置滚动条滚动查看*!*/
/*overflow: auto; !*自动*!*/
}
举个栗子(设置头像)：
<style>
#d1{
height: 200px;
width: 200px;
border-radius: 50%;
border: 5px solid white;
margin: 0 auto;
overflow: hidden;
}
#d1>img{
max-width: 100%;
/*占标签的100%比例*/
}
</style>
</head>
<body>
<div id="d1">
<img src="111.png" alt="">
</div>
定位
1、静态 static
所有标签默认都是静态的，无法改变位置
2、相对定位(了解) relative
相对于标签原来的位置做移动
#d1{
height: 100px;
width: 100px;
background-color: red;
left: 50px; /*从左往右 如果是负数则则相反*/
top: 50px; /*从上往下 如果是负数则则相反*/
/*position: static; !* 默认是static无法修改位置*!*/
/*position: relative; !*相对定位，标签由static变为relative它的性质就变成定位过的标签*!*/
}
3、绝对定位(常用)
相对于已经定位过的父标签做移动(如果没有父标签，就以body为参照)
eg:小米网站购物车
#d2{
height: 100px;
width: 200px;
background-color: red;
position: relative; /*已经定位过了，这样d3就可以做绝对定位*/
}
#d3{
height: 200px;
width: 400px;
background-color: yellow;
position: absolute;
left: 100px;
top: 200px;
}
4、固定定位(常用)
相对于浏览器窗口固定在某个位置
eg:右侧小广告
<style>
body{
margin: 0;
}
#d4{
position: fixed; /*固定定位，依据浏览器窗口定位*/
bottom: 10px;
right: 20px;
height: 50px;
width: 100px;
background-color: white;
border: 3px solid black;
}
</style>
</head>
<body>
<div style="height: 500px;background-color: red"></div>
<div style="height: 500px;background-color: greenyellow"></div>
<div style="height: 500px;background-color: blue"></div>
<div id="d4">回到顶部</div>
</body>
left
top
right
bottom
ps：浏览器是优先展示文本内容
验证浮动和定位是否脱离文档流
脱离文档流是什么？
原来的位置没有了，其他位置就会自动顶上来
浮动
相对定位
绝对定位
固定定位
不脱离文档流
1、相对定位
脱离文档流
1、浮动
2、绝对定位
3、固定定位
z-index模态框
eg:百度登录页面 三层结构
1、底部正常内容(z=0) 最远的
2、黑色透明区(z=99) 中间层
3、白色注册区域(z=100) 离用户最近
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0;
}
.cover {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.4);
z-index: 99;
}
.modal{
background-color: white;
height: 200px;
width: 400px;
position: fixed;
left: 50%;
top: 50%;
z-index: 100;
/*以上只是左顶点在中间的位置，整体上还没在中间，所以需要调整*/
margin-top: -100px; /*上移高的一半*/
margin-left: -200px; /*左移宽的一半*/
}
</style>
</head>
<body>
<div>最底层页面</div>
<div class="cover"></div>
<div class="modal">
<h1>登录页面</h1>
<p>username=<input type="text"></p>
<p>password=<input type="text"></p>
<button>点我点我</button>
</div>
</body>
</html>
透明度opacity
# 不但可以修改颜色透明度，还可以修改字体透明度
rgba只能影响颜色
而opacity可以影响颜色和字体
<style>
#d1{
background-color: rgba(0,0,0,0.5);
}
#d2{
/*background-color: rgba(0,0,0,5);*/
opacity: 0.5; /*字体透明度*/
}
</style>
</head>
<body>
<p id="d1">111</p>
<p id="d2">222</p>
</body>
简单博客园首页搭建
设计思路
先div划定区域，之后填写基本内容，最后再调节样式
HTML代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="blog.css">
</head>
<body>
<div class="blog-left">
<div class="blog-avatar">
<img src="333.PNG" alt="">
</div>
<div class="blog-title">
<p>老司机的博客</p>
</div>
<div class="blog-info">
<p>老司机车速太快，什么也没留下</p>
</div>
<div class="blog-link">
<ul>
<li><a href="">关于我</a></li>
<li><a href="">博客地址</a></li>
<li><a href="">微信公众号</a></li>
</ul>
</div>
<div class="blog-tag">
<ul>
<li><a href="">#Python</a></li>
<li><a href="">#HCIE</a></li>
<li><a href="">#linux</a></li>
</ul>
</div>
</div>
<div class="blog-right">
<div class="article">
<div class="article-title">
<span class="title">论开车的重要性</span>
<span class="date">2021/11/7</span>
</div>
<div class="article-body">
<p>jason老师从不开车，偶尔飙车</p>
</div>
<div class="article-bottom">
<span>#Python</span>
<span>#JavaScript</span>
</div>
</div>
<div class="article">
<div class="article-title">
<span class="title">论开车的重要性</span>
<span class="date">2021/11/7</span>
</div>
<div class="article-body">
<p>jason老师从不开车，偶尔飙车</p>
</div>
<div class="article-bottom">
<span>#Python</span>
<span>#JavaScript</span>
</div>
</div>
<div class="article">
<div class="article-title">
<span class="title">论开车的重要性</span>
<span class="date">2021/11/7</span>
</div>
<div class="article-body">
<p>jason老师从不开车，偶尔飙车</p>
</div>
<div class="article-bottom">
<span>#Python</span>
<span>#JavaScript</span>
</div>
</div>
<div class="article">
<div class="article-title">
<span class="title">论开车的重要性</span>
<span class="date">2021/11/7</span>
</div>
<div class="article-body">
<p>jason老师从不开车，偶尔飙车</p>
</div>
<div class="article-bottom">
<span>#Python</span>
<span>#JavaScript</span>
</div>
</div>
<div class="article">
<div class="article-title">
<span class="title">论开车的重要性</span>
<span class="date">2021/11/7</span>
</div>
<div class="article-body">
<p>jason老师从不开车，偶尔飙车</p>
</div>
<div class="article-bottom">
<span>#Python</span>
<span>#JavaScript</span>
</div>
</div>
<div class="article">
<div class="article-title">
<span class="title">论开车的重要性</span>
<span class="date">2021/11/7</span>
</div>
<div class="article-body">
<p>jason老师从不开车，偶尔飙车</p>
</div>
<div class="article-bottom">
<span>#Python</span>
<span>#JavaScript</span>
</div>
</div>
</div>
</body>
</html>
CSS代码：
/*这是博客园首页的样式文件*/
/*通用样式*/
body{
margin: 0;
background-color: #eeeeee;
}
a{
text-decoration: none;
}
ul{
list-style-type: none;
padding-left: 0;
}
/*左侧样式*/
.blog-left{
float: left;
width: 20%;
height: 100%;
position: fixed;
background-color: #4e4e4e;
}
/*头像样式*/
.blog-avatar{
height: 200px;
width: 200px;
border-radius: 50%;
border: 5px solid white ;
margin: 20px auto;
overflow: hidden;
}
.blog-avatar img{
max-width: 100%;
}
.blog-title,.blog-info{
color: darkgray;
font-size: 18px;
text-align: center;
/*据中*/
}
.blog-link,.blog-tag{
font-size: 24px;
}
.blog-link a,.blog-tag a{
color: darkgray;
}
.blog-link a:hover,.blog-tag a:hover{
color: white;
}
.blog-link ul,.blog-tag ul{
text-align: center;
margin-top: 100px;
}
/*右侧样式*/
.blog-right{
float: right;
width: 80%;
height: 1000px;
}
.article{
background-color: white;
margin: 20px 40px 10px 10px;
box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
}
.title{
font-size: 36px;
}
.date{
float: right;
margin: 20px;
font-weight: bolder;
}
.article-title{
border-left: 5px solid red;
text-indent: 1em;
}
.article-body{
font-size: 18px;
text-indent: 30px;
border-bottom: 1px solid black;
/*<hr>*/
}
.article-bottom{
padding: 20px;
}
JavaScript
javascript前言
1、js也是一门编程语言，也可以写后端代码
2、js和java一毛钱关系都没有，纯粹为了蹭java热度
3、ECMAScript和javascript的关系，前者是后者的规格，后者是前者的实现
js版本主要还是用5.1和6.0
# js的注释
//单行注释
/*
多行注释1
多行注释2
*/
# js两种引入方式
1、script标签内部直接书写js代码
2、script标签src属性引入外部js代码
# js语法结构
js是以分号作为语句的结束
没有分号也可以运行，但是它就相当于没有结束符
# JS学习流程
1、变量
2、数据类型
3、流程控制
4、函数
5、对象
6、内置方法/模块
变量
# 再js中首次定义一个变量名的时候需要用关键字声明
1、关键字var
var name='jason'
2、es6推出的新语法
let name='jason'
# var和let的区别
1、var再for循环里面定义也会影响到全局
2、let再局部定义只会再局部生效
# js变量的命名规范
1、变量只能是
数字 字母 下划线 $
2、变量名命名规范
1、js中推荐使用驼峰式命名
userName
dataOfDb
2、python推荐使用下划线的方式
user_name
3、不能用关键字作为变量名
常量
# python中没有真正意义上的常量，默认全大写就是表示常量
# js中是由真正意义上的常量的
const pi = 3.14
pi = 1 # 报错
数据类型
js/python是一门动态语言
name = '1'
name = 123
# name可以指向任意数据类型
# 但是一些语言中，变量名之内指向一种数据之后就不可更改
数值类型(number)
var a = 11;
var b = 11.11;
// 如何查看当前数据类型
typeof a;
//特殊的 NaN：数据类型，表示的意思"不是一个数字"
parseInt()
parseFloat()
字符类型(string)
var s = 'hw'
var s1 = "hw"
//模板字符串
var s3 = `
asdfasd
asfasd
asdasd
`
typeof s3
"string"
// 模板字符串除了定义多行文本之外还可以实现格式化字符串
// 书写${}会自动去前面找大括号里的变量名的值，没有则报错
var name = 'hongwei'
var age = 18
var ss = `
my name is ${name} and age is ${age}
`
//字符串的拼接
//再python中不推荐使用+做拼接 join
//再js中可以直接用 + 做拼接
name + age
字符类型常用方法
方法 说明
.length 返回长度
.trim() 移除空白
.trimLeft() 移除左边的空白
.trimRight() 移除右边的空白
.charAt(n) 返回第n个字符
.concat(value, ...) 拼接
.indexOf(substring, start) 子序列位置
.substring(from, to) 根据索引获取子序列
.slice(start, end) 切片
.toLowerCase() 小写
.toUpperCase() 大写
.split(delimiter, limit) 分割
布尔值
1、在python中布尔值首字母是大写的
True
False
2、在js中布尔值是全小写的
true
false
# 布尔值false的有哪些
空字符串、0、null、undefined、NaN
null和undefined
null
表示值为空，一般都是指定或者清空一个变量时使用
name = 'js'
name = null
undefined
表示声明了变量，但是没有做初始化操作（没有给值）
对象
数组
类似于python里面的列表[]
var 1 = [1,2,3,4,5]
typeof 1
.length 数组的大小
.push(ele) 尾部追加元素
.pop() 获取尾部的元素
.unshift(ele) 头部插入元素
.shift() 头部移除元素
.slice(start, end) 切片
.reverse() 反转
.join(seq) 将数组元素连接成字符串
.concat(val, ...) 连接数组
.sort() 排序
.forEach() 将数组的每个元素传递给回调函数
.splice() 删除元素，并向数组添加新元素。
.map() 返回一个数组元素调用函数处理后的值的新数组
运算符
++i 于 i++
前者相当于先加1在赋值，后者先赋值后加1
# 比较运算符
1 == '1' # 若等于，内部自动转换成相同的数据类型比较
true
1 === '1' # 强等于 内部不做类型转换
false
# 逻辑运算符
# python 中 and or not
# js 中 && || !
自定义对象
# 可以看成python中的字典，但是js中的自定义对象要比python黎曼的字典操作起来更加方便
# 创建自定义对象{}
第一种方式
var d = {'name':1,'asd':2}
d[name]
d.name
for (let i in d){
console.log(i,d[i])
}
第二种创建自定义对象的方法 需要使用关键字new
var d = new Object()
d.name = 'jasd' # 添加键值对
流程控制
# if 判断
var age = 10
if (条件){条件成立之后执行的代码块}
if (age>18){
console.log('来呀')
}
# if-else
if(age>18){
console.log('阿斯顿')
}else{
console.log('没钱滚蛋')
}
#if-else if else
if(age<18){
console.log('阿斯顿')
}else if(age >18){
console.log('小姐姐你好，我是你的粉丝')
}
else{
console.log('没钱滚蛋')
}
# switch语法
# 提前列出可能出现的条件和解决方式
var num = 2;
switch(num){
case 0:
console.log('喝酒')
break;
case 1:
console.log('吃肉')
break;
case 2:
console.log('唱歌')
break;
default:
console.log('条件都没有匹配上，默认走的流程')
}
# for循环
# 打印0-9数字
for (let i=0;i<10;i++){
console.log(i)
}
# 题目1:循环打印出数组里面的每一个元素
var l1 = [1,2,3,4,5,6]
for(let i=0;i<l1.length;i++){
console.log(l1[i])
};
# while循环
var i = 0
while(i<100){
console.log(i)
i++;
}
# 三元运算符
# python中的三元运算符 res = 1 if 1>2 else 3
# JS中的三元运算 res = 1>2?1:3
条件成立取后面的1，不成立取冒号后面的3
# 小括号里面是条件，大括号里面是代码块
函数
# 在python定义函数需要用到关键字def
# 在js中定义函数需要用到关键字 function
# 格式
function 函数名(形参1,形参2,形参3,...){函数体代码};
# 无参函数
function func1(){
console.log('hello world')
}
func1() # 调用加括号调用，和python一样的
# 有参函数
function func2(a,b){
console.log('a,b')
}
func2(1,2)
func2(1,2,3,4) #多了也没关系，只要对应数据
func2(1) #少了也没关系，
# 关键字arguments
function func(){
console.log(arguments) # 能够获取到函数接受到的所有参数
console.log('hello world')
}
function func(a,b){
if(argumens.length<2){
console.log('传少了')
}else if(arguments.length>2){
console.log('传多了')
}
console.log('asdasd')
}
# 函数的返回值 使用的也是关键字return
function index(){
return 1
}
function index(){
return 1,2,3 #返回多个只能拿到最后一个
return [1,2,3] #这样可以返回一个数组
}
res = index();
# js不支持解压赋值
# 匿名函数
function(){
console.log('asd')
}
var res = function(){
console.log('asd')
}
# 箭头函数,主要用来处理简单业务逻辑，类似于python匿名函数
var func1 = v => v; //箭头左边是形参，右边是返回值
等价于
var func1 = function(v){
return v
}
var func2 = (arg1,arg2) => arg1+arg2
等价于
var func1 = function(arg1,arg2){
return arg1+arg2
}
函数的全局变量与局部变量
# 和python查找变量的顺序一致
例1：
var city = "BeiJing";
function f() {
var city = "ShangHai";
function inner(){
var city = "ShenZhen";
console.log(city);
}
inner();
}
f(); //输出结果是？
例2：
var city = "BeiJing";
function Bar() {
console.log(city);
}
function f() {
var city = "ShangHai";
return Bar;
}
var ret = f();
ret(); // 打印结果是？
例3：
var city = "BeiJing";
function f(){
var city = "ShangHai";
function inner(){
console.log(city);
}
return inner;
}
var ret = f();
ret();
内置对象
时间对象
//方法1：不指定参数
var d1 = new Date();
console.log(d1.toLocaleString());
//方法2：参数为日期字符串
var d2 = new Date("2004/3/20 11:12");
console.log(d2.toLocaleString());
var d3 = new Date("04/03/20 11:12");
console.log(d3.toLocaleString());
//方法3：参数为毫秒数
var d3 = new Date(5000);
console.log(d3.toLocaleString());
console.log(d3.toUTCString());
//方法4：参数为年月日小时分钟秒毫秒
var d4 = new Date(2004,2,20,11,12,0,300);
console.log(d4.toLocaleString()); //毫秒并不直接显示
var d = new Date();
//getDate() 获取日
//getDay () 获取星期
//getMonth () 获取月（0-11）
//getFullYear () 获取完整年份
//getYear () 获取年
//getHours () 获取小时
//getMinutes () 获取分钟
//getSeconds () 获取秒
//getMilliseconds () 获取毫秒
//getTime () 返回累计毫秒数(从1970/1/1午夜)
正则对象
# 在python中如果需要使用正则，需要借助于re模块
在js中需要创建正则对象
// 定义正则表达式两种方式
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}");
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/;
// 正则校验数据
reg1.test('jason666')
reg2.test('jason666')
/*第一个注意事项，正则表达式中不能有空格*/
// 全局匹配
var s1 = 'egondsb dsb dsb';
s1.match(/s/)
s1.match(/s/g)
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/g
reg2.test('egondsb');
reg2.test('egondsb');
reg2.lastIndex;
/*第二个注意事项，全局匹配时有一个lastIndex属性*/
// 校验时不传参数
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/
reg2.test();
reg2.test(undefined);
var reg3 = /undefined/;
reg3.test();
RegExp
对象JSON
什么是序列化
序列化可以跨语言传输数据
在python中序列化反序列化
dumps 序列化
loads 反序列化
在js中也有序列化和反序列化
JSON.stringify() 序列化
JSON.parse() 反序列化
var str1 = '{"name": "Alex", "age": 18}';
var obj1 = {"name": "Alex", "age": 18};
// JSON字符串转换成对象
var obj = JSON.parse(str1);
// 对象转换成JSON字符串
var str = JSON.stringify(obj1);
BOM和DOM
截至目前为止，我们虽然以及学会了js语法，但是浏览器和html文件还是一点关系都没有
BOM
浏览器对象模型 Browmer Object Model
js代码操作浏览器
DOM
文档对象模型 Document Object Model
js代码操作标签
BOM操作
# windows对象
windows对象指代的就是浏览器窗口
window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度
window.open('https://www.baidu.com','','height=400px,width=400px','top=100px','left=400px') - 打开新窗口
window.close() - 关闭当前窗口
# 新建窗口打开页面，第二个参数写空即可，第三个参数写新建的窗口大小和位置
window子对象
1、navigator对象（了解即可）
navigator.appName // Web浏览器全称
navigator.appVersion // Web浏览器厂商和版本的详细字符串
navigator.userAgent // 客户端绝大部分信息，用来表示当前是否是一个浏览器
navigator.platform // 浏览器运行所在的操作系统
扩展：防爬措施
1、校验当前请求的发起者是否是一个浏览器
是否有useragent参数
2、如何破解该措施
在代码中加上user-agent配置即可
2、history对象
history.forward() // 前进一页
history.back() // 后退一页
3、location对象(掌握)
location.href 获取URL
location.href="URL" // 跳转到指定页面
location.reload() 重新加载页面
弹出框
警告框
alert("你看到了吗？");
确认框（了解即可）
confirm("你确定吗？")
提示框（了解即可）
prompt("请在下方输入","你的答案")
计时器相关
1、过一段时间之后触发
2、每隔一段时间触发一次
<script>
// function func1(){
// alert(123)
// }
// let t = setTimeout(func1,3000) //毫秒为单位 3秒之后自动执行func1函数
// clearTimeout(t) //取消定时任务，如果想要清楚定时任务，需要用变量来指代定时任务2
// function func2(){
// alert(123)
// }
// function show(){
// let t = setInterval(func2,3000) //毫秒为单位，每隔三秒执行函数
// function inner(){
// clearTimeout(t) //清楚定时器
// }
// setTimeout(inner,9000) //9秒之后触发inner函数
// }
// show() //弹三次就永远不弹了
</script>
DOM操作
dom数的概念
所有标签都可以称之为是节点
JS可以通过DOM创建动态的HEML
JS能修改页面中所有HTML元素
JS能修改页面中所有的HTML属性
JS能修改页面中所有css样式
JS能对页面中所有时间做出反应
DOM操作操作的是标签，而一个HTML页面上的标签有很多
1、先学如何查找标签
2、在学DOM操作标签
DOM操作需要用关键字document起手
查找标签
1、直接查找
1、id查找
2、类查找
3、标签查找
# 注意三个方法返回值是不一样的，
document.getElementById ('d1') # 直接获取标签对象
document.getElementsByClassName('c1') # 数组
document.getElementsByTagName('div') # 数组
let divEle = document.getElementsByTagName('div')[1] 可以用变量将返回值存起来
2、间接查找
let pEle = document.getElementsByClassName('c1')[0]
pEle.parentElement //查看父标签
pEle.children 所有子标签
pEle.firstElementChild 第一个子标签元素
pEle.lastElementChild 最后一个子标签元素
pEle.nextElementSibling 下一个兄弟标签元素
pEle.previousElementSibling 上一个兄弟标签元素
节点操作
案例1：创建img标签，赋值属性，添加文档中
创建标签
var imgEle = document.createElement("img");
给标签设置默认属性
imgEle.src = '111.png' 添加节点属性
// 如果想要给节点添加自定义的属性则需要加setattribute
imgEle.setAttribute('username','hongwei')
将标签塞到div下面
1、先找到div标签
let divEle = document.getElementByID('d1')
2、添加元素(临时生效)
divEle.appendChild(imgEle)
标签内部添加元素(尾部追加)
divEle.appendChild(imgEle)
案例2：创建a标签，赋值属性和内部文本，添加到文档中
创建a标签
let aEle = document.createElement('a')
设置属性
aEle.href = 'https://www.baidu.com'
设置文本
aEle.innerText = '点我'
添加到标签内部
1、拿到div标签和p标签
let divEle = document.getElementById('d1')
let pEle = document.getElementById('d2')
2、将a标签放在div的内部p标签的上面
divEle.insertBefore(aEle,pEle)
添加标签内容，指定位置添加
divEle.insertBefore(aEle,pEle)
# innerText 与 innerHTML
divEle.innerText 拿到div内部的文本
divEle.innerHTML 即拿到文本，也拿到标签
divEle.innerText = ' <h1>heihei<h1>' 写什么就是什么
divEle.innerHTML = ' <h1>heihei<h1>' 写了会有h1的效果
获取值操作
# 获取用户数据标签内部的数据
let inputEle = document.getElementById('d1')
inputEle.value // 获取用户输入的数据
let seEle = document.getElementById('d2')
seEle.value
# 如何获取用户上传的文件数据
let fileEle = document.getElementById('d3')
fileEle.value // 这样只是拿到文件的索引
fileEle.files // 数组[文件对象，。。]
fileEle.files[0] /拿到数据
标签的class、css操作
类里面 class操作：
let divEle = document.getElementById('d1')
divEle.classList //获取对象属性
divEle.classList.add('c1') //添加属性
divEle.classList.remove('c1') //删除属性
divEle.classList.contains('c1') //检测有没有c1这个属性
divEle.classList.toggle('c1') //有责删除，无责添加
css操作：
# DOM操作标签样式，统一先用style起手
let PEle = document.getElementById('P')[0] // 拿到标签
pEle.style.color = 'red' //修改颜色
pEle.style.fontSize = '28px' //修改字体
事件
# 达到某个事件设定的条件，自动触发动作
# 绑定事件的两种方式
<button onclick="func1()">点我</button>
<button id="d1">点我</button>
<script>
// 第一种绑定方式
function func1(){
alert(111)
}
// 第二种
let btnEle = document.getElementById('d1');
btnEle.onclick = function (){
alert(222)
}
</script>
# js代码到底应该写在html页面的那个位置
一般都是放在body内最下方
# onload
等待xxx加载/读取/渲染...完毕
xxx.onload
等大xxx好了
详细可查询：
https://www.runoob.com/jsref/dom-obj-event.html
原生js事件绑定案例
# 1、开关灯案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1{
height: 400px;
width: 400px;
border-radius: 50%;
}
.bg_green{
background-color: greenyellow;
}
.bg_red{
background-color: red;
}
</style>
</head>
<body>
<div id="d1" class="c1 bg_red bg_green"></div>
<button id="d2">变色</button>
<script>
let btnEle = document.getElementById('d2')
let divEle = document.getElementById('d1')
btnEle.onclick = function (){ //绑定点击事件
// 动态的修改div标签的类属性
divEle.classList.toggle('bg_red')
}
</script>
</body>
</html>
# 2、input框获取焦点失去焦点案例
<input type="text" value="老板去吗" id="d1">
<script>
let iEle = document.getElementById('d1')
// 获取焦点事件
iEle.onfocus = function (){
// 将input内部的文本内部的值去除
iEle.value = ''
// 点value就是获取，等于号就是赋值
}
// 失去焦点事件
iEle.onblur = function (){
// 给input 标签重写赋值
iEle.value = '没钱不去'
}
</script>
# 3、展示当前时间，定时器
<input type="text" id="d1" style="display: block;height: 50px;width: 200px">
<button id="d2">开始</button>
<button id="d3">结束</button>
<script>
//定义一个全局存储定时器的变量
let t = null
let inputEle = document.getElementById('d1')
let startEle = document.getElementById('d2') //获取按钮
let stopEle = document.getElementById('d3') //获取按钮
// 1、访问页面之后将访问的时间展示到input框中
// 2、动态展示当前时间
// 3、页面上加两个按钮 一个开始 一个结束
function showTime(){
let currentTime = new Date();
inputEle.value = currentTime.toLocaleString()
}
startEle.onclick = function (){ //为按钮绑定事件，点击触发执行事件
// 限制定时器只能开一个
if(!t){ // t空的时候开设，有值的时候不开设
t = setInterval(showTime,1000) // 每点击一次就会开设一个定时器，而t只指代最后一个
}
}
stopEle.onclick = function (){ //为按钮绑定事件
clearTimeout(t)
// 清楚定时器的同时，还应该将t重置为空
t = null
}
</script>
# 4、省市联动
两个下拉框，第一个选择了江西省，第二个下拉框则会显示江西省的相关的城市
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta>
</head>
<body>
<select name="" id="d1">
<option value="" selected disabled>--请选择--</option>
</select>
<select name="" id="d2"></select>
<script>
// 拿到省和市的标签
let proEle = document.getElementById('d1')
let cityEle = document.getElementById('d2')
// 先模拟省市数据
data = {"河北省": ["廊坊", "邯郸"],
"北京": ["朝阳区", "海淀区"],
"山东": ["威海市", "烟台市"]
};
// 先将第一个框内的省拿出来
// 先for循环获取省
for (let i in data){
// i是遍历data的省数据
// 将省信息做成一个option标签，添加到第一个select框中
// 1 创建option标签
let opEle = document.createElement('option')
// 2、设置文本
opEle.innerText = i
// 3、设置value
opEle.value = i // 变成<option value="省">省</option>
// 4、将创建好的option标签添加到第一个select标签
proEle.appendChild(opEle)
}
// 文本域变化事件 change事件
// 将第一个框添加文本变化事件
proEle.onchange = function (){
// 先获取到用户选择的省
let currentpro = proEle.value
// 获取对应的市信息
let currentCityList = data[currentpro]
// 清空市select中所有的option
cityEle.innerHTML = ''
// 自己加一个请选择
let ss =" <option disabled selected>请选择</option>"
cityEle.innerHTML = ss
// for 循环所有的市渲染到第二个select框中
for (let i=0;i<currentCityList.length;i++){
let currentEity = currentCityList[i] //通过缩影拿到数组里面的市信息
// 1、创建option标签
let opEle = document.createElement('option')
// 2、设置文本
opEle.innerText = currentEity
// 3、设置value
opEle.value = currentEity // 变成<option value="省">省</option>
// 4、将创建好的option标签添加到第一个select标签
cityEle.appendChild(opEle)
}
}
</script>
</body>
</html>
jQuery
前言
"""
jQuery内部封装了原生的js代码(还额外添加了很多功能)
能够让你通过书写更少的代码，完成js操作
类似python里的模块 在前端里面模块叫"类库"
兼容多个浏览器，在使用jQuery时不需要考虑兼容问题
jQuery的宗旨
write less do more
用更少的代码完成更多的事情
"""
选择器
筛选器
样式操作
文本操作
属性操作
文档处理
事件
动画效果
插件
each、data、Ajax
# jQuery在使用前要导入
1、文件下载到本地
<script src="jQuery.js"></script>
2、直接映入jquery提供的cdn服务
CDN：内容分发网络
cdn有免费的
前端免费的cdn网站：
bootcdn
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
jQuery基本语法
jQuery(选择器).action()
jQuery可以简写 $
jQuery() === $()
如何查找标签
基本选择器
// id选择器
$('#d1')
k.fn.init [div#d1]
// class选择器
$('.c1')
k.fn.init [p.c1, prevObject: k.fn.init(1)]
// 标签选择器
$('span')
k.fn.init(3) [span, span, span, prevObject: k.fn.init(1)]
ps:jQuery选择器拿到的都是jQuery对象(可以看出一个数组)
"""一定要区分开（重点）"""
// jQuery对象如何变成标签对象
$('#d1')[0]
<div id="d1">…</div>
document.getElementById('d1')
<div id="d1">…</div>
// 标签对象如何转jQuery对象
$(document.getElementById('d1'))
k.fn.init [div#d1]
组合选择器/分组与嵌套
$('div') // 找div
$('div.c1') //找包含c1的div
$('#d1,.c1,p') // 并列加混合查找
$('div span') // 找div所有span后代
$('div > span') // 只找儿子span
$('div + span') // 找紧挨着的span，毗邻
$('div ~ span') // div下面的span弟弟
基本筛选器
# 针对已经得到的结果进行二次删选
$('ul li') // 后代选择器，ul里的所有li
$('ul li:first') // 只拿第一个（大儿子）
$('ul li:last') // 只拿最后一个(小儿子)
$('ul li:eq(2)') // 从这个列表里拿到索引是2的
$('ul li:even') // 只拿索引为偶数的
$('ul li:odd') // 只拿索引是奇数的
$('ul li:gt(5)') // 拿到索引大于5的元素
$('ul li:lt(5)') // 拿到索引小于5的元素
$('ul li:not("#d1")') // 不要带有d1的元素
$('ul:has(".c1")') //找内部含有.c1属性的ul
$('div:has("p")') // 找内部含有p标签的div
ps:一定要有父级标签
这些都可以简写
$('div span:first') // 拿到div里面所有span中的第一个span
# 简写 $('div span').first()
属性选择器
$('[username]') /查找属性包含username的标签
$('[username="egon"]') // 查找属性username等于矮根的标签
$('p[username="egon"]') // 查找属性username等于egon的p标签
$('[type]') // 拿到属性为type的标签
$('[type="text"]') // 拿到属性type等于text的标签
表单选择器
$('input[type="text"]') // 拿到所有input中type 等于text的标签
ps:支持简写，等价于$(':text')，只在表单里面才生效
表单筛选器
:text
:password:file
:radio
:checkbox
:submit
:reset
:button
例子：$(":checkbox") // 找到所有的checkbox
表单对象属性
:enabled
:disabled
:checked 属性意思代表默认值
:selected 属性意思代表默认值
"""
<form action="">
<p>username:<input type="text"></p>
<p>password:<input type="password"></p>
<input type="checkbox" value="111">111
<input type="checkbox" value="111" checked>222
<input type="checkbox" value="111">333
<input type="button" value="按钮">
<select name="" id="">
<option value="">1</option>
<option value="">2</option>
<option value="" selected>3</option>
</select>
</form>
"""
$(':checked') 拿到选中的checked，应为bug也会拿到selected
# 如果只想拿到checked
$('input:checked')
$(':selected') 拿到selected
筛选器方法
$('#d1').next() // 拿到d1标签的下一个标签
$('#d1').nextAll() // 拿到同级别下面的所有
$('#d1').nextUntil('.c1') // 下一个直到.c1为止的标签，不包含.c1
$('.c1').prev() // 拿到.c1上一个标签
$('.c1').prevAll() // 拿到同级别上面的所有
$('.c1').prevUntil('#d1') // 上一个直到#d1为止的标签，不包含#d1
$('#d3').parent() // 拿d3的父标签
$('#d3').parent().parent() // 拿d3的父标签的父标签
$('#d3').parents() // 拿d3的所有父标签
$('#d3').parentsUntil('body') // 知道body为止
$('#d2').children() // 拿这个标签的后代
$('#d2').siblings() // 同级别上下所有标签
# 基本筛选器优化封装
$('ul li:not("#d1")')
$('ul li').not("#d1")
jQuery操作标签
操作类
"""
js版本 jQuery版本
classList.add() addClass()
classList.remo() removeClass()
classList.contains() hasClass()
classList.toggle() toggleClass()
"""
css操作
# css操作
"""
<p>111</p>
<p>222</p>
# 一行代码将两行文本变色
# jQuery对象调用jQuery方法之后返回的还是jQuery对象，也就可以继续调用
$('p').first().css('color','red').next().css('color','red')
# 原理：
class manage(object):
def func1(self):
print('func1')
return self
def func2(self):
print('func2')
return self
obj = manage()
obj.func1().func2()
"""
位置操作
# 位置操作
$('p').offset() // 获取当前标签距离当前窗口的偏移量
$('p').position() // 获取当前标签针对父标签的偏移量
$(window).scrollTop() // 获取右侧滚动条与顶部的偏移量，不加参数就是获取
$(window).scrollTop(500)// 加了参数就是设置
ps：只需要记回到顶部事件
尺寸操作
# 尺寸
$('p').height() // 文本
$('p').width()
$('p').innerwidth() // 文本+padding
$('p').innerHeight()
$('p').outerHeight() // 文本+padding+border
$('p').outerWidth()
文本操作
# 文本操作
"""
操作标签内部文本
js
innerText $('div').text() //不加参数就是获取，加了就是设置
innerHTML $('div').html()
$('div').text('<h1>asd</h1>') 不识别标签语法
$('div').html('<h1>asd</h1>') 识别标签语法
获取值
.val() value
获取文件数据
转成标签对象.files
"""
获取值操作
# 获取值操作
"""
js jQuery
.value .val()
$('#d1').val() //不加参数获取
$('#d1').val('hello') //加参数设置
# 拿文件
$('#d2')[0].files // 加[0]变成原生js对象，然后.files获取文件
ps:牢记两个对象之间的转换
"""
属性操作
# 属性操作
"""
js jQuery
setAttribute() attr(name,value)
getAttribute() attr(name)
removeAttribute() removeAttr(name)
let $pEle = ('p') // 定义jq对象
$pEle.attr(name) // 获取
$pEle.attr(name,value) // 设值
再用变量存储对象的时候 js中推荐使用
xxxEle
jQuery中推荐使用
$XXXEle
"""
对于标签上有的能够看到的自定义属性用attr
对于返回布尔值，比如checkbox radio option是否被选中用prop
$('#d2').prop('checked') //查看是否被选中
$('#d2').prop('checked',true) // 设置选中
文档处理
# 文档处理
"""
js jQuery
createElement('p') $('<p>') // 创建标签
appendChild() append()
let $pEle = $('<p>') // 定义变量
$pEle.text('你好啊，草莓要不要来几个？') // 添加文本
$pEle.attr('id','d1') // 添加属性
$('#d1').append($pEle) // 添加标签，追加到尾部
$pEle.appendTo($('#d1')) // 添加到指定标签内部
$('#d1').prepend($pEle) // 追加到头部
$pEle.prependTo($(#d1)) // 把我追加到谁的内部的前面
$('#d2').after(#pEle) // 放在标签后面
$pEle.afterAfter($('#d1')) // 放在某个标签后面
$('#d2').brfore(#pEle) // 放在d2的前面
$pEle.insertBefore($('#d1')) // 放在某个标签前面
$('#d2').remove() // 将标签从DOM树种删除
$('#d2').empty() // 清空当前标签内部内容
"""
jQuery绑定事件
# JQ两种绑定事件的方式
<script>
// 第一种
$('#d1').click(function (){ // click事件名
alert('别说话')
})
// 第二种(功能更加强大，还支持事件委托）
$('#d2').on('click',function (){
alert('借我钱买草莓,以后还你')
})
</script>
克隆事件
# 克隆事件
clone() 默认情况下只克隆标签和文本，不克隆事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<style>
#d1{
height: 200px;
width: 200px;
background-color: orange;
border: 1px solid blue;
}
</style>
</head>
<body>
<button id="d1">屠龙宝刀，点击就送</button>
<script>
$('#d1').on('click',function (){
//console.log(this) // this指代是当前操作的标签对象
// $(this).clone().insertAfter($('body')) // 将标签对象变成jq对象,然后克隆添加到body里
// clone默认情况下只克隆html和css，不克隆事件,但是括号内加true即可克隆事件
$(this).clone(true).insertAfter($('body'))
})
</script>
</body>
</html>
自定义模态框
"""
模态框内部本质就是给标签移除或者添加上hide属性
绑定事件控制标签属性类属性添加删除
"""
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<style>
.cover {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(127,127,127,0.4);
z-index: 99;
}
.modal {
position: fixed;
height: 400px;
width: 600px;
background-color: white;
top: 50%;
left: 50%;
margin-right: -300px;
margin-top: -200px;
z-index: 100;
}
.hide {
display: none;
}
</style>
</head>
<body>
<div>我是最下面的</div>
<button id="d1">给我出来</button>
<div class="cover hide"></div>
<div class="modal hide">
<p>username<input type="text" ></p>
<p>password<input type="text" ></p>
<input type="button" value="确认">
<input type="button" value="取消" id="d2">
</div>
<script>
let $coverEle = $('.cover')
let $modalEle = $('.modal')
$('#d1').click(function (){
// 将两个div标签的hide类属性移除
$coverEle.removeClass('hide')
$modalEle.removeClass('hide')
})
$('#d2').on('click',function (){
$coverEle.addClass('hide')
$modalEle.addClass('hide')
})
</script>
</body>
</html>
左侧菜单示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<style>
.left{
float: left;
background-color: darkgray;
width: 20%;
height: 100%;
position: fixed;
}
.title {
font-size: 36px;
color: white;
text-align: center;
}
.items {
border: 1px solid black;
}
.hide {
display: none;
}
</style>
</head>
<body>
<div class="left">
<div class="menu">
<div class="title">菜单1
<div class="items">111</div>
<div class="items">222</div>
<div class="items">333</div>
</div>
<div class="title">菜单2
<div class="items">111</div>
<div class="items">222</div>
<div class="items">333</div>
</div>
<div class="title">菜单3
<div class="items">111</div>
<div class="items">222</div>
<div class="items">333</div>
</div>
</div>
</div>
<script>
// 给三个标签绑定点击事件
$('.title').click(function (){
//alert(this) // this指代的是当前被操作的标签对象
// 先给所有的items加hide
$('.items').addClass('hide')
// 然后将被点击标签内不的hide溢出
$(this).children().removeClass('hide')
})
</script>
</body>
</html>
# 扩展，尝试用一行代码搞定上面的事件操作
返回顶部
# 检测浏览器右侧滚动事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<style>
.hide {
display: none;
}
#d1 {
position: fixed;
background-color: orange;
right: 20px;
bottom: 20px;
height: 50px;
width: 50px;
}
</style>
</head>
<body>
<a href="" id="d1"></a>
<div style="height: 500px;background-color: red"></div>
<div style="height: 500px;background-color: yellow"></div>
<div style="height: 500px;background-color: black"></div>
<a href="#d1">回到顶部</a>
<script>
// 需要写一个监测屏幕滚动的事件
$(window).scroll(function (){
if($(window).scrollTop()>100){
$('#d1').removeClass('hide')
}else {
$('#d1').addClass('hide')
}
})
</script>
</body>
</html>
自定义登录校验
# 在获取用户的用户名和密码的时候 用户如果没有填写 应该给用户展示提示信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>
<body>
<p>username:
<input type="text" id="username">
<span style="color: red"></span>
</p>
<p>password:
<input type="text" id="password">
<span style="color: red"></span>
</p>
<button id="d1">提交</button>
<script>
// 给提交绑定提示事件
let $userName = $('#username')
let $passWord = $('#password')
$('#d1').click(function (){
// 获取用户输入的用户名和密码 做校验
let userName = $userName.val()
let passWord = $passWord.val()
if(!userName){
$userName.next().text('用户名不能为空') // 拿到span标签，设置文本参数
}
if (!passWord){
$passWord.next().text('密码不能为空')
}
})
// 给input绑定清空事件
$('input').focus(function (){
$(this).next().text('')
})
</script>
</body>
</html>
input框实时监控
<input type="text" id="d1">
<script>
$('#d1').on('input',function (){
console.log(this.value) // 拿到当前对象的value
})
</script>
hover事件
# hover事件 进出都会触发
<p id="d1">啊实打实的</p>
<script>
// $('#d1').hover(function (){ // 鼠标悬浮加鼠标移开，两个事件
// alert(123)
// })
$('#d1').hover( // 写两个则默认分开，第一个悬浮，第二个移开
function (){
alert('我来了')
},
function (){
alert('我走了')
}
)
</script>
键盘按键按下事件
补充: 还有一个keyup松开事件
<script>
$(window).keydown(function (event){
console.log(event.keyCode)
if (event.keyCode === 16){
alert('你按了了shift建')
}
})
</script>
阻止后续事件执行
<from>
<span id="d1" style="color: red"></span>
<input type="submit" id="d2"> // 这个不仅有绑定事件还有submit事件
</from>
<script>
$('#d2').click(function (e){
$('#d1').text('宝贝，你能看到我吗?')
// 阻止标签后续事件执行，方式1
return false
// 组织标签后续事件的执行，方式2
// e.preventDefault()
})
</script>
阻止事件冒泡
<div id="d1">div
<p id="d2">div>p
<span id="d3">span</span>
</p>
</div>
<script>
$('#d1').click(function (){
alert('div')
})
$('#d2').click(function (){
alert('div>p')
})
$('#d3').click(function (e){
alert('span')
// 阻止事件冒泡的方式1
return false
// 阻止事件冒泡的方式2
// e.stopPropagation()
})
</script>
事件委托
<button>是兄弟，就</button>
<script>
// 给页面上所有button标签绑定点击事件
// $('button').click(function (){ // 无法影响到动态创建的标签
// alert('师兄弟')
// })
// 事件委托
$('button').on('click','button',function (){
alert(123) // 将body内的所有点击事件委托给button按钮触发
})
</script>
页面加载
# 等待页面加载完毕再执行代码
window.onload = function(){
// js代码
}
""" JQ中等待页面加载完毕 """
# 第一种
$(document).ready（(function){
//js代码
}）
# 第二种
$(function(){
//js代码
})
# 第三种
直接卸载body内部最下放
动画效果(了解)
$('#d1').hide(5000) 5秒钟隐藏
$('#d1').show(5000) //5秒钟展示
$('#d1').slideUp(5000) //5秒钟向上收缩
$('#d1').slideDown(5000) //5秒钟向上
$('#d1').slideDown(5000) //5秒钟向下展示
$('#d1').fadeOut(5000) //5秒钟颜色渐变到无
$('#d1').fadeIn(5000) //5秒钟颜色渐变到有
$('#d1').fadeTo(5000,0.4) //5秒钟颜色渐变到某一个透明度就不变化了
需要掌握的
# each()
第一种方式
$('div').each(function(index){console.log(indexe)}) 类似for循环，答应index
第二种方式
$.each([1,2,3]),function(index,obj){console.log(index,obj)}
# data()
能够让标签帮我们存数据，但是用户看不到
$('div').data('info','回来吧，我原谅你了') 存数据
$('div').first().data('info') 查看数据
$('div').first().removeData('info') 删除数据
前端框架Bootstrap
前言
该框架已经写好了很多页面样式，如需使用，只需要下载它对应的文件，之后直接cv拷贝即可，在使用Bootstrap的时候所有的页面样式都只需要通过class来调节
注意：
bootstrap的js代码是依赖于jQuery的，也就意味着你在使用bootstrap动态效果的时候，一定要导入jQuery
框架文档操作参考：
https://v3.bootcss.com/
弹框文档参考：
lipis.github.io/bootstrap-sweetalert
CSS样式
容器布局
<div class="container">
// 左右两边留白
</div>
<div class="container-fluid">
// 无留白
</div>
栅格系统
# 写一个row就是将所在的区域划分成12份
# 通过 <div class="col-md-2 c1"></div> 获取想要的份数
# 在使用bootstrap的时候 脑子一定要做12的加减法
<style>
.c1 {
background-color: red;
height: 100px;
border: 5px solid black;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-2 c1"></div>
<div class="col-md-6 c1"></div>
<div class="col-md-4 c1"></div>
<br>
</div>
<!--一个row就是一行，这一行会均分成12份-->
</div>
栅格参数
.col-xs- .col-sm- .col-md- .col-lg
# 针对不同的显示器 bootstrap会自动选择对应的参数
# 如果想兼容所有显示器，全部加上即可
# 在一行如何移动位置 col-md-offset-2
<div class="col-md-11 c1 col-md-offset-2"></div>
排版
bootstrap 将所有原生的HTML标签的文本统一设置成了肉眼可以接受的样式
表格
<table class = "table table-hover table-striped table-bordered">
<tr class="success">
<td>1</td>
<td>jason</td>
<td>123</td>
</tr>
<tr class="success">...</tr>
<tr class="active">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>
表单
<div class="container">
<div class="col-md-8 col-md-offset-2">
<h2 class="text-center">登陆页面，剧中</h2>
<form action="">
<p>username:<input type="text" class="form-control"></p>
<p>password:<input type="text" class="form-control"></p>
<p>
<select name="" id="" class="form-control">
<option value="">111</option>
<option value="">222</option>
<option value="">333</option>
</select>
</p>
<textarea name="" id="" cols="30" rows="10" class="form-control"></textarea>
<input type="submit">
</form>
</div>
</div>
# 针对表单标签，加样式就用from-contiol
class="form-control"
<input type="checkbox" class="form-control">111
<input type="checkbox" class="form-control">222
<input type="checkbox" class="form-control">333
checkbox和radio我们一般不会给他加form-contiol，直接使用原生的即可
# 针对报错信息 可以加has-error(input的父标签加)
<p class="has-error">
按钮
<a href="https://www.baidu.com/" class="btn btn-primary" >点我</a>
调节颜色
<button class="btn btn-danger">点我</button>
<button class="btn btn-default">点我</button>
<button class="btn btn-success">点我</button>
<button class="btn btn-info">点我</button>
<button class="btn btn-warning">点我</button>
调节尺寸
<button class="btn btn-warning btn-lg">点我</button>
<button class="btn btn-warning btn-sm">点我</button>
<button class="btn btn-warning btn-xs">点我</button>
设置宽度，全占满
<input type="submit" class="btn btn-primary btn-block">
通过给按钮加.btn-block类可以将其拉升至父元素100%的宽度，而且按钮也变成了块级（block）元
后面就是拷贝+修改
