五、JavaScript实战（下）

最新推荐文章于 2024-05-09 08:54:47 发布
最新推荐文章于 2024-05-09 08:54:47 发布
阅读量839 收藏 3
点赞数 3
分类专栏： JavaScript 文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52289068/article/details/121799076
版权

文章目录

五、JavaScript实战（下）.md

（一）事件高级
1. 注册事件

给元素添加事件，称为 注册事件 或者 绑定事件

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

1.1 传统注册方式

利用 on 开头的事件 onclick

特点：注册事件的唯一性

同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数

1.2 方法监听注册方式

W3C标准 推荐方式

addEventListener（）它是一个方法,为元素附加事件处理程序而不会覆盖已有的事件处理程序。能够向一个元素添加多个事件处理程序。

IE9 之前的 IE 不支持此方法，可使用attachEvent（）代替

特点：同一个元素同一个事件可以注册多个监听器

按注册顺序依次执行

//语法：
element.addEventListener(event, function, useCapture);

第一个参数是事件的类型（比如 “click” 或 “mousedown”）。

第二个参数是当事件发生时我们需要调用的函数。

第三个参数是布尔值，指定使用事件冒泡还是事件捕获。此参数是可选的。默认是 false（事件冒泡，从里到外）

**注意：**请勿对事件使用 “on” 前缀；请使用 “click” 代替 “onclick”。

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

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

<body>
    <button>传统注册事件</button>
    <button>方法监听注册事件</button>
    <button>ie9 attachEvent</button>
    <script>
        var btns = document.querySelectorAll('button');
        // 1. 传统方式注册事件
        btns[0].onclick = function () {
            alert('hi');
        }
        btns[0].onclick = function () {
            alert('hao a u');
        }
        // 2. 事件侦听注册事件 addEventListener 
        // (1) 里面的事件类型是字符串 必定加引号 而且不带on
        // (2) 同一个元素 同一个事件可以添加多个侦听器（事件处理程序）
        btns[1].addEventListener('click', function () {
            alert(22);
        })
        btns[1].addEventListener('click', function () {
            alert(33);
        })
        // 3. attachEvent ie9以前的版本支持(仅了解)
        btns[2].attachEvent('onclick', function () {
            alert(11);
        })
    </script>
</body>

</html>
2. 删除事件

removeEventListener() 方法会删除已通过 addEventListener() 方法附加的事件处理程序

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        var divs = document.querySelectorAll('div');
        divs[0].onclick = function() {
                alert(11);
                // 1. 传统方式删除事件
                divs[0].onclick = null;
            }
        // 2. removeEventListener 删除事件
        divs[1].addEventListener('click', fn) // 里面的fn 不需要调用加小括号

        function fn() {
            alert(22);
            divs[1].removeEventListener('click', fn);
        }
        // 3. detachEvent
        divs[2].attachEvent('onclick', fn1);

        function fn1() {
            alert(33);
            divs[2].detachEvent('onclick', fn1);
        }
    </script>
</body>

</html>
3.DOM事件流

事件流描述的是从页面中接收事件的顺序。

事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流。

DOM事件流分为3个阶段：

1.捕获阶段 从外往里

2.当前目标阶段

3.冒泡阶段 从里往外

**注意：**js 代码中只能执行捕获或者冒泡其中的一个阶段

