最新适合小白前端 Javascript 高级常见知识点详细教程（基础篇）

唤醒手腕

已于 2023-11-08 00:11:43 修改

阅读量262

点赞数 1

分类专栏：前端Node编程技术教程文章标签：前端 javascript 开发语言

于 2023-09-20 21:54:59 首次发布

本文链接：https://blog.csdn.net/qq_47452807/article/details/133101446

版权

前端Node编程技术教程专栏收录该内容

12 篇文章 7 订阅

订阅专栏

1. window.onload

窗口或者页面的加载事件，当文档内容完全加载完成会触发的事件（包括图形，JS脚本，CSS文件），就会调用处理的函数。

<button>点击</button>
<script>    
    btn = document.querySelector("button");
    btn.addEventListener('click', function() {
        console.log("button点击了")
    });
</script>

网页中的某些JavaScript脚本代码往往需要在文档加载完成后才能够去执行，否则可能导致无法获取对象的情况，为了避免类似情况的发生，可以使用以下两种方式:

（1）将脚本代码放在网页的底端，运行脚本代码的时候，可以确保要操作的对象已经加载完成。

（2）通过window.onload来执行脚本代码。

举例子：当文档内容完全加载完成会触发的事件

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        window.onload = function(){
            console.log("页面加载以后！")
            console.log(a);
        }
    </script>
    <script>
        var a = 10;
        console.log(a);
    </script>
</body>
</html>

window.load传统注册事件的方式只能写一次，如果有多个，会以最后一个window.load为主。

window.addEventListener 方式除外

关于window.onload事件处理函数绑定：

window.onload事件默认只执行最后一次绑定的函数，例如

window.onload = funcA;
window.onload = funcB；

那么当window加载完成后，只会执行funcB

如果想在window加载完毕后执行多个函数，可以自己封装一个函数

window.onload必须等待网页中所有内容加载完毕后（包括图片）才能执行

$(document).ready()在网页所有DOM结构绘制完毕后就执行，可能DOM元素关联的东西并没有加载完，但网页的所有元素对jQuery是可以访问的，等价于DOMContentLoaded

$(document).load()

需要注意一点，使用$(document).ready()方法注册的事件，由于元素关联的文件可能未下载完，比如与图片有关的HTML下载完毕，但是图片还未加载完，此时访问图片的高度和宽度这样的属性不一定有效，

所以可以使用$(document).load()方法，如果处理函数绑定给window对象，则会在（窗口、框架、对象、图片等）加载完毕后触发。

如果绑定在元素上，则会在元素内容加载完毕后触发，等价于Javascript中的 window.onload = function(){ }

2. window.onresize

在实现一个项目需求的时候，需要监听到某个div元素的宽高变化，第一时间想到的是resize事件，但是很不幸运的是，resize事件只能加在window对象上，并不能监听具体某个DOM元素。

window.onresize = function() {
	console.log("窗口大小变化")
}

window.addEventListener('resize', function(){
    console.log("窗口大小变化");
})

3. window.innerWidth

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div style="width: 100px;height: 100px;background-color: black;">

    </div>
    <script>
        var div = document.querySelector("div");
        console.log(div.innerWidth); 
        ## undefined
        console.log(div.innerHeight); 
        ## undefined
        
        console.log(div.style.width); 
        ## 100px
        console.log(div.style.height); 
        ## 100px
        
        console.log(window.innerWidth); 
        ## 能够输出
        console.log(window.innerHeight); 
        ## 能够输出
    </script>
</body>
</html>

4. setTimeout( )

window.setTimeout(function(){
	console.log("2 秒后执行");
},2000)

setTimeout

在这里插入图片描述

举例子：5 秒钟后关闭图片展示

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="https://img0.baidu.com/it/u=4280883260,2294162798&fm=26&fmt=auto&gp=0.jpg" alt="">
    <script>
        setTimeout(function (){
            document.querySelector("img").style.visibility = "hidden";
        },5000)
    </script>
</body>
</html>

运行效果

在这里插入图片描述

定时器清除

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>点击停止炸弹</button>
    <script>
        var timer = setTimeout(function(){
            alert("boom~~~~~");
        },3000);

        document.querySelector("button").addEventListener('click', function(){
            window.clearTimeout(timer);
        })
    </script>
