前端学习笔记汇总，css，js，jq，es6

css

水平居中：
行内元素水平居中：text-align:center 普通流：inline （遇到span这种行内元素text-align要加个父元素才能生效）
块级元素水平居中：
1，margin：0 auto（上下0左右自适应，这种需要有宽度，如果是浮动的脱离了文档流就无法用自适应了。）
2，position：relative left：50% margin-left：-50%（或者用tranform：translateX（-50%））可以用于浮动元素
3，position：absolute left：0 righe：0 margin：0 auto 或者用left：50% tranform：translateX（-50%）这种的不占位置
垂直居中：
1，内部有文本的，可以把父元素高去掉，然后用padding把块撑起来，文本就在中间了。但是缺点不能设置固定高度
2，line-height：可以把文本水平居中，但是只能是单行文本，注意：P标签不生效因为系统默认给了margin，只要给p加一个margin：0就可以生效。
3，display：flex flex-direction：column（成列状垂直显示） justify-content：center（水平居中）缺点：兼容性不好
4，display:table; 父元素table 子元素display-cell vertical-align:middle (缺点：副作用大，效果是把元素像表格排列，一般少用)
5，grid：父元素display:grid grid-template-columns:repeat(几列，几行) align-items:center justify-content:center
6，定位居中法：子绝父相，子元素top50%。然后transform：translateY（50%）也可以margin负数拉回来一半的距离；
7，伪元素垂直居中：父元素给个::after{content：“”；display：inline-block；height：100%；wight：0；vertical-align：middle}然后需要需要垂直的元素display：inline-block；vertical-align：middle。通过伪元素的对比，调整基准线实现垂直居中

java script

js的组成：EcmaScript DOM BOM
三种输出方式：
1.控制台作用：1.纯粹为了检查代码的,可以输出结果。2.报错
2.弹窗： alert() 1.纯粹为了检查代码的,可以输出结果 2.用来提示、警告的。但是会中断程序。
3.中断document.write()

数据类型
原始(基本)数据类型：String(字符串) Number(数字) Boolean(布尔类型) undefined(未定义) null(空指针)
字符串一定要写在引号里面：写在引号里面的一定是字符串，除了阿拉伯数字、true、false、undefined、null都是字符串，变量名不能加引号

引用数据类型：object(对象) function(函数)
区别：原始数据类型存在变量本地（栈）引用数据类型存在（堆）中-----单独变量是栈，数组和对象这种多个数据的是堆
检测数据类型方法：typeof（）
区别：存储的位置不一样。原始数据类型是存在栈中，引用数据类型存在堆中的
栈和堆其实就是内存中的两种存储空间
if和三目运算符的区别：三目运算符的结果是一个值，而if else 不一定给值，可以做一个事
三目（元）运算符：条件？条件成立时的值：条件不成立时候的值
条件判断语句：if(){ }else() { } 也可以后面else if继续判断下去。
表达式：由运算符链接，最终结果是一个值的句子叫表达式，三元运算符也是值
在条件判断中：只有以下六种情况算false，其余全为true
0 false “” undefined null NaN（not a number 不是一个数字）
闭包

闭包：函数套函数,里面的函数使用了外面函数定义的变量 作用是用来保护变量的
问题：内存泄漏，影响性能释放。
变量：变量会自动提升，但优先提升的是变量声明，后面的值不会提升。
函数
函数：当重复代码超过两次以上的时候可以用函数封装，方便重复调用。
参数：函数内独有的变量，可以让函数更灵活。分实参和形参。多个参数间用逗号隔开
函数内，如果形参和内部声明的变量相同时看顺序执行
语法：function 函数名（）{} 调用：函数名（）
函数返回值：return 值 函数需要结果加return，不加函数运行是不会有结果的。return会退出函数运行
设置参数默认值：a=a||100 有弊端，如果传的0进去还是100，因为识别成false

