Web API 相关

概念：API 是一些预先定义的函数，目的是提供应用程序给开发人员，以获得操作软件或硬件的能力，不需要看源码，只需要直到输入什么，输出什么。

  • 任何语言都有自己的 API
  • API 特征：输入，输出

Web API 主要是 DOM 和 BOM

DOM 相关

概念：文档对象模型，是W3C推荐的处理可扩展标记语言的标准接口。是一种与平台和语言无关的程序接口，可以动态的访问程序和脚本，更新其内容，结构；

DOM 是一种基于数的 API 文档，它要求整个文档都表示在存储器中。

DOM 树

  • 文档：一个网页可以称为文档
  • 节点：网页中所有的内容都是节点（标签，属性，文本，注释等）
  • 元素：网页中的标签
  • 属性：标签的属性
DOM 经常进行的操作
  • 获取元素
  • 对元素进行操作（设置属性或调用其他方法）
  • 动态创建元素
  • 事件
根据id获取元素

方法：调用 document 对象的 getElementById 方法

参数：字符串类型的 id 值

返回值：对应id的元素对象

注意代码顺序：js 代码在 html 结构前执行，获取不到html结构

<body>
    <p id="p1">hellow</p>
    <p id="p2">hellow</p>
</body>
<script>
    var p1 = document.getElementById("p1");
    console.log(p1);
    console.dir(p1);
    p1.style.background = "red";
</script>
根据标签名获取元素

方法：调用 document 对象的 getElementsByTagName 方法

参数：字符串类型的 标签 值

返回值：同名元素组成的数组

注意：1. 操作数据时要按数据的方法进行

注意：2. getElementByTagName 方法内部获取的元素是动态增加的

<body>
    <p id="p1">hellow</p>
    <p id="p2">hellow</p>
</body>
<script>
    var ps = document.getElementsByTagName;
    console.log(ps);
    for (var i = 0 ; i < ps.length ; i++) {
    	ps[i].style.background = "yellow";
    }
</script>
元素对象内部获取标签元素

方法：document.getElementById(“d1”).getElementsByTagName(“p”)

目的：缩小元素选择范围，类似 css 的后代选择器 #d1 p {}

<body>
    <div id="box1">
        <p>hellow</p>
        <p>hellow</p>
    </div>
    <div id="box2">
        <p>hellow</p>
        <p>hellow</p>
    </div>
</body>
<script>
    var ps = document.getElementById("box1").getElementsByTagName("p");
    console.log(ps);
</script>
根据 name 获取元素

方法：调用 document 对象的 getELementsByName 方法

参数：name 的属性值

返回值：name 属性值相同的元素对象组成的数组：NodeList（节点列表集合） 类似数组

注意：不建议在 IE 和 Opera 浏览器中使用，因为有兼容问题，ie9及以下，甚至会识别 id 与 name 属性值一样的元素

<body>
    <input type="text" name="age">
    <input type="text" name="age">
    <input type="text" name="age">
    <div id="age"></div>
</body>
<script>
    var ages = document.getElementsByName("age");
    console.log(ages);
    console.log(ages[0]);
</script>
根据类名获取元素

方法：调用 document 对象的 getElementsByClassName 方法

参数：字符串类型的 class 属性值

返回值：class 属性值相同的元素组成的数组

注意：不支持 ie8 及以下的浏览器

<body>
    <div id="box1">
        <p class="m1"></p>
        <p class="m1"></p>
    </div>
    <div id="box2">
        <p class="m1"></p>
        <p class="m1"></p>
    </div>
</body>
<script>
    var ms = document.getElementsByClassName("m1");
    var box1ms = document.getElementById("box1").getElementsByClassName("m1");
    console.log(ms);
    console.log(box1ms);
</script>
根据选择器获取元素

方法1：调用 document 对象的 querySelector 方法，通过 css 中的选择器去选取第一个符合条件的标签元素。

方法2：调用 document 对象的 querySelectorAll 方法，通过 css 中的选择器去选择所有符合条件的标签元素。