</body>
</html>

5. setInterval( )

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="https://img0.baidu.com/it/u=4280883260,2294162798&fm=26&fmt=auto&gp=0.jpg" alt="" width="500px" height="300px">

    <script>
        var img = [
            "https://img0.baidu.com/it/u=4280883260,2294162798&fm=26&fmt=auto&gp=0.jpg",
            "https://img1.baidu.com/it/u=2132884305,1901513314&fm=26&fmt=auto&gp=0.jpg",
            "https://img0.baidu.com/it/u=150891675,3914340408&fm=26&fmt=auto&gp=0.jpg"
        ]

        var i = 1;
        setInterval(() => {
            document.querySelector("img").src=img[i];
            i++;
            if(i>2) i=0;
        }, 1000)
    </script>
</body>
</html>

在这里插入图片描述

+ 运算符的介绍

+ 运算符(数值运算符)；会将表达式转换为数字。针对右侧表达式的值进行数字转换，类似于 Number() 的转换规则， ToNumber。返回一个新值，不会改变原始变量值。

+ new Date()

定时器案例

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
    <style>
        div{
            background-color: black;
            color: white;
            width: 150px;
            height: 100px;
            float: left;
            margin-right: 20px;
            font-size: 80px;
            line-height: 100px;
            text-align: center;
            letter-spacing: 10px;
            text-indent: 10px;
        }
    </style>
<body>
    <div></div>
    <div></div>
    <div></div>

    <script>
        var div = document.querySelectorAll("div");

        var inputTime = + new Date("2021-9-8 19:00:00")
        function showTime(){
            var nowTime = + new Date();
            inputTime = + new Date(inputTime);
            var seconds = (inputTime - nowTime) / 1000;
            var H = parseInt(seconds / 60 / 60 % 24);
            if(H < 10) H = '0' + H;
            var M = parseInt(seconds / 60 % 60);
            if(M < 10) M = '0' + M;
            var S = parseInt(seconds % 60);
            if(S < 10) S = '0' + S;
            div[0].innerText = H;
            div[1].innerText = M;
            div[2].innerText = S;
        }
        showTime();
        setInterval(showTime, 1000);
    </script>
</body>
</html>

在这里插入图片描述

6. this 指向问题

使用 JavaScript 开发的时候，很多开发者会被 this 的指向搞蒙圈，但是实际上，关于 this 的指向，记住最核心的一句话：哪个对象调用函数，函数里面的this指向哪个对象。

普通函数调用

let username='cn'
function fn(){
    alert(this.username); ## undefined
}
fn();

可能大家会困惑，为什么不是输出CN，但是在细看一看，我声明的方式是let，不会是window对象
如果输出CN，要这样写：

var username='cn'
function fn(){
    alert(this.username); ### cn
}
fu();

window.username='cn'
function fn(){
    alert(this.username); ### cn
}
fn();
###  可以理解为 window.fn();

对象函数调用

这个相信不难理解，就是那个函数调用，this指向哪里

window.b=2222
let obj={
    a:111,
    fn:function(){
        alert(this.a); ### 111
        alert(this.b); ### undefined
    }
}
obj.fn();

let obj1={
    a:222
};
let obj2={
    a:111,
    fn:function(){
        alert(this.a);
    }
}
obj1.fn = obj2.fn;
obj1.fn(); ### 222

这个相信也不难理解，虽然obj1.fn是从obj2.fn赋值而来，但是调用函数的是obj1，所以this指向obj1。

构造函数调用

let TestClass=function(){
    this.name='111';
}
let subClass=new TestClass();
subClass.name='cn';
console.log(subClass.name); 	### cn
let subClass1=new TestClass();
console.log(subClass1.name);	### 111

这个也是不难理解，回忆下（new的四个步骤）就差不多了！

但是有一个坑，虽然一般不会出现，但是有必要提一下。

在构造函数里面返回一个对象，会直接返回这个对象，而不是执行构造函数后创建的对象

apply和call调用

apply和call简单来说就是会改变传入函数的this。

let obj1={
    a:222
};
let obj2={
    a:111,
    fn:function(){
        alert(this.a);
    }
}
obj2.fn.call(obj1);
此时虽然是 obj2 调用方法，但是使用 了call，动态的把 this 指向到 obj1。相当于这个 obj2.fn 这个执行环境是 obj1 。apply 和 call 详细内容在下面提及。

