AJAX

AJAX

1.绑定事件点击判断类名的

document.querySelector('.list').addEventListener('click', (e) =>{ 
    if (e.target.classList.contains('edit')) {
        editModal.show()
    }
})

2.事件文件列表

document.querySelector('.upload').addEventListener('change', (e) => {
            // files是内置属性
            console.log(e.target.files[0])
            // 使用FormData携带图片文件,这个也是内置函数，专门放文件得
            const fd = new FormData()
            // 往fd这个文件推进图片文件
            fd.append('img', e.target.files[0])
            console.log(fd)
            // 提交到服务器
            axios({
                url:'https://hmajax.itheima.net/api/uploadimg',
                method: 'POST',
                data: fd
            }).then(result => {
                console.log(result)
                // 取出图片url网站，用img标签加载显示
                const imgData = result.data.data.url
                document.querySelector('img').src = imgData

            })
        })
        以后看到请求参数有form-data的就用new FormData()把参数装好

3.关联标签

<label for="bg">更换背景</label>
<input class="bg-ipt" type="file" id="bg">
label通过for关联另外一个标签，点击label标签的内容就相当于点击了input了

4.转义符号

        // &lt;是转义符号

5.耦合性

// 耦合是指两个或两个以上的体系或两种运动形式间通过相互作用而彼此影响以至联合起来的现象，
比如回调函数地狱，回调函数嵌套着另一个回调函数

6.事件循环经典面试题

<!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>
        // 目标：回答代码执行顺序
        console.log(1)
        setTimeout(() => {
          console.log(2)
          const p = new Promise(resolve => resolve(3))
          p.then(result => console.log(result))
        }, 0)
        const p = new Promise(resolve => {
          setTimeout(() => {
            console.log(4)
          }, 0)
          resolve(5)
        })
        p.then(result => console.log(result))
        // 下面Promise调用成功后p2.then才是异步的的
        const p2 = new Promise(resolve => resolve(6))
        p2.then(result => console.log(result))
        console.log(7)
        // 顺序是1,7,5,6,2,3,4
      </script>
</body>
</html>
视频讲解：【黑马程序员前端AJAX入门到实战全套教程，包含学前端框架必会的（ajax+node.js+webpack+git），一套全覆盖】 https://www.bilibili.com/video/BV1MN411y7pw/?p=56&share_source=copy_web&vd_source=6d85a42211229eb21897bf4e36af0c96