参数：字符串类型的 css 中的选择器

注意：不支持 ie8 以下的浏览器

<body>
    <div id="box1">
        <p class="m1">hihi</p>
        <p class="m1">hihi</p>
        <p>hihi</p>
        <p>hihi</p>
    </div>
    <div id="box2">
        <p class="m1"></p>
        <p class="m1"></p>
        <p>hihi</p>
        <p>hihi</p>
    </div>
</body>
<script>
    var box = document.querySelector("#box1 .m1");
    var boxs = document.querySelectorAll("#box2 .m1");
    console.log(box);
    console.log(boxs);
</script>

事件

在什么时候做什么事

执行机制：触发–响应机制

绑定事件三要素：

  • 给谁绑定
  • 绑定什么样的类型的事件
  • 事件触发执行的函数

常用的事件监听方法： 绑定 HTML 元素属性，绑定 DOM 对象属性

事件监听：JavaScript 解析器会给所有绑定事件的元素添加一个监听，监听器会一直检测这个元素，只要触发对应的绑定事件，就会立即执行事件函数。

常见的鼠标事件类型：

  • onclick 鼠标左键点击触发
  • ondbciick 左键双击事件
  • onmousedown 鼠标按键按下触发
  • onmouseup 鼠标放开时触发
  • onmousemove 鼠标在元素上移动触发
  • onmouseover 鼠标移动到元素上触发
  • onmouseout 鼠标移出元素边界触发
非表单元素的属性

如：href，scr，id等

调用方式：obj.src

注意：部分属性名跟关键字和保留字冲突，会更换写法

  • class -> className
  • for -> htmlFor
  • rowspan -> rowSpan
  • 属性赋值：给元素属性赋值，等号右侧就是值都是字符串格式

注意：id 属性不允许修改

不同函数内部的 this 指向
  • 事件函数：内部的 this 指向 事件源
  • 普通函数：内部的 this 指向 window 对象
  • 构造函数：指向的是生成的实例对象
  • 对象的方法：指向对象本身
innerHTML 和 innerText 属性

都是获取标签内部内容的的

innerHTML:在设置内部子标签结构时使用

innerText:设置纯字符串时使用

innerHTML 属性

获取标签内容的格式是 HTML 的格式，同时也会获取到换行，空白等

同时设置给标签的内容也是 HTML 格式的

innerText 属性

获取的标签内容是纯文本的内容，同时设置给标签的内容也是纯文本的

<div id="box">
	<p>我是div内部的内容</p>
</div>
<script>
	var box = document.getElementById("box");
	console.log(box.innerHTML);
	console.log(box.innerText);
	box.innerHTML = "<span>我是div内部的内容</span>";
	box.innerText = "<span>我是div内部的内容</span>";
</script>
表单元素属性

  • value 表单元素内容(option除外)

  • type input标签类型

  • disabled 禁用属性

  • checked 复选框选中属性

  • selected 下拉菜单选中属性

    注意：在 DOM 元素对象的属性值只有一个时，会被转成布尔值显示

自定义属性操作
  • getAttribute(name) 获取标签行内属性
  • setAttribute(name,value) 设置标签行内属性
  • removeAttribute(name) 移除标签行内属性

上述三个方法可以获取任意的行内属性，不仅限于自定义属性；但是e.的方法是能获取标准的标签属性，无法获取自定义的

<div id="box" age="18"></div>
// age就是自定义属性，id就是标准属性
var box = document.getElementById("box");

console.log(box.id);
console.log(box.getAttribute("age"));
style 样式属性操作
  • 使用 style 属性方式设置的样式是行内样式
  • 使用 element.style获取的是一个所有行内样式组成的一个对象
  • 样式对象可以继续点语法调用或者更改 css 行内样式

注意：类似 background-color 这种复合属性的单一属性写法，是由多个单词组成要使用 驼峰命名来书写 backgroundColor

注意：设置宽高，位置需要加上对应单位 如px

节点