箭头函数调用

首先不得不说，ES6 提供了箭头函数，增加了我们的开发效率，但是在箭头函数里面，没有 this ，箭头函数里面的 this 是继承外面的环境。

let obj={
    a:222,
    fn:function(){    
        setTimeout(function(){console.log(this.a)})
    }
};
obj.fn();//undefined

不难发现，虽然 fn() 里面的 this 是指向 obj ，但是，传给 setTimeout 的是普通函数， this 指向是 window ， window 下面没有 a ，所以这里输出 undefined。

换成箭头函数

let obj={
    a:222,
    fn:function(){    
        setTimeout(()=>{console.log(this.a)});
    }
};
obj.fn();//222

这次输出 222 是因为，传给 setTimeout 的是箭头函数，然后箭头函数里面没有 this ，所以要向上层作用域查找，在这个例子上， setTimeout 的上层作用域是 fn。而 fn 里面的 this 指向 obj ，所以 setTimeout 里面的箭头函数的 this ，指向 obj 。所以输出 222 。

call和apply
call 和 apply 的作用，完全一样，唯一的区别就是在参数上面。
call 接收的参数不固定，第一个参数是函数体内 this 的指向，第二个参数以下是依次传入的参数。
apply接收两个参数，第一个参数也是函数体内 this 的指向。第二个参数是一个集合对象（数组或者类数组）

let fn=function(a,b,c){
console.log(a,b,c);
}
let arr=[1,2,3];

let obj1={
    a:222
};
let obj2={
    a:111,
    fn:function(){
        alert(this.a);
    }
}
obj2.fn.call(obj1);

call 和 apply 两个主要用途就是

1.改变 this 的指向（把 this 从 obj2 指向到 obj1 ）

2.方法借用（ obj1 没有 fn ，只是借用 obj2 方法）

7. JavaScript 执行机制

在 JavaScript 中，我们经常要处理那些需要大量时间的操作，比如网络请求，读取文件，等等。这些操作是异步的，因为如果我们等待他们完成，那么会导致应用的其它部分被阻塞。为了处理这些异步操作，JavaScript 提供了几种异步编程模式。

回调函数（Callback Functions）：这是 JavaScript 异步编程的最基本模式。在 Node.js 中，很多函数都使用了这种模式。回调函数的基本思想是将一个函数作为另一个函数的参数。当异步操作完成时，将调用这个回调函数。例如：

fs.readFile('/etc/passwd', 'utf-8', function (err, data) {
  if (err) throw err;
  console.log(data);
});

在上面的例子中，fs.readFile() 函数接收一个文件路径，一个选项，以及一个回调函数。当文件读取完毕，或者出现错误时，回调函数将被调用。

Promises：Promises 是一种更高级的异步编程模式，它返回一个表示异步操作结果的对象。Promises 可以解决回调函数的一些问题，比如回调地狱（Callback Hell）。一个 Promise 可以处于以下三种状态之一：pending（进行中）、fulfilled（已成功）和 rejected（已失败）。一旦 Promise 的状态从 pending 变为 fulfilled 或 rejected，就不会再次改变。例如：

let promise = new Promise(function(resolve, reject) {
  ### ··· some async operation
  setTimeout(() => resolve("done!"), 1000);
});

promise.then(
  result => console.log(result), 
  error => console.log(error) 
);

在上面的例子中，我们创建了一个新的 Promise，它在 1 秒后 resolve。我们使用 .then() 方法来处理这个 Promise 的结果。

Async/Await：Async/Await 是基于 Promises 的一种更现代和更简洁的异步编程模式。一个函数如果被声明为 async，那么它会隐式返回一个 Promise。我们可以在 async 函数内部使用 await 来暂停和恢复该函数的执行，直到 Promise 完成并返回结果。例如：

async function example() {
  let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("done!"), 1000)
  });
  let result = await promise; ### until promise is resolved
  console.log(result);
}
example();

在上面的例子中，我们创建了一个 async 函数，它等待一个 Promise 完成并打印结果。注意，await 只能在 async 函数内部使用。

同步与异步