onclick 和 attachEvent 只能得到冒泡阶段 （onmouseenter 和 onmouseleave）也只有事件冒泡

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .father {
            overflow: hidden;
            width: 300px;
            height: 300px;
            margin: 100px auto;
            background-color: pink;
            text-align: center;
        }
        
        .son {
            width: 200px;
            height: 200px;
            margin: 50px;
            background-color: purple;
            line-height: 200px;
            color: #fff;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son">son盒子</div>
    </div>
    <script>
        // dom 事件流 三个阶段
        // 1. JS 代码中只能执行捕获或者冒泡其中的一个阶段。
        // 2. onclick 和 attachEvent（ie） 只能得到冒泡阶段。
        // 3. 捕获阶段 如果addEventListener 第三个参数是 true 那么则处于捕获阶段  document -> html -> body -> father -> son
        // var son = document.querySelector('.son');
        // son.addEventListener('click', function() {
        //     alert('son');
        // }, true);
        // var father = document.querySelector('.father');
        // father.addEventListener('click', function() {
        //     alert('father');
        // }, true);
        // 4. 冒泡阶段 如果addEventListener 第三个参数是 false 或者 省略（默认就是false） 那么则处于冒泡阶段  son -> father ->body -> html -> document
        var son = document.querySelector('.son');
        son.addEventListener('click', function() {
            alert('son');
        }, false);
        var father = document.querySelector('.father');
        father.addEventListener('click', function() {
            alert('father');
        }, false);
        document.addEventListener('click', function() {
            alert('document');
        })
    </script>
</body>

</html>
4.事件对象

event 对象代表事件的状态，比如键盘按键的状态、鼠标的位置、鼠标按钮的状态。

简单理解：事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是 事件对象event ，它有很多属性和方法。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div>123</div>
    <script>
        // 事件对象
        var div = document.querySelector('div');
        div.onclick = function (e) {
            // console.log(e);
            // console.log(window.event);
            // e = e || window.event;     //这是为了兼容性问题，现在用框架做不存在这些问题
            console.log(e);


        }
        // div.addEventListener('click', function(e) {
        //         console.log(e);

        //     })
        // 1. event 就是一个事件对象 写到我们侦听函数的 小括号里面 当形参来看
        // 2. 事件对象只有有了事件才会存在，它是系统给我们自动创建的，不需要我们传递参数
        // 3. 事件对象 是 我们事件的一系列相关数据的集合 跟事件相关的 比如鼠标点击里面就包含了鼠标的相关信息，鼠标坐标啊，如果是键盘事件里面就包含的键盘事件的信息 比如 判断用户按下了那个键
        // 4. 这个事件对象我们可以自己命名 比如 event 、 evt、 e
        // 5. 事件对象也有兼容性问题 ie678 通过 window.event 兼容性的写法  e = e || window.event;
    </script>
</body>

</html>
4.1 事件对象的常见属性和方法

4.1.1 e.target 返回触发事件的对象 标准

target 与 this 的区别

e.target 返回的是触发事件的对象（元素） this 返回的是绑定事件的对象（元素）

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div>123</div>
    <ul>
        <li>abc</li>
        <li>abc</li>
        <li>abc</li>
    </ul>
    <script>
        // 常见事件对象的属性和方法
        // 1. e.target 返回的是触发事件的对象（元素）  this 返回的是绑定事件的对象（元素）
        // 区别 ： e.target 点击了那个元素，就返回那个元素 this 那个元素绑定了这个点击事件，那么就返回谁
        var div = document.querySelector('div');
        div.addEventListener('click', function (e) {
            console.log(e.target);
            console.log(this);

        })
        var ul = document.querySelector('ul');
        ul.addEventListener('click', function (e) {
            // 我们给ul 绑定了事件  那么this 就指向ul  
            console.log(this);
            console.log(e.currentTarget);

            // e.target 指向我们点击的那个对象 谁触发了这个事件 我们点击的是li e.target 指向的就是li
            console.log(e.target);

        })
        // 了解兼容性
        // div.onclick = function(e) {
        //     e = e || window.event;
        //     var target = e.target || e.srcElement;
        //     console.log(target);

        // }
        // 2. 了解 跟 this 有个非常相似的属性 currentTarget  ie6、7、8不认识
    </script>
</body>

</html>

4.1.2 e.type 返回事件的类型，比如 click 、mouseover 不带on

阻止默认行为（事件） ：让链接不跳转 或者让提交按钮不提交

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

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

    </style>
</head>

<body>
    <div>123</div>
    <a href="http://www.baidu.com">百度</a>
    <form action="http://www.baidu.com">
        <input type="submit" value="提交" name="sub">
    </form>
    <script>
        // 常见事件对象的属性和方法
        // 1. 返回事件类型
        var div = document.querySelector('div');
        div.addEventListener('click', fn);
        div.addEventListener('mouseover', fn);
        div.addEventListener('mouseout', fn);

        function fn(e) {
            console.log(e.type);

        }
        // 2. 阻止默认行为（事件） 让链接不跳转 或者让提交按钮不提交
        var a = document.querySelector('a');
        a.addEventListener('click', function (e) {
            e.preventDefault(); //  dom 标准写法
        })
        // 3. 传统的注册方式
        a.onclick = function (e) {
            // 普通浏览器 e.preventDefault();  方法
            // e.preventDefault();
            // 低版本浏览器 ie678  returnValue  属性
            // e.returnValue;
            // 我们可以利用return false 也能阻止默认行为 没有兼容性问题 特点： return 后面的代码不执行了， 而且只限于传统的注册方式
            return false;
            alert(11);
        }
    </script>
</body>

</html>
4.2 阻止事件冒泡

阻止事件冒泡的两种方式

1.标准写法：利用事件对象里面的 stopPropagation() 方法

2.非标准方法： e.cancelBubble = true; // 非标准 cancel 取消

bubble 泡泡

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .father {
            overflow: hidden;
            width: 300px;
            height: 300px;
            margin: 100px auto;
            background-color: pink;
            text-align: center;
        }

        .son {
            width: 200px;
            height: 200px;
            margin: 50px;
            background-color: purple;
            line-height: 200px;
            color: #fff;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son">son儿子</div>
    </div>
    <script>
        // 常见事件对象的属性和方法
        // 阻止冒泡  dom 推荐的标准 stopPropagation() 
        var son = document.querySelector('.son');
        son.addEventListener('click', function (e) {
            alert('son');
            e.stopPropagation(); // stop 停止  Propagation 传播
            e.cancelBubble = true; // 非标准 cancel 取消 bubble 泡泡
        }, false);

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

</html>
4.3 事件委托（代理、委派）

事件委托也称为事件代理，在jQuery里面称为事件委派

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

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

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

<body>
    <ul>
        <li>知否知否，点我应有弹框在手！</li>
        <li>知否知否，点我应有弹框在手！</li>
        <li>知否知否，点我应有弹框在手！</li>
        <li>知否知否，点我应有弹框在手！</li>
        <li>知否知否，点我应有弹框在手！</li>
    </ul>
    <script>
        // 事件委托的核心原理：给父节点添加侦听器， 利用事件冒泡影响每一个子节点
        var ul = document.querySelector('ul');
        ul.addEventListener('click', function (e) {
            // alert('知否知否，点我应有弹框在手！');
            // e.target 这个可以得到我们点击的对象
            e.target.style.backgroundColor = 'pink';
        })
    </script>
</body>

</html>
5. 常用鼠标事件
5.1 禁止鼠标右键菜单

contextmenu 主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单（取消鼠标右键）

5.2 禁止鼠标选中（ selectstart 开始选中）
<!DOCTYPE html>
<html lang="en">

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

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

</html>
5.3 鼠标事件对象

event 对象代表事件的状态，跟事件相关的一系列信息的集合，鼠标事件对象 MouseEvent 和 键盘事件对象 KeyboardEvent

e.pageX

e.pageY

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            height: 3000px;
        }
    </style>
</head>

<body>
    <script>
        // 鼠标事件对象 MouseEvent
        document.addEventListener('click', function (e) {
            // 1. client 鼠标在可视区的x和y坐标
            console.log(e.clientX);
            console.log(e.clientY);
            console.log('---------------------');

            // 2. page 鼠标在页面文档的x和y坐标
            console.log(e.pageX);
            console.log(e.pageY);
            console.log('---------------------');

            // 3. screen 鼠标在电脑屏幕的x和y坐标
            console.log(e.screenX);
            console.log(e.screenY);

        })
    </script>
</body>

</html>

5.3.1 案例：鼠标移动

鼠标移动事件：mousemove

图片要移动距离，而且不占位置，我们使用绝对定位即可

核心原理：每次鼠标移动，我们都会获得最新的鼠标坐标，把这个 x 和 y 坐标作为图片的 left 和 top 值就可以移动图片。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        img {
            position: absolute;
            top: 2px;
            transform: translate(-50%,-50%);
        }
        
    </style>
</head>

<body>
    <img src="images/angel.gif" alt="">
    <script>
        	var pic = document.querySelector('img');
        	document.addEventListener('mousemove', function (e) {
            // 1. mousemove只要我们鼠标移动1px 就会触发这个事件
            // console.log(1);
            // 2.核心原理： 每次鼠标移动，我们都会获得最新的鼠标坐标， 把这个x和y坐标做为图片的top和left 值就可以移动图片
            var x = e.pageX;
            var y = e.pageY;
            console.log('x坐标是' + x, 'y坐标是' + y);
            //3 . 千万不要忘记给left 和top 添加px 单位
            pic.style.left = x + 'px';
            pic.style.top = y + 'px';
        });
    </script>    
</body>
    
</html>
6.常用键盘事件

事件除了使用鼠标触发，还可以使用键盘触发

键盘事件触发条件
onkeyup某个键盘按键被松开时候触发
onkeydown某个键盘按键被按下时触发
onkeypress某个键盘按键被按下时触发，但是它不识别功能键比如 ctrl shift 等
<!DOCTYPE html>
<html lang="en">

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

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

        //     }
        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>

</html>
6.1 案例：模拟京东按键输入内容

核心思路： 检测用户是否按下了s 键，如果按下s 键，就把光标定位到搜索框里面

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

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

<body>
    <input type="text">
    <script>
        // 核心思路： 检测用户是否按下了s 键，如果按下s 键，就把光标定位到搜索框里面
        // 使用键盘事件对象里面的keyCode 判断用户按下的是否是s键
        // 搜索框获得焦点： 使用 js 里面的 focus() 方法
        var search = document.querySelector('input');
        document.addEventListener('keyup', function(e) {
            // console.log(e.keyCode);
            if (e.keyCode === 83) {
                search.focus();
            }
        })
    </script>
</body>

</html>
6. 2 案例：模拟京东快递单号查询

keydowm 和 keypress 在文本框里面的特点：他们两个事件触发的时候，文字还没有落入文本框中

keyup事件的触发的时候，文字已经落入文本框里面了

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .search {
            position: relative;
            width: 178px;
            margin: 100px;
        }
        
        .con {
            display: none;
            position: absolute;
            top: -40px;
            width: 171px;
            border: 1px solid rgba(0, 0, 0, .2);
            box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
            padding: 5px 0;
            font-size: 18px;
            line-height: 20px;
            color: #333;
        }
        
        .con::before {
            content: '';
            width: 0;
            height: 0;
            position: absolute;
            top: 28px;
            left: 18px;
            border: 8px solid #000;
            border-style: solid dashed dashed;
            border-color: #fff transparent transparent;
        }
    </style>
</head>

<body>
    <div class="search">
        <div class="con">123</div>
        <input type="text" placeholder="请输入您的快递单号" class="jd">
    </div>
    <script>
        // 快递单号输入内容时， 上面的大号字体盒子（con）显示(这里面的字号更大）
        // 表单检测用户输入： 给表单添加键盘事件
        // 同时把快递单号里面的值（value）获取过来赋值给 con盒子（innerText）做为内容
        // 如果快递单号里面内容为空，则隐藏大号字体盒子(con)盒子
        var con = document.querySelector('.con');
        var jd_input = document.querySelector('.jd');
        jd_input.addEventListener('keyup', function() {
                // console.log('输入内容啦');
                if (this.value == '') {
                    con.style.display = 'none';
                } else {
                    con.style.display = 'block';
                    con.innerText = this.value;
                }
            })
            // 当我们失去焦点，就隐藏这个con盒子
        jd_input.addEventListener('blur', function() {
                con.style.display = 'none';
            })
            // 当我们获得焦点，就显示这个con盒子
        jd_input.addEventListener('focus', function() {
            if (this.value !== '') {
                con.style.display = 'block';
            }
        })
    </script>
</body>
（二）BOM
1. BOM概述

BOM 即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是Window

BOM 由一系列相关的对象构成,并且每个对象都提供了很多方法与属性

BOM 缺乏标准，JavaScript 语法的标准化组织是 ECMA，DOM 的标准化组织是 W3C ，BOM最初是Netscape浏览器标准的一部分

BOM 学习的是浏览器窗口交互的一些对象

BOM 是浏览器厂商在各种浏览器上定义的，兼容性较差

window 对象是浏览器的顶级对象，它具有双重角色

注意：window 下的一个特殊属性windows.name

2. window 对象的常见事件
2.1 窗口加载事件

window.onload 是窗口(页面) 加载事件,当文件内容完全加载完成后会触发该事件(包括图像,脚本文件,CSS文件等),就调用处理函数

注意:
1.有了window.onload 就可以把JS代码写到页面元素的上方,因为onload是等页面内容全部加载完毕,再去执行处理函数

2.window.onload 传统注册事件的方式只能写一次,如果有多个,会以最后一个window.onload 为准.

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // window.onload = function() {
        //     var btn = document.querySelector('button');
        //     btn.addEventListener('click', function() {
        //         alert('点击我');
        //     })
        // }
        // window.onload = function() {
        //     alert(22);
        // }
        window.addEventListener('load', function() {
            var btn = document.querySelector('button');
            btn.addEventListener('click', function() {
                alert('点击我');
            })
        })
        window.addEventListener('load', function() {

            alert(22);
        })
        document.addEventListener('DOMContentLoaded', function() {
                alert(33);
            })
            // load 等页面内容全部加载完毕，包含页面dom元素 图片 flash  css 等等
            // DOMContentLoaded 是DOM 加载完毕，不包含图片 falsh css 等就可以执行 加载速度比 load更快一些
    </script>
</head>

<body>

    <button>点击</button>

</body>

</html>
2.2 调整窗口大小事件

window.onresize 是调整窗口大小加载事件,当触发时就调用的处理函数

注意:

1.只要窗口大小发生像素变化，就会触发这个事件。

2.我们经常利用这个事件完成响应式布局，window.innerWidth 当前屏幕的亮度

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <script>
        //可以加载完后再执行script这部分
        window.addEventListener('load', function () {
            var div = document.querySelector('div');
            window.addEventListener('resize', function () {
                console.log(window.innerWidth);

                console.log('变化了');
                if (window.innerWidth <= 800) {
                    div.style.display = 'none';
                } else {
                    div.style.display = 'block';
                }

            })
        })
    </script>
    <div></div>
</body>

</html>
3. 定时器

​ setTimeout() 定时器 我们也称之为 回调函数 callback

window.setTImeout(调用函数，[延迟的毫秒数] )；

setTimeout() 方法用于设置一个定时器，该定时器在定时器到期后执行调用函数。

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

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

<body>
    <script>
        // 1. setTimeout 
        // 语法规范：  window.setTimeout(调用函数, 延时时间);
        // 1. 这个window在调用的时候可以省略
        // 2. 这个延时时间单位是毫秒 但是可以省略，如果省略默认的是0
        // 3. 这个调用函数可以直接写函数 还可以写 函数名 还有一个写法 '函数名()'
        // 4. 页面中可能有很多的定时器，我们经常给定时器加标识符 （名字)
        // setTimeout(function() {
        //     console.log('时间到了');

        // }, 2000);
        function callback() {
            console.log('爆炸了');

        }
        var timer1 = setTimeout(callback, 3000);
        var timer2 = setTimeout(callback, 5000);
        // setTimeout('callback()', 3000); // 我们不提倡这个写法
    </script>
</body>

</html>
3.1 案例：5s中自动关闭广告

核心思路：5s后将其隐藏起来

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

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

<body>
    <img src="images/ad.jpg" alt="" class="ad">
    <script>
        var ad = document.querySelector('.ad');
        setTimeout(function () {
            ad.style.display = 'none';
        }, 5000);
    </script>
</body>

</html>
3.2 停止setTimeout() 定时器

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

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

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

<body>
    <button>点击停止定时器</button>
    <script>
        var btn = document.querySelector('button');
        var timer = setTimeout(function () {
            console.log('爆炸了');

        }, 5000);
        btn.addEventListener('click', function () {
            clearTimeout(timer);
        })
    </script>
</body>

</html>
3.3 setInterval() 定时器

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

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

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

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

<body>
    <script>
        // 1. setInterval 
        // 语法规范：  window.setInterval(调用函数, 延时时间);
        setInterval(function () {
            console.log('继续输出');

        }, 1000);
        // 2. setTimeout  延时时间到了，就去调用这个回调函数，只调用一次 就结束了这个定时器
        // 3. setInterval  每隔这个延时时间，就去调用这个回调函数，会调用很多次，重复调用这个函数
    </script>
</body>

</html>
3.4 案例：实现京东定时器效果
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            margin: 200px;
        }

        span {
            display: inline-block;
            width: 40px;
            height: 40px;
            background-color: #333;
            font-size: 20px;
            color: #fff;
            text-align: center;
            line-height: 40px;
        }
    </style>
