JS进阶笔记

最新推荐文章于 2023-04-04 16:59:50 发布

皮卡丘#￥%3￥&

最新推荐文章于 2023-04-04 16:59:50 发布

阅读量214

点赞数

分类专栏：前端文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_47280394/article/details/127028339

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

第一天 DOM

一、获取元素

1.1 根据id获取

因为我们文档页面从上往下加载，所以得先有标签，所以script写在标签下面
get 获得 element 元素 by 通过驼峰命名法
参数 id是大小写敏感的字符串
返回的是一个元素对象

<div id="timer">2022-3-23</div>
    <script>
        // 1.因为我们文档页面从上往下加载，所以得先有标签，所以script写在标签下面
        // 2.get 获得 element 元素 by 通过 驼峰命名法
        // 3.参数 id是大小写敏感的字符串
        // 4.返回的是一个元素对象
        var timer = document.getElementById('timer');
        console.log(timer);
        // 5. console.dir 打印我们的元素对象，更好的查看里面的属性和方法
        console.dir(timer);
    </script>

1.2 根据标签名获取

返回的是获取过来元素对象的集合以伪数组的形式存储
如果页面中只有 1 个 li，返回的还是伪数组的形式
如果页面中没有li，返回的还是伪数组的形式

<ul>
        <li>11111</li>
        <li>22222</li>
        <li>33333</li>
        <li>44444</li>
        <li>55555</li>
    </ul>
    <ol id="ol">
        <li>hhhhhh</li>
        <li>llllll</li>
    </ol>
    <script>
        // 1.返回的是获取过来元素对象的集合 以伪数组的形式存储
        var lis = document.getElementsByTagName('li');
        console.log(lis);
        //2.依次打印
        for (var i = 0; i < lis.length; i++) {
            console.log(lis[i]);
        }
        // 3.如果页面中只有 1 个 li，返回的还是伪数组的形式
        // 4.如果页面中没有这个元素，返回的是空伪数组
        //5.如果想打印ol里面的li的话
        var ol = document.getElementById('ol');
        console.log(ol.getElementsByTagName('li'));
    </script>

1.3 h5新增获取元素方式

document.getElementsByClassName根据类名返回元素对象合集

var boxs = document.getElementsByClassName('box');
        console.log(boxs);

document.querySelector根据指定选择器返回第一个元素对象
- 切记里面的选择器需要加符号
- 类选择器.box id选择器 #nav

var firstbox = document.querySelector('.box');
        console.log(firstbox);
        var nav = document.querySelector('#nav');
        console.log(nav);
        var firstli = document.querySelector('li');
        console.log(firstli);

document.querySelectorAll根据指定选择器返回所有元素对象

var Boxs = document.querySelectorAll('.box');
        console.log(Boxs);

1.4 获取body元素和html元素

获取body元素

var bodyE = document.body;
        console.log(bodyE);

获取html元素

var htmlE = document.documentElement;
        console.log(htmlE);

二、事件基础

2.1 事件概述

JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为。
- 简单理解：触发— 响应机制。
- 网页中的每个元素都可以产生某些可以触发 JavaScript 的事件，例如，我们可以在用户点击某按钮时产生一个事件，然后去执行某些操作。

2.2 事件三要素

事件源(谁)
事件类型(什么事件) 比如鼠标点击(onclick) 还是鼠标经过还是键盘按下
事件处理程序(做啥) 通过一个函数赋值的方式完成

// 1. 事件是有三部分组成 事件源 事件类型 事件处理程序 我们也称为事件三要素
        //(1) 事件源 事件被触发的对象 谁 按钮
        var btn = document.getElementById('btn');
        //(2) 事件类型 如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过 还是键盘按下
        //(3) 事件处理程序 通过一个函数赋值的方式 完成
        btn.onclick = function () {
            alert('皮卡丘');
        }

2.3 执行事件的步骤

获取事件源
注册事件(绑定事件)
添加事件处理程序(采取函数赋值形式)

<script>
    // 执行事件步骤
    // 点击div 控制台输出 我被选中了
    // 1. 获取事件源
    var div = document.querySelector('div');
    // 2.绑定事件 注册事件
    // div.onclick 
    // 3.添加事件处理程序 
    div.onclick = function() {
        console.log('我被选中了');
    }
</script>

三、操作元素

3.1 改变元素内容