HTML5 提出了 WEB Worker 标准，运行 JavaScript 创建多个线程，于是 JavaScript 出现了同步与异步。Web Workers 是 Web API 的一部分，允许在 Web 浏览器中运行后台线程。它们可以进行 I/O（例如 AJAX 请求）或进行其他长时间运行的操作，而不会阻塞或影响页面的主线程。

在这里插入图片描述

详细介绍

在这里插入图片描述

8. JS 回调函数理解

首先从英文介绍开始

A callback is a function that is passed as an argument to another
function and is executed after its parent function has completed.

字面上理解下来就是，回调就是一个函数的调用过程。那么就从理解这个调用过程开始吧。函数a有一个参数，这个参数是个函数b，当函数a执行完以后执行函数b。那么这个过程就叫回调。

其实中文也很好理解：回调，回调，就是回头调用的意思。函数a的事先干完，回头再调用函数b。

举个现实的例子：约会结束后你送你女朋友回家，离别时，你肯定会说：“到家了给我发条信息，我很担心你。”对不，然后你女朋友回家以后还真给你发了条信息。小伙子，你有戏了。

其实这就是一个回调的过程。你留了个函数b（要求女朋友给你发条信息）给你女朋友，然后你女朋友回家，回家的动作是函数a。她必须先回到家以后，函数a的内容执行完了，再执行函数b，然后你就收到一条信息了。这里必须清楚一点：函数b是你以参数形式传给函数a的，那么函数b就叫回调函数。

也许有人有疑问了：一定要以参数形式传过去吗，我不可以直接在函数a里面调用函数b吗？确实可以。求解中？

解惑：如果你直接在函数a里调用的话，那么这个回调函数就被限制死了。但是使用函数做参数就有下面的好处：当你a(b)的时候函数b就成了回调函数，而你还可以a©这个时候，函数c就成了回调函数。如果你写成了function a(){…;b();}就失去了变量的灵活性。

9. window.location

window.location对象可以用于获取当前页面地址（url）,并把浏览器重定向到新页面

location对象的属性与对应的属性值：

- window.location.href 返回当前页面的href(url)
- window.location.hostname 返回web主机的域名
- window.location.pathname 返回当前页面的路径或者文件名
- window.location.protocol 返回使用的web协议（http或者https:）
- window.location.assign 加载新文档，页面的url改变，跳到新页面，但是存在后退按钮，可以返回到未跳转前的页面，即保留了上个页面的路径。
- window.location.replace 加载新文档，但是不存在后退按钮，新页面的url地址将老url地址覆盖掉，所以不可以返回上个页面

统一资源定位符概述

在这里插入图片描述

location的属性：

在这里插入图片描述

案例：

<input type="text" name="" id="">
<button>点击跳转</button>

<script>
    document.querySelector("button").addEventListener('click', () => {
        let prams = document.querySelector("input").value;
        window.location.href = "http://127.0.0.1:5500/xxx.html?prama=" + prams;
    })
</script>

<h1>welcome </h1>
<script>
    let pramas = window.location.search.slice(1,-1).split('=');
    ### substr('起始的位置', '截取几个字符');
    document.querySelector("h1").innerHTML = "welcome " + pramas[1];
</script>

location 对象方法

在这里插入图片描述

10. navigater对象

BOM(Browser Object Model)：浏览器对象模型，它提供了一组对象，让开发者可以通过JS来操作浏览器。

BOM中的浏览器对象

- Window：浏览器的整个窗口，window也可以作为全局对象进行使用。
- Navigator（字面翻译为：航海家）：这个对象中包含有浏览器的信息，可以通过其中的信息来对浏览器进行识别。
- Location：浏览器的地址栏信息，可以通过其来获取地址栏的信息，或者操作浏览器跳转页面。
- History：浏览器中的历史记录，可以通过这个对象来对浏览器的历史记录进行操作。
- Screen：屏幕的信息，可以通过该对象来获取用户显示器的相关信息。

详细信息展示

在这里插入图片描述

navigator.userAgent

11. history对象

history对象记录了用户曾经浏览过的页面(URL)，并可以实现浏览器前进与后退相似导航的功能。

注意：从窗口被打开的那一刻开始记录，每个浏览器窗口、每个标签页乃至每个框架，都有自己的history对象与特定的window对象关联。

在这里插入图片描述

使用length属性，当前窗口的浏览历史总长度，代码如下：

