文章目录
- grid
- flex
- html
- 表格
- 合并单元格
- 表单
- 表单元素
- input类型
- select
- h5
- 文件上传
- 拖拽api
- web Storage
- css
- 块元素和行内元素转换
- position
- float
- 溢出
- 显示隐藏
- 外边距
- 过渡和动画
- 动画
- 变形
- 选择器
- 属性选择
- 伪类选择器
- css3
- 边框圆角
- 边框阴影
- 渐变
- text-overflow与word-wrap
- js
- dom操作
- document选择
- 鼠标事件
- 样式改变
- 子节点操作
- 创造节点
- 删除节点
- 复制节点
- 阻止默认行为
- 阻止事件冒泡
- 事件委托
- 键盘事件
- bom
- 调整窗口大小
- 延时函数
- 滚动scroll
- mouseenter鼠标事件
- 元素偏移量
- ajax
- fetch
- 函数
- 内部属性
- this指向
- 作用域
- 调用函数
- 闭包
- 对象
- 对象里面写函数
- 原型链
- 事件循环
- axios
- 笔记
- setTimeout()和setInterval()的用法与区别
- 你必须知道的 clientWidth, offsetWidth, scrollWidth.
- textContent、innerText和innerHTML
- vue组件通信
- 数组方法
- 去除添加操作
- sort
- splice
- 截取字符串
- flex项目的属性
- 元素显示与隐藏
- eval() 函数
- 获取多选的值
- find，filter
- vue获取选中的option值
- 渲染class
- :hover伪类选择器
- [transform三大属性 rotate、scale、translate](https://blog.csdn.net/weixin_44167504/article/details/108416216)
- echart属性
- 在函数内调用函数
- 超出省略号显示
- var，let，const三者的特点和区别
- className 与 classList 的区别
- JavaScript中的attributes
- object取值
- dataset
- axios发请求携带请求头
- 防抖和节流
- fetch请求
- 关于对象
- vue3子父通信
grid
grid-template-columns:100px xxx 1fr
生明列的宽度，有几个xxx，每列就有几个数据，100px代表第一个元素的宽度 fr为占的空间
grid-template-rows：100px xxx xxx
生明行的宽度，有几个xxx，每行就有几个数据，100px代表第一个元素的宽度
grid-gap：每个元素之间的间距
grid-row-gap: 10px 表示行间距是 10px
grid-column-gap: 20px 表示列间距是 20px
grid-gap: 10px 20px 实现的效果是一样的
grid-template-areas 属性用于定义区域，一个区域由一个或者多个单元格组成
grid-auto-flow 精确指定在网格中被自动布局的元素怎样排列
flex
https://juejin.cn/post/7037779689016197133
html
表格
设置⼤⼩边框等. 但是⼀般使⽤ CSS ⽅式来设置。
这些属性都要放到 table 标签中.
align： 是表格相对于周围元素的对⻬⽅式. align=“center” (不是内部元素的对⻬⽅式)
border： 表示边框. 1 表示有边框(数字越⼤, 边框越粗), “” 表示没边框.
cellpadding: 内容距离边框的距离, 默认 1 像素
cellspacing: 单元格之间的距离. 默认为 2 像素
width / height: 设置尺⼨.
合并单元格
表单
表单元素
input类型
select
h5
文件上传
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文件导入</title>
<style>
</style>
</head>
<body>
<form enctype="multipart/form-data">
<input type="file" id="myFile" multiple>
<input type="submit">
</form>
<img src="" id="myPhoto" alt="photo">
</body>
<!--js代码展示-->
<script>
const myFile = document.getElementById('myFile')
const myPhoto = document.getElementById('myPhoto')
myFile.onchange = ()=>{
console.log(myFile.files)
const file = myFile.files[0]
const read = new FileReader()
//转译文件地址
read.readAsDataURL(file)
//文件加载完成就显示出来
read.onload = ()=>{
myPhoto.src = read.result
}
}
</script>
</html>
拖拽api
web Storage
1 localStorage 永久
2 sessionStorage 临时
css
块元素和行内元素转换
块元素在页面中以区域块的形式出现，每个块元素通常都会独自占据一整行或多个整行、可以对其设置宽度、高度、对齐等属性。
常见:元素有<h1>~<h6>、<p>、<div>、 <ul>、<ol>、<li>等，其中<div>标记是最典型的块元素。
行内元素也称为内联元素或内嵌元素， 一个行内元素通常会和其前后的其他行内元素显示在同一行中，不占独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置高度、对齐等属性，常用于控制页面中文本的样式。
常见的行内元素有<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、 <u>、 <a>、<span>等， 其中<span>标记是最典型的行内元素。
使用display属性对元素的类型进行转换。
display属性常用的属性值及含义：
（1）inline：此元素将显示为行内元素(行内元素默认的display属性值)。
（2）block:此元素将显示为块元素(块元素默认的display属性值)。
（3）inline- block: 此元素将显示为行内块元素，可以对其设置宽度、高度和对齐等属性，但是该元素不会独占一行。
（4）none:此元素将被隐藏，不显示，也不占用页面空囘，相当于垓元素不存在。
position
通过使用定位属性(position)可以选择4种不同类型的定位，这会影响元索的显示位置:定位属性的取值可以是static (静态定位)、relative (相对定位)、absolute (绝对定位)、fixed(固定定位)。
静态定位是元素默认的定位方式，是各个元素在HTML文档流中的默认位置:在静态定位方式中，无法通过位置偏移属性( top、 bottom、left或right )来改变元素的位置。
相对定位是普通文档流的一部分，相对于本元素在文档流原来出现位置的左上角进行定位，可以通过位置偏移属性改变元素的位置。虽然其移动到其他位置，但该元素仍占据原来未移动时的位置，该元素移动后会导致其覆盖其他的框元素。
绝对定位是脱离文档流的，不占据其原来未移动时的位置，是相对于父级元素或更高的祖先元素中有relative (相对)定位并且离本元素层级关系上最近元素的左上角进行定位。如果在祖先元素中没有设置relative定位时，就默认相对于body进行定位。
固定定位是绝对定位的一种特殊形式， 是以浏览器窗口作为参照物来定义网页元素。当position属性的取值为fixed时，即可将元素的定位模式设置为固定定位。
当对元素设置固定定位后，该元索将脱离标准文档流的控制，始终依据浏览器窗口的左上角来定义自己的显示位置。不管浏览器滚动条如何滚动，也不管浏览器窗口的大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。
注意：元素可拥有负的z-index属性值、而且z-index仅能在绝对定位元素(例如position:absolute;)上起作用。
float
在CSS中， 通过float属性可以实现元素的浮动，而且可以定义是向哪个方向浮动。
在CSS中任何元素都可以浮动，**开且浮动元素会生成一个块级框，**而不论本身是何种元素。
溢出
（1） visible: 当开发人员将矩形对象的overflow属性设置为visible时， 如果内容区域的大小能够容纳子矩形对象，浏览器会正常显示子矩形对象;当内容区域无法容纳子矩形区域时，浏览器会在内容区域之外显示完整的子矩形对象。
（2）hidden:当开发人员将矩形对象的overflow属性设置为hidden时，如果内容区域的大小能够容纳子矩形对象，浏览器会正常显示子矩形对象;当内容区域无法容纳子矩形区域时，浏览器会显示内容区域之内的子矩形对象，超出内容区域的则不显示。
（3）seroll: 当开发人员将矩形对象的overflow属性设置为scroll时， 如果内容区域的大小能够容纳子矩形对象，浏览器会正常显示子矩形对象，并且显示预设滚动条;当内容区域无法容纳子矩形区域时，浏览器会在内容区域之内显示完整的子矩形对象，同时显示滚动条并启用滚动条功能，让用户能够通过滚动条浏览完整的子矩形对象。
（4）auto: 当开发人员将矩形对象的overflow属性设置为auto时， 如果内容区域的大小能够容纳子矩形对象，浏览器会正常显示子矩形对象;当内容区域无法容纳子矩形区域时，浏览器会在内容区域之内显示完整的子矩形对象，同时显示滚动条并启用滚动条功能，让用户能够通过滚动条浏览完整的子矩形对象。
显示隐藏
在CSS中，display属性设置 一个元素如何显示，visibility属性指定一个元素可见还是隐藏。隐藏一个元素可以通过把display属性设置为none ,或把visibility属性设置为hidden。这两种方法会产生不同的结果。
外边距
过渡和动画
（1）transition-property属性:规定设置过渡效果的CSS属性的名称。
（2）transition-duration属性:规定完成过渡效果需要多少秒或毫秒。
（3）transition-timing-function属性:规定速度效果的速度曲线。
（4）transition-delay属性:定义过渡效果何时开始
动画
变形
选择器
属性选择
伪类选择器
css3
边框圆角
border-radius：5px 4px 3px 2px;/*四个值分别代表左上角，右上角，右下角，左下角，顺时针*/
边框阴影
box-shadow：X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];
渐变
text-overflow与word-wrap
js
dom操作
document选择
鼠标事件
样式改变
子节点操作
创造节点
删除节点
复制节点
阻止默认行为
阻止事件冒泡
事件委托
键盘事件
bom
调整窗口大小
延时函数
滚动scroll
mouseenter鼠标事件
元素偏移量
ajax
XMLHttpRequest 对象方法描述
封装
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// const xhr = new XMLHttpRequest()
// // open中有三个参数，第一个是请求方式，第二个是请求url，第三个是请求是否异步，默认true表示异步，false表示同步
// xhr.open('get', './data.php')
// //发送请求
// xhr.send()
// readyState === 0 : 表示未初始化完成，也就是 open 方法还没有执行
// readyState === 1 : 表示配置信息已经完成，也就是执行完 open 之后
// readyState === 2 : 表示 send 方法已经执行完成
// readyState === 3 : 表示正在解析响应内容
// readyState === 4 : 表示响应内容已经解析完毕，可以在客户端使用了
//封装ajax
function $ajax({type='get',url,data,success,error}){
var xhr = null
try{
xhr =new XMLHttpRequest();
}catch(error){
xhr = new XMLHttpRequest("Microsoft.XMLHTTP")
}
if(type == 'get' && data){
url +="?"+querystring(data)
}
xhr.open(type,url,true)
if(type=="get"){
xhr.send()
}else{
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
data ? xhr.send(querystring(data)) : xhr.send();
}
xhr.onreadystatechange = function(){
if(xhr.readyState==4){
if(xhr.status==200){
if(success){
success(xhr.responseText)
}
}else{
if(error){
error("Error:"+xhr.status)
}
}
}
}
}
function querystring(obj){
var str = ''
for(var attr in obj){
str+= attr +'='+obj[attr]+"&"
}
return str.substring(0,str.length-1)
}
</script>
</body>
</html>
fetch
函数
内部属性
arguments
注意：arguments 中存的是实参，而不会存形参
function foo(a,b = 2,c = 3){
console.log(arguments) // [Arguments] { '0': 1 }
console.log(b) //2
console.log(c) //3
}
//只传了一个实参，那么arguments中就只有一个值
foo(1)
callee 属性
this指向
显示函数绑定
立即执行函数 IIFE
作用域
调用函数
call(执行环境对象,实参列表);
var obj = {
name: '叶子yes',
sayName: function (a,b) {
console.log(this.name); // 叶子yes
console.log(a,b); // 1,2
}
}
var b = obj.sayName;
b.call(obj,1,2); // this 指向 obj
apply(执行环境对象,实参列表数组);
var obj = {
name: '叶子yes',
sayName: function (a,b) {
console.log(this.name); // 叶子yes
console.log(a,b); // 1,2
}
}
var b = obj.sayName;
b.apply(obj,[1,2]); // this 指向 obj，实参列表要写成数组的形式
注意：如果call和apply的第一个参数是null，那么this在node环境下指向的是global对象，在HTML中指向的是window对象
bind(执行环境对象)(实参列表);
var obj = {
name: '叶子yes',
sayName: function (a,b) {
console.log(this.name); // 叶子yes
console.log(a,b); // 1,2
}
}
var b = obj.sayName;
var c = b.bind(obj) //返回函数，此时还没有执行，需要再使用()来执行
console.log(c) //[Function: bound sayName]
c(1,2) //执行函数
总结：call和apply都是改变上下文中的this并立即执行这个函数，bind方法可以让对应的函数想什么时候调就什么时候调用，并且可以将参数在执行的时候添加，这是它们的区别。
闭包
1、什么是闭包
简单讲，闭包就是指有权访问另一个函数作用域中的变量的函数。
闭包是一种特殊的对象。它由两部分构成：函数以及创建该函数的环境。环境由闭包创建时在作用域中的任何局部变量组成。
2、闭包形成的条件
闭包的生成有三个必要条件：
1、函数嵌套函数
2、内部函数引用了外部函数中的数据（属性、函数）
3、参数和变量不会被回收
function func() {
var a = 1, b = 2;
function closure() {
return a + b;
}
return closure;
}
console.log(func()()); // 3
3、闭包的作用
闭包可以用在许多地方。它的最大用处有两个，一个是可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。
function f1() {
var n = 999;
nAdd = function () {
n += 1
}
function f2() {
console.log(n);
}
return f2;
}
var result = f1();
result(); // 999
nAdd();
result(); // 1000
4、使用闭包的注意点
（1）由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露，这是IE的BUG。解决方法是，在退出函数之前，将不使用的局部变量全部删除。
（2）闭包会在父函数外部改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。多个子函数的scope都是同时指向父级，是完全共享的。因此当父级的变量对象被修改时，所有子函数都受到影响。
对象
修改属性
var obj1 = {
str1: 'woaini',
};
obj1.str1 = 666
console.log(obj1['str1'])
给对象添加属性
var obj1 = {
};
obj1.name = 'xiaoming';
obj1['age'] = 10;
console.log(obj1.age, obj1.name);
使用Object.keys(obj)方法查看对象所有属性
var obj1 = {
str1: 'woaini',
};
obj1.str1 = 666
obj1.age = 18
console.log(Object.keys(obj1))
// [ 'str1', 'age' ]
Object对象自己的实例方法
function f() {
console.log(1)
};
Object.prototype.fun = f;
var obj = {}
obj.fun()
对象里面写函数
<script>
// 写法1
var dog = {
sayHello() {
console.log(this);
}
};
//写法2
var cat={
sayHello:function(){
console.log(this)
}
}
//写法3
var person = {
sayHello:()=> {
console.log(this);
}
};
dog.sayHello();
cat.sayHello();
person.sayHello();
</script>
原型链
什么是原型链
原型链，所有的原型构成了一个链条，这个链条我们称之为原型链（prototype chain)。
这个时候经历了什么呢？JS引擎线从Obj.address里寻找，发现没有找到，然后接着去找obj.__ proto __ 里面寻找，发现还是没找到，所以结果为undefined。我们可以给obj.__ proto __ 赋值
let obj = {
name : 'harry',
age:18
}
obj.__proto__ = {
address:'上海'
}
console.log(obj.address); //上海
或者这样
obj.__proto__ = {
//这里一定要开辟一个空间，不能直接写obj.__proto__.__proto__ = {}
}
obj.__proto__.__proto__= {
address:'上海'
}
console.log(obj.address); //上海
接着套娃
let obj = {
name : 'harry',
age:18
}
obj.__proto__ = {
}
obj.__proto__.__proto__= {
}
obj.__proto__.__proto__.__proto__= {
address:'上海'
}
console.log(obj.address); //上海
事件循环
一、什么是事件循环机制？
//语句一
console.log(1);
//语句二
setTimeout(()=>{
console.log(2);
},1000);
//语句三
console.log(3);
执行结果为1，3，2
原因是JS引擎指向代码是从上往下执行的，首先会执行语句一。
JS引擎会将语句一放在调用栈当中，然后执行代码，在控制台输出1，当语句一执行完毕后，便将其从调用栈中移出去。
接着语句二进入调用栈，语句二会调用Web API,1秒后进入回调队列，此时JS引擎将语句二移出调用栈，继续执行后面的代码。所以控制台输出了3。
此时进入事件循环（EventLoop）,他会不断循环的访问回调队列，等待1秒后Web API会将要执行的语句二放入回调队列；事件循环（EventLoop）将回调队列中的内容放入调用栈，开始执行，然后在控制台输出2。
axios
笔记
ajax和jq发请求：$.get()
$.post()
splice改变原数组
parseInt() 把所有类型转换为int类型
setTimeout()和setInterval()的用法与区别
setTimeout()是延时器，setInterval()是定时器。setTimeout(表达式,延时时间)在执行时,是在载入后延迟指定时间后,去执行一次表达式,记住,次数是一次，而setInterval(表达式,交互时间)则不一样,它从载入后,每隔指定的时间就执行一次表达式 所以,完全是不一样的。
1.setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
var timer = setInterval(()=>{
//写函数
},time)
//清除定时器
clearInterval(timer)
**2.setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式，setTimeout() 只执行一次，看例子**
setTimeout(()=>{
//写表达式
},time)
//清除定时器
clearTimeout()
你必须知道的 clientWidth, offsetWidth, scrollWidth.
clientWidth
clientWidth = width- 左border - 右border
现在的结论是站在 box-sizing 属性为 border-box 的前提下的，后面我会讲解到 box-sizing 为 content-box 时 clientWidth 的不同。
offsetWidth
就是在 box-sizing:border 的时候 offsetWidth 其实就等于 dom 元素的 width
在 box-sizing:conetent 的时候 offsetWidth= width + 左border + 右border + 左padding + 右padding。
而 offsetWidth 这个属性是为了表达了盒子的真实物理宽度。所以它的计算方式会根据 box-sizing 的不同而不同。
1.在内容区没有发生溢出的情况下，scrollWidth = clientWidth 因为它们都是代表内容区的宽度。
2.在内容区发生了溢出，并且设置了 overflow-scroll 之类的属性的情况下，clientWidth 代表dom 当前状态下，实际上展示在可视区域的 内容区（content) 的宽度,而 scrollWidth 则代表了真实的内容区的宽度，包括了那些没有展现在用户面前的，需要滚动才可以看到的内容的宽度。这时候
scrollWidth= clientWidth + 溢出的内容区的宽度。
textContent、innerText和innerHTML
设置标签中的文本内容,应该使用textContent属性,谷歌,火狐支持,IE8不支持
设置标签中的文本内容,应该使用innerText属性,谷歌,火狐,IE8都支持
如果这个属性在浏览器中不支持,那么这个属性的类型是undefined 判断这个属性的类型 是不是undefined,就知道浏览器是否支持如果使用innerText主要是设置文本的,设置标签内容,是没有标签的效果的 innerHTML是可以设置文本内容
innerHTML主要的作用是在标签中设置新的html标签内容,是有标签效果的
想要设置标签内容,使用innerHTML,想要设置文本内容,innerText或者textContent,或者innerHTML,推荐用innerHTML
innerText可以获取标签中间的文本内容,但是标签中如果还有标签,那么最里面的标签的文本内容也能获取.—获取不到标签的,文本可以获取
innerHTML才是真正的获取标签中间的所有内容
vue组件通信
点击跳转
数组方法
去除添加操作
shift() 去除数组第一个元素
pop（）去除数组最后一个元素
unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。
sort
正序
sort（（a，b）=>{
return a-b}）
splice
var arr = [1,2,3,4,5];
// 添加
arr.splice(0,0,0);// [0,1,2,3,4,5]
// 修改
arr.splice(0,1,23);// [23,2,3,4,5]
// 删除
arr.splice(0,1);//[1,2,3,4,5]
截取字符串
flex项目的属性
order
flex-grow
flex-shrink
flex-basis
flex
align-self
order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
.item {
order: <integer>;
}
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
.item {
flex-grow: <number>; /* default 0 */
}
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
.item {
flex-shrink: <number>; /* default 1 */
}
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
.item {
flex-basis: <length> | auto; /* default auto */
}
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
元素显示与隐藏
visibility 属性设置元素是否应该是可见的。
visibility 属性允许作者显示或隐藏一个元素。与 display 属性类似。然而，不同的是，如果您设置 display:none，将隐藏整个元素，如果您设置 visibility:hidden，元素的内容将不可见，但元素仍保持原来的位置和大小。
opacity 属性
eval() 函数
获取多选的值
option 有seleted值，如果选中，selected就为true
find，filter
find()方法主要用来返回数组中符合条件的第一个元素（没有的话，返回undefined）
filter()方法主要用来筛选数组中符合条件的所有元素，并且放在一个新数组中，如果没有，返回一个空数组
map()方法主要用来对数组中的元素调用函数进行处理，并且把处理结果放在一个新数组中返回（如果没有返回值，新数组中的每一个元素都为undefined）
forEach()方法也是用于对数组中的每一个元素执行一次回调函数，但它没有返回值（或者说它的返回值为undefined，即便我们在回调函数中写了return语句，返回值依然为undefined）
let test = [1, 2, 3, 4, 5];
let a = test.find(item => item > 3);
console.log(a); //4
let b = test.find(item => item == 0);
console.log(b); //undefined
vue获取选中的option值
渲染class
跟据规定渲染class
:class={class名字 ： show==1}
//如果show=1，class就渲染
:class="[active==1?'active':'']"
:hover伪类选择器
transform三大属性 rotate、scale、translate
echart属性
在函数内调用函数
超出省略号显示
var，let，const三者的特点和区别
className 与 classList 的区别
JavaScript中的attributes
object取值
dataset
跳转
axios发请求携带请求头
防抖和节流
fetch请求
关于对象
vue3子父通信