数组和对象
数组：就是连续存储多个数据的存储空间，其实就相当于多个变量的集合
语法是 var 变量名=[数据,数据,数据]，数组一般来说是用来批量存储同一类型的数据的，数组默认是有下标
数组是没有任何数据类型限制的，如何访问数组中的数据：数组名[角标/索引/下标]
数组具备一个length属性，返回的是成员个数，更改数组 数组名[角标]=新值，for循环循环数组是最合适的
对象：很多情况下，一个数据无法准确的描述一个事物，我们需要多个数据共同描述某个事物。那么这多个数据的集合其实就是对象 其实就相当于多个变量的集合
语法是 var 变量名={属性名：值，属性名：值，属性名：值}
由若干个键值对(key/value)组成对象的值是没有任何数据类型限制的
对象的属性名必须是字符串，属性名的引号可以省略
如何访问对象中的数据：对象名.属性名
对象的属性值可以是函数，调用对象的属性需要对象.方法名()
面向对象：不需要知道过程，只关注结果
面向过程：每一步具体是怎么实现的
对象的循环 for(var key in 对象) { } 如果对象的属性名是变量的话要用[ ]套起来
对象内如果没有的属性，在外面对象.xxx=xxx就是添加进去一个
内置对象:就是js给我们定义好了的对象，有着现成的属性和方法供我们调用，有26个
string（字符串不容更改） number boolean 这三个是基本包装类型
string对象方法：字符串不能改
toUpperCase()：把字符串转成大写，注意要重新赋值才能改字符串
toLowerCase()：把字符串转成小写
substring（）：截取字符串，括号内两个参数（哪里开始截取，截到哪一位）。注意含头不含尾。把需要截到的位置多写一位。如果只给一个参数就是从哪里开始截后面所有
slice（）：截取字符串，跟上面一样使用，区别是这个本质上是数组的方法，但字符串也可以用。
indexOf（）：查找关键字，括号内写查找的字符可以看到他的位置，返回角标。相同的字符，默认找第一个，如果找不到会返回-1

split（）：切割，括号内放切割符，如果没有直接切就用空字符，一定是一刀两断的
Number对象方法：
Number（）：括号内写变量可以把字符串的数字转换成数字
toFixed（）：按几位小数四舍五入取整。
toString（）：转成字符串，任何对象都有toString方法
Array数组方法：数组是可以改的
slice（）：截取字符串，跟上面一样使用，区别是这个本质上是数组的方法，但字符串也可以用。
join（）：拼接，括号内放拼接符
-------------------------------------以下方法可以直接修改原数组
concat（）：多个数组合并，括号内放另一个数组，有多个用逗号隔开
push（）：往数组内结尾追加元素，括号内放要添加的元素
unshift（）：向数组开头追加元素，括号内放要添加的元素
shift（）：删除数组开头第一位
pop（）：删除数组最后一位
splice（）：删除/插入/替换元素的。括号内两个参数，第一个：从哪里删，第二个：删几个，可选第三个或者更多参数，是插入进来的意思。可以实现替换功能
reverse（）：把数组翻转，第一位到最后一位，后面的到前面。
sort（）：排序，根据编码排序。数组会按照第一位来排，不准。
正则表达式：定义字符串规则的（正则表达式写在双斜线里面 / / ）RegExp 正则表达式是一个内置对象
用 [ ] 放备选字符：比如在【】内放123那么在外面如果输入4就不行。一个中括号只代表一位字符的匹配规则
可以用1-9a-zA-Z来缩写范围区间
{num}：大括号内放个数字代表前一位的规则重复多少次，{}内可以两个数字，第一个是最少重复几次，第二个最多几次
特殊数量词
？：前一位规则可有可无，最多一次等同于{0,1}

• ：前一位规则可有可无，不限制次数，等同于{0，}
  +：前一位规则至少一次，等同于{1，}
  预定义字符集：有特殊含义的字符
  \d：代表所有数字
  \w：代表所有数字，字母，下划线
  \s：代表空格
  . ：代表任意字符
  完整匹配：因为正则表达式是部分匹配，只要找到部分对应就算通过，所以开头用^结尾用$就可以限制必须完全按照来。
  正则表达式检测方法：正则表达式.tese(被检验的数据)
  原型（portotype）继承与原型链
  原型：方法背后，专门保存由方法创建出来的对象（函数返回一个对象）的共有属性
  共有属性：prototype可以保存构造函数的公共属性的对象，等下面调用new一个新的对象的时候可以调用这个共有属性使用。就像是父母的东西孩子可以使用。
  私有属性：就是对象自己定义的属性，只可以自己使用。
  如果将来很多对象都需要一个共同方法可以直接在他的父级也就是原型上加，这样就可以所有都可以调用。
  对象字面量： var obj={name：“小明”，age：18} 字面量只能保存一个对象
  构造函数（对象模板）：用来创建相同结构对象的专门方法，需要多个相同结构对象时可以用构造函数通过参数做一个模板，后面通过new调用就可以创造对象