<script type="text/javascript">
  var HL = window.history.length;
  document.write(HL);
</script>

window.history.back(); ### 返回上个页面
window.history.go(-1); ### 返回上个页面

window.history.forward();  ### 加载 history 列表中的下一个 URL。
window.history.go(1);  	   ### 加载 history 列表中的下一个 URL。

12. 元素偏移量 offset

在这里插入图片描述

offset 和 study的区别

在这里插入图片描述

13. 鼠标坐标值拖拽

在这里插入图片描述

<script>
        document.addEventListener('click', function(e){
            console.log("x = ",e.pageX,"y = ",e.pageY);
            
        })
</script>

里面的 e 是鼠标事件

在这里插入图片描述

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
    <style>
        div{
            height: 100px;
            width: 100px;
            background-color: rgb(211, 233, 16);
            margin: 10px;
        }
        input{
            width: 80px;
            height: 20px;
            margin-top: 10px;
            margin-left: 10px;
        }
    </style>
<body>
    <div><input type="text" name="" id=""></div>
    <script>
        var div = document.querySelector("div");
        div.addEventListener('mousedown', function(e){
        
            ### 当鼠标按下的时候，获取鼠标在盒子中的坐标
            var x = e.pageX - this.offsetLeft;
            var y = e.pageY - this.offsetTop;
            
            ### 鼠标移动时，动态更新 div 的坐标
            function move(e) {
               div.style.marginLeft = e.pageX - x + 'px';
               div.style.marginTop = e.pageY - y + 'px';
            }
            document.addEventListener('mousemove', move)
            
            ### 鼠标弹起，让鼠标移动事件移除
            document.addEventListener('mouseup',  function(e) {
               document.removeEventListener('mousemove', move)
            })
        })
    </script>
</body>
</html>

在这里插入图片描述

14. sroll mouseover

client 翻译过来就是客户端，我们使用 client 系列的相关属性来获取元素可视区的相关信息。通过 client 系列的相关属性可以动态的得到该元素的边框大小、元素大小等。
在这里插入图片描述

scroll 翻译过来就是滚动的，我们使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。

在这里插入图片描述

mouseenter 和 mouseover 区别

曾经一度认为，mouseover 和 mouseenter是不是js设计者弄多余的，印象中这两个的效果都是一样的吧？

直到去面试的时候被面试官提出了，说说 mouseover 和 mouseenter 有什么区别，整个人都愕然了，用了那么就js，还真没有去认真思考过这个问题。那到底这两个事件的触发有什么不同，他们的存在又有何意义呢，通过两个栗子来解析一下。

不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件 | 对应 mouseout
只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件 | 对应 mouseleave

hover 悬停事件

模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。

当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。而且，会伴随着对鼠标是否仍然处在特定元素中的检测（例如，处在div中的图像），如果是，则会继续保持“悬停”状态，而不触发移出事件（修正了使用mouseout事件的一个常见错误）。

mouseover和mouseout：当鼠标移入移出元素或子元素都会触发事件。（支持冒泡）
mouseenter和mouseleave：当鼠标移入移出元素才会触发事件。（不支持冒泡）
hover的效果等同于mouseenter，mouseleave。

15. 动画函数封装