节点属性

  • nodeType ：节点的类型，属性值是数字，表示不同类型的节点

    • 1.元素节点
    • 2.属性节点
    • 3.文本节点
    • 8.注释类型

  • nodeName：节点的名称（标签名称） 只读

  • nodeValue：节点值，元素节点的 nodeValue 始终是 null ，可以返回或设置当前节点的值

// 生成一个新的元素对象
var newNode = document.createElement("div");
newNode.innerHTML = "新的 div";
// 给 body 添加一个新的节点子元素
document.body.appendChild(newNode);
// 移除一些元素
var box = document.getElementById("box");
var demo = document.getElementById("demo");
document.body.removeChild(box);

// 获取节点内部的子元素节点
var child1 = demo.children;
console.log(child1);



var box = document.getElementById("box");
// 元素节点
// console.dir(box);
// 属性节点获取
var idNode = box.getAttributeNode("id");
console.dir(idNode);
idNode.nodeValue = "demo";

// 文本节点
var childNodes = box.childNodes;
console.log(childNodes);
childNodes[0].nodeValue = "box 1";
父子节点常用属性
  • childNodes 只读属性，获取一个节点所有的子节点的实时集合，集合是动态变化的
  • children 只读属性，获取一个节点所有的子元素节点集合，是一个动态更新的 HTML 元素集合
  • firstChild 只读属性，返回该节点的第一个子节点，如果该节点没有子节点就返回 null
  • lastChild 只读属性，返回该节点的最后一个子节点，如果该节点没有子节点就返回 null
  • parentNode 返回当前节点的一个父节点，如果没有就返回 null
  • parentElement 返回当前节点的父元素节点，如果该元素没有父节点，或者节点不是一个 DOM 元素 ，就返回 null
兄弟节点常用属性
  • nextSibling 只读属性，返回与该节点同级的下一个节点，没有就返回 null
  • previousSibling 只读属性，返回与该节点同级的上一个节点，没有就返回 null
  • nextElementSibiling 只读属性，返回与该节点同级的下一个元素节点，没有就返回 null
  • previousElementSibling 只读属性，返回与该节点同级的上一个元素节点，没有就返回 null

注意：nextElementSibiling 和 previousElementSibling 有兼容性问题，IE 9 以后才支持

创建新节点的方法
  • document.createElement(“div”) 创建一个元素节点
  • doument.createAttribute(“id”) 创建属性节点
  • document.createTextNode(“hello”) 创建文本节点

一般将创建的节点存在变量中，方便使用

节点常用的操作方法
添加节点，替换节点，删除节点
  • parentNode.appendChild(child) 将一个节点添加到指定父节点的子节点列表末尾。
    • 可以添加原有的节点，原来位置的该节点会被粘贴到末尾。因为内存中的节点只有一个，只能渲染一个位置。
  • parentNode.appendChild(newChild , oldChild) 用指定节点，替换当前节点的一个子节点，并返回被替换掉的节点。
  • parentNode.insertBefore(newNode , referenceNode) 在参考节点之前插入一个拥有指定父节点的子节点，referenceNode 必须设置，如果 referenceNode 为 null ，则 newNode 会被插到末尾。
  • parentNode.removeChild(child) 移除当前节点的一个子节点，这个节点必须存在于当前节点中。
克隆节点
  • Node.cloneNode(): 克隆一个节点，并且可以选择是否克隆这个节点下的所有内容。参数为布尔值；true 表示深度克隆，该节点所有的后代节点也会被克隆，false 表示浅克隆，只克隆该节点本身；默认值为 true。注意：克隆时，标签上的属性和属性值也会被克隆，写在标签内部的行内绑定事件可以被复制，但是通过 JavaScript 动态绑定的事件不会被复制
判断节点
  • Node.hasChildNodes() : 没有参数，返回一个 布尔值 ，true 表示有子节点存在，false 表示没有
    • 可以通过 node.firstChild 间接判断第一个子节点是否存在来判断 是否有字节点的存在 node.firstChild !== null
    • node.childNodes.length > 0 也可判断是否有子节点 ;
  • Node.contains(child) : 返回一个 布尔值 判断传入的节点是否为改节点的 后代节点。