element.innerText

p.innerText = '2022-3-28';

element.innerHTML

div.innerHTML = '<strong>加粗</strong>文字';

innerText和innerHTML的区别
- innerText 不识别html标签,去除空格和换行
- innerHTML 识别html标签保留空格和换行的
- 这两个属性是可读写的可以获取元素里面的内容

<div>加粗文字</div>
    <p>
        123
        <span>456</span>
    </p>
    <script>
        // innerText 和 innerHTML的区别
        // 1. innerText 不识别html标签,去除空格和换行
        var div = document.querySelector('div');
        // div.innerText = '<strong>加粗</strong>文字';
        // 2. innerHTML 识别html标签 保留空格和换行的
        div.innerHTML = '<strong>加粗</strong>文字';
        var p = document.querySelector('p');
        // 这两个属性是可读写的  可以获取元素里面的内容
        console.log(p.innerText);
        console.log(p.innerHTML);
    </script>

3.2 修改元素属性

// img.属性
img.src = "xxx";

input.value = "xxx";
input.type = "xxx";
input.checked = "xxx";
input.selected = true / false;
input.disabled = true / false;

<button id="ldh">刘德华</button>
    <button id="zxy">张学友</button>
    <img src="images/ldh.jpg" alt="" title="刘德华">
    <script>
        var ldh = document.getElementById('ldh');
        var zxy = document.getElementById('zxy');
        var img = document.querySelector('img');
        zxy.onclick = function () {
            img.src = "images/zxy.jpg";
            img.title = '张学友';
        }
        ldh.onclick = function () {
            img.src = "images/ldh.jpg";
            img.title = '刘德华';
        }
    </script>

3.3 修改样式属性

行内样式操作// element.style.width
- JS里面的样式采取驼峰命名法，比如 fontSize ，backgroundColor
- JS 修改 style 样式操作，产生的是行内样式，CSS权重比较高

 <div></div>
    <script>
        // 获取元素
        var div = document.querySelector('div');
        // 注册事件，修改程序
        div.onclick = function () {
            div.style.backgroundColor = "blue";
            div.style.width = '150px';
        }
    </script>

类名样式操作// element.className
- 如果样式修改较多，可以采取操作类名方式更改元素样式
- class 因为是个保留字，因此使用className来操作元素类名属性
- className 会直接更改元素的类名，会覆盖原先的类名
- 如果想保留原来的类名可以使用多类名选择器

<style>
        .first {
            width: 100px;
            height: 100px;
            background-color: rebeccapurple;
            font-size: 12px;
        }

        .change {
            width: 200px;
            height: 200px;
            background-color: red;
            font-size: 20px;
        }
    </style>
    
<div class="first">
        文字
    </div>
    <script>
        var div = document.querySelector('div');
        div.onclick = function () {
            // - className 会直接更改元素的类名，会覆盖原先的类名
            // div.className = 'change';
            //  - 如果想保留原来的类名可以使用多类名选择器
            div.className = 'first change';
        }
    </script>

3.4 派他思想（算法）

如果有同一组元素，我们相要某一个元素实现某种样式，需要用到循环的排他思想算法：

所有元素全部清除样式（干掉其他人）
给当前元素设置样式（留下我自己）
注意顺序不能颠倒，首先干掉其他人，再设置自己

<script>
        // 获取所有元素
        var btns = document.getElementsByTagName('button');
        for (i = 0; i < btns.length; i++) {
            btns[i].onclick = function () {
                // console.log(11);
                // 先将所有按钮的颜色清空
                for (i = 0; i < btns.length; i++) {
                    btns[i].style.backgroundColor = '';
                }
                // 在将点击的按钮的颜色变色
                this.style.backgroundColor = 'pink';
            }
        }
    </script>

3.5 自定义属性

3.5.1 获取自定义属性

获取内置属性值(元素本身自带的属性) element.属性;

console.log(div.id);

获取自定义属性（也可获取内置属性值）element.getAttribute(‘属性’);

console.log(div.getAttribute('id'));
console.log(div.getAttribute('index'));

3.5.2 设置属性

设置内置属性值 element.属性 = ‘值’;

div.id = 'test';
div.className = '6';

主要用于设置自定义的属性 element.setAttribute(‘属性’,‘值’);

div.setAttribute('index', 2);
div.setAttribute('class', 7);