</head>

<body>
    <div>
        <span class="hour">1</span>
        <span class="minute">2</span>
        <span class="second">3</span>
    </div>
    <script>
        // 1. 获取元素 
        var hour = document.querySelector('.hour'); // 小时的黑色盒子
        var minute = document.querySelector('.minute'); // 分钟的黑色盒子
        var second = document.querySelector('.second'); // 秒数的黑色盒子
        var inputTime = +new Date('2021-12-2 22:00:00'); // 返回的是用户输入时间总的毫秒数
        countDown(); // 我们先调用一次这个函数，防止第一次刷新页面有空白 
        // 2. 开启定时器
        setInterval(countDown, 1000);

        function countDown() {
            var nowTime = +new Date(); // 返回的是当前时间总的毫秒数
            var times = (inputTime - nowTime) / 1000; // times是剩余时间总的秒数 
            var h = parseInt(times / 60 / 60 % 24); //时
            h = h < 10 ? '0' + h : h;
            hour.innerHTML = h; // 把剩余的小时给 小时黑色盒子
            var m = parseInt(times / 60 % 60); // 分
            m = m < 10 ? '0' + m : m;
            minute.innerHTML = m;
            var s = parseInt(times % 60); // 当前的秒
            s = s < 10 ? '0' + s : s;
            second.innerHTML = s;
        }
    </script>