<h1>动态添加列表</h1>
<div id="box">

</div>
<script>
    var box = document.getElementById("box");
    var names = ["赵云","刘备","黄月英","诸葛亮"];
    // 创建元素
    var ul = document.createElement("ul");
    // 挂节点
    box.appendChild(ul);
    for (var i = 0 ; i < names.length ; i++) {
        var li = document.createElement("li");
        var tx = document.createTextNode(names[i])
        li.appendChild(tx)
        // li.innerText = names[i];
        ul.appendChild(li);
    }
</script>

注册事件的其它方法

addEventListener 绑定事件方法

el.addEventListener(参数1，参数2)

  • 参数1：事件类型的字符串（click，不需要加 “on”）;
  • 参数2：事件函数

同一个元素可以多次绑定事件监听，同一个事件类型可以注册多个事件函数

兼容性问题：不支持 IE9 及以下

// DOM 2 级事件绑定方式
btn.addEventListener("click",function () {
    alert(1);
});
// 多次绑定相同的事件类型，事件会根据书写的顺序进行一个事件排队
btn.addEventListener("click",clickEvent);
function clickEvent() {
    alert(2);
}
attachEvent 绑定事件方法

el.attachEvent(参数1，参数2)

  • 参数1：事件类型的字符串（前面需要加 on）
  • 参数2：事件函数

同一个元素可以多次绑定事件监听，同一个事件类型可以注册多个事件函数

兼容问题：只支持 ie10 以下的浏览器

<body>
  <input type="button" value="点击" id="btn">
  <script>
    var btn = document.getElementById("btn");    
    // DOM 2 级事件绑定方式
    // 兼容：IE 10 及以下浏览器
    // IE8 及以下的浏览器处理事件队列时，会出现顺序错乱
    btn.attachEvent("onclick",function () {
      alert(3);
    });
    btn.attachEvent("onclick",clickEvent);
    function clickEvent() {
      alert(4);
    }
    </script>
</body>
注册事件的兼容写法
  • 自定义一个注册事件函数
  • 参数：事件源，事件类型（不加 “on”），事件函数
  • IE9 及以上的浏览器，使用 addEventListener 方法
  • IE9 以下的浏览器，使用 attachEvent 方法
  • 判断浏览器时，不需要判断它的版本，可以检测浏览器是否具备能力
<body>
  <input type="button" value="点击" id="btn">
  <script>
    var btn = document.getElementById("btn");  
    // 调用函数
    addEvent(btn,"click",function () {
      alert(1);
    }); 
    // DOM 2 级事件绑定方式
    // 自己制作一个兼容所有浏览器的绑定事件的函数
    // 参数：事件源，事件类型，事件函数
    function addEvent(ele,type,fn) {
      // IE 9 及以上的浏览器和其他浏览器，使用 addEventListener 方法
      // IE 9 以下的浏览器，使用 attachEvent 方法
      // 浏览器能力检测
      if (ele.addEventListener) {
        ele.addEventListener(type,fn);
      } else if (ele.attachEvent) {
        ele.attachEvent("on" + type,fn);
      }
    }
    </script>
</body>
解除事件绑定的方法

​ addEventListener 和 attachEvent 有各自对应的事件解除绑定方法

  • addEventListener 对应的事件解除绑定方法是：removeEventListener(参数1，参数2) 方法
    • 参数1：事件类型的字符串（不需要加 ”on“）
    • 参数2：事件函数的引用名
  • attachEvent 对应的事件解除绑定方法是：detachEvent(参数1，参数2) 方法
    • 参数1：事件类型的字符串（不需要加 ”on“）
    • 参数2：事件函数的引用名

注意：没有办法移除匿名函数，所以注册函数需要单独声明一个有函数名的事件函数

兼容问题：同事件绑定的兼容性一样