new关键字：call和apply是改变指向的意思。
call语法：比如调用fn函数改变指向，原本调用fn（“参数”）改成 fn.call(目标对象，“参数”)就可以了，apply和call区别就是后面参数要用【】包起来，其他一样用。

对象：proto(隐式原型)每个对象都有一个隐式原型，一个对象的隐式原型永远指向创建该对象的构造函数的原型对象
大写的Function是所有函数的父类，大写的Object最大
看到函数他指向的是Function的原型对象，看到对象指向的是Object的原型对象。而函数的原型对象和大写函数的原型对象的父母是Object的原型对象，因为他最大。Object在往上指向的是null
如果在Object的原型上加个数据，那所有的都可以调用。因为他是最高级的原型了。

深拷贝和浅拷贝：
深拷贝：会复制对象所有的属性和值，
浅拷贝：只复制对象的引用关系。
区别：浅拷贝中，原始对象和新对象具有相同的属性，所以改变新对象数据，原始对象的也会改变。而深拷贝中原始对象不与新对象共享相同的属性，所以各自独立，更改不会互相影响。
如何实现深复制：先转成字符串在转回来

事件

click（点击触发）blur（失去焦点触发）change（表单内容变动时触发）mouseover（鼠标移入触发）
mouseout（鼠标移出触发）mousemove（鼠标移动触发）
一个元素添加多个事件：
增：addEventListener(“事件”，方法，是否在捕获阶段触发，一般用false)，需要几个事件就写几个addEventListener
删：removeEventListener(“事件”，方法，是否在捕获阶段触发，一般用false)
事件触发周期：事件捕获–目标触发–事件冒泡
事件捕获：从外往里捕获，一层一层来，先标记，然后一直走到出发了事件的那一层停止，这个做标记的过程叫事件捕获
事件冒泡：事件触发后开始生效，会从触发的这一层开始一层层往外触发，像是冒泡泡一样的由内而外触发，称为事件冒泡
事件对象：e.target（事件源）有事件的时候才会有事件对象，事件源对象可以精确找到是谁触发的事件，事件触发的函数小括号内写一个参数就默认是事件对象。如果需要括号内写自己的参数，那就function（e）{function（参数）{} }，在外面套一个函数就可以区分开事件对象和参数
e.stopPropagation():事件对象的方法，阻止冒泡
事件委托：利用冒泡原理，如嵌套的多个元素都绑定事件，可以只给里面的加，利用冒泡原理外面的都可以触发
e.offsetX:拿到鼠标当前元素左边位置的距离
e.offsetY:
e.pageX:拿到鼠标屏幕左边位置的距离
e.pageY:
jQuery（不能和原生JS混用）引用方法：他是一个js文件可以下载后外部引入他，也可以用网站的绝对地址，但是不推荐，网站崩会受影响。
e.target.id 可以用
选择器：$("")选择器用$符号加小括号，内部要加引号。想要选什么选择器就直接输入就行，跟CSS选择器一样使用，id=# class=。 div=div 实现思路：变量获取数组0号是什么判断用什么选择器
this：想要用this要加$(“this”)才能生效
事件：
.click() 点击事件
.blur() 失去焦点时触发
.change 触发事件一般是表单内元素改变后生效)
$(document).ready(function(){} （网页加载后直接触发事件）
dblclick() 当双击元素时，触发 dblclick 事件
效果：
hide( ):隐藏，直接调用就行。hide(speed,callback)，内部都有参数可以选择，第一个speed=时间比如一秒就是1000，可以有动画效果，第二个callback=可以放一个函数方法进去，隐藏完毕后执行
可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
show( )：显示，调用就行。show(speed,callback)，同上
toggle( )：如果隐藏就显示，如果显示就隐藏，自由切换，语法同上，也有两个一样的参数可以设置

fadeIn()：淡入效果，就是慢慢显示出来
fadeOut()：淡出效果，慢慢消失
fadeToggle()：可以在 fadeIn() 与 fadeOut() 方法之间进行切换。如果淡入就添加淡出效果，如果淡出就添加淡入
fadeTo()：允许渐变为给定的不透明度（值介于 0 与 1 之间） 语法：(speed,callback)

slideDown()：向下滑动，类似下拉菜单
slideUp()：向上滑动，类似下拉菜单
slideToggle()：自由切换上下滑动， 语法：(speed,callback)

animate()：用来自定义创建动画，通过改属性值生成动画效果
语法：$(selector).animate(params,speed,callback);params=属性更改多个属性用花括号来输入中间用冒号链接案例：$(“button”).click(function(){
KaTeX parse error: Expected 'EOF', got '}' at position 106: …150px' }); }̲); stop()：停止动画效…(selector).stop(stopAll,goToEnd); 有两个参数，一般不写，直接stop就可以。

链式结构：jq的方法可以连着写，安顺序生效，比如。click。fadein。animate这样连着写
jq增删改查部分：
text() - 设置或返回所选元素的文本内容 获取文字信息
html() - 设置或返回所选元素的内容（包括 HTML标签） 获取内容和标签
val() - 设置或返回表单内容的值，等同 获取输入框的值
attr()：按键值对设置比如id，box 给一个参数就是取值，一对就是赋值
改查：在上面四个的括号内输入可以更改想要更改的内容，注：text只能改文本，但是html会把标签一起改掉，可以直接在内输入标签，以达到添加标签的效果。
增：append()：在里面可以直接输入想要加入的标签和内容，直接在被选元素内添加子集，支持用变量填进去内容。after() 和 before() 就是加同级的
删：remove()：直接删除会连着被选元素一起删除。括号内支持选择器的，写了会选择名字为这个的被选元素删除 empty()：不会删除被选元素，只删除子集
css()：在里面输入样式就可以更改，如height:100px 多个用花括号，只输入一个值可以取值，比如height

增删查改：

增：
append()：在被选元素内结尾添加标签和内容
prepend()：在被选元素内开头添加标签和内容
after()：在被选元素后面添加同级标签和内容
before()：在被选元素前面添加同级标签和内容
addclass()：在选元素上加class名
删：
remove()：删除被选元素以及内容。在括号内加名字可以过滤只删除名字叫这个的元素
empty()：不删除被选元素，只删被选元素子集
removeclass()：删除class名
改：
css()：更改css样式，括号内加{}采用键值对形式如 Left：10px更改属性。单独一个可以取值
text()：更改被选元素的文本内容
html()：更改被选元素的标签和内容
attr()：采用键值对的形式可以更改属性从新赋值，单独可以取值，比如class
animate()：采用键值对的形式更改css属性，但是有动画效果
查：
siblings（）：找其他同级元素
parent（）：找其他父级元素
children（）：找其他子集元素
hasclass（）：找class名
e.target.id:事件源对象，在this找不到的时候用这个更准确，可以给脚本创造的标签和名字精准锁定

取值：
attr（）：可以取值，单独写一个，比如attr（“class”）
css（）:可以取值，单独写一个，比如css（“left”）

事件： 给以方法创造出来的元素添加事件需要用on（）加在父级身上，会自动绑定子集。语法：on(“click”，function(){})
以方法创造出来的元素如果this无法准确指引触发事件，可以用事件源对象：e.target 可以准确定位是谁触发的事件
click()：点击事件
blur()：鼠标失去焦点事件
change()：触发事件一般是表单内元素发生改变后触发
dblclick:当双击元素时，触发 dblclick 事件
$(document).ready(function(){}：网页加载后直接触发事件

ES6：2015年发布的

let：声明变量，和var区别。let不允许重复声明，也没有变量提升，仅在块级（大括号{}内的）作用域生效
暂时性死区：只要块级作用域内有let声明了同名变量那就会封锁块级作用域，不能用外面的变量
放在循环内let=i，可以让每个循环一遍就是一个块级作用域，可以拿到每一遍的i。
const：常量，声明的变量可以使值不会被更改。也是块级作用域的
可以批量声明变量：let[ a,b,c]=[1,2,3 ];如果后面多声明值没用，前面多声明变量内容就是空，一切只看对应位置就行
模板字符串：里面变量用￥{}写在里面
对象：对象解析可以写let {name，age}=obj，简化写法，前面的在后面的对象内取值，比如{random}=Math也一样的解构
对象套对象，多层结构就是名字：{名字}就可以解析出来，如果里层外层都要，那就多写一个名字
innerhtml=" "可以用``来加，不用拼接了，用${变量}表示变量
var arr=【1，2，3】 可以用…arr把数组拆了，对象也可以拆
函数默认参数写法：直接在小括号内（a=100）就可以，如果a没有传就是100
箭头函数：fn=（）=>{ }，如果参数只有一个值的话可以小括号不用写，如果没有值或者多个值都要加括号
箭头函数this指向：普通是谁调用指谁，箭头是谁创建指谁不会变
箭头函数不能当作构造函数，因为指向问题，new
对象扩展：对象内如果属性值是变量和属性名一样可以直接写一个属性名就行。age=age缩写成age
对象内函数可以简写，可以省略：function。直接写函数名（）{}
Symbol（）：原始数据类型，可以避免属性重复。避免覆盖，括号内可以传参，参数作用是做标记，区分
Set（）：new set（）括号内放数组，值不能重复，会自动去重
size：拿到成员的个数
add（）：添加，在里面添加值，重复的还是加不进去
delete（）：删除，括号里面写谁删谁
has（）：查找有没有，有事ture，没有false
clear（）：清空数组
for（let key of 变量.values()）:遍历值，如果后面写keys（）就遍历属性名，entries（）整体，属性名和属性值，可以循环数组和set但不可以循环对象
Map：新的数据结构，new Map生成，类似于对象，不局限于字符串，结构是[ [“name”，“小明”]，[“age”，18] ]
模块化：
export：导出，格式：export var a=1，多个要导出可以简写export{a，b，fn}，导出时可以改名字export{ fn as c}把fn改成c，as代表改，
default：默认导出只能有一个，格式：export default 变量
import{}：导入，格式：import{xx} from “js路径 " 要求导出的要是一个语句，引入时也可以as改名。也可以直接import” js路径"把所有js引入，路径可以写css的文件

重点
let特点：不可重复，块级作用域不能用外面的，
魔板字符串：``内可以不用加号直接写，变量用￥{}
。。。：拆分数组
解构赋值：let {name，age}=obj，代表获取对象内的name和age属性。
函数默认参数：直接函数内给参数数值就是默认参数，function（a=10，b）{}
箭头函数this指向：箭头函数指向创建的函数，普通函数谁调用指谁
对象简写：就是名字和值一样的可以缩写成一个{name}
set：内部放数组，会自动去重。
pormise：解决异步编程问题，通过then和catch导出对和错的结果。
export：导出
import：导入

异步编程的解决方案：

promise有时候需要把几个异步的请求分先后，传统方式用回调写无限嵌套，但回调越来越多，也称为回调地狱。而es6新的解决方案是promise，这是个构造函数。用法：先new promise（function（resolve，reject）｛写异步操作，然后用resolve（）传输出去｝）注：用resolve传和用reject传都可以，区别是在第一个函数接收和第二个函数接收。异步操作不在promise内处理，要调用后才行调用方法：then()关键字方法，一般把promise用个变量获取，然后变量.then（function（参数）｛获取参数｝）then可以链式调用，因为then会创造一个新的promise，所以后面的then想要拿到上一步的数据，要在上一个then内再写一个promise方法，再写一个请求然后传给第二个then，后面同理注意：如果想要链式调用往下运行，需要手动改变状态，通过resolve（）让程序往下走，否则会一直处于进行中状态还有一个catch（）方法，相当于then里面第二个函数，所以只需要选择写一个就行promise. all（）方法可以把多个实例一起用，也就是多个异步操作一起运行，当多个操作运行都结束后才执行，执行的是多个操作一起总的值，根据位置看角标就知道谁是谁的race方法：同时运行多个请求，找出最快的结果。