</body>

</html
3.5 清除 clearInterval 定时器

一个开始定时器按钮 setInterval()

一个结束定时器按钮 clearInterval()

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

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

<body>
    <button class="begin">开启定时器</button>
    <button class="stop">停止定时器</button>
    <script>
        var begin = document.querySelector('.begin');
        var stop = document.querySelector('.stop');
        var timer = null; // 全局变量  null是一个空对象
        begin.addEventListener('click', function () {
            timer = setInterval(function () {
                console.log('ni hao ma');
            }, 1000);
        })
        stop.addEventListener('click', function () {
            clearInterval(timer);
        })
    </script>
</body>

</html>
3.6 案例：发送短信

点击按钮后，该按钮60秒之内不能再次点击，防止重复发送短信

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

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

<body>
    手机号码： <input type="number"> <button>发送</button>
    <script>
        // 按钮点击之后，会禁用 disabled 为true 
        // 同时按钮里面的内容会变化， 注意 button 里面的内容通过 innerHTML修改
        // 里面秒数是有变化的，因此需要用到定时器
        // 定义一个变量，在定时器里面，不断递减
        // 如果变量为0 说明到了时间，我们需要停止定时器，并且复原按钮初始状态
        var btn = document.querySelector('button');
        var time = 3; // 定义剩下的秒数
        btn.addEventListener('click', function () {
            btn.disabled = true;
            var timer = setInterval(function () {
                if (time == 0) {
                    // 清除定时器和复原按钮
                    clearInterval(timer);
                    btn.disabled = false;
                    btn.innerHTML = '发送';
                } else {
                    btn.innerHTML = '还剩下' + time + '秒';
                    time--;
                }
            }, 1000);
        })
    </script>