<body>
  <input type="button" value="点击" id="btn">
  <script>
    var btn = document.getElementById("btn");    
    // 绑定事件
    // btn.onclick = function () {
    //   alert(1);
    // };
    // 解除绑定方法
    // btn.onclick = null;
    // 绑定事件
    // btn.addEventListener("click",fun);
    // btn.addEventListener("click",fun2);
    // 解除绑定
    // btn.removeEventListener("click",fun);

    // 绑定事件
    btn.attachEvent("onclick",fun);
    // 解除绑定
    btn.detachEvent("onclick",fun);
    function fun() {
      alert(2);
    }
    function fun2() {
      alert(3);
    }
    </script>
</body>
解除事件绑定兼容写法

IE9 及以上使用 removeEventListener

IE9 以下使用 detachEvent

自定义一个解除事件绑定方法

// 兼容所有浏览器的 解除绑定事件的函数
// 参数：事件源，事件类型，事件函数
function removeEvent(ele,type,fn) {
    // 浏览器能力检测
    if (ele.removeEventListener) {
    	ele.removeEventListener(type,fn);
    } else if (ele.detachEvent) {
    	ele.detachEvent("on" + type,fn);
    }
}

DOM 事件流

分为：事件捕获 和 事件冒泡

  • 事件捕获：当一个父，子，孙子级的结构都绑定了触发事件，在孙级触发时：事件执行顺序是：父>子>孙
  • 事件冒泡：当一个父，子，孙子级的结构都绑定了触发事件，在孙级触发时：事件执行顺序是：孙>子>父
<div id="box1">
    <div id="box2">
        <div id="box3"></div>
    </div>
</div>
<script>
    // 获取元素
    var box1 = document.getElementById("box1");
    var box2 = document.getElementById("box2");
    var box3 = document.getElementById("box3");

    // 添加点击事件
    // addEventListener 有第三个参数，用来决定事件流的方向
    // 参数值是 布尔类型的值，false 表示事件冒泡过程，true 表示事件捕获过程
    // 参数默认值是 false
    // box1.addEventListener("click",function () {
    //     console.log(1);
    // },false);
    // box2.addEventListener("click",function () {
    //     console.log(2);
    // },false);zz
    // box3.addEventListener("click",function () {
    //     console.log(3);
    // },false);
    // box1.addEventListener("click",function () {
    //     console.log(this.id);
    // },true);
    // box2.addEventListener("click",function () {
    //     console.log(this.id);
    // },true);
    // box3.addEventListener("click",function () {
    //     console.log(this.id);
    // },true);


    // onclick 属性添加事件方法只有冒泡过程，没有捕获过程
    // attachEvent() 方法添加事件方法只有冒泡过程，没有捕获过程
    box1.onclick = function () {
        console.log(1);
    };
    box2.onclick = function () {
        console.log(2);
    };
    box3.onclick = function () {
        console.log(3);
    };

</script>
事件流的三个阶段

  • 第一阶段：事件捕获

  • 第二阶段：事件执行过程

  • 第三阶段：事件冒泡

addEventListener() 可以添加参数来控制，事件冒泡 或者 事件捕获 ，由方法的第三个参数控制，默认是 false 进行事件冒泡，改为 true 时，进行事件捕获

onclick 类型：只能进行事件冒泡

attachEvent() 方法：只能进行事件冒泡

事件冒泡的应用：事件委托
  • 利用事件冒泡，将子级事件委托给父级加载
  • 同时，需要利用事件函数的一个 e 参数，内不存储的是事件对象
<body>
    <ul id="list">
        <li>刘亦菲</li>
        <li>杨幂</li>
        <li>唐嫣</li>
        <li>赵丽颖</li>
        <li>刘诗诗</li>
    </ul>
    <script>
        // 让每个 li 被点击后，自己添加特殊的背景色，而其他兄弟不添加
        // 以前的思路：获取所有的 li 标签元素，批量添加事件
        // 事件委托：可以将一些子级的公共类型的事件委托给他们的父级添加，在父级内部想办法找到真正触发事件的最底层的事件源
        // 获取元素
        var list = document.getElementById("list");
        var lis = list.children;
        // 给 ul 添加点击事件
        list.onclick = function (e) {
            // 在内部要想办法找到真正触发事件的 li
            // 借用事件函数内部的一个参数 e，e 是事件对象
            // 只要触发事件，函数内部都可以得到一个事件对象，对象中存储了关于事件的一系列数据
            // e.target 属性记录的就是真正触发事件的事件源
            // 排除其他
            for (var i = 0 ; i < lis.length ; i++) {
                lis[i].style.backgroundColor = "";
            }
            e.target.style.backgroundColor = "pink";
        };
    </script>
