前端内容
day01——前端前戏、http、head标签、body标签、
前端与后端的概念
前端
任何与用户直接打交道的操作界面 都可以称职位前端>>>:接待员
后端
不直接与用户打交道 主要负责内部真正的业务逻辑的执行>>>:幕后操作者
前端学习之路
专业的前端也需要培训至少六个月 而我们作为后端开发工程师 前端只学最基本最核心的一块 目的不是为了让你直接可以从事前端 而是给你以后的工作提供方便
1.防止别人蒙你
2.可以自己编写简易的页面
3.逼急了甚至也可以转前端
前端三剑客
HTML 网页的骨架
CSS 网页的样式
JavaScript 网页的动态
"""
蜡笔小新光着身子 HTML
穿裙子 抹口红 CSS
丢根钢管 舞起来 JS
"""
前端前戏
1.编写服务端
2.浏览器充当客户端访问服务端
3.浏览器无法正常展示服务端内容(因为服务端的数据没有遵循标准)
4.HTTP协议>>>:最主要的内容就是规定了浏览器与服务端之间数据交互的格式
conn.send(b'HTTP/1.1 200 OK \r\n\r\n')
HTTP协议
1.四大特性
1.基于请求响应
客户端发送请求 服务端回应响应
2.基于TCP、IP作用与应用层之上的协议
改协议属于应用层
3.无状态
服务端不会保存客户端的状态(记不住人)
纵使见她千百遍 我都当她如初见
4. 短链接
# 客户端和服务端建立链接之后，客户端发送一些请求，服务端响应一次，然后断开
# 长链接：一旦建立链接，不会立马断开，中间有间隔
'''客服系统------->长链接'''
2.数据格式
1.请求格式
请求首行（请求方式（有很多种）协议版本）
请求头(一大堆K:V键值对)
换行 \r\n
请求体(存放敏感信息 并不是所有的请求方式都有请求体)
'''不是所有的请求方式都有，get请求方式没有请求体，post请求方式有请求体'''
2.响应格式
响应首行(状态码 协议版本)
响应头(一大堆K:V键值对)
换行 \r\n
响应体(存放给浏览器展示的数据)
3.响应状态码
用数字来表达一些文字意义(类似于暗号)
1XX:服务端已经接收到了你的请求正在处理 客户端可以继续发送或者等待
2XX:200 OK 请求成功 服务端发送了对应的响应
3XX:302(临时) 301(永久) 重定向(想访问网页A但是自动调到了网页B)
4XX:403访问权限不够 404请求资源不存在
5XX:服务端内部错误
在公司中我们还会自定义更多的响应状态码 通常以10000起步
聚合数据
#补充：请求方式
1.get
# 朝服务端要数据
eg: 在网址栏里输入baidu.com
'''没有请求体，数据放在哪里了？跟在了网址的后面'''
https://www.baidu.com/s?k=v&k1=v1&k2=v2
https://www.baidu.com/s?wd=美女&ie=utf-8&
2. post
# 朝服务端提交数据
eg：你在登录网站的时候，输入用户名和密码，然后把用户名和密码提交到服务端进行验证
HTML简介
1.HTML注释语法
<!--注释内容--> # 快捷键 ctrl + ?
2.HTML文档结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> # 指定字符编码的
<title>Title</title>
</head> # head标签内写的东西不是让用户看的
<body></body> # body标签内写的东西都是让用户看的，在body中写什么，浏览器中就能看到什么
</html>
3.HTML标签分类
单标签(自闭和标签)
<img/>
双标签
<h1></h1>
<a></a>
head内常用的标签
1.title网页小标题
2.meta定义网页源信息(很多配置)
<meta name="keywords" content="查询关键字">
<meta name="description" content="网页简介">
3.style内部支持编写css代码
<style>
h1 {
color: greenyellow;
}
</style>
4.link引入外部css文件
<link rel="stylesheet" href="mycss.css">
5.script支持内部编写js代码也可以引入外部js文件
<script>
prompt('好好活着','不要浪费生命')
</script>
<script src="myjs.js"></script>
body内常用标签
1.标题系列标签
h1~h6
2.段落标签
<p></p>
3.其他标签
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除</s>
4.换行与分割线
br 换行
hr 分割线
"""
标签的分类二
1.行内标签
自身文本有多大就占多大
b i u s标签 span
2.块儿级标签
独自占一行
h1~h6 p div
"""
常见符号
1. 空格
2.> 大于
3.< 小于
4.& &符
5.¥ ¥
6.© © # 版权标
7.® ® # 注册标
body内布局标签
div
块儿级标签
span
行内标签
"""
标签之间可以相互嵌套 并且理论上可以无线套娃
块儿级标签内部可以嵌套块儿级标签和行内标签
p标签虽然是块儿级标签 但是它的内部也不能嵌套块儿级标签
行内标签内部只能嵌套行内标签
"""
# 这两个标签一般在刚开始构建页面的时候用，主要用来占位置的.
# span占的是文本位置
'''这两个标签没有实际的意义'''
img标签
<img src="" alt="">
'''img标签 图片标签 标签括号内填写的 什么=什么 称之为的标签的属性'''
1.src
2.alt
# 这两个都叫标签的属性
src
1.填写图片地址
2.还有更多特性 目前没法讲
alt
图片加载失败提示的信息
title
鼠标悬浮在图片上自动展示的文本
width="100px" height="500" # 两者调整一个即可 等比例缩放
# 宽和高是等比例缩放的，px是像素，
a标签
# 超链接标签
<a href=""></a>
href
1.填写网址 具备跳转功能
href='url'
2.填写其他标签的id值 具备锚点功能
href='#id'
target
默认_self原网页跳转
_blank新建网页跳转 target="_blank" # 新打开一个标签页跳转
"""a标签补充说明 针对没有点击过的网址 默认是蓝色 点击过的则为紫色"""
列表标签
无序列表
<ul type="disc">
<li>手机</li>
<li>衣物</li>
<li>电子</li>
</ul>
ps:页面上所有有规则排列的横向或者竖向的数据 一般使用的都是无序列表
"""
type属性
disc（实心圆点，默认值）
circle（空心圆圈）
square（实现方块）
none（无样式）
"""
有序列表
<ol type="I">
<li>111</li>
<li>222</li>
<li>333</li>
</ol>
ps:还可以通过type竖向切换数字
标题列表
<dl>
<dt>大标题</dt>
<dd>小标题1</dd>
<dd>小标题2</dd>
<dt>大标题</dt>
<dd>小标题1</dd>
<dd>小标题2</dd>
<dd>小标题3</dd>
</dl>
表格标签
1.先写基本骨架
<table>
<thead></thead>
<tbody></tbody>
</table>
# 我们可以使用table标签来画表格
<table>
thead
tr---->代表一行
td----->代表一列
tbody
tr----->代表一行
td----->代表一列
</table>
2.再写表头及表单数据
<table>
<thead>
<tr> 应该tr标签就表示一行
<th>编号</th> th主要用于表头字段中 用来加粗显示
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td> td主要用于表达数据中
<td>jason</td>
<td>18</td>
</tr>
</tbody>
</table>
"""
属性：
1.border：表格边框
2.cellpadding：内边框
3.cellspacing：外边距
4.rowspan：单元格竖跨多少行
5.colspan：单元格横跨多少列（即合并单元格）
"""
表单标签
可以获取到用户的数据并发送给服务端
form标签
action 控制数据的提交地址
1.什么都不写，默认提交到当前地址
2.全写：http://127.0.0.1:5000/index/ # 朝这个完整地址提交数据
3.只写后缀 /index/ # 会自动拼接路径 ip:port/index/ ---->在Django中会遇到
method 控制数据的提交方法(get post)
input标签(类似于前端的变形金刚)
"""
针对input标签理论上应该配一个label标签绑定 但是也可以不写
<label for="d1">username:
<input type="text" id="d1">
</label>
<label for="d1">username:</label>
<input type="text" id="d1">
"""
type属性
text 普通文本
<input type="text">
password 密文展示
<input type="password">
# placeholder="请输入密码" 对输入框做一个解释
date 日期选项
<input type="date">
email 邮箱格式
<input type="email">
radio 单选 # 一组的单选框需要name值一样
<input type="radio" name="gender">男
<input type="radio" name="gender">女
<input type="radio" name="gerden">其他
checkbox 多选 # 一组的多选要name值一样
<input type="checkbox" name="hobby">篮球
<input type="checkbox" name="hobby">足球
<input type="checkbox" name="hobby">乒乓球
<input type="checkbox" name="hobby">羽毛球
# 单选和多选如果默认选中 只需要给标签加check属性
file 文件
<input type="file"> # 单文件上传
<input type="file" multiple> # 多文件上传
submit 触发提交动作
<input type="submit">
reset 重置表单内容
<input type="reset">
button 暂无任何功能
<input type="button" value="按钮">
select标签 # 下拉框
option标签 一个个选项
<select>
<option value="">北京</option>
<option value="">上海</option>
<option value="">杭州</option>
</select>
textarea标签 # 获取大段文本
<textarea name="" id="" cols="30" rows="10"></textarea>
input标签一个有name属性
name属性相当于字典的键 input标签获取到的用户数据相当于字典的值
点击发送就会组织成字典的形式发送给服务端 这样才具有明确意义
"""
属性说明：
name：表单提交时的“键”，注意和id的区别
value：表单提交时对应项的值
当type="button","reset","submit"时，为按钮上显示的文本内容
当type="text","password","hidden"时，为输入框的初始值
当type="checkbox","radio","file"时，为输入相关的值
checked：radio和checkbox默认被选中的项
readonly：text和password设置只读（不能填写）
disabled：所有input均适用（禁用input 使input不能使用）
placeholder：对输入框做一个说明解释
"""
标签的两个重要属性
1.id
# 类似于身份证 应该html中 id值不能重复
2.class
# 每个标签都可以有class属性值 并且每个标签都可以有多个class值
3.标签不光有id和class属性 还可以自定义属性
<div id="" class="" username="aa" password="123"></div>
验证form表单把数据提交到后端
# 后端的代码大家混个脸熟即可，代码不需要掌握，flask框架写的
'''python中得框架：Django flask ... '''
# 先安装flask，然后在用
pip install flask
# form表单默认提交的请求方式是get，如何更改呢？
action:
1.什么都不写，默认提交到当前地址
2.全写：http://127.0.0.1:5000/index/ # 朝这个完整地址提交数据
3.只写后缀
/index/ # 它会自定拼接路径:ip:port/index/----->在Django框架中会遇到
method='post' # 改变提交方式的
# 针对于用户选择的标签，都应该又一个value值
<input type="checkbox" name="hobby" value="1"> 篮球
<input type="checkbox" name="hobby" checked value="2"> 足球
<input type="checkbox" name="hobby" checked value="3"> 台球
# 针对于文件上传
'''
必须满足2个条件
1.请求方式必须是post
2.enctype属性：
类似于是提交数据的编码格式
1.urlencode--->默认的提交格式，它只能提交普通文本数据，不能提交文件等数据
2.form-data--->支持了提交文件数据，并且也可以提交普通文本数据
3.json-------->{"k","v"}
3.form表单只能提交2种
urlencode form-data
不能提交json格式数据
4.enctype="multipart/form-data"
'''
flask代码
from flask import Flask,request
app = Flask(__name__)
# 路由地址----->网址栏里面地址后面的后缀
@app.route('/index/',methods=['GET','POST'])
def index():
# 接收前端提交过来的数据
print(request.form) # ---->form只能接收post提交的文本数据，不能接收get提交的数据
print(request.files) # 接收文件数据
file_obj =request.files.get('myfile')
file_obj.save(file_obj.filename)
return 'OK'
# 启动框架
app.run()
day02——css层叠样式表、css选择器及优先级、css样式调节
css层叠样式表
主要用来调节html标签的各种样式
标签的两大重要属性>>>:区分标签
1.class属性
分门别类 主要用于批量查找
2.id属性
精确查找 主要用于点对点
学习css的流程
1.先学习如何查找标签
2.再学习如何调整样式
1.css语法结构
选择器{
样式名1:样式值1;
样式名2:样式值2
}
2.css注释语法
/*注释内容*/
3.引入css的多种方式
1.head内style标签内部编写(学习的时候使用)
<style>
p{
color:red;
}
</style>
2.<link href="mystyle.css" rel="stylesheet" type="text/css"/>
3.行内式
<h1 style="color:red">
开始学习css了
</h1>
css基本选择器
基本选择器
1.标签选择器(直接按照标签名查找标签)
div{
color:red;
}
2.类选择器(按照并且的class值查找标签)
.c1{
color：green;
}
3.id选择器(根据标签的id值精准查找标签)
#d1 {
color:yellow;
}
4.通用选择器(直接选择页面所有的标签)
* {
color:blue;
}
css组合选择器
css组合选择器
"""
预知知识点 我们对标签的嵌套有另外一套说辞
<p>ppp</p>
<p>ppp</p>
<div>div
<div>divdiv
<p>divdivp
<span>divdivpspan</span>
</p>
</div>
<p>divp</p>
<span>divspan</span>
</div>
<p>ppp</p>
<span>spanspan</span>
"""
针对标签的上下层级以及嵌套有另外的说法
父标签 后代标签 子标签 弟弟标签 哥哥标签 祖先标签
1.后代选择器(空格)
div span{
color:red;
}
2.儿子选择器(>)
div>span{
color:yellow
}
3.毗邻选择器(+)
div+span{
color:green
}
4.弟弟选择器(~)
div~span{
color:blue;
}
分组与嵌套
<!-- 多个选择器合并查找 -->
div,p,span{
color:yellow;
}
#d1,.c1,spam{
color:green;
}
<!-- 查找class含有c1的div -->
div.c1{
color:red
}
<!-- 查找id是d1的div -->
div#d1{
color:red;
}
<!-- 查找含有c1样式值里面的含有c2样式值的p标签 -->
.c1 p.c2{
color:pink;
}
属性选择器
<!-- 按照属性名查找 -->
[username]{
color:red;
}
<!-- 按照属性名等于属性值查找 -->
[username='jaso0n']{
color:yellow;
}
<!-- 按照标签中指定属性查找 -->
p[username]{
color:red;
}
<!-- 按照标签中指定属性名等于属性值查找 -->
p[username='jason']{
color:yellow;
}
伪类与伪元素选择器
伪类选择器
<!-- 鼠标放在a标签上面显示的颜色 -->
a:hover{
color:orange;
}
<!-- input获取焦点(被点击)之后采用的样式 -->
input:focus{
background-color:red;
}
伪元素选择器
<!-- p标签第一个字改变样式 -->
p:first-letter{
font-size:48px;
color:red
}
<!-- css添加文本开头无法正常选中 -->
p:before{
content:'嘿嘿嘿';
color:blue;
}
<!-- css添加文本结尾无法正常选中 -->
p:after{
content:'呵呵呵';
color:red;
}
选择器优先级
1.选择器相同 导入方式不同
就近原则
2.选择器不同 导入方式不同
内联样式 > id选择器 > 类选择器 > 标签选择器
css样式调节
字体样式
font-size:14px 24px 28px 36px <!-- 常用字体大小 -->
font-weight:lighter; <!--字体粗细-->
color:三种模式
color:red;
color:#3d3d3d;
color:rgb(186,11,98)
rgba()最后一个参数还可以控制透明度 0~1
text-align:center <!--文本居中 right右对齐 left左对齐-->
text-decoration:none; <!--主要用于a标签取消下划线-->
<!--overline装饰线在文本上方 line-throug类似于s标签删除线 -->
text-indent:32px; <!--首行缩进-->
背景属性
div{
width:800px;
height:800px;
<!--盒子的大小-->
background-color:red;
<!--背景颜色-->
background-image: url("背景图片网址")
background-image: url("背景图片名字")
<!--背景图片-->
background-repeat:no-repeat;
<!--取消平铺-->
background-repeat:repeat-x;
<!--横向平铺-->
background-repeat:repeat-y;
<!--纵向平铺-->
background-position:center center;
<!--背景图片位置第一个属性值左右位置 第二个属性值上下位置 可以在检查里面通过键盘上下键微调-->
background-attachment:fixed;
<!--背景附着 固定不动-->
background:url("背景图片") red no-repeat center center;
<!--当多个属性名有相同的前缀 可以简写-->
}
day3——边框、盒子模型、浮动、溢出、定位、z-index、简易博客
边框
/*border-left-width: 5px;*/
/*border-left-style: dotted;*/
/*border-left-color: #0000ff;*/
/*border-left: 3px solid black;*/
border: 10px solid orange;
画圆
border-radius:50%
display
"""
行内标签是无法设置长宽 只有块儿级可以设置
"""
display：none # 彻彻底底的隐藏标签(页面上不会显示 也不会保留标签的位置)
visibility:hidden # 隐藏的不彻底
盒子模型
我们可以将标签看成是一个盒子(快递盒)
1.快递包里面的实际物体 content(内容)
2.物体与内部盒子墙的距离 padding(内边距、内填充)
3.快递盒的厚度 border(边框)
4.快递盒之间的距离 margin(外边距)
/* !*padding: 20px; 上下左右*!*/
/* !*padding: 20px 40px; 上下 左右*!*/
/* !*padding: 10px 20px 30px;上 左右 下*!*/
/* !*padding: 10px 20px 30px 40px;上 右 下 左*!*/
margin与padding用法一致
针对标签的嵌套 水平方向可以居中
margin: 0 auto;
浮动
浮动就是用来做页面布局的
浮动的现象
float:left\right
浮动带来的影响
浮动的元素是脱离正常文档流的 会造成父标签塌陷
如何解决浮动的影响
clear
解决浮动带来的影响终极方法
先提前写好样式类
.clearfix:after{
content:'';
display:block;
clear:both
}
谁塌陷了 就给谁添加clearfix样式类就可以了
ps:浏览器会优先展示文本内容(如果被挡住)
溢出
div{
height:150px;
width:150px;
border:5px solid black;
border-radius:50%;
overflow:hidden;
}
div img{
max-width:100%
}
定位
标签在默认情况下都是无法通过定位的参数来移动
针对定位有四种状态
1.static静态(标签默认的状态 无法定位移动)
2.relative相对定位(基于标签原来的位置 从static变成relative 标签的性质已经发生了变化 由原来的不能移动位置变成了可移动位置)
3.absolute绝对定位(基于某个定位过的父标签做定位)
4.fixed固定定位(基于浏览器窗口固定不动)
/*绝对定位*/
.c1{
background-color:red;
width:100px;
height:100px;
position:relative;
}
.c2{
background-color:yellow;
width:200px;
height:100px;
position:absolute;
top:100px;
left:100px;
}
/*固定定位*/
.c3{
background-color:red;
width:100px;
height:100px;
position:fixed
right:100px;
bottom:200ox;
}
z-index
body{
margin:0;
}
.cover{
background-color:rgba(127,127,127,0.5);
position:fixed;
left:0;
right:0;
top:0;
bottom:0;
z-index:100;
}
.modal{
background-color:white;
width:400px;
height:200px;
position:fixed;
left:50%;
top:50%;
z-index:150
margin-left:-200px;
margin-top:-100px;
}
简易博客
1.分析页面结构
利用布局标签div和span搭建架子
2.先编写网页骨架
HTML
3.再编写CSS
4.最后编写JS
day4——JS简介、JS基础、变量常量、基本数据类型、流程控制、函数、内置对象
JS简介
// JavaScript和Java没有半毛钱关系，由于当时的Java热度很热，蹭一下热度
// JavaScript简称js
ECMAScript的历史
ECMAScript 5.1
ECMAScript 6
js的核心部分
● 核心（ECMAScript）
● 文档对象模型（DOM） Document object model (整合js，css，html)
● 浏览器对象模型（BOM） Broswer object model（整合js和浏览器）
简单的说，ECMAScript 描述了JavaScript语言本身的相关内容
JavaScript 是脚本语言
JavaScript 是一种轻量级语言
JavaScript 是可插入 HTML 页面的编程代码
JavaScript 插入HTML页面后 可由所有的现代浏览器执行
JavaScript 很容易学习
JS基础
1.注释语法
// 单行注释
/*
多行注释
多行注释
*/
2.书写位置
"""
1.直接开设JS文件写
2.在html文档中的script标签内书写
3.在浏览器的控制台中也可以写
"""
3.引入方式
1.script标签中书写
2.script中的src属性
4.结束符号
分号(很多时候不写也没问题)
// 注意：;不是必须写的，你也可以不写，但是推荐你都写上
变量与常量
1.变量
// 声明变量的两种方式
// es5语法
var name='jason';
// es6语法
let name='jason';
'''我们在写js代码的时候都选择es6版本因为es6版本兼容es5'''
2.常量
// python中没有真正意义的常用 但在js中有
// 在js中声明常量也需要使用关键字
const
const pi = 3.14;
数据类型
"""
在js中查看数据类型的方式 typeof
"""
1.数值类型(Number)
在js中整型与浮点型不分家 都叫number
NaN也属于数值类型 意思是:不是一个数字(Not A Number)
2.字符类型(string)
单引号 'jason'
双引号 "jason"
模版字符串 `jason` // 格式化输出
let name1 = 'jason'
let age1 = 18
undefined
let desc = `my name is ${name1} my age is ${age1}`
1.字符串的拼接使用加号
2.常见内置方法
/*
.length 返回长度
.trim() 移除空白
.trimLeft() 移除左边的空白
.trimRight() 移除右边的空白
.cahrAt(n) 返回第n个字符
.concat(value,...) 拼接
.indexOf(substring,start) 子序列位置
.substring(from, to) 根据索引获取子序列
.slice(start, end) 切片
.toLowerCase() 小写
.toUpperCase() 大写
.split(delimiter, limit) 分割
*/
3.布尔值(boolean)
JS里面的布尔值与python不同
js是纯小写的 而python是首字母大写
// 在js中有哪些是假的？
0 空字符串 NaN null undefined
4.null与undefined
null表示值为空(曾经拥有过) undefined表示没有定义(从来没有过)
5.对象(object)
对象之数组(array)>>>:类似于python中的列表
let l1 = []
/*常用方法：
.length 数组的大小
.push(ele) 尾部追加元素
.pop() 获取尾部的元素
.unshift(ele) 头部插入元素
.shift() 头部移除元素
.slice(start, end) 切片
.reverse() 反转
.join(seq) 将数组元素连接成字符串
.concat(val, ...) 连接数组
.sort() 排序
*/
对象之自定义对象(object)>>>:类似于python的字典
let d1 = {'name':'jason'}
let d2 = new Object();
d1.name >>> jason
forEach的用法
var arr = ['kevin', 'tank', 'jerry', 'tony'];
// arr.forEach(function (value) {
// console.log(value);
// })
// arr.forEach(function (value, index) {
// console.log(value, index);
// })
// arr.forEach(function (value, index, array) {
// console.log(value, index, array);
// })
循环变量数组
let i = 10;
let arr=[11,22,33,44]
for (let i=10;i<arr.length;i++){
console.log(arr[i])
}
运算符
1.算术运算符
+ - * / % ++(自增1) --(自减1)
var x=10;
var res1=x++; 加号在后面先赋值再自增
var res1=++x; 加号在前面先自增后赋值
2.比较运算符
!=(值不等 弱) ==(值相等 弱) ===(值相等 强) !==(值不等强)
ps:弱是js会自动转换类型进行比较
3.逻辑运算符
&&(与) ||(或) !(非)
流程控制
1.单if分支
if(条件){
条件成立执行的代码
}
2.if...else分支
if(条件){
条件成立执行的代码
}else{
条件不成立执行的代码
}
3.if...else if...else分支
if(条件){
条件1成立执行的代码
}else if(条件2){
条件1不成立条件2成立执行的代码
}else{
条件1和条件2都不成立执行的代码
}
4.如果分支结构中else if很多还可以考虑使用switch语法
switch(条件){
case 条件1:
条件1成立执行的代码;
break; // 如果没有break会基于某个case一直执行下去
case 条件2:
条件2成立执行的代码;
break;
case 条件3:
条件3成立执行的代码;
break;
case 条件4:
条件4成立执行的代码;
break;
default:
条件都不满足执行的代码
}
for循环
for循环
for(起始条件;循环条件;条件处理){
循环体代码
}
for(let i=0;i<10;i++){
console.log(i)
}
let dd = {'name':'jason','age':18}
for(let k in dd){
console.log(k)
}
while循环
while(循环条件){
循环体代码
}
三元运算
Python中 值1 if 条件 else 值2
JS中 条件 ？ 值1 ：值2
函数
/*
python中的函数定义
def 函数名(形参)
'''函数注释'''
函数体代码
return 返回值
*/
function 函数名(形参){
// 函数注释
函数体代码
return 返回值
}
// 匿名函数
let s1 = function(a,b){
return a+b
}
// 箭头函数
let f = v => v
let f = function(v){
return v;
}
let f = () => 5
let f = function(){
return 5;
}
let sum = (num1,num2) => num1+num2;
let sum = function(num1,num2){
return num1+num2;
}
1.js中函数的形参与实参个数可以不适应
传少了就是undefined 传多了不用
2.函数体代码中有一个关键字arguments用来接收所有的实参
3.函数的返回值如果有多个需要自己处理成一个整体 return [11,22,33]
内置对象
var d =new Date();
console.log(d.toLocaleString()) // 获取当前时间
getDate() 获取日
getDay() 获取星期
getMonth() 获取月（0-11）
getFullYear() 获取完整年份
getYear() 获取年 // 和1900的年份差值
getHours() 获取小时
getMinutes() 获取分钟
getSeconds() 获取秒
getMillIseconds()获取毫秒
getTime() 返回累计毫秒数(从1970/1/1午夜)
let dd = {'name':'jason','age':18}
json.stringify(dd) 序列化
json.parse(ss) 反序列化
定义正则两种方式
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}")
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/;
1.全局模式的规律
lastindex
2.test匹配数据不传默认值undefined
day5——BOM操作、DOM操作、查找标签、操作节点、获取值、class与css操作、事件、事件实战、jQuery类库、标签对象与jQuery对象
BOM操作
BOM(Browser Object Model) 是指浏览器对象模型，它使JavaScript有能力与浏览器进行对话
window.open()
window.open('https//www.sogo.com/','','width=800px,left=200px')
window.close()
关闭当前浏览器窗口
navigator.userAgent()
标识自己是一个浏览器
history.forward()
前进一页
history.back()
后退一页
window.location.reload()
刷新当前页面
window.location.href
获取当前页面所在的网址 也可以再加赋值符号和网址跳转
window.location.href = "URL" // 跳转到指定网址
alter()
警告框
confirm()
确认框
prompt()
提示框
计时器相关操作(重要)
function showMsg(){
alter('哈哈哈哈哈哈')
}
let t = setTimeout(showMsg,3000) // 3000毫秒之后执行函数
clearTimeout(t) // 取消任务
let t = setInterval(showMsg,3000) // 每隔3000毫秒执行一次
clearInterval(t) // 取消循环任务
DOM操作
DOM （Document Object Model）是指文档对象模型，通过它可以访问HTML文档的所有元素
既然DOM操作是通过js代码来操作标签 所以我们需要先学习如何查找标签之后才能给标签绑定一些JS代码(DOM操作)
查找标签
/*
1.js中变量名的命名风格推荐是驼峰体
2.js代码查找到的标签如果需要反复使用可以用变量接收 规律 ×××Ele
*/
document.getElementById('d1')
结果就是标签对象本身
document.getElementsByClassName('c1')
结果是数组里面含有多个标签对象
document.getElementsByTagName('span')
结果是数组里面含有多个标签对象
parentElement 父节点标签元素
children 所有子标签
firstElementChild 第一个子标签元素
lastElementChild 最后一个子标签元素
nextElementSibling 下一个兄弟标签元素
previousElementSibling 上一个兄弟标签元素
操作节点
// js代码创建一个标签
let aEle = document.createElement('a')
// js代码操作标签属性
aEle.href = 'http://www.lsmpx.com/' 只能添加默认的属性
setAttribute() 兼容默认属性和自定义属性 // 设置属性
getAttribute("age") // 获取属性
removeAttribute("age") // 移除属性
// js代码操作标签文本
aEle.innerText = '这个很攒劲!'
// js代码查找div标签并将a追加到div内部
let divEle = document.getElementsByTagName('div')[0]
divEle.appendChild(aEle)
.innerText 获取标签内部所有的文本内容
.innerText = '文本' 替换/设置标签内部的文本(不识别标签语法)
.innerHTML 获取标签内部所有的标签包含文本
.innerHTML = '文本' 替换/设置标签内部的文本(识别标签语法)
获取值操作
1.针对用户输入的和用户选择的标签
标签对象.value
2.针对用户上传的文件数据
标签对象.files >>>> fileList [文件对象,文件对象,文件对象]
标签对象.files[0]>>>> 文件对象
class与css操作
1.js操作标签css样式
标签对象.style.属性名(下划线没有 变成驼峰体)
2.js操作标签class属性
标签对象.classList.add() // 添加属性
标签对象.classList.contains() // 判断是否有这个属性
标签对象.classList.remove() // 移除属性
标签对象.classList.toggle() // 有则移除 没有则添加
事件
事件可以简单的理解为通过js代码给html标签绑定一些自定义的功能
常见事件
onclick 当用户点击某个对象时调用的事件句柄
onfocus 元素获得焦点
onblur 元素失去焦点
onchange 域的内容被改变
绑定事件的多种方式
<!--绑定事件的方式1-->
<button onclick="showMsg()">快按我</button>
<!--绑定事件的方式2-->
<input type="button" balue="快快快" id="d1">
<script>
function showMsg(){
let msg = prompt('你确定要这样吗?');
console.log(msg)
}
let inputEle = document.getElementById('d1');
inputEle.onclick = function(){
alert('谁在那里点我！！！')
}
</script>
事件函数中的this关键字
this指代的就是当前被操作的标签对象本身
如果事件函数内有多层嵌套那么最好在一开始用变量存储一下防止后续变化
onload方法
xxx.onload 等待xxx加载完毕之后再执行后面的代码
事件实战案例
<input type="text" value="游戏机" id="d1">
<script>
let inputEle = document.getElementById('d1')
inputEle.onfocus = function () {
this.value = ''
}
inputEle.onblur = function () {
this.value = '下次再来哟!'
}
</script>
<p>username:
<input type="text" id="d1">
<span style="color: red"></span>
</p>
<p>password:
<input type="text" id="d2">
<span style="color: red"></span>
</p>
<button id="suBtn">提交</button>
<script>
// 1.查找提交按钮的标签
subEle = document.getElementById('suBtn')
// 2.给按钮标签绑定点击事件
subEle.onclick = function (){
// 3.查找获取用户输入的标签并获取数据
let userNameEle = document.getElementById('d1')
let passWordEle = document.getElementById('d2')
if(userNameEle.value === 'jason'){
userNameEle.nextElementSibling.innerText = '用户名不能是Jason'
}
if(passWordEle.value === '123'){
passWordEle.nextElementSibling.innerText = '密码不能是123'
}
}
</script>
省:
<select name="" id="d1">
</select>
市:
<select name="" id="d2">
</select>
<script>
let data = {
"河北": ["廊坊市", "邯郸市"],
"北京": ["朝阳区", "海淀区"],
"山东": ["威海市", "烟台市"],
"安徽": ["芜湖市", "合肥市"],
"上海": ["浦东新区", "静安区"]
}
// 提前查找好省和市的select标签
let proSeEle = document.getElementById('d1');
let citySeEle = document.getElementById('d2');
// 1.获取所有的省信息
for (let pro in data) {
// 2.创建option标签
let proOpEle = document.createElement('option');
// 3.添加文本及属性
proOpEle.innerText = pro;
proOpEle.setAttribute('value', pro);
// 4.将创建好的option标签添加到省下拉框中
proSeEle.appendChild(proOpEle)
}
// 5.给省标签绑定文本域变化事件 onchange
proSeEle.onchange = function () {
citySeEle.innerHTML = ''; // 每次操作市之前清空市数据
// 6.获取用户选择的省信息 根据省获取市信息
let targetProData = this.value;
let cityDataList = data[targetProData];
// 7.循环获取每一个市信息 创建option标签 添加到市下拉框中
for (let i = 0; i < cityDataList.length; i++) {
let cityOpEle = document.createElement('option');
cityOpEle.innerText = cityDataList[i];
cityOpEle.setAttribute('value', cityDataList[i]);
citySeEle.appendChild(cityOpEle)
}
}
</script>
jQuery类库
"""
IE浏览器:前端针对IE有时候需要单独再编写一份代码
"""
Write less,do more 写的更少做的更多
1.加载速度快
2.选择器更多更好用
3.一行代码走天下
4.支持Ajax请求(重点)
5.兼容多浏览器
准备工作
1.下载核心文件到本地引入(没有网络也可以使用)
<script src="jQuery3.6.js"></script>
2.CDN网络资源加载(必须有网络才可以使用) /* 网址：ps://www.bootcdn.cn/ */
https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js
https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js
什么是CDN
内容分发网络
jQuery导入之后需要使用关键字才可以使用
默认的关键字就是jQuery但是不好输入>>>: jQuery的简写为$
jQuery封装了js代码 让编写更简单 但是有时候js代码更快
js代码与jQuery代码对比
let pEle = document.getElementByTagName('p'){0}
underfined
pEle.style.color = 'red'
'red'
pEle.NextElementSibling.style.color = 'green'
$('p').first().css('color','yellow').netx().css('color','blue')
标签对象与jQuery对象
1.不同的对象能够调用的方法是不同的
在编写代码的时候一定要看清楚手上是什么对象
2.两者可以互相转换
标签对象转jQuery对象
$(标签对象)
jQuery对象转标签对象
jQuery对象[0]
作业讲解
1.优化校验用户名密码的代码
// 查找获取用户输入的标签
let userNameEle = document.getElementById('d1')
let passWordEle = document.getElementById('d2')
// 查找提交按钮的标签
subEle = document.getElementById('suBtn')
// 给按钮标签绑定点击事件
subEle.onclick = function (){
if(userNameEle.value === 'jason'){
userNameEle.nextElementSibling.innerText = '用户名不能是jason'
}
if(passWordEle.value === '123'){
passWordEle.nextElementSibling.innerText = '密码不能是123'
}
}
userNameEle.onfocus = function () {
this.nextElementSibling.innerText = ''
}
passWordEle.onfocus = function () {
this.nextElementSibling.innerText = ''
}
2.简易版本页面计时器
<input type="text" id="d1">
<button id="startBtn">开始</button>
<button id="stopBtn">结束</button>
<script>
// 先写最简单的起步>>>:点击开始按钮 将那一刻的时间展示到input框中即可
// 想让展示时间的代码能够根据时间的变化反复的执行>>>:循环定时任务
// 再创建结束按钮点击即终止循环定时任务的执行>>>:结束定时任务
let startBtnEle = document.getElementById('startBtn')
let stopBtnEle = document.getElementById('stopBtn')
let inputEle = document.getElementById('d1')
function showTime() {
let current = new Date()
inputEle.value = current.toLocaleString()
}
//全局定义一个储存计时器的变量名
let t
startBtnEle.onclick = function () {
if (!t){
t = setInterval(showTime,1000)
}
}
stopBtnEle.onclick = function () {
clearInterval(t)
t = null
}
</script>
day6——jQuery查找标签、节点操作、事件绑定、Bootstrap页面框架
jQuery查找标签
1.基本选择器
$('#d1') id选择器
$('.c1') class选择器
$('div') 标签选择器
2.组合选择器
$('div#d1') 查找id是d1的div标签
$('span.c1') 查找含有c1样式类的span标签
$('div,span,p') 查找div或者span或者p标签
$('#d1,.c1,span') 查找id是d1的或者class含有c1的或者span标签
3.层级选择器
$('div p') 查找div里面所有的后代p标签
$('div>p') 查找div里面的儿子p标签
$('div+p') 查找div同级别下面紧挨着的p标签
$('div~p') 查找div同级别下面所有的p标签
4.属性选择器
$('[username]') 查找含有username属性名的标签
$('[username="jason"]') 查找含有username属性名并且值等于jason的标签
$('input[username="jason"]')
5.基本筛选器
:first // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
$('li:first') 优化 $('li').first()
6.表单筛选器
$(':text')
$(':password')
$(':checked') 默认值时 checked与selected都会找到
$(':selected') 只会找selected的
7.筛选器方法
$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")
$("#id").parent()
$("#id").parents() // 查找当前元素的所有的父辈元素
$("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。
$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们
操作标签
1.class操作
addClass() classList.add() //添加属性
removeClass() classList.remove() //移除属性
hasClass() classList.contains()//是否存在这个属性
toggleClass() classList.toggle() //有则移除 没有则添加
2.位置操作
$(window).scrollTop()
3.文本操作
text() innerText
html() inneHTML
val() value
jQuery对象[0].files files[0]
4.创建标签
$('<a>') document.createElement()
5.属性操作
attr()/removeAttr() xxxAttribute()
attr(attrName) // 获取值
attr(attrName, attrValue)// 设置属性
attr({k1: v1, k2:v2}) // 设置多个属性
removeAttr() // 删除属性
attr针对动态变化的属性获取会失真
prop('checked') prop('selected') //prop可以动态获取
6.文档处理
$(A).append(B)// 把B追加到A
$(A).appendTo(B)// 把A追加到B
$(A).prepend(B)// 把B前置到A
$(A).prependTo(B)// 把A前置到B
$(A).after(B)// 把B放到A的后面
$(A).insertAfter(B)// 把A放到B的后面
$(A).before(B)// 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面
remove() //连标签一起删除
empty() //只删除标签内的内容
jQuery
JS绑定事件
标签对象.on事件名 = function(){}
jQuery绑定事件
方式一：
jQuery对象.事件名(function(){})
eg:// $('#d1').click(function () {
// alert('今天周二')
// })
方式二：
jQuery对象.on('事件名称'，function(){})
eg:// $('#d1').on('click',function () {
// alert('今天周二啊啊啊')
// })
ps:默认就用方式1，不行了再用方式2
ps:补充
clone属性(克隆) // 克隆默认情况下只克隆标签的样子 不克隆事件
<button style="border: 3px solid orange">屠龙宝刀，点我就送</button>
<script>
$('button').click(function () {
$('body').append($(this).clone(true)) // clone(true) 默认不克隆事件 加true就可以
})
</script>
hover事件
<script>
$('#d1').hover(function(){
console.log(123);
},function(){
console.log(321);
})
</script>
// 第一个参数是鼠标移进去触发的动作，第二个参数是鼠标移走触发的动作
事件相关补充
1.取消后续事件
事件函数的最后return false即可(推荐使用)
事件函数的最后e.preventDefault()
2.阻止事件冒泡
事件函数的最后return false即可
事件函数的最后e.stopPropagation()
3.等待页面加载完毕再执行代码
$(function(){}) 缩略写法
$(document).ready(function(){}) 完整写法
4.事件委托
主要针对动态创建的标签也可以使用绑定的事件
$('body').on('click','button',function(){})
将body内所有的单击事件委托给button标签执行 // 动态添加的也可以
eg：
let $btnEle = $('<button>')
$btnEle.text('选我')
$('body').append($btnEle)
jQuery动画效果（了解）
// 基本
show([s,[e],[fn]]) // $('div').show(3000)
hide([s,[e],[fn]]) // $('div').hide(3000)
toggle([s],[e],[fn]) // $('div').toggle(3000)
// 滑动
slideDown([s],[e],[fn])
slideUp([s,[e],[fn]])
slideToggle([s],[e],[fn])
// 淡入淡出
fadeIn([s],[e],[fn])
fadeOut([s],[e],[fn])
fadeTo([[s],o,[e],[fn]])
fadeToggle([s,[e],[fn]])
// 自定义（了解即可）
animate(p,[s],[e],[fn])
bootstrap页面框架
别人已经提前写好了一大堆css和js 我们只需要引入之后按照人家规定好的操作方式即可使用所有的样式和功能
去百度中搜索bootstrap：https://www.bootcss.com/
版本有很多 使用V3即可
文件结构
bootstrap.css
bootstrap.js
ps:js部分是需要依赖于jQuery
CDN
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" >
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
pycharm自动提示问题
最好本地导入几次
核心部分讲解
使用bootstrap其实只需要操作标签的样式类即可
布局容器
class = "container" 有留白
class = "container-fluid" 没有留白
栅格系统
class = "row" 一行均分12份
class = "col-md-6" 从一行12份划分6份
<div class = "row"> # 一行12分分成6份和6份
<div class = "col-md-6"></div>
<div class = "col-md-6"></div>
</div>
屏幕参数
col-md-6 # 中等屏幕 桌面显示器 (≥992px)
col-xs-2 # 超小屏幕 手机 (<768px)
col-sm-3 # 小屏幕 平板 (≥768px)
col-lg-3 # 大屏幕 大桌面显示器 (≥1200px)
栅格偏移
col-md-offset-3 # 向右移三份
重要样式
1.表格样式
<table class="table table-hover table-striped">
颜色
<tr class="active">...</tr> # 浅灰
<tr class="success">...</tr> # 浅青
<tr class="warning">...</tr> # 浅黄
<tr class="danger">...</tr> # 浅粉
<tr class="info">...</tr> # 浅蓝
2.表单标签
class = "form-control" # radio和checkbox 不能用
3.按钮组
class = "btn btn-success btn-block"
组件
1.图标
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
https://fontawesome.com.cn/
2.导航条
class="navbar navbar-inverse"
3.其他