</body>

</html>
4.this 的指向问题
<!DOCTYPE html>
<html lang="en">

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

<body>
    <button>点击</button>
    <script>
        // this 指向问题 一般情况下this的最终指向的是那个调用它的对象

        // 1. 全局作用域或者普通函数中this指向全局对象window（ 注意定时器里面的this指向window）
        console.log(this);
        function fn() {
            console.log(this);
        }
        window.fn();
        window.setTimeout(function () {
            console.log(this);
        }, 1000);
        
        // 2. 方法调用中谁调用this指向谁
        var o = {
            sayHi: function () {
                console.log(this); // this指向的是 o 这个对象
            }
        }
        o.sayHi();
        var btn = document.querySelector('button');
        // btn.onclick = function() {
        //     console.log(this); // this指向的是btn这个按钮对象
        // }
        btn.addEventListener('click', function () {
            console.log(this); // this指向的是btn这个按钮对象
        })
        
        // 3. 构造函数中this指向构造函数的实例
        function Fun() {
            console.log(this); // this 指向的是fun 实例对象
        }
        var fun = new Fun();
    </script>
</body>

</html>
5.JS 执行机制

JS 是单线程，同一时间只能做一件事。JavaScript是为了处理页面中用户的交互，以及操作DOM而产生的。

单线程就意味着，所有任务都需要排队，前一个任务结束，才会执行后一个任务。这样导致的问题就是：如果JS执行时间过长，这样就会造成页面渲染不连贯，导致页面渲染加载阻塞的感觉。

为了解决这个问题，利用多核CPU的计算能力，HTML5提出Web Worker 标准，允许JavaScript脚本创建多个线程，于是出现了同步和异步。

5.1同步任务

同步任务都在主线程上执行，形成一个执行栈

5.2异步任务

JS 的异步是通过回调函数实现的

一般而言，异步任务有以下三种类型：

1.普通事件，如click、resize等

2.资源加载，如load、error等

3.定时器，包括setInterval、setTimeout等

异步任务相关的回调函数添加到任务队列中（任务队列也称为消息队列）

5.3执行机制

1、先执行执行栈中的同步任务

2、异步任务（回调函数）放入任务队列中

3、一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行。

例如：主车道（同步任务）和应急车道（异步任务）

5.4事件循环

由于主线程不断的重复获得任务、执行任务、在获取任务、再执行任务，所以这种机制叫做事件循环（event loop）

（三）其他对象
1.location 对象

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

2.location 对象的方法
location 对象的方法返回值
location.assign()跟 href 一样可以跳转页面（也称为重定向页面）
location.replace()替换当前页面，因为不记录历史，所以不能后退 页面
location.reload()重新加载页面，相当于刷新按钮或者F5，如果参数为true，强制刷新crtl + F5
2.1 案例：获取 URL 参数数据

index.html

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

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

<body>
    <div></div>
    <script>
        console.log(location.search); // ?uname=andy
        // 1.先去掉？  substr('起始的位置'，截取几个字符);
        var params = location.search.substr(1); // uname=andy
        console.log(params);
        // 2. 利用=把字符串分割为数组 split('=');
        var arr = params.split('=');
        console.log(arr); // ["uname", "ANDY"]
        var div = document.querySelector('div');
        // 3.把数据写入div中
        div.innerHTML = arr[1] + '欢迎您';
    </script>
</body>

</html>

login.html

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

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

<body>
    <form action="index.html">
        用户名： <input type="text" name="uname">
        <input type="submit" value="登录">
    </form>
</body>

</html>
3.navigator 对象

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

4. history 对象

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

