11.30蓝桥杯笔记

一、JSON.stringify()

JSON.stringify()将对象转化为json字符
JSON.parse（JSON.stringify()）将json字符串解析为js对象

遍历数组

二、元素选择器

.seat:nth-child(8n+1){   margin-left: 10px; }

maxPage = Math.ceil(data.length / 5);//ceil 向上取整

//请求数据
axios.get('./js/carlist.json')
.then(res=>{
}


//给上一个class移除/添加属性
prev.classList.remove('disabled')
this.classList.add('disabled')

三、document.querySelector

使用getElementByld()来获取带有id的元素对象

var element = document.getElementById('id')

// 获取body元素
let body = document.querySelector("body");
console.log(body)

// 获取id为container的元素，只会获取第一个
let container = document.querySelector("#container");
console.log(container)

// 获取class中包含btn的元素，只会获取第一个
let btn = document.querySelector(".btn");
console.log(btn);

// 获取container直接子类class中包含btn的元素，只会获取第一个
let containerBtn = document.querySelector("#container>.btn");
console.log(containerBtn);



var baseElement = document.querySelector("p");
document.getElementById("output").innerHTML =
         (baseElement.querySelector("div span").innerHTML);

.querySelector与getElementBy等的区别
document.getElementBy
获取的是动态集合

用法：

document.getElementsByTagName('p');//标签名字，如<p>,<div>
document.getElementById('p1');//元素id
document.getElementsByClassName('text');//类名字

document.querySelector
获取的是静态集合

用法：

//匹配指定 CSS 选择器元素，可以匹配多个，用，隔开
document.querySelector（'.text'）；  //方法返回类名为text的第一个子元素 。
document.querySelectorAll（'.text'）；  //方法返回类名为text的所有元素 。
document.querySelector（'#list'）.innerHTML； 

由于querySelector是按css规范来实现的，所以它传入的字符串中第一个字符不能是数字.
query选择符选出来的元素及元素数组是静态的，而getElement这种方法选出的元素是动态的。静态的就是说选出的所有元素的数组，不会随着文档操作而改变．在使用的时候getElement这种方法性能比较好，query选择符则比较方便

四、gap是元素之间的间隔

gap 是一个提议的属性，将用于 CSS 网格和 flexbox。
CSS 网格间隙 在CSS 网格中,可以使用 grid-gap属性轻松地在列和行之间添加间距。 它是行间距和列间距的简写。

gap:1rem;

五、position:sticky

六、cursor:pointer

animation

animation 属性用来指定一组或多组动画，每组之间用逗号相隔。
CSS animation 属性是
animation-name，
animation-duration,
animation-timing-function，
animation-delay，
animation-iteration-count，
animation-direction，动画播放的方向
animation-fill-mode ,确定动画在执行之前和之后这两个阶段应用的样式
animation-play-state,确定动画是否正在播放

属性的一个简写属性形式。

七、toRef

toRef(操作对象, 对象属性)

ref 函数可以创建一个响应式的数据，那 toRef 函数同样也是创建一个响应式的数据，
首先一点，ref 函数他的本质其实是去拷贝一份数据，脱离了与源数据的交互。ref 函数可以将对象里面的属性值变成响应式的数据，修改响应式数据，不会影响到源数据，但是视图层上的数据会被更新。
但是 toRefs 函数的本质是引用，也就是说，toRef 函数会与源数据交互，修改响应式数据会造成源数据的修改，但是他的修改不会造成视图层数据的更新。