前端详细教程(包括html，JavaScript，jQuery，bootstrap)

前端学习历程

jQuery

"""
jQuery内部封装了原生的js代码(还额外添加了很多功能)
能够让你通过书写更少的代码 完成js操作
类似于python里面的模块 在前端模块不叫模块 叫"类库"
 
兼容多个浏览器的 你在使用jQuery的时候就不需要考虑浏览器兼容问题
 
jQuery的宗旨
	write less do more
	让你用更少的代码完成更多的事情
"""复制

HTTP协议

"""
超文本传输协议 用来规定服务端和浏览器之间的数据交互的格式...
 
该协议你可以不遵循 但是你写的服务端就不能被浏览器正常访问 你就自己跟自己玩
你就自己写客户端 用户想要使用 就专门下载你的APP才能使用
"""
# 四大特性
	1.基于请求响应
    2.基于TCP/IP作用于应用层之上的协议
    3.无状态
    	不保存用户的信息
        由于Http协议是无状态的 所以后续出现了一些专门用来记录用户状态的技术
        	cookie、session、token
    4.无/短链接
    	请求来一次我响应一次 之后我们两个没有任何链接和关系
 
# 请求数据格式
	请求首行(表示HTTP协议版本，当前请求方式)
    请求头(一大堆k,v键值对)
    
    请求体(get请求没有，post请求有，存放的是post请求提交的敏感数据)
    
# 响应数据格式
	请求首行(表示HTTP协议版本，响应状态码)
    请求头(一大堆k,v键值对)
    
    请求体(get请求没有，post请求有，存放的是post请求提交的敏感数据)
    
# 响应状态码
	用一串简单的数字来表示一些复杂的状态或者描述性信息
 
 
# 请求方式
	1.get请求
    	向服务端获取数据
    2.post请求
    	向服务端提交数据复制

特殊符号

 	空格
>	大于号
<	小于号
&	&
¥	￥
©	©
商标®  ®复制

变量

"""
js变量的命令规范
	1.变量名只能是
		数字 字母 下划线 $
	2.变量名命名规范
		1.js中推荐使用驼峰式命名
			useName
			dataOfDb
		2.python推荐使用下划线的方式
			user_name
			data_of_db
		3.不能用关键字作为变量名
			不需要记忆 后面遇到几个就稍微有个印象
"""复制

数据类型

数值类型(number)

var a = 11;
var b = 11.11;
// 如何查看当前数据类型
typeof a;
// 特殊的 NaN: 数值类型 表示的意思是"不是一个数字" NOT A NUMBER
 
// 类型转换
parseInt('11')
parseFloat()
 复制

字符串类型

// 模板字符串
var s3 = `
	adasd
	adasd
	vadasd
`
typeof s3
"string"
// 模板字符串除了可以定义多行文本之外还可以实现格式化字符串操作
var name='hhhl'
var age = 19
var ss = `
 my name is ${
     name} and my age is ${
     age}
`
 
ss
'\n my name is hhhl and my age is 19\n'
 
// 字符串拼接
// 在python中不推荐你使用 做拼接 推荐join
// 在js中推荐你使用 做拼接复制

null与undefined

"""
null
	表示值为空 一般都是指定或者清空一个变量适使用
		name = 'jason'
		name = null
undefined
	表名声明了一个变量，但是没有做初始化操作
"""复制

对象

• 数组(类似于python里面的列表) []
• 自定义对象(类似于python里面的字典) {}

运算符

var x = 10;
var res1 = x  ;
var res2 =   x;
res1 = 10
res2 = 12
 
# 比较运算符
1 == '1'   # 弱等于  内部自动转换成相同的数据类型比较了
true
 
1 === '1'  # 强等于  内部不做类型转换复制

流程控制

// if判断
var age = 28;
if (age<18){
   
    console.log("很好")
}else if(age<24){
   
    console.log('我是你的粉丝')
}else{
   
    console.log('nice')
}
 
# switch语法
var num = 2;
switch(num){
   
        case 0;
        	console.log('very good')
        	break;
        case 1;
        	console.log('very good')
        	break;
        case 2;
        	console.log('very good')
        	break;
        case 3;
        	console.log('very good')
        	break;
        case 4;
        	console.log('very good')
        	break;
    	default:
        	console.log('条件都没有匹配上')
        
}
 
# for循环
# 打印0-9数字
for(int i=0;i<10;i  ){
   
    console.log(i)
}
 
// 三元运算
res = 1 > 2?1:3复制

函数

// 在js中多传参数跟少传参数都不会报错
// 关键字arguments
function func2(a,b){
   
    console.log(arguments)  // 能够获取到函数接受到的所有参数
}复制

自定义对象

# 时间对象具体方法
var d = new Date();
d.getDate()			# 获取日
d.getMonth()		# 获取月份(0-11)
d.getFullYear()		# 获取年份
d.getHours()		# 获取小时
d.getMinutes()		# 获取分
d.getSeconds()		# 获取秒
d.getMilliseconds()	# 获取毫秒秒
d.getTime()			# 获取时间戳复制

JSON对象

"""
在Python中序列化反序列化
	dumps	序列化
	loads	反序列化
	
在JS中也有序列化反序列化
	JSON.stringify()	dumps
	JSON.parse()		loads
"""
let d7 = {
   'name':'jason','age':18}复制

RegExp对象

正则

# 第一种创建正则对象
let reg1 = new RegExp(/^[a-zA-Z][a-zA-Z0-9]{
   5,11})/g
 
# 第二种创建
let reg2 = /^[a-zA-Z][a-zA-Z0-9]{
   5,11})/g
 
# 后面加上g代表全局匹配
reg1.match(/s/g)
 
# 全局匹配模式吐槽点
reg1.test('ensada')    # 全局模式有一个lastIndex属性
true
reg1.test('ensada')
false
reg1.test('ensada')
true
 
 
# 吐槽点二
reg4.test()   # 什么都不传  默认就是传undefined复制

BOM与DOM操作

"""
BOM
	浏览器对象模型		Browser Object Model
		js代码操作浏览器
DOM
	文档对象模型		Document Object Model
		js代码操作标签
 
"""
window.innerHeight
695
window.innerWidth
1536
w复制