</body>
事件对象

只要触发事件，就会有一个对象，内部存储了与事件相关的数据；e 在低版本浏览器中有兼容问题，低版本浏览器使用的是：window.event

事件对象常用属性：

  • e.eventPhase 查看事件触发时所处的阶段
  • e.target 获取触发事件的元素
  • e.srcElement 低版本浏览器获取触发事件元素
  • e.currentTarget 获取绑定事件的事件源
  • e.type 获取事件类型
  • e.clientX / e.clientY 鼠标距离浏览器窗口左上角的距离
  • e.pageX / e.pageY 鼠标距离整个 HTML 页面左上顶点的距离
<body>
    <div id="box1">
        <div id="box2">
            <div id="box3"></div>
        </div>
    </div>
    <script>
        // 获取元素
        var box1 = document.getElementById("box1");
        var box2 = document.getElementById("box2");
        var box3 = document.getElementById("box3");
        
        // 添加事件
        box1.onclick = function (e) {
            // e指的就是存储事件对象的参数，只要事件被触发，e就会自动接收数据
            // 兼容问题
            e = e || window.event;
            // e.eventPhase 判断出事件执行时处于哪个阶段
            // 1：捕获阶段
            // 2：目标阶段
            // 3：冒泡阶段
            // console.log(e.eventPhase);

            // 获取真正触发事件的元素
            var target = e.target || e.srcElement;
            // console.log(target);
            // 获取绑定事件的事件源元素
            console.log(e.currentTarget);
            // this 指向
            console.log(this);
        };
      // 可以将 所有给一个元素绑定的事件的事件函数写在一个 函数内，通过函数内部的 e.type 判断走不同的分支
        box1.onmouseover = fn;
        box1.onmouseout = fn;
        // 避免添加多个函数，占用更多的内存
        function fn(e) {
            e = e || window.event;
            // 根据事件类型，执行不同的代码
            switch (e.type) {
                case "mouseover":
                    box1.style.backgroundColor = "pink";
                    break; 
                case "mouseout":
                    box1.style.backgroundColor = "yellowgreen";  
                    break;                   
            }
        }
        // 事件对象中有一些获取尺寸的属性
        box1.onclick = function (e) {
            // client系列： 客户端尺寸，点击的点参考浏览器窗口左上角的距离
            console.log(e.clientX);
            console.log(e.clientY);
            // page 系列：html 页面尺寸，点击的点参考html文档左上角的距离
            console.log(e.pageX);
            console.log(e.pageY);
        };
    </script>
</body>
取消默认行为和阻止冒泡
取消默认行为e.preventDefault()
取消默认行为，低版本浏览器使用e.returnValue
阻止冒泡e.stopPropagation()
阻止冒泡，ie低版本浏览器使用e.cancelBubble = true;

在这里插入图片描述

偏移量属性
offset 属性
偏移属性作用
offsetParent偏移参考的父级，距离自己最近的有定位属性值的父级，没有就参考body
offsetLeft/offsetTop偏移位置（与参考父级有关），盒子边框外部到父级盒子边界的距离
offsetWidth/offsetHeight盒子及内部的宽，高

在这里插入图片描述

client 属性
属性作用
client没有参考点父级元素
clientLeft/clientTop边框区域尺寸
clientWidth/clientHeight边框内部的大小
滚动偏移属性 scroll
属性作用
scrollLeft/scrollTop盒子内部滚动出去的尺寸
scrollWeight/scrollHeight盒子内容的宽度和高度

在这里插入图片描述

BOM 相关

