菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 2022-12-15 王嘉乐 [打印本页]

作者: yousay！ 时间: 2023-1-5 18:34
标题: 2022-12-15 王嘉乐
# 1.同步异步

```javascript
js是单线程的，同一时间只能做同一件事情，意味着一件事情结束之后，才能开始进行下一件事情。

HTML5提出了web worker标准，允许JavaScript脚本创建多个线程，于是就有了同步和异步。

同步：前一个任务结束后再执行下一个任务
异步：在做一件事情的同时可以处理其他事情

执行机制：
1.执行栈：放置的是主程序的流程（单线程的）
2.任务栈：放置的是回调函数（异步执行的函数）

js中异步的情况：定时器、事件、ajax请求
```

# 2. location对象

```javascript
window.location对象提供了当前窗口中加载文档的信息，以及通常的导航功能，主要是对浏览器url地址相关数据的获取和定义
```

# 3.history对象

```javascript
window.history表示当前窗口的浏览历史
```

# 4. classList

```javascript
返回元素的类名---IE10以上支持
<!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>
</head>

<body>
<div id="box" class="box div fs20 mt30">box</div>
<button id="btn1">新增</button>
<button id="btn2">移除</button>
<button id="btn3">切换</button>
<button id="btn4">替换</button>

<script>
      var box = document.querySelector('#box');
      var btn1 = document.querySelector('#btn1');
      var btn2 = document.querySelector('#btn2');
      var btn3 = document.querySelector('#btn3');
      var btn4 = document.querySelector('#btn4');

      console.log(box.classList);
      btn1.addEventListener('click', function () {
         box.classList.add('addClassName');
         console.log(box.classList);
      })
      btn2.addEventListener('click', function () {
         box.classList.remove('box');
         console.log(box.classList);
      })
      // 切换：有就删除，没有就添加
      btn3.addEventListener('click', function () {
         box.classList.toggle('colorRed');
         console.log(box.classList);
      })

      // 替换：用新的类名替换旧的类名
      btn4.addEventListener('click', function () {
         box.classList.replace('box', 'iptBox');
         console.log(box.classList);
      })
</script>
</body>

</html>

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)