history对象方法作用
back（）可以后退功能
forward（）前进功能
go（参数）前进后退功能 参数如果是1 前进一个页面；是-1则后退一个页面
（四）PC端网页特效
1.元素偏移量 offset 系列
1.1 概述

offset 翻译过来就是偏移量，我们使用offect系列相关属性可以动态地得到该元素的位置（偏移）、大小等。

可以获得元素距离带有定位父元素的位置

获得元素自身的大小（宽度高度）

注意：返回的数值都不带单位

offset 系列属性作用
element.offsetTop返回元素相对带有定位父元素上方的偏移
element.offsetLeft返回元素相对带有定位父元素左边框的偏移
element.offsetWidth返回自身包括padding、边框、内容区的宽度，返回值不带单位
element.offsetHeight返回自身包括padding、边框、内容区的高度，返回值不带单位
element.offsetParent返回作为该元素带有定位的父级元素，如果父级都没有定位，则返回body
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .father {
            /* position: relative; */
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 150px;
        }

        .son {
            width: 100px;
            height: 100px;
            background-color: purple;
            margin-left: 45px;
        }

        .w {
            height: 200px;
            background-color: skyblue;
            margin: 0 auto 200px;
            padding: 10px;
            border: 15px solid red;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <div class="w"></div>
    <script>
        // offset 系列
        var father = document.querySelector('.father');
        var son = document.querySelector('.son');
        // 1.可以得到元素的偏移 位置 返回的不带单位的数值  
        console.log(father.offsetTop);
        console.log(father.offsetLeft);
        // 它以带有定位的父亲为准  如果么有父亲或者父亲没有定位 则以 body 为准
        console.log(son.offsetLeft);
        var w = document.querySelector('.w');
        // 2.可以得到元素的大小 宽度和高度 是包含padding + border + width 
        console.log(w.offsetWidth);
        console.log(w.offsetHeight);
        // 3. 返回带有定位的父亲 否则返回的是body
        console.log(son.offsetParent); // 返回带有定位的父亲 否则返回的是body
        console.log(son.parentNode); // 返回父亲 是最近一级的父亲 亲爸爸 不管父亲有没有定位
    </script>
</body>

</html>
1.2 offset 与 style 的区别

如果我们想要获取元素大小位置，用 offset 更合适

如果我们想要给元素更改值，则需要用 style 改变

案例：获取鼠标在盒子内的坐标

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box {
            width: 300px;
            height: 300px;
            background-color: pink;
            margin: 200px;
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <script>
        // 我们在盒子内点击， 想要得到鼠标距离盒子左右的距离。
        // 首先得到鼠标在页面中的坐标（ e.pageX, e.pageY）
        // 其次得到盒子在页面中的距离(box.offsetLeft, box.offsetTop)
        // 用鼠标距离页面的坐标减去盒子在页面中的距离， 得到 鼠标在盒子内的坐标
        var box = document.querySelector('.box');
        box.addEventListener('mousemove', function (e) {
            // console.log(e.pageX);
            // console.log(e.pageY);
            // console.log(box.offsetLeft);
            var x = e.pageX - this.offsetLeft;
            var y = e.pageY - this.offsetTop;
            this.innerHTML = 'x坐标是' + x + ' y坐标是' + y;
        })
    </script>
</body>

</html>
1.3 案例：拖动模态框

鼠标按下，我们要得到鼠标在盒子的坐标

鼠标移动，就要让模态框的坐标设置为：鼠标坐标 减去 盒子坐标 ，注意移动事件写到按下事件里面

鼠标松开，就停止拖拽，就是可以让鼠标移动事件解除。

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .login-header {
            width: 100%;
            text-align: center;
            height: 30px;
            font-size: 24px;
            line-height: 30px;
        }

      * {
            padding: 0px;
            margin: 0px;
        }

        .login {
            display: none;
            width: 512px;
            height: 280px;
            position: fixed;
            border: #ebebeb solid 1px;
            left: 50%;
            top: 50%;
            background: #ffffff;
            box-shadow: 0px 0px 20px #ddd;
            z-index: 9999;
            transform: translate(-50%, -50%);
        }

        .login-title {
            width: 100%;
            margin: 10px 0px 0px 0px;
            text-align: center;
            line-height: 40px;
            height: 40px;
            font-size: 18px;
            position: relative;
            cursor: move;
        }

        .login-input-content {
            margin-top: 20px;
        }

        .login-button {
            width: 50%;
            margin: 30px auto 0px auto;
            line-height: 40px;
            font-size: 14px;
            border: #ebebeb 1px solid;
            text-align: center;
        }

        .login-bg {
            display: none;
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0px;
            left: 0px;
            background: rgba(0, 0, 0, .3);
        }

        a {
            text-decoration: none;
            color: #000000;
        }

        .login-button a {
            display: block;
        }

        .login-input input.list-input {
            float: left;
            line-height: 35px;
            height: 35px;
            width: 350px;
            border: #ebebeb 1px solid;
            text-indent: 5px;
        }

        .login-input {
            overflow: hidden;
            margin: 0px 0px 20px 0px;
        }

        .login-input label {
            float: left;
            width: 90px;
            padding-right: 10px;
            text-align: right;
            line-height: 35px;
            height: 35px;
            font-size: 14px;
        }

        .login-title span {
            position: absolute;
            font-size: 12px;
            right: -20px;
            top: -30px;
            background: #ffffff;
            border: #ebebeb solid 1px;
            width: 40px;
            height: 40px;
            border-radius: 20px;
        }
    </style>
</head>

<body>
    <div class="login-header"><a id="link" href="javascript:;">点击，弹出登录框</a></div>
    <div id="login" class="login">
        <div id="title" class="login-title">登录会员
            <span><a id="closeBtn" href="javascript:void(0);" class="close-login">关闭</a></span>
        </div>
        <div class="login-input-content">
            <div class="login-input">
                <label>用户名：</label>
                <input type="text" placeholder="请输入用户名" name="info[username]" id="username" class="list-input">
            </div>
            <div class="login-input">
                <label>登录密码：</label>
                <input type="password" placeholder="请输入登录密码" name="info[password]" id="password" class="list-input">
            </div>
        </div>
        <div id="loginBtn" class="login-button"><a href="javascript:void(0);" id="login-button-submit">登录会员</a></div>
    </div>
    <!-- 遮盖层 -->
    <div id="bg" class="login-bg"></div>
    <script>
        // 1. 获取元素
        var login = document.querySelector('.login');
        var mask = document.querySelector('.login-bg');
        var link = document.querySelector('#link');
        var closeBtn = document.querySelector('#closeBtn');
        var title = document.querySelector('#title');
        // 2. 点击弹出层这个链接 link  让mask 和login 显示出来
        link.addEventListener('click', function () {
            mask.style.display = 'block';
            login.style.display = 'block';
        })
        // 3. 点击 closeBtn 就隐藏 mask 和 login 
        closeBtn.addEventListener('click', function () {
            mask.style.display = 'none';
            login.style.display = 'none';
        })
        // 4. 开始拖拽
        // (1) 当我们鼠标按下， 就获得鼠标在盒子内的坐标
        title.addEventListener('mousedown', function (e) {
            var x = e.pageX - login.offsetLeft;
            var y = e.pageY - login.offsetTop;
            // (2) 鼠标移动的时候，把鼠标在页面中的坐标，减去 鼠标在盒子内的坐标就是模态框的left和top值
            document.addEventListener('mousemove', move)

            function move(e) {
                login.style.left = e.pageX - x + 'px';
                login.style.top = e.pageY - y + 'px';
            }
            // (3) 鼠标弹起，就让鼠标移动事件移除
            document.addEventListener('mouseup', function () {
                document.removeEventListener('mousemove', move);
            })
        })
    </script>
</body>

</html>
1.4案例：仿京东放大镜效果

黄色的遮挡层跟随鼠标功能

把鼠标坐标给遮挡层不合适，因为遮挡层坐标以父盒子为准

见下一章

2.client 系列

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

client 系列属性作用
element.clientTop返回元素上边框的大小
element.clientLeft返回元素左边框的大小
element.clientWidth返回自身包括padding、内容区的宽度，不包含边框，返回数值不带单位
element.clientHeight返回自身包括padding、内容区的高度，不包含边框，返回数值不带单位

clientWidrh 与 offsetWidth 最大的区别就是：不包含边框

3. 立即执行函数

即不需要调用，立马能够自己执行的函数

写法：

1.(function() {})() 第二个小括号可以看做是调用函数，也可以传递参数进来

2.(function() {}());

立即执行函数最大的作用就是：独立创建了作用域

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

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

<body>
    <script>
        // 1.立即执行函数: 不需要调用，立马能够自己执行的函数
        function fn() {
            console.log(1);

        }
        fn();
        // 2. 写法 也可以传递参数进来
        // 1.(function() {})()    或者  2. (function(){}());
        (function (a, b) {
            console.log(a + b);
            var num = 10;
        })(1, 2); // 第二个小括号可以看做是调用函数
        (function sum(a, b) {
            console.log(a + b);
            var num = 10; // 局部变量
        }(2, 3));
        // 3. 立即执行函数最大的作用就是 独立创建了一个作用域, 里面所有的变量都是局部变量 不会有命名冲突的情况
    </script>
</body>

</html>

move’, move);
})
})