function animate(obj, target, callback) { 
    
    ### obj动画执行者 target移动位置calback用于回调的函数
    
    ### 防止重复进行动画命令，完成一次动画再绑定新动画
    
    ### 先清除以前的定时器，再进行心得定时器
    
    clearInterval(obj.timer)
    obj.timer = setInterval(function() {
        var step = (target - obj.offsetLeft) / 10;
        
        ### 处理上述步长算数精度的问题
        
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        if (obj.offsetLeft == target) {
            clearInterval(obj.timer);
            if (callback) {
                callback();
            }
        }
        ### 步长公式用于缓动画step = (target - obj.offsetLeft) / 10
        
        ### 匀速动画就是当前位置加上固定步长
        
        obj.style.left = obj.offsetLeft + step + 'px'
    }, 15);
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./static/js/animation.js"></script>
</head>

<body style="padding: 0;margin: 0;">
    <button class="right">前进500px</button>
    <button class="left">后退500px</button>
    <div style="position: relative;width: 100px;height: 100px;
                background-color:red;margin-top:20px">
    </div>
</body>
<script>
    var divbox = document.querySelector('div');
    var btnr = document.querySelector('.right');
    var btnl = document.querySelector('.left');
    btnr.addEventListener('click', function() {
        animate(divbox, 500, function() {
            divbox.style.backgroundColor = "green"
        })
    })
    btnl.addEventListener('click', function() {
        animate(divbox, 0, function() {
            divbox.style.backgroundColor = "red"
        })
    })
</script>

</html>

16. JQuery 特点概述

快速获取文档元素

jQuery的选择机制构建与CSS的选择器，它提供了快速查询DOM文档中元素的能力，而且大大强化了JavaScript中获取页面元素的方式

提供漂亮的页面动态效果

jQuery中内置了一系列的动画效果，可以开发出非常漂亮的网页，许多网页都使用jQuery的内置的效果，比如淡入淡出，元素移除等动态特效。

创建AJAX无刷新网页

AJAX是异步的JavaScript和XML的简称，可以开发出非常灵敏无刷新的网页，特别是开发服务器网页时，比如PHP网站，需要往返地与服务器通信，如果不使用AJAX，每次数据更新不得不重新刷新页面，而使用AJAX特效后，可以对页面进行局部刷新，提供动态的效果。

提供对JavaScript语言的增强

jQuery提供了对基本JavaScript结构的增强，比如元素迭代和数组处理等操作。

增强的事件处理

jQuery提供了各种页面事件，它可以避免程序员在HTML中添加太多时间处理代码，最重要的是，它的事件处理器消除了各种浏览器兼容性问题。

更改网页内容

jQuery可以修改网页中的内容，比如更改网页中的文本、插入或者翻转网页图像，jQuery简化了原本是用JavaScript代码需要处理的方式。

jQuery中的隐式迭代

17. 数据可视化

echarts：https://echarts.apache.org/zh/index.html

官方文档：https://echarts.apache.org/en/tutorial.html#Get%20Started%20with%20ECharts%20in%205%20minutes

Apache ECharts

ECharts是一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。ECharts最初由百度团队开源，并于2018年初捐赠给Apache基金会，成为ASF孵化级项目。 [1]

2021年1月26日晚，Apache基金会官方宣布ECharts项目正式毕业。1月28日，ECharts 5线上发布会举行。

ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。

<script crossorigin="anonymous" integrity="sha512-avZBaO59S3QHZ7OtZ6pWKQHrBLZ1rax/eUQq03uLqQ85tu8ZjEM0Y37RsiF1Me3EWjYUlaHHtnAYBJM/9PUK7w==" src="https://lib.baomitu.com/echarts/5.1.2/echarts.common.js"></script>

https://lib.baomitu.com/echarts/5.1.2/echarts.common.min.js

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <script src="https://lib.baomitu.com/echarts/5.1.2/echarts.common.min.js"></script>
</head>
<body>
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        ### based on prepared DOM, initialize echarts instance
        var myChart = echarts.init(document.getElementById('main'));

        ### specify chart configuration item and data
        var option = {
            title: {
                text: 'ECharts entry example'
            },
            tooltip: {},
            legend: {
                data:['Sales']
            },
            xAxis: {
                data: ["shirt","cardign","chiffon shirt","pants","heels","socks"]
            },
            yAxis: {},
            series: [{
                name: 'Sales',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

        ### use configuration item and data specified to show chart
        myChart.setOption(option);
    </script>
</body>
</html>

instance：例子，实例; 情况; 要求，建议; [法]诉讼手续

specify：指定; 详述; 提出…的条件; 使具有特性

在这里插入图片描述

18. English 技术文档

prepare a DOM container with width and height

准备一个具有宽度和高度的DOM容器

specify chart configuration item and data

指定图表配置项和数据

use configuration item and data specified to show chart

使用刚指定的配置项和数据来显示图表

Get Started with ECharts in 5 minutes

First, install Apache EChartsTM using one of the following methods

词汇：

**instance：例子，实例; 情况; 要求，建议; [法]诉讼手续**

**specify：指定; 详述; 提出…的条件; 使具有特性**

**chart：图表; 海图; (唱片销售量的)排行榜**

**item：条，条款; 项目; 一则; 一件商品（或物品）**

**Responsive Mobile-End：响应式移动端**