前端学习之路有哪些关键步骤？
- 内容介绍
- 文章标签
- 相关推荐
本文共计3959个文字，预计阅读时间需要16分钟。
前端+、什么是前端+？+与用户直接打交道的操作界面都可称之为前端。例如：电脑界面、手机界面、平板界面+、什么是后端？+暂时先理解成幕后操作者+、不直接与用户打交道+、二、为“前端+提供支持的服务器+、数据库等+。”
前端
一、什么是前端
- 任何与用户直接打交道的操作界面都可以称之为前端。比如：电脑界面、手机界面、平板界面
什么是后端？ 暂时先理解成 幕后操作者 不直接与用户打交道
二、为什么要学前端
全栈开发工程师
三、前端学习之路
- HTML 内容 网页的骨架 标签
- CSS 外观 网页的样式 选择器 属性
- JavaScript 动作 网页的动态效果 基础语法 BOM&DOM
- 前端框架 Bootstrap
Web服务的本质
浏览器中敲入网址回车发生了几件事？
1.浏览器向服务端发送请求
2.服务端接收请求
3.服务端返回相应的响应
4.浏览器接收响应 根据特定的规则渲染页面展示给用户看
四、HTTP协议
超文本传输协议
规定了浏览器与服务端之间消息传输的数据格式
四大特性：
1.基于请求响应
2.基于TCP/IP之上的作用于应用层的协议
3.无状态（服务端无法保存用户的状态，一个人来一千次 我都记不住 还当你如初见）
4.无连接（请求来一次我响应一次 之后立马断开连接 两者之间就不再有任何关系）
websocket 相当于是HTTP协议的一个大的补丁 它支持长链接
请求数据格式
请求首行（标识HTTP协议版本 当前请求方式）
请求头（一大堆k,v键值对）
请求体（携带的是一些敏感信息比如 密码 身份证号...）
响应数据格式
响应首行（标识HTTP协议版本 响应状态码）
响应头 （一大堆k,v键值对）
响应体 （携带的是一些敏感信息比如 密码 身份证号...）
响应状态码
用一串简单的数字来标识一些复杂的状态或者提示信息
1xx:服务端已经成功接收了你的数据正在处理 你可以继续提交额外的数据
2xx:服务端成功响应 你想要的数据（请求成功200）
3xx:重定向（当你在访问一个需要登录之后才能访问的页面 你会发现窗口会自动调到登录页面 301 302）
4xx:请求错误（请求资源不存在404 请求不合法不符合内部规定会权限不够 403）
5xx:服务器内部错误（500）
请求方式
- get请求
向服务端要资源（比如浏览器窗口输入www.baidu.com) - post请求
超服务端提交数据（比如用户登录 提交用户名和密码）
URL: 统一资源定位服务（网址）
HTML
超文本标记语言
HTML5
要想让你的页面能够正常被浏览器显示出来 你所写的页面 就必须遵循HTML标记语法
也就意味着所有能够被浏览器显示出来的页面 内部都是HTML代码
浏览器只认识html css js
web本质
浏览器
服务器
文件(后缀名.html结尾的文件 前端页面文件)
文件的后缀名仅仅是给人看的 计算机无所谓 因为都是二进制数据
HTML注释
写网页的一套标准
注释是代码之母
<!--单行注释-->
<!--
多行注释
多行注释
-->
一般情况下 html的注释都会按照下面的方式书写
HTML文档结构
<head></head>：head内的标签 不是用来展示给用户看的 而是定义一些配置 主要是给浏览器看的 <body></body>：body内的标签 就是浏览器展示给用户看的内容打开HTML页面的两种方式
1.招到文件路径 选择浏览器打开
2.pycharm快捷方式直接打开
标签的分类1
1.双标签(<h1></h1> <a></a>)
2.单标签(自闭和标签 <img/>)
head内常用标签
title用来显示网银标题
style用来控制样式 内部支持写css代码
script内部支持写js代码 也支持导入外部的js文件
emmet插件
1.服务器渲染：在服务器那边直接把数据和html整合在一起，统一返回给浏览器
在页面源代码中能看到数据
2.客户端渲染：第一次请求只要一个html骨架 第二次请求拿到数据 进行数据展示
在页面源代码中 看不到数据
熟练使用浏览器抓包工具 右键检查 F12
network 网络工作状态
day01 html
1.容器类标签
容器类标签可以简单的理解为能嵌套其他所有标签的标签
常见容器级的标签：
h标签系列
ul>li
ol>li
dl>dt+dd
div
2.文本类标签
文本级的标签对应容器级标签，只能嵌套文字/图片/超链接的标签
常见文本级的标签：
p
span
strong
em
ins
del
上网的过程就是一个上传下载过程
html标签与文档结构
html:5 tab健
table 表格
浏览器相当于一个解释器
js解释型 弱类型 动态语言
for (var i=0;i<=3;i++){console.log(i);}
VM254:1 0
VM254:1 1
VM254:1 2
VM254:1 3
for(let j=0;j<=3;j++){console.log(j);}
VM369:1 0
VM369:1 1
VM369:1 2
VM369:1 3
var x=111
undefined
typeof x
"number"
var y=3.3333
undefined
typeof y
"number"
var z=13e5
undefined
z
1300000
typeof z
"number"
var n = NaN
undefined
typeof n
"number"
var salary = 3.467
undefined
salary.toFixed(2) 四舍五入保留2位小数
"3.47"
var x=parseInt("abc")
undefined
x
NaN 用来记录转换数字失败的一种状态 非数
typeof x
"number"
var x = parseInt("18爱上范德萨发达")
undefined
x
18
parseFloat("3.3333")
3.3333
parseInt("3.45") + parseInt("2.3")
5
parseFloat("3.45") + parseFloat("2.3")
5.75
var x=10
undefined
typeof x
"number"
var z = String(x)
undefined
z
"10"
typeof z
"string"
x
10
x.toString()
"10"
var a = "Hello"
undefined
var b = "world";
undefined
var c = a + b;
undefined
console.log(c);
VM255:1 Helloworld
var msg = "hello world"
undefined
msg + "abc"
"hello worldabc"
msg.length
11
var msg = " hello "
undefined
msg.trim()
"hello"
msg.trimLeft()
"hello "
msg.trimRight()
" hello"
msg.charAt(0)
"h"
msg.charAt(1)
"e"
msg.charAt(2)
"l"
msg.charAt(-1)
""
msg[0]
"h"
msg[1]
"e"
msg[-1]
undefined
var msg=" hello "
undefined
msg.trimLeft()
"hello "
msg.trimLeft().trimRight()
"hello"
msg.trimLeft().length
8
var msg=" hello "
undefined
msg.trimLeft()
"hello "
msg.trimLeft().trimRight()
"hello"
msg.trimLeft().length
8
var msg = "hello"
undefined
msg + "egon"
"helloegon"
msg.concat("egon")
"helloegon"
msg.concat("egon","xxx")
"helloegonxxx"
msg
"hello"
msg.indexOf("el")
1
msg.indexOf("el",2)
-1
msg.substring(0,3)
"hel"
msg[0:3]
VM1320:1 Uncaught SyntaxError: Unexpected token ':'
msg[0:3]
VM1359:1 Uncaught SyntaxError: Unexpected token ':'
msg
"hello"
msg.indexOf("el")
1
msg.indexOf("el",2)
-1
msg.substring(0,3)
"hel"
msg[0:3]
VM1320:1 Uncaught SyntaxError: Unexpected token ':'
msg[0:3]
VM1359:1 Uncaught SyntaxError: Unexpected token ':'
msg.slice(0,3)
"hel"
msg.toUpperCase()
"HELLO"
msg.toLowerCase()
"hello"
msg.toUpperCase().tolowercase()
VM1573:1 Uncaught TypeError: msg.toUpperCase(...).tolowercase is not a function
at <anonymous>:1:19
(anonymous) @ VM1573:1
msg.toUpperCase().tolowerCase()
VM1623:1 Uncaught TypeError: msg.toUpperCase(...).tolowerCase is not a function
at <anonymous>:1:19
(anonymous) @ VM1623:1
msg.toUpperCase().toLowerCase()
"hello"
var msg = "a:b:c"
undefined
msg.split(":")
(3)["a", "b", "c"]
msg.split(":")[0]
"a"
msg.split(":")[1]
"b"
msg.split(":")[-1]
undefined
msg[msg.length-1]
"c"
var msg = `
aaa
vvv
bbb
`
undefined
msg
"\naaa\nvvv\nbbb\n"
var name = "egon"
undefined
var age = 18
undefined
var msg = `my name is ${name} my age is $(age)`
undefined
msg
"my name is egon my age is $(age)"
var x = true
undefined
var y = false
undefined
typeof x
"boolean"
typeof y
"boolean"
if(10){console.log("ok")}
VM2355:1 ok
undefined
if(0){console.log("ok")}
undefined
z
VM2478:1 Uncaught ReferenceError: z is not defined
at <anonymous>:1:1
(anonymous) @ VM2478:1
var z
undefined
z
undefined
Boolean("")
false
Boolean(" ")
true
Boolean([])
true
var x = 10
undefined
x = null
null
x
null
var arr=[111,33,333,"aaa"]
undefined
arr
(4)[111, 33, 333, "aaa"]
arr.length
4
arr.push("bbb")
5
arr
(5)[111, 33, 333, "aaa", "bbb"]
arr.pop()
"bbb"
arr
(4)[111, 33, 333, "aaa"]
arr.unshift(0)
5
arr
(5)[0, 111, 33, 333, "aaa"]
arr.shift()
0
arr
(4)[111, 33, 333, "aaa"]
arr
(6)[111, 33, 333, "aaa", 444, 5555]
arr.slice(0,3)
(3)[111, 33, 333]
arr[0:3]
VM3164:1 Uncaught SyntaxError: Unexpected token ':'
arr
(6)[111, 33, 333, "aaa", 444, 5555]
var arr=[99,33,44,17,19]
undefined
arr.reverse()
(5)[19, 17, 44, 33, 99]
arr
(5)[19, 17, 44, 33, 99]
arr.join(":")
"19:17:44:33:99"
arr.concat([22,16])
(7)[19, 17, 44, 33, 99, 22, 16]
var arr = [123,9,1211,11]
undefined
arr.sort()
(4)[11, 1211, 123, 9]
arr
(4)[11, 1211, 123, 9]
function f (v1,v2){return v1-v2;}
undefined
arr.sort(f)
(4)[9, 11, 123, 1211]
arr.sort(function f (v1,v2){return v1-v2;})
(4)[9, 11, 123, 1211]0: 91: 112: 1233: 1211length: 4[[Prototype]]: Array(0)
arr.sort(function (v1,v2){return v1-v2;})
(4)[9, 11, 123, 1211]
var arr = [3,9,2,11]
undefined
arr.sort(function (v1,v2){return v1-v2;})
(4)[2, 3, 9, 11]
arr.forEach(function (v,i,all){console.log(i,v,all)})
VM3951:1 0 2 (4)[2, 3, 9, 11]
VM3951:1 1 3 (4)[2, 3, 9, 11]
VM3951:1 2 9 (4)[2, 3, 9, 11]
VM3951:1 3 11 (4)[2, 3, 9, 11]
arr.forEach(function (v){console.log(v)})
VM4013:1 2
VM4013:1 3
VM4013:1 9
VM4013:1 11
arr.forEach(function (v,i){console.log(v,i)})
VM4043:1 2 0
VM4043:1 3 1
VM4043:1 9 2
VM4043:1 11 3
arr.forEach(function (v,i){console.log(v,i,this[0])},"abcdefg")
VM4090:1 2 0 "a"
VM4090:1 3 1 "a"
VM4090:1 9 2 "a"
VM4090:1 11 3 "a"
arr.forEach(function(v,i){console.log(i,v)})
VM4296:1 0 2
VM4296:1 1 3
VM4296:1 2 9
VM4296:1 3 11
for (var i=0;i<arr.length;i++){console.log(arr[i])}
VM4497:1 2
VM4497:1 3
VM4497:1 9
VM4497:1 11
undefined
for (var i=0;i<arr.length;i++){console.log(i,arr[i])}
VM4520:1 0 2
VM4520:1 1 3
VM4520:1 2 9
VM4520:1 3 11
arr.map(function(v,i){console.log(i,v)})
VM4571:1 0 2
VM4571:1 1 3
VM4571:1 2 9
VM4571:1 3 11
(4)[undefined, undefined, undefined, undefined]
arr.forEach(function(v,i){console.log(i,v)})
VM4586:1 0 2
VM4586:1 1 3
VM4586:1 2 9
VM4586:1 3 11
undefined
var res=arr.map(function(v,i){console.log(i,v);return 111})
VM4628:1 0 2
VM4628:1 1 3
VM4628:1 2 9
VM4628:1 3 11
undefined
res
(4)[111, 111, 111, 111]
var names = ["lxx","hxx","yxx"]
undefined
var res=names.map(function(v){return v+"sb"})
undefined
res
(3)["lxxsb", "hxxsb", "yxxsb"]
var names = ["lxx","hxx","yxx"]
undefined
var res=names.map(function(v){return v+"sb"})
undefined
res
(3)["lxxsb", "hxxsb", "yxxsb"]
names.splice(1,1)
["hxx"]
names
(2)["lxx", "yxx"]
names.splice(0,2)
(2)["lxx", "yxx"]
names
[]
var names = [111,222,333,444,555,666]
undefined
names.splice(2,2,"xxxx")
(2)[333, 444]
names
(5)[111, 222, "xxxx", 555, 666]
var d1 = new Date()
undefined
d1
Fri Sep 17 2021 23:17:01 GMT+0800 (中国标准时间)
var d2 = new Date("2022/03/01 11:32:45")
undefined
d2
Tue Mar 01 2022 11:32:45 GMT+0800 (中国标准时间)
var d2 = new Date(8000)
undefined
d2
Thu Jan 01 1970 08:00:08 GMT+0800 (中国标准时间)
var d2 = new Date (2022,11,11,12,20,35)
undefined
d2
Sun Dec 11 2022 12:20:35 GMT+0800 (中国标准时间)
d1
Fri Sep 17 2021 23:17:01 GMT+0800 (中国标准时间)
d1.toLocaleDateString()
"2021/9/17"
d1.toLocaleString()
"2021/9/17 下午11:17:01"
d1.toUTCString()
"Fri, 17 Sep 2021 15:17:01 GMT"
d1.getDate()
17
d1.getMonth()
8
d1.getFullYear()
2021
d1.getHours()
23
Math.floor(5.9)
5
Math.floor(5.2)
5
Math.ceil(5.2)
6
Math.ceil(5.9)
6
Math.max(5.9,3,6)
6
Math.random()
0.612389932970915
3+Math.random()*4
4.1287332150142655
3+Math.random()*4
3.2531260341339117
3+Math.random()*4
3.8269497992191477
3+Math.random()*4
4.148875917022164
3+Math.random()*4
3.403875538516968
网页布局：标准流 浮动流 定位流
1.js语法
2.BOM操作
3.DOM操作
var dic = {"name":"egon","age":18}
undefined
typeof dic
"object"
dic["name"]
"egon"
JSON.stringify(dic)
"{\"name\":\"egon\",\"age\":18}"
var dic = {"name":"egon","age":18,"tag":true}
undefined
JSON.stringify(dic)
"{\"name\":\"egon\",\"age\":18,\"tag\":true}"
var jsonStr=JSON.stringify(dic)
undefined
typeof jsonStr
"string"
JSON.parse(jsonStr)["name"]
"egon"
var reg1=new RegExp("^[a-zA-Z]{3}$")
undefined
var reg2=/^[a-zA-Z]{3}$/
undefined
reg1.test("hello")
false
reg1.test("hel")
true
reg2.test("abc")
true
var msg="hello"
undefined
msg.match(/l/)
["l", index: 2, input: "hello", groups: undefined]
msg.match(/l/g)
(2)["l", "l"]
msg.search(/l/g)
2
msg.split(/el/)
(2)["h", "lo"]
msg.replace(/l/,"x")
"hexlo"
msg.replace(/l/g,"x")
"hexxo"
i 忽略大小写
g 全局匹配
var reg3=/egon/g
undefined
reg3.lastIndex
0
reg3.test("egon")
true
reg3.lastIndex
4
reg3.test("egon")
false
reg3.lastIndex
4
reg3.test("egon")
false
reg3.lastIndex
0
reg3.test("egon")
true
reg3.test("egon")
false
reg3.lastIndex=0
0
reg3.test("egon")
true
var reg4=/^undefined$/
undefined
reg4.test()
true
reg4.test("undefined")
true
reg4.test(undefined)
true
10%3
1
var x=1
undefined
var res=x++
undefined
res
1
x
2
var res=++x
undefined
res
3
x
3
1 == 1
true
1 == "1"
true
1 === "1"
false
10 > 3 && 3>2
true
10 < 3 || 3>2
true
10 < 3 || ! 3>2
false
1 === "1"
false
! 1 === "1"
false
! (1==="1")
true
for(var i=0;i<=3;i++){console.log(i)}
VM2419:1 0
VM2419:1 1
VM2419:1 2
VM2419:1 3
var i=0
undefined
while (i<=3){
console.log(i);
i+=1;
}
VM2545:2 0
VM2545:2 1
VM2545:2 2
VM2545:2 3
4
var res=条件？res1:res2
window.history.back()
undefined
window.history.forward()
undefined
js中函数的声明比变量的优先级高
let pEle = document.getElementsByTagName('p')[0]
undefined
pEle
<p>111</p>
pEle.style.color = 'red'
"red"
$('p').css('color','green')
S.fn.init[p, prevObject: S.fn.init(1)]
$('p').css('color','red')
S.fn.init[p, prevObject: S.fn.init(1)]
jQuery
jQuery对象相当于一个数组里面是一个个源生js对象
$($('#d1')[0])
jQuery简介
jQuery选择器
表单选择器
筛选器方法
操作标签各项数据
事件
绑定事件
$('#d1').on('input',function(){
console.log($(this).val())
})
动画效果
前端框架Bootstrap(复制粘贴)
$('#d2').next()
S.fn.init[p, prevObject: S.fn.init(1)]0: plength: 1prevObject: S.fn.init[span#d2][[Prototype]]: Object(0)
$('#d2').nextAll()
S.fn.init(2)[p, span.c1, prevObject: S.fn.init(1)]
$('#d2').nextUntil('.c1')
S.fn.init[p, prevObject: S.fn.init(1)]
$('#d1').prev()
S.fn.init[span, prevObject: S.fn.init(1)]0: spanlength: 1prevObject: S.fn.init[div#d1][[Prototype]]: Object(0)
$('#d1').prevAll()
S.fn.init(2)[span, span, prevObject: S.fn.init(1)]
$('#d1').prevUntil('span')
S.fn.init[prevObject: S.fn.init(1)]
$('.c1').parent()
S.fn.init[div#d1, prevObject: S.fn.init(1)]
$('.c1').parent().parent()
S.fn.init[body, prevObject: S.fn.init(1)]
$('.c1').parent().parent().parent()
S.fn.init[html, prevObject: S.fn.init(1)]
$('.c1').parent().parent().parent().parent()
S.fn.init[document, prevObject: S.fn.init(1)]
$('.c1').parents()
S.fn.init(3)[div#d1, body, html, prevObject: S.fn.init(1)]
$('#d1').children()
S.fn.init(3)[span#d2, p, span.c1, prevObject: S.fn.init(1)]
$($('#d1').children()[1]).children()
S.fn.init[span, prevObject: S.fn.init(1)]
$('#d1').siblings()
S.fn.init(4)[span, span, span, span, prevObject: S.fn.init(1)]
$('#d1').find('p')
S.fn.init[p, prevObject: S.fn.init(1)]0: plength: 1prevObject: S.fn.init[div#d1][[Prototype]]: Object(0)
$('#d1 p')
S.fn.init[p, prevObject: S.fn.init(1)]
# 拿到用户上传的文件
$('#d1')[0].files[0]
document。getElementById('d1').files[0]
我们使用框架操作标签样式，只需要修改class属性即可
布局容器
Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种 容器类不能互相嵌套。
.container 类用于固定宽度并支持响应式布局的容器。
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。
栅格系统
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。
<!--左右两边留白-->
<div class="container">
<div class="row">
<div class="col-md-6 c1"></div>
<div class="col-md-6 c1"></div>
</div>
</div>
<!--左右两边不留白-->
<!--<div class="container-fluid c1">-->
<!--</div>-->
知识点越往后学越简单 学的是思路 怎么用
本文共计3959个文字，预计阅读时间需要16分钟。
前端+、什么是前端+？+与用户直接打交道的操作界面都可称之为前端。例如：电脑界面、手机界面、平板界面+、什么是后端？+暂时先理解成幕后操作者+、不直接与用户打交道+、二、为“前端+提供支持的服务器+、数据库等+。”
前端
一、什么是前端
- 任何与用户直接打交道的操作界面都可以称之为前端。比如：电脑界面、手机界面、平板界面
什么是后端？ 暂时先理解成 幕后操作者 不直接与用户打交道
二、为什么要学前端
全栈开发工程师
三、前端学习之路
- HTML 内容 网页的骨架 标签
- CSS 外观 网页的样式 选择器 属性
- JavaScript 动作 网页的动态效果 基础语法 BOM&DOM
- 前端框架 Bootstrap
Web服务的本质
浏览器中敲入网址回车发生了几件事？
1.浏览器向服务端发送请求
2.服务端接收请求
3.服务端返回相应的响应
4.浏览器接收响应 根据特定的规则渲染页面展示给用户看
四、HTTP协议
超文本传输协议
规定了浏览器与服务端之间消息传输的数据格式
四大特性：
1.基于请求响应
2.基于TCP/IP之上的作用于应用层的协议
3.无状态（服务端无法保存用户的状态，一个人来一千次 我都记不住 还当你如初见）
4.无连接（请求来一次我响应一次 之后立马断开连接 两者之间就不再有任何关系）
websocket 相当于是HTTP协议的一个大的补丁 它支持长链接
请求数据格式
请求首行（标识HTTP协议版本 当前请求方式）
请求头（一大堆k,v键值对）
请求体（携带的是一些敏感信息比如 密码 身份证号...）
响应数据格式
响应首行（标识HTTP协议版本 响应状态码）
响应头 （一大堆k,v键值对）
响应体 （携带的是一些敏感信息比如 密码 身份证号...）
响应状态码
用一串简单的数字来标识一些复杂的状态或者提示信息
1xx:服务端已经成功接收了你的数据正在处理 你可以继续提交额外的数据
2xx:服务端成功响应 你想要的数据（请求成功200）
3xx:重定向（当你在访问一个需要登录之后才能访问的页面 你会发现窗口会自动调到登录页面 301 302）
4xx:请求错误（请求资源不存在404 请求不合法不符合内部规定会权限不够 403）
5xx:服务器内部错误（500）
请求方式
- get请求
向服务端要资源（比如浏览器窗口输入www.baidu.com) - post请求
超服务端提交数据（比如用户登录 提交用户名和密码）
URL: 统一资源定位服务（网址）
HTML
超文本标记语言
HTML5
要想让你的页面能够正常被浏览器显示出来 你所写的页面 就必须遵循HTML标记语法
也就意味着所有能够被浏览器显示出来的页面 内部都是HTML代码
浏览器只认识html css js
web本质
浏览器
服务器
文件(后缀名.html结尾的文件 前端页面文件)
文件的后缀名仅仅是给人看的 计算机无所谓 因为都是二进制数据
HTML注释
写网页的一套标准
注释是代码之母
<!--单行注释-->
<!--
多行注释
多行注释
-->
一般情况下 html的注释都会按照下面的方式书写
HTML文档结构
<head></head>：head内的标签 不是用来展示给用户看的 而是定义一些配置 主要是给浏览器看的 <body></body>：body内的标签 就是浏览器展示给用户看的内容打开HTML页面的两种方式
1.招到文件路径 选择浏览器打开
2.pycharm快捷方式直接打开
标签的分类1
1.双标签(<h1></h1> <a></a>)
2.单标签(自闭和标签 <img/>)
head内常用标签
title用来显示网银标题
style用来控制样式 内部支持写css代码
script内部支持写js代码 也支持导入外部的js文件
emmet插件
1.服务器渲染：在服务器那边直接把数据和html整合在一起，统一返回给浏览器
在页面源代码中能看到数据
2.客户端渲染：第一次请求只要一个html骨架 第二次请求拿到数据 进行数据展示
在页面源代码中 看不到数据
熟练使用浏览器抓包工具 右键检查 F12
network 网络工作状态
day01 html
1.容器类标签
容器类标签可以简单的理解为能嵌套其他所有标签的标签
常见容器级的标签：
h标签系列
ul>li
ol>li
dl>dt+dd
div
2.文本类标签
文本级的标签对应容器级标签，只能嵌套文字/图片/超链接的标签
常见文本级的标签：
p
span
strong
em
ins
del
上网的过程就是一个上传下载过程
html标签与文档结构
html:5 tab健
table 表格
浏览器相当于一个解释器
js解释型 弱类型 动态语言
for (var i=0;i<=3;i++){console.log(i);}
VM254:1 0
VM254:1 1
VM254:1 2
VM254:1 3
for(let j=0;j<=3;j++){console.log(j);}
VM369:1 0
VM369:1 1
VM369:1 2
VM369:1 3
var x=111
undefined
typeof x
"number"
var y=3.3333
undefined
typeof y
"number"
var z=13e5
undefined
z
1300000
typeof z
"number"
var n = NaN
undefined
typeof n
"number"
var salary = 3.467
undefined
salary.toFixed(2) 四舍五入保留2位小数
"3.47"
var x=parseInt("abc")
undefined
x
NaN 用来记录转换数字失败的一种状态 非数
typeof x
"number"
var x = parseInt("18爱上范德萨发达")
undefined
x
18
parseFloat("3.3333")
3.3333
parseInt("3.45") + parseInt("2.3")
5
parseFloat("3.45") + parseFloat("2.3")
5.75
var x=10
undefined
typeof x
"number"
var z = String(x)
undefined
z
"10"
typeof z
"string"
x
10
x.toString()
"10"
var a = "Hello"
undefined
var b = "world";
undefined
var c = a + b;
undefined
console.log(c);
VM255:1 Helloworld
var msg = "hello world"
undefined
msg + "abc"
"hello worldabc"
msg.length
11
var msg = " hello "
undefined
msg.trim()
"hello"
msg.trimLeft()
"hello "
msg.trimRight()
" hello"
msg.charAt(0)
"h"
msg.charAt(1)
"e"
msg.charAt(2)
"l"
msg.charAt(-1)
""
msg[0]
"h"
msg[1]
"e"
msg[-1]
undefined
var msg=" hello "
undefined
msg.trimLeft()
"hello "
msg.trimLeft().trimRight()
"hello"
msg.trimLeft().length
8
var msg=" hello "
undefined
msg.trimLeft()
"hello "
msg.trimLeft().trimRight()
"hello"
msg.trimLeft().length
8
var msg = "hello"
undefined
msg + "egon"
"helloegon"
msg.concat("egon")
"helloegon"
msg.concat("egon","xxx")
"helloegonxxx"
msg
"hello"
msg.indexOf("el")
1
msg.indexOf("el",2)
-1
msg.substring(0,3)
"hel"
msg[0:3]
VM1320:1 Uncaught SyntaxError: Unexpected token ':'
msg[0:3]
VM1359:1 Uncaught SyntaxError: Unexpected token ':'
msg
"hello"
msg.indexOf("el")
1
msg.indexOf("el",2)
-1
msg.substring(0,3)
"hel"
msg[0:3]
VM1320:1 Uncaught SyntaxError: Unexpected token ':'
msg[0:3]
VM1359:1 Uncaught SyntaxError: Unexpected token ':'
msg.slice(0,3)
"hel"
msg.toUpperCase()
"HELLO"
msg.toLowerCase()
"hello"
msg.toUpperCase().tolowercase()
VM1573:1 Uncaught TypeError: msg.toUpperCase(...).tolowercase is not a function
at <anonymous>:1:19
(anonymous) @ VM1573:1
msg.toUpperCase().tolowerCase()
VM1623:1 Uncaught TypeError: msg.toUpperCase(...).tolowerCase is not a function
at <anonymous>:1:19
(anonymous) @ VM1623:1
msg.toUpperCase().toLowerCase()
"hello"
var msg = "a:b:c"
undefined
msg.split(":")
(3)["a", "b", "c"]
msg.split(":")[0]
"a"
msg.split(":")[1]
"b"
msg.split(":")[-1]
undefined
msg[msg.length-1]
"c"
var msg = `
aaa
vvv
bbb
`
undefined
msg
"\naaa\nvvv\nbbb\n"
var name = "egon"
undefined
var age = 18
undefined
var msg = `my name is ${name} my age is $(age)`
undefined
msg
"my name is egon my age is $(age)"
var x = true
undefined
var y = false
undefined
typeof x
"boolean"
typeof y
"boolean"
if(10){console.log("ok")}
VM2355:1 ok
undefined
if(0){console.log("ok")}
undefined
z
VM2478:1 Uncaught ReferenceError: z is not defined
at <anonymous>:1:1
(anonymous) @ VM2478:1
var z
undefined
z
undefined
Boolean("")
false
Boolean(" ")
true
Boolean([])
true
var x = 10
undefined
x = null
null
x
null
var arr=[111,33,333,"aaa"]
undefined
arr
(4)[111, 33, 333, "aaa"]
arr.length
4
arr.push("bbb")
5
arr
(5)[111, 33, 333, "aaa", "bbb"]
arr.pop()
"bbb"
arr
(4)[111, 33, 333, "aaa"]
arr.unshift(0)
5
arr
(5)[0, 111, 33, 333, "aaa"]
arr.shift()
0
arr
(4)[111, 33, 333, "aaa"]
arr
(6)[111, 33, 333, "aaa", 444, 5555]
arr.slice(0,3)
(3)[111, 33, 333]
arr[0:3]
VM3164:1 Uncaught SyntaxError: Unexpected token ':'
arr
(6)[111, 33, 333, "aaa", 444, 5555]
var arr=[99,33,44,17,19]
undefined
arr.reverse()
(5)[19, 17, 44, 33, 99]
arr
(5)[19, 17, 44, 33, 99]
arr.join(":")
"19:17:44:33:99"
arr.concat([22,16])
(7)[19, 17, 44, 33, 99, 22, 16]
var arr = [123,9,1211,11]
undefined
arr.sort()
(4)[11, 1211, 123, 9]
arr
(4)[11, 1211, 123, 9]
function f (v1,v2){return v1-v2;}
undefined
arr.sort(f)
(4)[9, 11, 123, 1211]
arr.sort(function f (v1,v2){return v1-v2;})
(4)[9, 11, 123, 1211]0: 91: 112: 1233: 1211length: 4[[Prototype]]: Array(0)
arr.sort(function (v1,v2){return v1-v2;})
(4)[9, 11, 123, 1211]
var arr = [3,9,2,11]
undefined
arr.sort(function (v1,v2){return v1-v2;})
(4)[2, 3, 9, 11]
arr.forEach(function (v,i,all){console.log(i,v,all)})
VM3951:1 0 2 (4)[2, 3, 9, 11]
VM3951:1 1 3 (4)[2, 3, 9, 11]
VM3951:1 2 9 (4)[2, 3, 9, 11]
VM3951:1 3 11 (4)[2, 3, 9, 11]
arr.forEach(function (v){console.log(v)})
VM4013:1 2
VM4013:1 3
VM4013:1 9
VM4013:1 11
arr.forEach(function (v,i){console.log(v,i)})
VM4043:1 2 0
VM4043:1 3 1
VM4043:1 9 2
VM4043:1 11 3
arr.forEach(function (v,i){console.log(v,i,this[0])},"abcdefg")
VM4090:1 2 0 "a"
VM4090:1 3 1 "a"
VM4090:1 9 2 "a"
VM4090:1 11 3 "a"
arr.forEach(function(v,i){console.log(i,v)})
VM4296:1 0 2
VM4296:1 1 3
VM4296:1 2 9
VM4296:1 3 11
for (var i=0;i<arr.length;i++){console.log(arr[i])}
VM4497:1 2
VM4497:1 3
VM4497:1 9
VM4497:1 11
undefined
for (var i=0;i<arr.length;i++){console.log(i,arr[i])}
VM4520:1 0 2
VM4520:1 1 3
VM4520:1 2 9
VM4520:1 3 11
arr.map(function(v,i){console.log(i,v)})
VM4571:1 0 2
VM4571:1 1 3
VM4571:1 2 9
VM4571:1 3 11
(4)[undefined, undefined, undefined, undefined]
arr.forEach(function(v,i){console.log(i,v)})
VM4586:1 0 2
VM4586:1 1 3
VM4586:1 2 9
VM4586:1 3 11
undefined
var res=arr.map(function(v,i){console.log(i,v);return 111})
VM4628:1 0 2
VM4628:1 1 3
VM4628:1 2 9
VM4628:1 3 11
undefined
res
(4)[111, 111, 111, 111]
var names = ["lxx","hxx","yxx"]
undefined
var res=names.map(function(v){return v+"sb"})
undefined
res
(3)["lxxsb", "hxxsb", "yxxsb"]
var names = ["lxx","hxx","yxx"]
undefined
var res=names.map(function(v){return v+"sb"})
undefined
res
(3)["lxxsb", "hxxsb", "yxxsb"]
names.splice(1,1)
["hxx"]
names
(2)["lxx", "yxx"]
names.splice(0,2)
(2)["lxx", "yxx"]
names
[]
var names = [111,222,333,444,555,666]
undefined
names.splice(2,2,"xxxx")
(2)[333, 444]
names
(5)[111, 222, "xxxx", 555, 666]
var d1 = new Date()
undefined
d1
Fri Sep 17 2021 23:17:01 GMT+0800 (中国标准时间)
var d2 = new Date("2022/03/01 11:32:45")
undefined
d2
Tue Mar 01 2022 11:32:45 GMT+0800 (中国标准时间)
var d2 = new Date(8000)
undefined
d2
Thu Jan 01 1970 08:00:08 GMT+0800 (中国标准时间)
var d2 = new Date (2022,11,11,12,20,35)
undefined
d2
Sun Dec 11 2022 12:20:35 GMT+0800 (中国标准时间)
d1
Fri Sep 17 2021 23:17:01 GMT+0800 (中国标准时间)
d1.toLocaleDateString()
"2021/9/17"
d1.toLocaleString()
"2021/9/17 下午11:17:01"
d1.toUTCString()
"Fri, 17 Sep 2021 15:17:01 GMT"
d1.getDate()
17
d1.getMonth()
8
d1.getFullYear()
2021
d1.getHours()
23
Math.floor(5.9)
5
Math.floor(5.2)
5
Math.ceil(5.2)
6
Math.ceil(5.9)
6
Math.max(5.9,3,6)
6
Math.random()
0.612389932970915
3+Math.random()*4
4.1287332150142655
3+Math.random()*4
3.2531260341339117
3+Math.random()*4
3.8269497992191477
3+Math.random()*4
4.148875917022164
3+Math.random()*4
3.403875538516968
网页布局：标准流 浮动流 定位流
1.js语法
2.BOM操作
3.DOM操作
var dic = {"name":"egon","age":18}
undefined
typeof dic
"object"
dic["name"]
"egon"
JSON.stringify(dic)
"{\"name\":\"egon\",\"age\":18}"
var dic = {"name":"egon","age":18,"tag":true}
undefined
JSON.stringify(dic)
"{\"name\":\"egon\",\"age\":18,\"tag\":true}"
var jsonStr=JSON.stringify(dic)
undefined
typeof jsonStr
"string"
JSON.parse(jsonStr)["name"]
"egon"
var reg1=new RegExp("^[a-zA-Z]{3}$")
undefined
var reg2=/^[a-zA-Z]{3}$/
undefined
reg1.test("hello")
false
reg1.test("hel")
true
reg2.test("abc")
true
var msg="hello"
undefined
msg.match(/l/)
["l", index: 2, input: "hello", groups: undefined]
msg.match(/l/g)
(2)["l", "l"]
msg.search(/l/g)
2
msg.split(/el/)
(2)["h", "lo"]
msg.replace(/l/,"x")
"hexlo"
msg.replace(/l/g,"x")
"hexxo"
i 忽略大小写
g 全局匹配
var reg3=/egon/g
undefined
reg3.lastIndex
0
reg3.test("egon")
true
reg3.lastIndex
4
reg3.test("egon")
false
reg3.lastIndex
4
reg3.test("egon")
false
reg3.lastIndex
0
reg3.test("egon")
true
reg3.test("egon")
false
reg3.lastIndex=0
0
reg3.test("egon")
true
var reg4=/^undefined$/
undefined
reg4.test()
true
reg4.test("undefined")
true
reg4.test(undefined)
true
10%3
1
var x=1
undefined
var res=x++
undefined
res
1
x
2
var res=++x
undefined
res
3
x
3
1 == 1
true
1 == "1"
true
1 === "1"
false
10 > 3 && 3>2
true
10 < 3 || 3>2
true
10 < 3 || ! 3>2
false
1 === "1"
false
! 1 === "1"
false
! (1==="1")
true
for(var i=0;i<=3;i++){console.log(i)}
VM2419:1 0
VM2419:1 1
VM2419:1 2
VM2419:1 3
var i=0
undefined
while (i<=3){
console.log(i);
i+=1;
}
VM2545:2 0
VM2545:2 1
VM2545:2 2
VM2545:2 3
4
var res=条件？res1:res2
window.history.back()
undefined
window.history.forward()
undefined
js中函数的声明比变量的优先级高
let pEle = document.getElementsByTagName('p')[0]
undefined
pEle
<p>111</p>
pEle.style.color = 'red'
"red"
$('p').css('color','green')
S.fn.init[p, prevObject: S.fn.init(1)]
$('p').css('color','red')
S.fn.init[p, prevObject: S.fn.init(1)]
jQuery
jQuery对象相当于一个数组里面是一个个源生js对象
$($('#d1')[0])
jQuery简介
jQuery选择器
表单选择器
筛选器方法
操作标签各项数据
事件
绑定事件
$('#d1').on('input',function(){
console.log($(this).val())
})
动画效果
前端框架Bootstrap(复制粘贴)
$('#d2').next()
S.fn.init[p, prevObject: S.fn.init(1)]0: plength: 1prevObject: S.fn.init[span#d2][[Prototype]]: Object(0)
$('#d2').nextAll()
S.fn.init(2)[p, span.c1, prevObject: S.fn.init(1)]
$('#d2').nextUntil('.c1')
S.fn.init[p, prevObject: S.fn.init(1)]
$('#d1').prev()
S.fn.init[span, prevObject: S.fn.init(1)]0: spanlength: 1prevObject: S.fn.init[div#d1][[Prototype]]: Object(0)
$('#d1').prevAll()
S.fn.init(2)[span, span, prevObject: S.fn.init(1)]
$('#d1').prevUntil('span')
S.fn.init[prevObject: S.fn.init(1)]
$('.c1').parent()
S.fn.init[div#d1, prevObject: S.fn.init(1)]
$('.c1').parent().parent()
S.fn.init[body, prevObject: S.fn.init(1)]
$('.c1').parent().parent().parent()
S.fn.init[html, prevObject: S.fn.init(1)]
$('.c1').parent().parent().parent().parent()
S.fn.init[document, prevObject: S.fn.init(1)]
$('.c1').parents()
S.fn.init(3)[div#d1, body, html, prevObject: S.fn.init(1)]
$('#d1').children()
S.fn.init(3)[span#d2, p, span.c1, prevObject: S.fn.init(1)]
$($('#d1').children()[1]).children()
S.fn.init[span, prevObject: S.fn.init(1)]
$('#d1').siblings()
S.fn.init(4)[span, span, span, span, prevObject: S.fn.init(1)]
$('#d1').find('p')
S.fn.init[p, prevObject: S.fn.init(1)]0: plength: 1prevObject: S.fn.init[div#d1][[Prototype]]: Object(0)
$('#d1 p')
S.fn.init[p, prevObject: S.fn.init(1)]
# 拿到用户上传的文件
$('#d1')[0].files[0]
document。getElementById('d1').files[0]
我们使用框架操作标签样式，只需要修改class属性即可
布局容器
Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种 容器类不能互相嵌套。
.container 类用于固定宽度并支持响应式布局的容器。
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。
栅格系统
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。
<!--左右两边留白-->
<div class="container">
<div class="row">
<div class="col-md-6 c1"></div>
<div class="col-md-6 c1"></div>
</div>
</div>
<!--左右两边不留白-->
<!--<div class="container-fluid c1">-->
<!--</div>-->
知识点越往后学越简单 学的是思路 怎么用