~~~
1.4案例：仿京东放大镜效果

黄色的遮挡层跟随鼠标功能

把鼠标坐标给遮挡层不合适，因为遮挡层坐标以父盒子为准

见下一章

2.client 系列

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

client 系列属性作用
element.clientTop返回元素上边框的大小
element.clientLeft返回元素左边框的大小
element.clientWidth返回自身包括padding、内容区的宽度，不包含边框，返回数值不带单位
element.clientHeight返回自身包括padding、内容区的高度，不包含边框，返回数值不带单位

clientWidrh 与 offsetWidth 最大的区别就是：不包含边框

3. 立即执行函数

即不需要调用，立马能够自己执行的函数

写法：

1.(function() {})() 第二个小括号可以看做是调用函数，也可以传递参数进来

2.(function() {}());

立即执行函数最大的作用就是：独立创建了作用域

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

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

<body>
    <script>
        // 1.立即执行函数: 不需要调用，立马能够自己执行的函数
        function fn() {
            console.log(1);

        }
        fn();
        // 2. 写法 也可以传递参数进来
        // 1.(function() {})()    或者  2. (function(){}());
        (function (a, b) {
            console.log(a + b);
            var num = 10;
        })(1, 2); // 第二个小括号可以看做是调用函数
        (function sum(a, b) {
            console.log(a + b);
            var num = 10; // 局部变量
        }(2, 3));
        // 3. 立即执行函数最大的作用就是 独立创建了一个作用域, 里面所有的变量都是局部变量 不会有命名冲突的情况
    </script>
</body>

