8.28周末回顾
8.28周末回顾
一、前端
前端：与用户直接打交道的操作页面
后端：不与用户直接打交道的内部真正执行核心业务的逻辑的代码程序
前端核心基础
html 网页骨架
css 网页血肉
js 网页情欲(七情六欲)
二、超文本传输协议
1、介绍
http是客户端(用户)和服务器端(网站)请求和应答的标准，其定义了web客户端如何向web服务器请求web页面，以及服务器如何把web页面响应给客户端。
2、http四大特性
基于请求响应
基于http协议的服务端永远不会主动给你发消息，只有客户端发送一个请求才会得到一个响应
基于TCP/IP之上作用于应用层的协议
用户选择协议，协议可以自己写但是需要浏览器识别，不识别就无法响应
无状态
客户端发送的请求得到响应后不记录客户端的状态
无/短连接
只要客户端发送一次请求得到响应后断开联系，不记录客户端的状态
3、数据格式
1.请求数据格式
请求首行 请求方式、请求协议名称以及版本
请求头 一大堆K:V键值对
换行 换行必不可少
请求体 不是所有的请求方式都有请求体
2.响应数据格式
响应首行 响应状态码
响应头 一大堆K:V键值对
换行 换行必不可少
响应体 一般情况下就是浏览器要展示给用户看的数据
4、响应状态码
1XX 服务端已经接收到请求正在处理，可以继续提交或者等待
2xx 200 OK 服务端给出响应的响应
3xx 重定向(原本想访问A页面却跳转到B页面)
4xx 403请求不符合条件(当前没有资格访问(权限)或者没有登录)
404请求资源不存在(网络上没有对应的资源)
5xx 服务器内部错误
三、HTML
1、HTML注释语法
<!--注释内容-->
python注释：
# 注释内容
'''注释内容'''
"""注释内容"""
css注释：
// 注释内容
js注释：
// 注释内容
2、HTML文件结构
<!DOCTYPE html> <!--头文件，标识html文件-->
<html lang="en"> <!--html语言为English，所有的代码都必须写在html标签内部-->
<head> <!--head内的数据一般不是给用户看的-->
<meta charset="UTF-8"> <!--html的字符编码，不是utf8可能会乱码-->
<title>Title</title> <!--浏览器标签栏的标题-->
</head>
<body>
<!--html的页面代码，展示给用户看的-->
</body>
</html>
3、HTML标签分类
1.单标签
<img/>
<br/>
......
2.双标签：一定要有结束符
<h1><h1/>
<p><p/>
......
4、head内常见标签
<meta>
charset="UTF-8" html的字符编码
<meta name="keywords" content="填写一些关键字 提升网页被搜索的概率">
<meta name="description" content="填写一些网页的简介">
<title><title/>
浏览器标签栏的标题
<style><style/>
编写html的内部样式即css
<script><script/>
可编写js代码，也可通过src属性链接外部的js文件
<link/>
通过href属性链接外部的css文件
5、body内标签
1.基本标签
<h1><h1/>~<h6><h6/> 标题1到标题6
<p><p/> 段落标签
<hr/> 水平分割线
<br/> 换行符标签
<u><u/> 下划线标签
<i><i/> 线体标签
<s><s/> 删除线标签
<b><b/> 加粗标签
2.布局标签
<div><div/> 块级标签
一个标签独占一行
在网页一般通过块元素对网页进行布局
<span><span/> 行内标签
内部文本多大占多大
行内元素主要用来包裹文字
3.常见标签
<a><a/>
href：可以填写网址，点击时自动跳转；还可以填写其他标签的id值，实现锚点功能。
target：控制是否新建跳转页面
_blank：在新的标签页中打开目标网页
_self：在当前标签页中打开新的目标网页
<img/>
src：引入图片的地址
title：鼠标悬浮在图片上提示的信息
alt：图片出错提示的信息
height：设置图片的高度
width：设置图片的宽度
6、块级标签与行内标签
1）块儿级标签 h1~h6、p、hr、br
一个标签独占一行
在网页一般通过块元素来对网页进行布局
2）行内标签 u、i、s、b
内部文本多大自身就占多大
行内元素主要用来包裹文字
一般情况下块元素放行内元素或某些块级元素，而不会在行内元素中放块元素只能包含其它行内元素，<p><p/>元素不能放任何的块元素也不能包含p标签。
7、body内基本符号
空格
> 大于
< 小于
&emp; &
¥ ¥
© 版权
® 注册
8、标签两大属性
id属性(一对一管理)：类似于身份证号，同一个html页面上，id值不能重复
class属性(分组管理)：类似于分组，多个标签可以拥有相同的class值
9、列表标签
1.无序列表
<ul type="">
<li></li>
<li></li>
</ul>
type：设置li前面的小圆点的样式
disc：实心圆点
circle：
2.有序列表
<ol type="", start="">
<li></li>
<li></li>
</ol>
type：序列
1数字列表，默认值
A大写字母
a小写字母
I大写罗马
i小写罗马
start：序列开始
3.标题列表
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dt>标题2</dt>
<dd>内容2</dd>
</dl>
10、表格标签
<table>
<thread>
<tr> # 行标签
<th></th> # 表头标签
<th></th>
<th></th>
</tr>
</thread>
<tbody>
<tr>
<td></td> # 单元格标签
<td></td>
<td></td>
</tr>
</tbody>
</table>
rowspan：单元格竖跨多少行
coslspan：单元格横跨多少列(即合并单元格)
align：设置表格相对于页面的对齐方式
11、表单标签
能够获取用户输入(输入、选择、上传)的数据并发送给后端服务器。
1、input元素的多种type属性：
text 单行文本输入框
password 密码输入框，隐藏输入的密码以黑点展示你输入的密码
date 日期选择框，只要点击日历选择日期
checkbox 多选框，可以多选
radio 单选框
file 上传文件，属性加上multiple表示可上传多个文件
submit 提交按钮，将数据发送给服务器
button 普通按钮，后期可以设置我们想要的功能
reset 重置按钮，清空我们输入的数据
textarea 大文本输入框
select 单选下拉框
2、获取用户输入的标签的两大重要属性
name属性：根据name后端知道数据的含义，相当于K:V键值对的K
value属性：相当于K:V键值对的V
form表单在朝后端发送数据的时候，标签必须要有name，否则不会发送该标签的值
3、标签补充
1.获取用户输入的input标签理论上需要label配合使用
<label for="d1">username:</label> <!--鼠标点击"username:"就可输入,此标签使下方的input不飘黄-->
<input type="text" name="username" id="d1">
这样根据绑定的id，input标签不会飘黄
2.input标签添加背景提示
placeholder="背景提示"
<input type="text" name="username" placeholder="请输入用户名">
3.input选择，需要添加value属性
对于选择类的属性的input元素需要添加value属性，是为了能够让朝后端发送数据的时候不仅知道你发送的名字(K值)，也需要知道你选择的数据值是什么(V值)。
4.默认选择
对于单选框和多选框设置默认选择时需要添加属性 checked="checked"可简写成checked
对于下拉选择设置默认选择时需要添加属性 selected="selected"可简写成selected
'''对于属性等于属性值可简写成单个的属性'''
四、CSS(Cascading Style Sheet，层叠样式表)
1、css语法
CSS样式由两个组成部分：选择器和声明，声明包括属性和属性值，每个声明之后用分号结束。
选择器 {
属性1: 属性值1;
属性2: 属性值2;
}
2、注释语法
/*单行注释*/
/*
多行注释
*/
2、编写css的方式
1、内联样式(行内样式)
在标签内部通过 style 属性来设置元素的样式
<p style="color:#F6F6A7;font-size:50px;">CSS的三种方式</p>
2.内部样式表
在head内的 style 标签内通过css的选择器选中元素设置元素的样式
<style>
p{
color: #F6F6A7;
font-size: 50px;
}
</style>
3.外部样式表
在head内的 link 标签链接外部的css文件，css文件通过css选择器选中元素设置元素的样式。
<link rel="stylesheet" href="mystyle.css" type="text/css">
3、css基本选择器
1.标签选择器
直接编写标签来查找标签
div {
color: aqua; /*查找所有的div标签 并将内部的文本颜色变为天青色*/
}
2.类选择器
通过.类名查找标签
.c1 {
color: plum; /*查找所有class属性中含有c1的标签 并将内部的文本颜色变为香芋紫色*/
}
3.id选择器
通过#id名查找标签
#d1 {
color: orange; /*查找id值是d1的标签 并将内部的文本颜色改为橙色*/
}
4.通用选择器
通过*获取所有的标签，局限性太强，一般不使用
4、css组合选择器
1.后代选择器
两选择器之间用空格隔开，且父选择器在前。查找前面选择器标签内部所有符合空格后的的标签。
2.儿子选择器
两个选择器之间用">"隔开，且父选择器在前。查找前面选择器标签内部第一层级符合空格后的标签。
3.毗邻选择器
两个选择器用"+"隔开，且哥哥选择器在前。查找同级中"+"前面的标签下面紧挨的"+"后面的标签。若不是紧挨的，那么设置无效。
4.弟弟选择器
两个选择器用"~"隔开，且哥哥选择器在前。查找同级中"~"前面的标签下面所有同级的标签(弟弟们)。
5、css属性选择器
所有的标签除了自己默认的属性外，还可以拥有自定义的任意属性。
默认属性：id class
自定义属性： x=2 y=3
1.查找属性名含有name标签，设置颜色为紫色
[name]{
background: #b20dee; /*1.查找属性名含有name的标签,设置颜色为紫色*/
}
2.查找属性名含有name并且值为username的标签，设置颜色为玫红
[name="username"]{
background-color: #ef0c5c; /*2.查找属性名含有name并且值是username的标签,设置颜色为玫红*/
}
3.查找input标签并且属性名含有name并且值为username的标签，设置颜色为橙色
input[name="username"]{
background-color: orange; /*3.查找input标签并且 属性名含有name值是username,设置颜色为橙色*/
}
6、css选择器之分组与嵌套
1.分组
当多个元素的样式相同时，选择器与选择器之间用逗号隔开，设置统一样式。
div,
p,
span{ /*div、p、span会分三行写写，更清晰*/
color: #b20dee;
}
2.嵌套
当多个标签的选择器相同时，需要单独设置额外的样式，需要使用：标签.选择器的方式查找标签。
span.c1{
color: orange;
}
<span class="c1">span</span>
7、css选择器之伪元素选择器
:link 未访问的链接样式
:visited 已访问的链接样式
:hover 鼠标悬停的链接样式
:active 鼠标点击的链接样式
8、css选择器之伪元素选择器
伪元素：表示页面中一些特殊的并不真实存在的元素(特殊的位置)
伪元素选择器可以用在解决标签浮动所带来的负面影响，也可以用来做数据的防爬。
:before 元素的开始可设置样式，插入内容，结合content属性使用
:after 元素的结尾可设置样式，插入内容，结合content属性使用
:first-letter 给第一个字母设置样式
:first-line 表示第一行
:selection 表示选择的内容
'''before和after多用于清除浮动'''
9、css选择器优先级
1.选择器相同，引入的位置不同
就近原则，由于head里面的代码是从上而下执行的，越靠下选择谁。
2.选择器不同：
行内>id选择器>类选择器>标签选择器
3.强制修改标签样式的操作：!important
选择器{
属性名1:属性值2 !important; # 将属性1的属性值1强制修改成属性值2
属性名1:属性值1;
}
通过添加 !important方式来强制让样式生效，但并不推荐使用。因为如果过多的使用!important会使样式文件混乱不易维护。
10、字体样式
1.字体文字
font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。
body {
font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif
}
2.字体大小
p{
font-size:13px;
}
3.字重(粗细)
normal 默认值，标准粗细
bold 粗体
bolder 更粗
lighter 更细
inherit 继承父元素字体的粗细值
100~900 设置具体粗细，400等同于normal，而700等同于bold
4.文本颜色
十六进制：如 #9370DBFF
RGB值：如 rgb(147,112,219)
颜色名称：如 mediumpurple
rgba(225,225,255,0.3)，第四个值为alpha, 指定了色彩的透明度/不透明度，它的范围为0.0到1.0之间。
5.文字属性
text-align: left; 左边对齐 默认值
text-align: right; 右对齐
text-align: center; 居中对齐
text-align: justify; 两端对齐
6.文字装饰
text-decoration: none; 默认。定义标准的文本
text-decoration: underline; 定义文本下的一条线
text-decoration: overline; 定义文本上
text-decoration: line-through; 定义穿过文本下的一条线
text-decoration: inherit; 继承父元素的text-decoration属性的值
7.首行缩进
text-index:32px;
11、背景属性
设置背景颜色：background-color: #b20dee;
背景图片：background-image: url('1.jpg');
背景图片平铺排满整个网页：background-repeat: repeat;
背景图片只在水平方向上平铺：background-repeat: repeat-x;
背景图片只在垂直方向上平铺：background-repeat: repeat-y;
背景图片不平铺：background-repeat: no-repeat;
背景位置：background-position: center;
简写：background: #b20dee url("a1.jpg") no-repeat center center;
12、边框属性
1.边框属性
border-width：边框宽度
border-style：边框样式
solid：实线边框
none：无边框
dotted：点状虚线边框
dashed：矩形虚线边框
border-color：边框颜色
2.border-radius(实现圆角边框效果)
<style>
p{
height: 300px;
width: 300px;
background-color: #b20dee;
border: 5px solid orange;
border-radius: 50%;
background-image: url("https://img0.baidu.com/it/u=1204591883,1905172673&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=390");
background-position: center center; # 设置位置，否则图片会偏移
}
</style>
<body>
<p></p>
</body>
13、display属性
dispaly:none;可以隐藏某个元素的属性，且隐藏的元素的空间位置也会隐藏，不会占用页面布局。
visibility:hidden;可以隐藏某个元素的属性，但是隐藏的元素的空间位置不会隐藏，会占用页面布局。
补充：
display:"none"; HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。
display:"block"; 默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。
display:"inline"; 按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。
display:"inline-block"; 使元素同时具有行内元素和块级元素的特点。
五、盒子模型
一、margin外边距
用于控制元素(标签)与元素之间的距离。好比两个快递盒之间的距离。
margin:上下 左右; # 上下一起，左右一起
margin:上 右 下 左; # 按顺时针方向
margin:上 左右 下; # 三个值就是表示上、左右、下
margin：0 auto; # 设置元素水平居中，仅限于水平方向的居中
.test-margin{
margin-top: 50px;
margin-left: 40px;
margin-bottom: 30px;
margin-right: 20px;
}
>>>简写
.test-margin{
margin: 50px 20px 30px 40px;
}
margin: 10px; # 简写形式，作用于上下左右各10px;
margin: 10px 20px; # 作用于上下各10px，左右各20px;
margin: 10px 20px 30px; # 作用于上10px，左右各20px，下30px;
margin: 10px 20px 30px 40px; # 作用于上10px，右10px，下30px，左40px;
margin:10px auto; # 上下各10px,水平居中展示
body标签自带8px的外边距。
2、padding(内边距)
用于控制元素与边框之间的距离。好比快递内的物品到快递内壁之间的距离。
padding:上下 左右; # 上下一起，左右一起
padding:上 右 下 左; # 按顺时针方向
padding:上 左右 下; # 三个值就是表示上、左右、下
padding：0 auto; # 设置元素水平居中，仅限于水平方向的居中
.test-padding{
padding-top: 50px;
padding-left: 40px;
padding-bottom: 30px;
padding-right: 20px;
}
>>>简写
.test-padding{
padding: 50px 20px 30px 40px;
}
padding: 10px; # 简写形式，作用于上下左右各10px;
padding: 10px 20px; # 作用于上下各10px，左右各20px;
padding: 10px 20px 30px; # 作用于上10px，左右各20px，下30px;
padding: 10px 20px 30px 40px; # 作用于上10px，右10px，下30px，左40px;
六、浮动布局
在css中，任何元素都可以浮动。通过浮动可以使一个元素向其父元素的左侧或右侧移动。
float设置元素的浮动：
none 默认值，元素不浮动
left 向左浮动
right 想右浮动
注意：
元素设置浮动后，水平布局的等式不需要强制成立。
元素设置浮动以后，会完全从文档流中脱离，不再占用文档流的位置 所以元素下边的还在文档流中的元素会自动向上移动。也就是说元素浮动起来后之前的页面布局并不会再占用。
浮动会造成父标签塌陷：
1）清除浮动，添加clear属性，给不需要的浮动的元素添加
2）使用after伪元素清除浮动
.ckerafix:after{
content:'';
clear:both;
display:block;
}
七、溢出属性
overflow:visible;默认值，内容不会被修剪，会呈现在元素框之外。
overflow:hidden;内容会被修剪，并且其余内容是不可见的。
overflow:scroll; 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
overflow:auto; 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
overflow:inherit; 规定应该从父元素继承 overflow 属性的值。
overflow（水平和垂直均设置）
overflow-x（设置水平方向）
overflow-y（设置垂直方向）
八、定位
1、static静态定位
无定位，不能当做绝对定位的参照物。设置移动是不起作用的。
2、relative相对定位
以自己原始的位置为参照物，即使设置了元素的相对定位以及偏移量，元素还占有原来的位置。
3、absolute绝对定位
基于已经定位过的父标签做定位，如果没有父标签则以body为参照。如果父级设置了position属性，如position:relative;那么子元素就会以父级的左上角为原始点进行定位。
4、fixed固定
一个元素设置了position:absolute/fixed;则该元素不能设置float。设置为fixed的元素会被定位于浏览器窗口的一个指定坐标。无论窗口是否滚动，都会固定在这个位置。
九、z-index
z-index属性设置元素的堆叠顺序，表示谁压着谁，数值大的压盖住数值小的。
模态框示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模态框</title>
<style>
.cover {
background-color: rgba(127,127,127,0.6);
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: 0;
z-index: 999;
}
.modal {
height: 200px;
width: 500px;
background-color: white;
z-index: 1000;
position: fixed;
left: 50%;
top: 50%;
margin-left: -250px;
margin-top: -100px;
}
</style>
</head>
<body>
<div>我在最底下</div>
<div class="cover"></div>
<div class="modal">
<form action="">
<p>username:<input type="text"></p>
<p>password:<input type="text"></p>
</form>
</div>
</body>
</html>
十、JavaScript
1、简介
JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的 高级编程语言 。
为网页添加格式各样的动态功能，为用户提供更流畅美观的浏览效果。JavaScript脚本是配合html使用实现自身功能的。
2、js引入方式、注释、声明变量
1.引入方式
1）在script内部编写代码
<script>js代码</script>
2）引入外部的js文件
<script src='myscript.js'></script>
2.注释：
单行注释：//注释内容
多行注释：/*注释内容*/
3.声明变量
JavaScript的变量名可以使用字母、数字、_、$组成，不能以数字开头。
定义变量需要关键字：
1）var name='jason'; # 全局有效
2）let name='jimin'; # 局部有效
3）常量声明；常量是不可以重新绑定数据值
const pi=3.14;
4）js也是动态类型，变量名绑定的数据值类型不固定。
var name='jason';
name=123;
name=[1,2,3]
3、js数据类型
使用运算符：typeof，来检查一个变量的类型，语法：typeof 变量
1.数值类型(Number)(包括了整型和浮点型)
var a=12.34;
var b=22;
var c = 123e4; //1230000
var d = 123e-4; //0.0123
NaN是一个特殊的数字，表示Not A Number,不是一个数字
parseInt("123"); // 123
parseIn("12.34"); // 12,取整
parseFloat('12.34'); // 12.34 返回一个小数
parseInt("ABC"); // 返回NaN,NaN属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。
2.字符串类型(String)
字符串由单引号或双引号引起来的部分
var name1 = '朴智旻是糯米团子';
var name2 = "朴智旻是糯米团子";
1）字符拼接(使用 + 拼接)
var name3 = name1 + name2;
2）统计字符的长度
var name4 = '朴智旻是糯米团子';
name4.length // 8
3）移除空白
trim()(移除两边的空白字符)
var name5 = ' 朴智旻是糯米团子 ';
name5.trim() //'朴智旻是糯米团子';
trimLeft()(移除左边的空白字符)
var name5 = ' 朴智旻是糯米团子 ';
name5.trimLeft() //'朴智旻是糯米团子 '
trimRight()(移除右边的空白字符)
var name5 = ' 朴智旻是糯米团子 '
name5.trimRight() //' 朴智旻是糯米团子'
4）切片操作
js中使用substring(start,stop)，slice(start,stop),前者不支持负数索引后者支持
substring(start,stop)(顾头不顾尾)
var name6 = '朴智旻是糯米团子';
name6.substring(1,5); // '智旻是糯'
slice(start,stop)(只是支持负数索引，不能倒着切片如（-1,-5）)
var name6 = '朴智旻是糯米团子';
name6.slice(0,-1); // '朴智旻是糯米团'
name6.slice(-1,-5); // ''
5）大小写转换
js中使用.toLowerCase()、.toUpperCase()转大小写
.toLowerCase()(转成小写字母)
var str = 'abC'
str.toLowerCase(); // 'abc'
.toUpperCase()(转成大写字母)
str.toUpperCase(); // 'ABC'
6）切割字符串
js中是用split()
var str1 = '123456'
str1.split(''); // ['1', '2', '3', '4', '5', '6']
var str2 = str2.split('|');
str2.split('|'); // ['1', '2', '3', '4', '5', '6']
str2.split('|', 4); // ['1', '2', '3', '4']
7）字符串的格式化
js中使用格式化字符串(小顿号ESC下面的那个键)
var name7 = '朴智旻是糯米团子'
var age = 18
console.log(`
my name is ${name} my age is ${age}
); // I like 朴智旻是糯米团子 his age is 18
3.布尔值(boolean)
JS中：
boolean：布尔值小写：true false
空字符串("")、0、null、NaN、undefined都为false
python中：
bool：布尔值首字母大写：True False
0、None、空字符串、空列表、空字典...都为False
var a = 123;
var b;
Boolean(a); # true
Boolean(b); # false
null和undefined
null表示的值为空，曾经有值但是现在没有值
undefined表示声明变量但是没有初始化，则该变量默认值为undefined。unde从未有过值。
4.对象(object)
1）对象之数组(相当于python中的列表)
var l1 = [1,2,3,'jason'];
PS:在python中叫做列表，在其它编程语言几乎都叫数组。
2）自定义对象(相当于python中的字典)，可以利用句点符操作对象。
定义方式一：
let d1 = {'name':'jason','pwd':123}
定义方式二：
let d2 = new object();
'''自定义对象操作数据的方式更加简单，直接用句点符。'''
let d1 = {'name':'jason','pwd':123}
typeof d1; # 'object'
let d2 = new Object();
# 查看数据类型
typeof d2; # 'object'
# 查看V值
d1['name']; # 'jason'
# 添加键值对
d1.hobby = 'read';
d1; # {name: 'jason', pwd: 123, hobby: 'read'}
# 修改数值
d1.name = 'jason666';
d1; # {name: 'jason666', pwd: 123, hobby: 'read'}
4、常见运算符
1.算数运算符
+ 加
- 减
* 乘
/ 除
% 取余(保留整数)
++ 递加
-- 递减
** 幂
var a=10;
var res1=x++ '''先赋值后自增1'''
vae res2=++x '''先自增1后赋值'''
2.赋值运算符
= x=y x=y
+= x+=y x=x+y
-= x-=y x=x-y
*= x*=y x=x*y
/= x/=y x=x/y
%= x%=y x=%y
3.比较运算符
== 等于
=== 等值等型
? 三元运算符
!= 不相等
!== 不等值或不等型
> 大于
< 小于
>= 大于或等于
<= 小于或等于
==弱等于：自动转换类型
'5' == 5 '结果是true，js会自动转换成相同的数据类型比较值是否一样'
===强等于：不转换类型
'5' === 5 '结果是false'
4.逻辑运算符
&& 逻辑：与 等价于python中的'and'
|| 逻辑：或 等价于python中的'or'
! 逻辑：非 等价于python中的'not'
5.类型运算符
typeof 返回变量的类型
instanceof 返回true，如果对象是对象类型的实例
5、流程控制
1.分支结构
1）if单分支结构
if(条件 返回的是值是布尔值){
// 执行语句
}
如果if条件表达式为true则执行大括号内的语句；吐过if表达式为false那么执行if条件下面的语句。
2）if...else分支
if (条件表达式) {
满足条件时，执行的语句1代码
} else {
不满足条件时，执行的语句2代码
}
如if条件表达式为true则执行语句1，否则执行语句2。
3）if...else if...else分支
if (条件表达式1) {
条件1成立执行语句1代码
} else if (条件表达式2) {
条件1不成立条件2成立执行语句2代码
} else {
执行语句3代码
}
如果if条件表达式1为true则执行语句1代码，如果条件表达式1为false条件2表达式为true则执行语句2，如果条件1和条件2都为false则执行语句3代码。
2.循环结构
1）for循环
for(条件){
循环体代码
}
2）while循环
while(条件){
循环体代码
}
3）Switch循环
switch (表达式) {
case 条件1:
条件1成立执行语句1代码
break;
case 条件2:
条件2执行语句2代码
break;
case 条件3:
条件3执行语句3代码
break;
default:
执行最后的语句代码
}
十一、js函数
1、函数
function 函数名(形参){
函数体代码
return 返回值
}
1、函数的分类
1）无参函数
function func1() {
console.log("Hello world!");
}
2）有参函数
function func(a, b) {
console.log(a, b);
}
无论传入0~>2个参数，都不会报错，本身只需要接收两个参数，给一个传给前面的形参，传多个只要开始的两个形参
'''参数的个数不需要一一对应，如果想要限制参数个数需要使用内置关键字：arguments'''
function func1(a, b){
if(arguments.length===2){
console.log(a, b)
}else{
console.log('参数个数不对!!!');
}
}
3）返回值函数
function func4(a, b){
return a + b;
}
func4(1,2)
4）匿名函数
function(a, b){
return a + b;
}
func4(1,2)
5）箭头函数
var func5 = function(a){
return a;
}
var func5 = a => a;
var func6 = () => 5;
>>>等同于
var func6 = function(){return 5};
var sum = (num1, num2) => num1 + num2;
>>>等同于
var sum = function(num1, num2){
return num1 + num2; # 这里的return只能返回一个值，如果想返回多个值需要自己手动给他们包一个数组或对象中
}
2、函数的名称空间和作用域
局部变量：
在JavaScript函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它（该变量的作用域是函数内部）。只要函数运行完毕，本地变量就会被删除。
全局变量：
在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。
变量生存周期：
JavaScript变量的生命期从它们被声明的时间开始。
局部变量会在函数运行以后被删除。
全局变量会在页面关闭后被删除。
作用域：
首先在函数内部查找变量，找不到则到外层函数查找，逐步找到最外层。与python作用域关系查找一模一样！
十二、js内置对象
# 类似于python中的内置函数或者内置模块
固定语法：
var 变量名 = new 内置对象名();
1、date日期对象
方法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); # 5000毫秒就等于5秒
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午夜)
2、JSON序列化对象
在JSON中序列化：
JSON.stringify() # 将数值转换为JSON格式
JSON.parse() # 将JSON格式转换为原来的格式
在python中序列化：
import json # 导入模块
json.dumps()
json.loads()
3、RegExp正则对象
# 创建正则表达式的两种方式
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}");
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/; # 推荐使用(简化)
reg2.test('abc123') true
'''括号内什么都不写 就相当于写了undefined'''
reg2.test() true
全局匹配：在正则表达式的最后添加一个字母g
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/g;
十三、BOM
1.window.open("url地址","打开的方式(可以是self或black)","新窗口的大小，窗口移动的位置")
'打开一个URL地址的网页，可设置该页面的宽高以及在浏览器上的位置'
PS：如果URL为空，则默认打开的一个空白页面，如果打开方式为空，则默认为新窗口方式打开的页面。
2.window.close()
'关闭的是当前的网页，就是浏览器页面的叉'
3.window.navigato.appVersion
'表示是否是一个浏览器，获取浏览器的信息，后期应用于爬虫'
4.window.history.forward()
'当前浏览器页面的上一个页面，前进一个页面'
5.window.history.back()
'当前浏览器页面的下一个页面，后退一个页面'
6.window.location.href
'获取当前网页的网址'
7.window.location.href= 新网址
'控制浏览器的输入框，相当于输入一个网址后回车'
8.window.location.reload()
'刷新当前页面'
9.alter()
'弹出一个警告框'
10.confirm()
'弹出一个确认框，点击确认或取消都会在控制台返回一个人true或false'
11.prompt('提示内容')
'弹出提示，可以输入，用户输完返回用户输入的数据，若没有输入操作则返回null'
12.定时器相关操作(重要)
setTimeout(函数,时间) # 只执行一次
clearTimeout(定时器名称) # 清除定时器
setInterval(函数,时间) # 无限执行，无论是否操作都执行
clearInterval(函数,时间) # 清除定时器
1）三秒后弹出警告框
function func1(){
alert('加油！！！')
}
setTimeout(func1,3000) // 3秒钟后自动执行函数
2）三秒后弹出警告框，取消上面的定时任务
function func1(){
alert('加油！！！')
}
let t = setTimeout(func1,3000) // 3秒钟后自动执行函数
clearTimeout(t) // 取消上面的定时任务
3）三秒后弹出警告框，循环执行
function func1(){
alert('加油！！！')
}
setInterval(func1, 3000) // 循环定时任务，如果不点击确定那么弹出框会积累很多，每三秒都是一个新的弹出框
4）三秒后弹出警告框，循环执行，设置9秒后取消定时任务
var s1 = null
function showMsg(){
function func1(){
alert('加油！！！')
}
s1 = setInterval(func1,3000)
}
function clearMission(){
clearInterval(s1)
}
setTimeout(clearMission, 9000)
showMsg()
十四、DOM
1、节点操作
1.标签查找
1）直接查找
document.getElementById()
根据id值查找标签，结果直接是标签对象本身，如果没有返回null
document.getElementsByClassName()
根据class值查找标签 结果是数组类型，如果没有查找到返回null
document.getElementsByTagName()
根据标签名查找标签 结果是数组类型，如果没有查找到返回null
2）间接查找
.parentElement 父节点标签元素
.children 所有子标签
.firstElementChild 第一个子标签元素
.lastElementChild 最后一个子标签元素
.nextElementSibling 下一个兄弟标签元素
.previousElementSibling 上一个兄弟标签元素
# 如果有标签对象需要反复使用，可以使用变量存储
let divEle = document.getElementById('d1');
"""
注意：
html文件是从上往下执行的，所以JS代码必须要确保body里面的文件代码运行完成后才执行，所以放在最下方的body文件内(紧挨着<body/>)
"""
2.节点操作
let xxxEle = document.createElement('标签') 创建标签
xxxEle.id = 'id值' 设置创建的标签的id属性
xxxEle.innerText = '内部文本' 设置标签的内部文本内容
divEle.append(xxxEle) 将创建的标签添加到divEle标签内部的最下方
let divEle = document.getElementById('d1');
let aEle = document.createElement('a')
aEle.href = 'http://www.sogo.com/'
aEle.innerText = '点我去搜狗'
# 因为是动态创建出来的，所以文档中没有展示
divEle.append(aEle)
# 临时创建，临时往文档添加，不会改变原本代码
aEle.id = 'ddd'
aEle
3.属性操作
xxxEle.属性 设置标签的默认属性
xxxEle.setAttribute() 即可以设置标签的默认属性也可以设置标签的自定义属性
let imgEla = document.createElement('img')
imgEla.src = '1.png'
imgEla.setAttribute('abc',123) # 添加属性并赋值
4.文本操作
divEle.innerText 获取标签内的所有文本内容
div.innerHTML 获取标签内所有的内容，包括标签和文本内容
divEle.innerText = '<h1>标题一</h1>' # 设置标签内容，不能够识别标签
div.innerHTML = '<h1>标题一</h1>' # 设置标签内容，能够识别标签
2、取值操作
语法：标签对象.value
适用于input、select、textarea...
语法：标签对象.files # 获取到的是数组，通过.[索引]获取具体的文件对象
适用于文件，获取文件数据
3、样式操作
标签对象.style.backgroundColor = 'red' # 将标签的背景色设置为红色
'''动态改变样式'''
js操作css属性的规律
1）对于没有中横线的CSS属性一般直接使用style.属性名即可。如：
标签对象.style.margin # 设置外边距
标签对象.style.width # 设置宽度
标签对象.style.left # 设置浮动
标签对象.style.position # 设置位置
2）对含有中横线的CSS属性，将中横线后面的第一个字母换成大写即可。如：
标签对象.style.marginTop # 设置距离顶部的外边距
标签对象.style.borderLeftWidth # 设置左边框的宽度
标签对象.style.zIndex # 设置首行缩进
标签对象.style.fontFamily # 设置字体
'''这种样式操作少见，样式由css负责，不应该用js操作，可以使js动态的改变一下样式'''
十五、事件
给html标签绑定一些额外的功能，能够触发js代码的运行。
1、常用事件
onclick 当用户点击某个对象时调用的事件
ondblclick 当用户双击某个对象时调用的事件
onfocus 元素获得焦点。 # 练习：输入框
onblur 元素失去焦点。 # 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange 域的内容被改变。 # 应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）
onkeydown 某个键盘按键被按下。 # 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onload 一张页面或一幅图像完成加载。
onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。
onselect 在文本框中的文本被选中时发生。
onsubmit 确认按钮被点击，使用的对象是form。
2、绑定事件的两种方式
1.提前写好函数，标签内部指定函数调用，设置点击属性
<input type="button" value="点我" onclick="func1()">
function func1(){
alert('点到我了')
}
2.先查找标签，然后批量绑定
<input type="button" value="点点点" id="d1">
let btnEle = document.getElementById('d1')
btnEle.onclick = function (){
alert('又点到我了')
}
3、事件中的关键字this
# 提前写好函数，标签内部指定函数调用，设置点击属性
<input type="button" value="点我" onclick="func1()">
function func1(){
alert('点到我了')
console.log(this)
}
'''this是当前操作的document文档'''
# 先查找标签，然后批量绑定
<input type="button" value="点点点" id="d1">
let btnEle = document.getElementById('d1')
btnEle.onclick = function (){
alert('又点到我了')
console.log(this)
}
'''this指代的是当前被操作的标签对象'''
4、window.onload
当我们给页面上的元素绑定事件的时候，必须等到文档加载完毕。因为我们无法给一个不存在的元素绑定事件。
'''等待文档加载完毕之后再执行一些代码'''
window.onload = function(){
页面js代码
}
十六、jQuery
1、介绍
jQuery是一个轻量级的、兼容多浏览器的javas'库。
2、jQuery类库的导入
1.CDN加速服务(在head内的script中加入)
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
2.jQuery官网下载后本地导入
<script src="jquery.js"></script>
注意：使用jQuery必须要先导入，本质就是js文件
"""
jQuery() >>> $()
"""
3、jQuery基本使用
1.基本选择器
id选择器：$('#id')
class选择器：$('.className')
标签选择器：$('tagName')
配合使用：$('div.c1') # 查找含有c1 class类的div标签
2.层级选择器
后代选择器：$("x y")
选择选择器x内部的所有符合的后代y
$("#d1>a") # 选择id为d1的元素里所有子元素a
子选择器：$("x > y")
选择选择器x内部的所有下一层级的符合的后代y
$("#d1>a") # 选择id为d1的元素里所有子元素a
相邻选择器：$("x + y")
选择选择器x后面紧跟着的选择器y
$("#d1+a") # 选择id为d1的元素后面紧跟的元素a
兄弟选择器: $("x ~ y")
选择选择器x后面的同级兄弟y
$("#d1~a") # 选择id为d1的元素后面的所有a标签
3.属性选择器
$("[属性名]")
$("[type]") # 选择所有有type属性的元素
$("[属性名='值']")
$("[class='p1']") # 选择使用有class属性且属性值为p1的元素
$("选择器[属性名]")
$(".div1[id]") # 选择class为div1的并且有id属性的元素
$("[属性名!='值']")
$("[class!='p1']") # 选择使用有class属性但是属性值不为p1的元素
4、jQuery选择器查找标签之后的结果与js的区别
# 结果集都是数组但是功能有区别
1.如果使用索引取值，那么结果都是标签对象
标签对象无法使用jQuery提供的方法
2.标签对象如果想要转换成jQuery对象需要使用 $()
转换成jQuery对象的目的就是为了使用jQuery提供的更多方法
$('p');
jQuery.fn.init(2) [p, p, prevObject: jQuery.fn.init(1)]
document.getElementsByTagName('p');
HTMLCollection(2) [p, p]
document.getElementsByTagName('p')[0];
<p style="color: green;">今天周五</p>
$('p')[0];
<p style="color: green;">今天周五</p>
$(document.getElementsByTagName('p')[0]);
jQuery.fn.init [p]
$('p')[0].css('color','pink');
VM953:1 Uncaught TypeError: $(...)[0].css is not a function
at <anonymous>:1:11
(anonymous) @ VM953:1
$('p')[0].style.color = 'pink';
'pink'
$('p').first().css('color','red');
jQuery.fn.init [p, prevObject: jQuery.fn.init(2)]
$('p').first().style.color = 'green';
VM1220:1 Uncaught TypeError: Cannot set properties of undefined (setting 'color')
at <anonymous>:1:28
(anonymous) @ VM1220:1
$($('p')[0]).css('color','green');
jQuery.fn.init [p]
5、基本筛选器
:first // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
| 过滤器名 | jQuery语法 | 说明 | 返回 |
|---|---|---|---|
| :first | $('li:first') | 选取第一个元素 | 单个元素 |
| :last | $('li:last') | 选取最后一个元素 | 单个元素 |
| :not(selector) | $('li:not(.red)') | 选取class不是red 的li元素 | 集合元素 |
| :even | $('li:even') | 选择索引(0开始)是偶数的所有元素 | 集合元素 |
| :odd | $('li:odd') | 选择索引(0开始)是奇数的所有元素 | 集合元素 |
| :eq(index) | $('li:eq(2)) | 选择索引(0开始)等于index 的元素 | 单个元素 |
| :gt(index) | $('li:gt(2)') | 选择索引(0开始)大于index的元素 | 集合元素 |
| :lt(index) | $('li:lt(2)') | 选择索引(0开始)小于index的元素 | 集合元素 |
| :header | $(':header') | 选择标题元素，hl ~h6 | 集合元素 |
| :animated | $(':animated') | 选择正在执行动画的元素 | 集合元素 |
| :focus | $(':focus') | 选择当前被焦点的元素 | 集合元素 |
6、表单筛选器
:text
$(':text') # 找到所有的text
:password
$(':password') # 找到所有的password
:file
$(':file') # 找到所有的file
:radio
$(':radio') # 找到所有的radio
:checkbox
$(':checkbox') # 找到所有的checkbox
:submit
$(':submit') # 找到所有的submit
:reset
$(':reset') # 找到所有的reset
:button
$(':button') # 找到所有的button
:enabled
:disabled # 禁用
:checked
:selected
# 找到可用的input标签
<form>
<input name="email" disabled="disabled" />
<input name="id" />
</form>
$("input:enabled") // 找到可用的input标签
# 找到被选中的option
<select id="s1">
<option value="beijing">北京市</option>
<option value="shanghai">上海市</option>
<option selected value="guangzhou">广州市</option>
<option value="shenzhen">深圳市</option>
</select>
$(":selected") // 找到所有被选中的option
浙公网安备 33010602011771号