概念：BOM（Browser Object Model）是指浏览器对象模型，浏览器对象模型提供了独立于内容的，可以与浏览器窗口进行互动的对象结构。BOM 由多个对象组成，代表浏览器窗口的 Window 对象是 BOM 的顶级对象，其它对象都是 Window 的子对象

我们在浏览器中的一些操作都可以用BOM的方式进行编程式处理，如：刷新浏览器，前进，后退，浏览器中输入URL等。

  • 当调用 Window 下的属性和方法时，可以省略 window，如：alert()

注意：window.name 和 window.top；在我们使用全局变量时，变量名不能用 name 或 top，因为这是window自带的属性，局部变量定义可以使用

三种对话框

方法作用
alert()弹出警告框
prompt()有俩个参数，第一个是提示的文字，第二个是接收的返回值
confirm()弹出确认选择框，确认返回 true ，取消返回 false

onload 事件

可以给 window 对象或者元素添加 onload 加载事件；表示只有绑定的事件元素加载完成才能触发事件，才能执行函数。

window 对象加载完毕是指：所有的 HTML 结构加载完成，并且外部引入资源（js css img …）

应用： window.onload 事件可以将 js 代码提到 html 结构前；注意：一个页面只能有一个 window.onload 事件
<script>
    // window.onload 事件，一个页面只能使用一次
    window.onload = function () {
        // 事件被触发时，页面所有内容都已经加载完毕，获取元素不会出现错误
        var box = document.getElementById("box");
        var pics = document.getElementsByTagName("img");
        console.log(box.clientHeight);
    };
</script>

延时器 setTimeout

延时器是 window 对象的一个方法，在指定的时间过后执行一次函数

语法：window.setTimeout(function,time);

第一个参数是延时器到后，需要执行的函数可以是匿名函数，注意函数名引用不加()。

第二个参数是延时的时间默认单位是毫秒，1000毫秒等于1秒

// 延时器是异步语句
// 延时器为了保证后期能够被清除，需要定义赋值给一个变量
var timeout = window.setTimeout(function () {
    console.log("boom");
},2000);
// 清除延时器
window.clearTimeout(timeout);
应用：函数节流

作用：防止用户快速点击同一个按钮，触发事件时，之前的事件可能没有执行完成。

<body>
  <input type="button" id="btn" value="点击按钮">
  <script>
    // 点击输出 随机数
    var btn = document.getElementById("btn");
    // 绑定事件
    // 函数节流操作
    // 定义一个开关，给函数上一把锁，true 表示锁住状态，不能执行后面的代码，false 表示打开状态，可以执行后面的代码
    // 初始状态锁是打开的
    var lock = false;
    btn.onclick = function () {
      // 函数内部需要判断，是否在指定的时间之外触发事件
      // 如果锁是打开的，可以往后执行，
      // 如果锁是锁住的，不能执行后面的代码
      if (lock) {
        return;
      }
      console.log(Math.random());
      // 执行完毕后，锁应该被锁住
      lock = true;
      // 隔 2秒 后，锁再次打开
      setTimeout(function () {
        lock = false;
      },2000);
    };
  </script>
</body>

定时器：setInterval

定时器也是 window 对象的一个方法，相当于闹钟，每隔一段时间固定执行一次方法。

语法：window.setInterval(function,time)

第一个参数：被执行的函数，可以是函数名，或者匿名函数，注意：函数名不加()

第二个参数：间隔时长：默认单位毫秒

// 定时器也是异步语句
// 要想清除定时器，在定义的时候必须存到一个变量中
var timer = setInterval(function () {
	console.log(i++);
},500);
// 清除定时器
window.clearInterval(timer);
清除定时器问题

多次点击定时器开启开关，会造成定时器累加；而且多次开启定时器后，使用清除定时器方法只能清除最后一次。

解决方法：

  1. 设表先关：每次开启定时器前，都清除前面一次的定时器