</html>
嘿，程序猿
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
javascript基础&实战
du_ai_me的博客
01-02 826
javascript基础，适合所有初学者用来学习。
Web基础之JavaScript实战
BlueSky_USC的博客
04-18 1261
Web基础之JavaScript实战 一、JavaScript基本概念： 1.JS的执行环境 宿主环境：客户端的JS代码的执行需要宿主环境，一般来说，客户端的浏览器就是JS的宿主环境 解析器：JS代码的执行需要一个解析器来解析JS代码，即JS是一种解释性语言，没有编译，运行时由解析器负责解释运行，现在的主流浏览器一般多带有解析器 IE浏览器 V8版本后都支持JS；
JS项目实战
weixin_73696461的博客
02-06 986
主要由导航栏和产品轮播图构成，多数操作是由bootscript的插件构成，后进行修改，导航栏不同区域对应不同的网站跳转。这是第一次做的较为完整的页面，体量较大，在获取数据和将数据渲染至网页中，极其容易导致文本错乱。需要极规整的思路和部署，更主要的是需要大量练习，来强化思维和技能。
Web前端：JavaScript最强总结 附详细代码 （带常用案例！）_javascript在前端的应用
最新发布
2401_84413180的博客
05-09 494
自定义函数语法使用function关键字定义函数function 自定义函数名称(参数列表){//函数体自定义函数实例注意:1、函数的形参直接写参数名称，不需要声明类型，即不需要写var.2、函数的返回取决于函数体中是否有return关键字。对象也是一个变量，但对象可以包含多个值(多个变量)对象中可以有属性，也可以有方法。
【JavaScript】JS基础&实战 | JS入门到精通全套完整版的学习笔记
qiqizgl777的博客
02-06 672
免费分享 老尚JS基础&实战|JS入门到精通全套完整版的详细学习笔记
js简单项目实战
ZHONGERMAOMAO的博客
11-13 342
使用 HTMLCollection对象的 length属性获取子元素的数量，然后使用序列号(index，起始值为0)访问每个子元素。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。classList 属性是只读的，但你可以使用 add() 和 remove() 方法修改它。children 属性返回元素的子元素的集合，是一个 HTMLCollection 对象。
JavaScript实战
07-22
资源名称：JavaScript实战内容简介：本书是一部讲述 Javaｓｃｒｉｐｔ实战项目开发的精彩著作，由两部分组成。第一部分讨论一般性的 Javaｓｃｒｉｐｔ主题，包括 Javaｓｃｒｉｐｔ的简史、好的编码习惯、调试技巧和...
JavaScript实战项目之飞机大战
12-12
在本项目"JavaScript实战项目之飞机大战"中，我们将探讨如何使用JavaScript这门客户端脚本语言来构建一个互动的游戏。JavaScript通常用于网页交互，而在这个案例中，它被用来实现了一个经典的游戏——飞机大战。通过...
Javascript特效实战
07-22
资源名称：Javascript特效实战资源截图： 资源太大，传百度网盘了，链接在附件中，有需要的同学自取。
javascript实战+源码
11-08
《JavaScript实战》是一部讲述 JavaScript实战项目开发的精彩著作，由两部分组成。第一部分讨论一般性的 JavaScript主题，包括 JavaScript的简史、好的编码习惯、调试技巧和工具等；第二部分是 10个具体项目，每一章...
测试驱动JavaScript开发实战
03-02
TDD是一个迭代开发的过程，...理想状态，代码遵照一些完整的架构设计思考，尽管在很多情况下，可能不是这种情况，特别在JavaScript的世界。这种编程风格通过猜测需要什么代码解决问题来解决问题，这种策略很容易导致臃
JavaScript实战.pdf 中文完整版
04-23
JavaScript实战是一部讲述 JavaScript实战项目开发的精彩著作
JavaScript高级教程(javascript实战进阶)
m0_47743942的博客
05-31 1133
对JS高级部分进行详细讲解包括：数据类型、引用变量赋值问题、对象和函数、函数原型与原型链（对经典面试题详细说明和总结）、执行上下文和执行上下文栈、作用域、闭包、线程与事件循环
【JavaScript】实战训练小项目-WebAPI
Carefree_State的博客
05-21 3117
本文章是结合之前的知识，学习jQuery框架，和一些其中的API，实现一些互动性强的小项目！
Vue.js前端开发实战(一)
Alphamilk的博客
07-22 1073
本章讲述Vue的几个基本配置选项
Three.js实战项目 商场漫游
qq_39503511的博客
03-14 5231
Three.js 商场漫游demo概述创建场景创建天空创建水面创建模型室内漫游 概述 开发了一个Three.js 商场漫游demo，先看视频效果 创建场景 创建渲染器，灯光，相机，控制器和以前的智慧城市项目一样，从那边照抄过来即可，调用方式如下 app = new ZThree("screen"); app.initThree(); // app.initHelper(); app.initOrbitControls(); light = app.ini
【万字解析】JS逆向由浅到深，3个案例由简到难，由练手到项目解析（代码都附详细注释）
热门推荐
五包辣条的博客
07-12 1万+
假设有一个网站，它使用了JavaScript来进行表单验证。当用户在登录表单中输入用户名和密码后，点击登录按钮时，JavaScript代码会对输入的用户名和密码进行验证，如果验证通过，则允许用户登录，否则会提示错误信息。
小黑子——JS项目案例实战简单管理系统
VanWot的博客
02-06 459
JS项目案例实战简单管理系统
JS实战练习
qq_59494319的博客
06-23 514
JS实战练习 每点击一下使方块的宽度增加，当增加到一定宽度时再点击会减少，并储存在本地数据库中
JavaScript实战：编程与资源大全
"《JavaScript实战》是一份针对计算机专业技术人员的全面学习资源集合，主要聚焦在JavaScript编程语言上。该资源提供了一系列深入浅出的实战教程，适合希望通过实践提升JavaScript技能的学习者。其中包括了...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值