3.5.3 删除属性

div.removeAttribute('index');

3.6 H5自定义属性

3.6.1 设置H5自定义属性

H5规定自定义属性 data-开头作为属性名并赋值

// 设置新的属性
        div.setAttribute('data-time', 20);

3.6.2 获取H5自定义属性

兼容性获取 `element.getAttribute(‘data-index’)
H5新增的：element.dataset.index 或element.dataset['index'] IE11才开始支持
- h5新增的获取自定义属性的方法它只能获取data-开头的
- 如果自定义属性里面有多个-链接的单词，我们获取的时候采取驼峰命名法

<body>
    <div gettime="20" data-index="2" data-list-name="10"></div>
    <script>
        // 获取元素
        var div = document.querySelector('div');

        // 设置新的属性
        div.setAttribute('data-time', 20);

        // 通用的获取属性方式 
        console.log(div.getAttribute('gettime'));
        console.log(div.getAttribute('data-index'));
        console.log(div.getAttribute('data-list-name'));
        console.log(div.getAttribute('data-time'));

        // h5新增的获取自定义属性的方法 它只能获取data-开头的
        // dataset 是一个集合里面存放了所有以data开头的自定义属性
        console.log(div.dataset);
        console.log(div.dataset.index);
        console.log(div.dataset['index']);
        // 如果自定义属性里面有多个-链接的单词，我们获取的时候采取 驼峰命名法
        console.log(div.dataset.listName);
        console.log(div.dataset['listName']);

    </script>
</body>

四、节点操作

4.1 节点概述

一般的，节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个基本属性。
元素节点：nodeType 为1
属性节点：nodeType 为2
文本节点：nodeType 为3(文本节点包括文字、空格、换行等)
我们在实际开发中，节点操作主要操作的是元素节点

4.2 父级节点

 <div class="box">
        <span class="erweima"></span>
    </div>

    <script>
        var erweima = document.querySelector('.erweima');
        console.log(erweima.parentNode);
    </script>

4.3 子节点

parentNode.childNodes(标准)返回值包含了所有的子结点，包括元素节点，文本节点等
parentNode.children(非标准)它只返回子元素节点，其余节点不返回（ 重点掌握 ）

<ul>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
    </ul>

    <script>
        // 1. parentNode.childNodes(标准)返回值包含了所有的子结点，包括元素节点，文本节点等
        var ul = document.querySelector('ul');
        console.log(ul.childNodes);
        // 2.parentNode.children(非标准)它只返回子元素节点，其余节点不返回
        console.log(ul.children);
    </script>

第一个子节点与最后一个子节点

 <script>
        var ol = document.querySelector('ol');
        //  1. firstChild 第一个子节点 不管是文本节点还是元素节点
        console.log(ol.firstChild);
        console.log(ol.lastChild);
        // 2. firstElementChild 返回第一个子元素节点 ie9才支持
        console.log(ol.firstElementChild);
        console.log(ol.lastElementChild);
        // 3.实际开发的写法  既没有兼容性问题又返回第一个子元素
        console.log(ol.children[0]);
        console.log(ol.children[ol.children.length - 1]);
    </script>

4.4 兄弟节点

下一个兄弟节点：node.nextSibling 上一个兄弟节点：node.previousSibling
- 包含元素节点或者文本节点等等
下一个兄弟节点：node.nextElementSibling 上一个兄弟节点：node.previousElementSibling
- 得到兄弟元素节点，但有兼容性问题

<body>
    <div>div</div>
    <span>span</span>

    <script>
        var div = document.querySelector('div');
        // 1.nextSibling 下一个兄弟节点 包含元素节点或者 文本节点等等
        console.log(div.nextSibling);
        console.log(div.previousSibling);
        // 2. nextElementSibling 得到下一个兄弟元素节点
        console.log(div.nextElementSibling);
        console.log(div.previousElementSibling);
    </script>
</body>

4.5 创建节点与添加节点

创建节点 document.createElement(‘tagName’);
添加节点
- node.appendChild(child) 将一个节点添加到指定父节点的子节点列表末尾
- node.insertBefore(child,指定元素) 将一个节点添加到父节点的指定子节点前面

<body>
    <ul>
        <li>123</li>
    </ul>

    <script>
        // 1.创建节点
        var li1 = document.createElement('li')
        var li2 = document.createElement('li')
        // 2.添加节点
        // 2.1添加节点 node.appendChild(child)  node 父级  child 是子级 后面追加元素  类似于数组中的push
        var ul = document.querySelector('ul');
        ul.appendChild(li1);
        // 2.2 3. 添加节点 node.insertBefore(child, 指定元素);
        ul.insertBefore(li2, ul.children[0]);
    </script>
</body>

4.6 删除节点

node.removeChild(child) 从 DOM 中删除一个子节点，返回删除的节点

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <li>1</li>
    <script>
        var ul = document.querySelector('ul');
        ul.removeChild(ul.children[0]);
    </script>
</body>

4.7 复制节点

node.cloneNode()
- 如果括号参数为空或者为 false ，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点
- 如果括号参数为 true ，则是深度拷贝，会复制节点本身以及里面所有的子节点

<script>
        var ul = document.querySelector('ul');
        // 复制节点
        // 1. node.cloneNode(); 括号为空或者里面是false 浅拷贝 只复制标签不复制里面的内容
        // 2. node.cloneNode(true); 括号为true 深拷贝 复制标签复制里面的内容
        var lili = ul.children[0].cloneNode(true);
        // 添加节点
        ul.appendChild(lili);
    </script>

五、 DOM核心

5.1 创建

document.write
innerHTML
createElement

5.2 增

appendChild
insertBefore

5.3 删

removeChild

5.4 改

主要修改dom的元素属性，dom元素的内容、属性、表单的值等

修改元素属性：src、href、title 等
修改普通元素内容：innerHTML、innerText
修改表单元素：value、type、disabled
修改元素样式：style、className

5.5 查

主要获取查询dom的元素
DOM提供的API方法：getElementById、getElementsByTagName (古老用法，不推荐)
H5提供的新方法：querySelector、querySelectorAll (提倡)
利用节点操作获取元素：父(parentNode)、子(children)、兄(previousElementSibling、nextElementSibling) 提倡

5.6 属性操作

主要针对于自定义属性
1. setAttribute：设置dom的属性值
2. getAttribute：得到dom的属性值
3. removeAttribute：移除属性

六、事件高级

6.1 注册事件

注册事件有两种方式：传统方式和方法监听注册方式

<script>
        var btn = document.querySelectorAll('button');
        // 1.传统的注册事件方式
        btn[0].onclick = function () {
            alert('11');
        }
        btn[0].onclick = function () {
            alert('111');
        }
        // 2.事件监听注册事件
        btn[1].addEventListener('click', function () {
            alert('22');
        })
        btn[1].addEventListener('click', function () {
            alert('222');
        })
    </script>

事件监听注册事件 addEventListener

(1) 里面的事件类型是字符串所以加引号而且不带on

(2) 同一个元素同一个事件可以添加多个侦听器（事件处理程序）

6.2 删除事件

<script>
        var divs = document.querySelectorAll('div');
        // 1.传统删除事件
        divs[0].onclick = function () {
            alert('11');
            divs[0].onclick = null;
        }
        // 2.监听删除事件
        divs[1].addEventListener('click', fn);
        function fn() {
            alert('22');
            divs[1].removeEventListener('click', fn);
        }
    </script>

6.3 DOM事件流

事件流描述的是从页面中接收事件的顺序
事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流
捕获阶段 true

 <script>
        // 捕获阶段：father→son
        var son = document.querySelector('.son');
        var father = document.querySelector('.father');
        son.addEventListener('click', function () {
            alert('son');
        }, true);
        father.addEventListener('click', function () {
            alert('father');
        }, true);
    </script>

冒泡阶段 false

<script>
        // 捕获阶段：son→father
        var son = document.querySelector('.son');
        var father = document.querySelector('.father');
        son.addEventListener('click', function () {
            alert('son');
        }, false);
        father.addEventListener('click', function () {
            alert('father');
        }, false);
    </script>

6.4 事件对象

eventTarget.addEventListener('click', function(event) {
   // 这个 event 就是事件对象，我们还喜欢的写成 e 或者 evt  
})

event 对象代表事件的状态，比如键盘按键的状态、鼠标的位置、鼠标按钮的状态
这个 event 是个形参，系统帮我们设定为事件对象，不需要传递实参过去
当我们注册事件时， event 对象就会被系统自动创建，并依次传递给事件监听器（事件处理函数）

6.5 事件对象的常见属性和方法

6.5.1 e.target 返回触发事件的对象

var ul = document.querySelector('ul')
        ul.addEventListener('click', function (e) {
            console.log(e.target);
            console.log(this);
        })

e.target 和 this 的区别：
- this 是事件绑定的元素，这个函数的调用者（绑定这个事件的元素），上面例子返回ul
- e.target 是事件触发的元素。上面例子返回li

6.5.2 e.type 返回事件类型

var p = document.querySelector('p');
        p.addEventListener('click', fn);
        p.addEventListener('mouseover', fn);
        p.addEventListener('mouseout', fn);
        function fn(e) {
            console.log(e.type);
        }

6.5.3 事件对象阻止默认行为

常用方式， 阻止默认行为（事件）让链接不跳转或者让提交按钮不提交

 var a = document.querySelector('a');
        a.addEventListener('click', function (e) {
            e.preventDefault();
        })

传统注册方式

a.onclick = function(e) {
            // 普通浏览器 e.preventDefault();  方法
            // e.preventDefault();
            // 低版本浏览器 ie678  returnValue  属性
            // e.returnValue;
            // 我们可以利用return false 也能阻止默认行为 没有兼容性问题 特点： return 后面的代码不执行了， 而且只限于传统的注册方式
            return false;
            alert(11);
        }

6.5.4 阻止事件冒泡

e.stopPropagation();

6.6 事件委托

事件委托的原理（重点）
- 不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点

<script>
        var ul = document.querySelector('ul');
        ul.addEventListener('click', function () {
            alert('hhh');
        })
    </script>

以上案例：给 ul 注册点击事件，然后利用事件对象的 target 来找到当前点击的 li，因为点击 li，事件会冒泡到 ul 上， ul 有注册事件，就会触发事件监听器。

6.7 常见的鼠标事件

禁止鼠标右键与鼠标选中

<body>
    <h1>我是一段不愿意分享的文字</h1>
    <script>
        // 1. contextmenu 我们可以禁用右键菜单
        document.addEventListener('contextmenu', function(e) {
                e.preventDefault(); // 阻止默认行为
            })
            // 2. 禁止选中文字 selectstart
        document.addEventListener('selectstart', function(e) {
            e.preventDefault();

        })
    </script>
</body>

鼠标事件对象

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jIY2p8vw-1664012139690)(C:\Users\zhaozijun\AppData\Roaming\Typora\typora-user-images\1651203051510.png)]

6.8 常用的键盘事件

6.8.1 常用的键盘事件

如果使用addEventListener 不需要加 on
onkeypress 和前面2个的区别是，它不识别功能键，比如左右箭头，shift 等
三个事件的执行顺序是： keydown – keypress — keyup

<body>
    <script>
        // 常用的键盘事件
        //1. keyup 按键弹起的时候触发 
        document.addEventListener('keyup', function() {
            console.log('我弹起了');
        })

        //3. keypress 按键按下的时候触发  不能识别功能键 比如 ctrl shift 左右箭头啊
        document.addEventListener('keypress', function() {
                console.log('我按下了press');
            })
            //2. keydown 按键按下的时候触发  能识别功能键 比如 ctrl shift 左右箭头啊
        document.addEventListener('keydown', function() {
                console.log('我按下了down');
            })
            // 4. 三个事件的执行顺序  keydown -- keypress -- keyup
    </script>
</body>

6.8.2 键盘对象属性

onkeydown和 onkeyup 不区分字母大小写，onkeypress 区分字母大小写。
在我们实际开发中，我们更多的使用keydown和keyup，它能识别所有的键（包括功能键）
Keypress 不识别功能键，但是keyCode属性能区分大小写，返回不同的ASCII值

<body>
    <script>
        // 键盘事件对象中的keyCode属性可以得到相应键的ASCII码值
        // 1. 我们的keyup 和keydown事件不区分字母大小写  a 和 A 得到的都是65
        // 2. 我们的keypress 事件 区分字母大小写  a  97 和 A 得到的是65
        document.addEventListener('keyup', function(e) {
            console.log('up:' + e.keyCode);
            // 我们可以利用keycode返回的ASCII码值来判断用户按下了那个键
            if (e.keyCode === 65) {
                alert('您按下的a键');
            } else {
                alert('您没有按下a键')
            }

        })
        document.addEventListener('keypress', function(e) {
            console.log('press:' + e.keyCode);
        })
    </script>
</body>

第二天 BOM

一、BOM概述

1.1 概述

BOM = Browser Object Model 👉浏览器对象模型
提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window
BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性
BOM 缺乏标准，JavaScript 语法的标准化组织是 ECMA, DOM 的标准化组织是 W3C, BOM最初是Netscape 浏览器标准的一部分
BOM与DOM对比

1.2 BOM的构成

BOM 比 DOM 更大。它包含 DOM。
window 对象是浏览器的顶级对象，它具有双重角色
它是 JS 访问浏览器窗口的一个接口
它是一个全局对象。定义在全局作用域中的变量、函数都会变成 window 对象的属性和方法
在调用的时候可以省略 window，前面学习的对话框都属于 window 对象方法，如 alert()、prompt()等。

二、window 对象的常见事件

2.1 窗口加载事件

window.onload
- window.onload是窗口（页面）加载事件，当文档内容完全加载完成会触发该事件（包括图像，脚本文件，CSS文件等），就调用的处理函数。
- 有了window.onload就可以把JS代码写到页面元素的上方
- 因为onload是等页面内容全部加载完毕，再去执行处理函数
- window.onload 传统注册事件方式，只能写一次
- 如果有多个，会以最后一个window.onload为准
- 如果使用addEventListener 则没有限制

window.addEventListener('load', function () {
            var btn = document.querySelector('button');
            btn.addEventListener('click', function () {
                alert('点击');
            })
        })

DOMContentLoaded
- DOMCountentLoaded事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等等
- 如果页面的图片很多的话, 从用户访问到onload触发可能需要较长的时间
- 交互效果就不能实现，必然影响用户的体验，此时用 DOMContentLoaded事件比较合适。

window.addEventListener('DOMContentLoaded', function () {
            alert('33');
        })

区别
- load等页面内容全部加载完毕，包括页面dom元素，图片，flash，css等
- DOMContentLoaded 是DOM加载完毕，不包含图片 flash css 等就可以执行，加载速度比load更快一些

2.2 调整窗口大小事件

window.onresize 是调整窗口大小加载事件，当触发时就调用的处理函数
只要窗口大小发生像素变化，就会触发这个事件
我们经常利用这个事件完成响应式布局。window.innerWidth 当前屏幕的宽度

window.addEventListener('load', function () {
            var div = document.querySelector('div');
            window.addEventListener('resize', function () {
                if (window.innerWidth <= 900) {
                    div.style.display = 'none';
                }
                else {
                    div.style.display = 'block';
                }
            })
        })

三、定时器

3.1 setTimeout()定时器

window.setTimeout(调用函数,[延迟的毫秒数]);

<script>
        function boom() {
            // console.log('爆炸啦');
            alert('爆炸啦')
        }
        setTimeout(boom, 3000);
    </script>

window可以省略
这个调用函数：
- 可以直接写函数
- 或者写函数名
- 或者采取字符串 ‘函数名()’ （不推荐）
延迟的毫秒数省略默认是0，如果写，必须是毫秒
因为定时器可能有很多，所以我们经常给定时器赋值一个标识符
setTimeout() 这个调用函数我们也称为回调函数 callback
普通函数是按照代码顺序直接调用，而这个函数，需要等待事件，事件到了才会去调用这个函数，因此称为回调函数。

3.2 clearTimeout()停止定时器

window.clearTimeout(timeoutID)

clearTimeout()方法取消了先前通过调用 setTimeout()建立的定时器

<script>
        var timer = setTimeout(function () {
            alert('boom');
        }, 5000)

        var button = document.querySelector('button');
        button.addEventListener('click', function () {
            clearTimeout(timer);
        })
    </script>

里面的参数就是定时器的标识符

3.3 setInterval()定时器

window.setInterval(回调函数,[间隔的毫秒数]);

setInterval()方法重复调用一个函数，每隔这个时间，就去调用一次回调函数

<script>
        setInterval(function () {
            console.log('输出');
        }, 1000)
    </script>

window可以省略
这个回调函数:
- 可以直接写函数
- 或者写函数名
- 或者采取字符 ‘函数名()’
第一次执行也是间隔毫秒数之后执行，之后每隔毫秒数就执行一次

3.4 clearInterval()停止定时器

clearInterval ( ) 方法取消了先前通过调用 setInterval() 建立的定时器
注意：
- window可以省略
- 里面的参数就是定时器的标识符

3.5 this指向

this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁
现阶段，我们先了解一下几个this指向
全局作用域或者普通函数中this指向全局对象window(注意定时器里面的this指向window)
方法调用中谁调用this指向谁
构造函数中this指向构造函数实例

四、JS执行机制

4.1 JS是单线程

JavaScript 语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。这是因为 Javascript 这门脚本语言诞生的使命所致——JavaScript 是为处理页面中用户的交互，以及操作 DOM 而诞生的。比如我们对某个 DOM 元素进行添加和删除操作，不能同时进行。应该先进行添加，之后再删除。
单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。这样所导致的问题是：如果 JS 执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。

4.2 同步和异步

同步
- 前一个任务结束后再执行后一个任务
- 同步任务都在主线程上执行，形成一个执行栈
异步
- 在做这件事的同时，你还可以去处理其他事情
- JS中的异步是通过回调函数实现的
- 异步任务有以下三种类型
  - 普通事件，如click,resize等
  - 资源加载，如load,error等
  - 定时器，包括setInterval,setTimeout等
- 异步任务相关回调函数添加到任务队列中
- 执行顺序：
  1. 先执行执行栈中的同步任务
  2. 异步任务(回调函数)放入任务队列中
  3. 一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行
同步任务放在执行栈中执行，异步任务由异步进程处理放到任务队列中，执行栈中的任务执行完毕会去任务队列中查看是否有异步任务执行，由于主线程不断的重复获得任务、执行任务、再获取任务、再执行，所以这种机制被称为事件循环（ event loop）。

五、location对象

window 对象给我们提供了一个 location属性用于获取或者设置窗体的url，并且可以解析url。因为这个属性返回的是一个对象，所以我们将这个属性也称为 location 对象。

5.1 URL

5.2 location对象属性

重点记住： href和search

5.3 location对象方法

六、navigator对象

navigator 对象包含有关浏览器的信息，它有很多属性
我们常用的是userAgent,该属性可以返回由客户机发送服务器的user-agent头部的值

七、history对象

window 对象给我们提供了一个 history 对象，与浏览器历史记录进行交互
该对象包含用户（在浏览器窗口中）访问过的 URL。

第三天网页特效

一、元素偏移量 offset 系列

offset 翻译过来就是偏移量，我们使用 offset 系列相关属性可以动态的得到该元素的位置（偏移）、大小等。
● 获得元素距离带有定位父元素的位置
● 获得元素自身的大小（宽度高度）
● 注意：返回的数值都不带单位
offsetTop与offsetLeft得到位置偏移，以带有定位的父亲为准，如果没有父亲或者父亲没有定位，则以body为准
offsetWidth与offsetHight得到位置大小，是包括padding+border+width
offsetParent得到父亲，必须是带有定位的父亲，如果没有父亲或者父亲没有定位，则返回body

<script>
        var father = document.querySelector('.father');
        var son = document.querySelector('.son');
        // 1.得到位置偏移
        console.log(father.offsetTop);
        console.log(father.offsetLeft);
        // 是以带有定位的父亲为准，如果没有父亲或者父亲没有定位，则以body为准
        console.log(son.offsetLeft);

        // 2.得到位置大小，是包括padding+border+width
        console.log(father.offsetWidth);
        console.log(father.offsetHight);

        // 3.得到父亲，必须是带有定位的父亲，如果没有父亲或者父亲没有定位，则返回body
        console.log(son.offsetParent);
    </script>

offset 与 style 区别
- offset
  ● offset 可以得到任意样式表中的样式值
  ● offset 系列获得的数值是没有单位的
  ● offsetWidth 包含padding+border+width
  ● offsetWidth 等属性是只读属性，只能获取不能赋值
  ● 所以，我们想要获取元素大小位置，用offset更合适
- style
  ● style 只能得到行内样式表中的样式值
  ● style.width 获得的是带有单位的字符串
  ● style.width 获得不包含padding和border 的值
  ● style.width 是可读写属性，可以获取也可以赋值
  ● 所以，我们想要给元素更改值，则需要用style改变

二、元素可视区client系列

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

三、元素滚动scroll系列

[ scroll 翻译过来就是滚动的，我们使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。
被卷去的头部：
- 如果浏览器的高（或宽）度不足以显示整个页面时，会自动出现滚动条。当滚动条向下滚动时，页面上面被隐藏掉的高度，我们就称为页面被卷去的头部。滚动条在滚动时会触发 onscroll 事件。

四、总结和对比：

三系列总结：

在这里插入图片描述

三系列主要用法：

offset系列经常用于获得元素位置 offsetLeft offsetTop
client 经常用于获取元素大小 clientWidth clientHeight
scroll 经常用于获取滚动距离 scrollTop scrollLeft
注意页面滚动的距离通过 window.pageXOffset 获得

mouseenter 和mouseover的区别
● 当鼠标移动到元素上时就会触发 mouseenter 事件
● 类似 mouseover，它们两者之间的差别是
● mouseover 鼠标经过自身盒子会触发，经过子盒子还会触发。
● mouseenter 只会经过自身盒子触发
● 之所以这样，就是因为mouseenter不会冒泡
● 跟mouseenter搭配鼠标离开 mouseleave 同样不会冒泡

五、动画函数封装

5.1 动画原理

核心原理：通过定时器 setInterval() 不断移动盒子位置。
实现步骤：

获得盒子当前位置
让盒子在当前位置加上1个移动距离
利用定时器不断重复这个操作
加一个结束定时器的条件
注意此元素需要添加定位，才能使用element.style.left

<script>
        var div = document.querySelector('div');
        var timer = setInterval(function () {
            if (div.offsetLeft >= 400) {
                clearInterval(timer);
            }
            div.style.left = div.offsetLeft + 1 + 'px';
        }, 30)
    </script>

5.2 简单动画封装

 <script>
        // 简单动画函数封装，obj为目标对象，target为目标位置
        function animate(obj, target) {
            var timer = setInterval(function () {
                if (obj.offsetLeft >= target) {
                    clearInterval(timer);
                }
                obj.style.left = obj.offsetLeft + 1 + 'px';
            }, 30)
        }
        var div = document.querySelector('div');
        var span = document.querySelector('span');

        // 调用函数
        animate(div, 400);
        animate(span, 200);
    </script>

5.3 给不同的对象添加不同的定时器

// 调用函数
        animate(div, 400);
        btn.addEventListener('click', function () {
            animate(span, 200);
        })

六、移动端动画

6.1 touch触摸事件

<script>
        var div = document.querySelector('div');
        div.addEventListener('touchstart', function () {
            console.log('开始触摸');
        })
        div.addEventListener('touchmove', function () {
            console.log('触摸移动');
        })
        div.addEventListener('touchend', function () {
            console.log('触摸结束');
        })
</script>

6.2 classList的使用

<script>
        var div = document.querySelector('div');
        var button = document.querySelector('button');
        // 添加类
        div.classList.add('three');
        // 删除类
        div.classList.remove('one');
        // 切换类
        button.addEventListener('click', function () {
            document.body.classList.toggle('bg');
        })
    </script>

6.3 插件的使用总结

确定插件实现的功能
去官网查看使用说明
下载插件
打开demo示实例文件，查看需要引入的相关文件，并且引入
赋值实例文件中的结构html，样式css及js代码

七、本地存储

7.1 window.sessionStorage

生命周期为关闭浏览器窗口
在同一个窗口下数据可以共享
以键值对的形式存储使用
存储数据 sessionStorage.setItem(key, value)
获取数据 sessionStorage.getItem(key)
删除数据 sessionStorage.removeItem(key)
清空所有数据 sessionStorage.clear() 慎用！会删除该页面的所有数据

<script>
        var ipt = document.querySelector('input');
        var set = document.querySelector('.set');
        var get = document.querySelector('.get');
        var remove = document.querySelector('.remove');
        var del = document.querySelector('.del');

        set.addEventListener('click', function () {
            var val = ipt.value;
            sessionStorage.setItem('uname', val);
            sessionStorage.setItem('age', val);
        })
        get.addEventListener('click', function () {
            console.log(sessionStorage.getItem('uname'));
        })
        remove.addEventListener('click', function () {
            sessionStorage.removeItem('uname');
        })
        del.addEventListener('click', function () {
            sessionStorage.clear();
        })
    </script>