<script>
    var start = document.getElementById("start");
    var box = document.getElementById("box");
    var stop = document.getElementById("stop");
    var maxleft = 500;
    var tiemr;
    var newleft = 0;
    start.onclick = function () {
        // 定时器写在事件函数内部，会由于事件多次被触发，导致定时器累积
        // 解决方法：设表先关，每次重新开启一个定时器之前都先关闭一下之前的定时器
        clearInterval(tiemr);
        tiemr = setInterval(() => {
            newleft += 5;
            box.style.left = newleft + "px";
        }, 100);
    }
    stop.onclick = function () {
        clearInterval(tiemr);
    }
</script>
  1. 拉终停表：设置一个终点，定时器内部判断是否走到了终点，要不要停止定时器；走到了终点，超过终点的，强行拉到终点，并停止定时器
<script>
    var start = document.getElementById("start");
    var box = document.getElementById("box");
    var stop = document.getElementById("stop");
    var maxleft = 500;
    var tiemr;
    var newleft = 0;
    start.onclick = function () {
        tiemr = setInterval(() => {
             判断这一次的运动是否走到了500 的位置
        	// 拉终停表，走到规定的终点位置
            if (newleft >= 500) {
                newleft = 500;
                 // 清除定时器
          		clearInterval(timer);
            }
            newleft += 5;
            box.style.left = newleft + "px";
        }, 100);
    }
    stop.onclick = function () {
        clearInterval(tiemr);
    }
</script>

location 对象

location 对象是 window 对象下的一个属性，可以获取或设置地址栏的url

属性作用
location.href = “www.baidu.com”重新给url复制，跳转到新页面，并且可以记录历史
location.assign(“www.baidu.com”)委派：与 href 的作用一致
location.replace(“www.baidu.com”)替换：替换当前地址栏的 url 但是不记录历史
location.reload(true/false)重新加载：true-强制从服务器端获取页面，false - 有缓存就从缓存中获取

URL 了解

概念：统一资源定位符

组成：scheme://host:port/path?query#fragment

  • scheme:通信协议，http，ftp，maito等
  • host:主机，服务器的域名或者是IP地址
  • port:端口号，整数，可选，省略时使用默认端口号
  • path:路径，由0或多个’/'符号隔开的字符串，表示访问文件在主机上的目录地址
  • query:查询，可选，用于给网页传递动态参数，可以有多个，用’&‘符号隔开，每个参数的名和值用’='隔开
  • fragment:信息片段，字符串，锚点

history 对象

history 对象是 window 对象下的一个属性，可以与浏览器历史记录进行交互，浏览器历史记录是按照用户所访问的页面的时间顺序进行记录和保存。

属性作用
back()回退
forward()前进
go(参数)由参数的正负和大小决定回退或前进的次数
location.href = “www.baidu.com”
location.assign(“www.baidu.com”)
location.replace(“www.baidu.com”)
location.reload(true/false)

URL 了解

概念：统一资源定位符

组成：scheme://host:port/path?query#fragment

  • scheme:通信协议，http，ftp，maito等
  • host:主机，服务器的域名或者是IP地址
  • port:端口号，整数，可选，省略时使用默认端口号
  • path:路径，由0或多个’/'符号隔开的字符串，表示访问文件在主机上的目录地址
  • query:查询，可选，用于给网页传递动态参数，可以有多个，用’&‘符号隔开，每个参数的名和值用’='隔开
  • fragment:信息片段，字符串，锚点

history 对象

history 对象是 window 对象下的一个属性，可以与浏览器历史记录进行交互，浏览器历史记录是按照用户所访问的页面的时间顺序进行记录和保存。

属性作用
back()回退
forward()前进
go(参数)由参数的正负和大小决定回退或前进的次数
# 前端 # javascript # html
Logo
CSDN学习社区

CSDN联合极客时间，共同打造面向开发者的精品内容学习社区，助力成长！

更多推荐

cover

用 OpenAI Assistants 做大模型应用开发

avatar CSDN学习社区
cover

1 小时解读鸿蒙 10 大热点问题

avatar CSDN学习社区
cover

1 小时解读鸿蒙 10 大热点问题

avatar CSDN学习社区