JavaScript进阶学习（Web APIs）

于 2022-07-24 14:20:45 发布
阅读量251 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： JavaScript 文章标签： javascript 前端 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/NJJML/article/details/125137094

一、DOM

在这里插入图片描述
在这里插入图片描述

1.获取元素

（一）根据ID获取，getElementById('id')

在这里插入图片描述

（二）根据标签名获取，getElementsByTagName('li');

返回一个伪数组，若无元素，返回一个空伪数组
在这里插入图片描述
1.下面的情况未指定父元素，将获取页面中的所有li标签
在这里插入图片描述
2.指定父元素
在这里插入图片描述在这里插入图片描述

（三）获取元素

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

（四）获取特殊元素

在这里插入图片描述

2.事件

（一）执行步骤

在这里插入图片描述
案例
在这里插入图片描述

（二）常见鼠标事件

在这里插入图片描述

（三）操作元素

1.改变元素内容

方法
在这里插入图片描述
这两个方法也可以用来获取标签内容
在这里插入图片描述

两者的区别：
前者不识别HTML标签并去除HTML标签，
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

案例：

（1）获得系统时间

在这里插入图片描述
（2）不添加事件
先获取元素，后通过以下方式修改元素中的文本。
在这里插入图片描述
（3 ）添加事件
在这里插入图片描述

2.修改属性

案例：修改图片地址，以更改图片
在这里插入图片描述

3.修改表单文字内容

在这里插入图片描述
案例：密码框小眼睛
在这里插入图片描述
在这里插入图片描述

4.修改样式

在这里插入图片描述

案例：隐藏广告
        div {
            width: 300px;
            height: 300px;
            background-color: blue;
        }

    <div></div>
    <script>
        var div = document.querySelector('div');
        div.onclick = function() {
            this.style.backgroundColor = 'skyblue';
        }
    </script>
案例：循环精灵图

目标效果
在这里插入图片描述
实现，精灵图上一个个图标从上往下排列，如下
在这里插入图片描述
首先编写 ul > li*12 的样式，设置背景图片为精灵图，通过 js 修改不同 li 的 background-position。
在这里插入图片描述

案例：显示隐藏文本内容

在这里插入图片描述

通过修改类修改样式
        .one {
            width: 300px;
            height: 300px;
            background-color: blue;
        }
        
        .two {
            width: 300px;
            height: 300px;
            background-color: skyblue;
        }

    <div class="one"></div>
    <script>
        var one = document.querySelector('.one');
        one.onclick = function() {
            this.className = 'two';
        }
    </script>

div没有类名也可以用className添加类名。
可以添加多个类
this.className = 'one two';

案例：排他思想

在这里插入图片描述

在这里插入图片描述

案例：换肤效果

在这里插入图片描述
在这里插入图片描述

案例：表格隔行变色

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

案例：表单全选取消全选

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

5.获取属性值（不是样式）

（1）方法
在这里插入图片描述
在这里插入图片描述
（2）设置属性值
在这里插入图片描述
（3）移除属性
在这里插入图片描述
案例：
在这里插入图片描述
案例：tab栏切换
在这里插入图片描述
导航栏是一个模块，下面有5个div，初始时只有第一个div是display:block，其他div都是display:none。通过js使用排他思想修改display属性的值实现tab切换，用setAttribute给div设置一个索引号index，以使div和导航栏按键一一对应。

6.自定义属性

在这里插入图片描述
获取自定义属性
在这里插入图片描述

7.节点操作

（1）概述
在这里插入图片描述

（2）父节点parentNode

在这里插入图片描述
（3）子节点 childNodes
获取所有子节点，包括文本结点。
在这里插入图片描述

（4）子节点 children

1.获取所有元素子节点，实际开发中常用。
实际开发中获取第一个子节点和最后一个子节点的方法：
在这里插入图片描述
案例：下拉菜单
在这里插入图片描述

在这里插入图片描述

2.firstChild，lastChild
获取第一个和最后一个结点，包括文本结点。
3.firstElementChild，lastElementChild
获取第一个和最后一个元素子节点，找不到则返回null。
IE9以上支持。

（5）兄弟节点

1.下一个兄弟节点
在这里插入图片描述
在这里插入图片描述

（6）创建节点

在这里插入图片描述

三种创建节点方式比较：

在这里插入图片描述
创建之后要添加节点。
在这里插入图片描述
节点以追加的方式添加，在其他子元素的末尾
在这里插入图片描述

案例
在这里插入图片描述

案例：简单版发布留言

在这里插入图片描述
在这里插入图片描述

（7）删除节点

在这里插入图片描述
案例：
在这里插入图片描述
在这里插入图片描述
案例：留言删除
在这里插入图片描述

在这里插入图片描述
else的部分修改如下。
在这里插入图片描述

（8）复制节点

在这里插入图片描述
在这里插入图片描述

案例：动态生成表格，添加删除操作

在这里插入图片描述

    <table cellspacing="0">
        <thead>
            <tr>
                <th>name</th>
                <th>subject</th>
                <th>grade</th>
                <th>option</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
    <script>
        var datas = [{
            name: '杰哥',
            subject: 'javascript',
            grade: 100
        }, {
            name: '杰哥2',
            subject: 'javascript',
            grade: 98
        }, {
            name: '杰哥3',
            subject: 'javascript',
            grade: 80
        }, {
            name: '杰哥4',
            subject: 'javascript',
            grade: 60
        }];
        var tbody = document.querySelector('tbody');
        for (var i = 0; i < datas.length; i++) {
            var tr = document.createElement('tr');
            tbody.appendChild(tr);
            for (var k in datas[i]) {
                var td = document.createElement('td');
                td.innerHTML = datas[i][k];
                tr.appendChild(td);
            }
            var td = document.createElement('td');
            td.innerHTML = '<a herf="javascript:;">删除</a>';
            tr.appendChild(td);
        }
        //删除操作
        var as = document.querySelectorAll('a');
        for (var i = 0; i < as.length; i++) {
            as[i].onclick = function() {
                tbody.removeChild(this.parentNode.parentNode);
            }
        }
    </script>

3.阻止链接跳转

把链接设置为<a herf="javascript:;"></a>

4.事件高级

（一）注册事件

1.方法监听注册方式

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2.注册方式的区别

在这里插入图片描述

3.兼容性封装函数注册

一般用方法监听注册方式就可以。老版本用传统方式。
在这里插入图片描述

4.删除事件

在这里插入图片描述

应用：使事件只能进行一次。
传统方式：
在这里插入图片描述
方法监听注册方式：
在这里插入图片描述
在这里插入图片描述

（二）DOM事件流

1.概念

在这里插入图片描述
在这里插入图片描述
addEventListener 第三个参数为 false 时冒泡。

2.事件对象

function里添加参数event会自动生成。
在这里插入图片描述

3.事件对象的属性和方法

在这里插入图片描述

（1）e.target，e.currentTarget 和 this

e.target返回的是触发事件的对象。
this总是返回事件绑定的对象。
e.currentTarget和this相同。
例：
在这里插入图片描述
在这里插入图片描述

（2）阻止冒泡。e.stopPropagation()方法

以下页面点击son后由于冒泡，father和document的事件都会触发，顺序是son-》father-》document
在这里插入图片描述
使用方法
在这里插入图片描述

（3）事件委托

在这里插入图片描述
案例：
在这里插入图片描述
在这里插入图片描述

（4）禁用右键菜单

禁止复制文本，右键不弹出菜单。
ctrl + c 仍然可以复制。
在这里插入图片描述

（5）禁止选中文本

从而禁止复制。
然而F12键还是可以复制。
在这里插入图片描述

4.鼠标事件对象

在这里插入图片描述

（1）鼠标移动事件mousemove

在这里插入图片描述

<body>
    <img src="吸烟.gif" alt="">
    <script>
        var pic = document.querySelector('img');
        document.addEventListener('mousemove', function(e) {
            var x = e.pageX;
            var y = e.pageY;
            console.log(x + ',' + y);
            pic.style.left = x + 'px';
            pic.style.top = y + 'px';
        });
    </script>
</body>
5.键盘事件

用addEventListener，不能加on。
在这里插入图片描述

<script>
        document.onkeyup = function() {
            console.log('up');
        }
        document.onkeydown = function() {
            console.log('down');
        }
        document.onkeypress = function() {
            console.log('press');
        }
    </script>
6.键盘事件对象

（1）e.keycode
可以得到按键的ASCII码。可以用来判断按下的键是哪个。
在这里插入图片描述

案例：按键，搜索框获得焦点

京东用了这种方式。
在这里插入图片描述

案例：京东物流查询

在这里插入图片描述
在这里插入图片描述

实现：
在这里插入图片描述
在这里插入图片描述
添加如下功能：
在这里插入图片描述

二、BOM

在这里插入图片描述
在这里插入图片描述

1.window对象

在这里插入图片描述

（一）window对象的常见事件

（1）窗口加载事件

在这里插入图片描述

可以将JavaScript放在任何地方，而不必一定要放在后面。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

（2）调整窗口大小事件

在这里插入图片描述

案例：页面缩小隐藏div

在这里插入图片描述

（3）定时器

两种定时器，一种执行一次，一种间隔执行无数次。
第一种：
在这里插入图片描述
应用
在这里插入图片描述
在这里插入图片描述

案例：定时关闭广告

在这里插入图片描述
在这里插入图片描述

停止定时器

在这里插入图片描述
应用
在这里插入图片描述
第二种：
在这里插入图片描述
应用：
在这里插入图片描述
停止setInterval定时器：
clearInterval。
在这里插入图片描述

案例：倒计时

在这里插入图片描述
在这里插入图片描述

案例：手机验证码倒计时

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

（4）this的指向

this 的指向可以修改。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

（5）js执行机制

在这里插入图片描述
在这里插入图片描述
案例：
以下代码先打印1、2再打印3.
在这里插入图片描述
案例：以下代码打印顺序为1、2、3。
在这里插入图片描述
原理如下
在这里插入图片描述
先执行执行栈中的同步任务。
回调函数被交给异步进程处理，满足触发条件（点击、时间到等）时添加到异步队列中。
执行完同步任务后，再将异步队列中的任务添加到执行栈，执行异步任务。
异步队列会被反复检查，事件循环。
在这里插入图片描述

2.location对象

在这里插入图片描述

（一）location的属性

在这里插入图片描述

案例：自动跳转页面

在这里插入图片描述

案例：数据在不同页面交互

Untitled页面

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

    <script>
    </script>
</body>

index页面

<body>
    <script>
        // console.log(location.search);
        var params = location.search.substr(1);
        var arr = params.split('=');
        console.log(arr[1]);
    </script>
</body>

在这里插入图片描述
在这里插入图片描述

（1）location对象的方法

在这里插入图片描述
应用：
在这里插入图片描述

3.navigator对象

在这里插入图片描述

4.history对象

在这里插入图片描述
应用：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

三、网页特效

1.元素偏移量offset

父元素无定位则返回的是相对body的。
在这里插入图片描述
在这里插入图片描述

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

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

案例：模态框拖拽

在这里插入图片描述
在这里插入图片描述

案例：仿京东放大镜效果

2.元素可视区client

在这里插入图片描述

pageshow事件

在这里插入图片描述
在这里插入图片描述

3.立即执行函数

在这里插入图片描述
在这里插入图片描述

4.元素滚动scroll

在这里插入图片描述
兼容：
在这里插入图片描述

应用：
在这里插入图片描述

在这里插入图片描述

案例：仿淘宝固定侧边栏

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

5.mouseenter和mouseover的区别

在这里插入图片描述

6.动画函数封装

案例：移动盒子

在这里插入图片描述
点击按钮移动盒子：
bug：一直点击按钮盒子速度会越来越快，原因和解决方法如下。
在这里插入图片描述
在这里插入图片描述

缓动动画

在这里插入图片描述
代码实现：
有bug，可能走不到目的地，因为步长可能是小数。解决方法是向上取整 Math.ceil()
在这里插入图片描述
在不同位置往返移动：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

动画函数添加回调函数

在这里插入图片描述
将函数作为参数，在定时器后调用函数
在这里插入图片描述
在这里插入图片描述
在传参时加入（定义）函数
在这里插入图片描述

function animate(obj, target, callback) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function() {
        var step = (target - obj.offsetLeft) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        if (obj.offsetLeft == target) {
            clearInterval(obj.timer);
            if (callback) {
                callback();
            }
        }
        obj.style.left = obj.offsetLeft + step + 'px';
    }, 15);
}

7.常见网页特效

（1）轮播图

效果
在这里插入图片描述

在这里插入图片描述

html

<body>
    <div class="tb-promo">
        <!-- 按钮 -->
        <a href="javascript:;" class="prev">
            &lt;</a>
        <a href="javascript:;" class="next">></a>
        <!-- 轮播图图片 -->
        <ul class="focus">
            <li>
                <a href="javascript:;"><img src="images/tudou.jpg" alt=""></a>
            </li>
            <li>
                <a href="javascript:;"><img src="images/img.jpg" alt=""></a>
            </li>
            <li>
                <a href="javascript:;"><img src="images/pig.jpg" alt=""></a>
            </li>
            <li>
                <a href="javascript:;"><img src="images/tb.jpg" alt=""></a>
            </li>
        </ul>
        <!-- 小圆圈 -->
        <ul class="promo-nav">

        </ul>
    </div>
</body>

window.addEventListener('load', function() {
    // 1.获取元素
    var prev = this.document.querySelector('.prev');
    var next = this.document.querySelector('.next');
    var focus = this.document.querySelector('.tb-promo');
    // 按键显示和隐藏
    focus.addEventListener('mouseenter', function() {
        prev.style.display = 'block';
        next.style.display = 'block';
        clearInterval(timer);
        timer = null;
    });
    focus.addEventListener('mouseleave', function() {
        prev.style.display = 'none';
        next.style.display = 'none';
        timer = setInterval(function() {
            next.click();
        }, 2000);
    });
    // 动态生成小圆圈
    var ul = this.document.querySelector('.focus');
    var ul2 = this.document.querySelector('.promo-nav');
    var focusWidth = focus.offsetWidth;
    var index = 0;

    for (var i = 0; i < ul.children.length; i++) {
        var li = this.document.createElement('li');
        // 给小圆圈一个索引号
        li.setAttribute('index', i);
        ul2.appendChild(li);
        // 小li的排他思想
        li.addEventListener('click', function() {
            for (var i = 0; i < ul2.children.length; i++) {
                ul2.children[i].className = '';
            }
            this.className = 'current';
            // 点击小圆圈，移动图片

            console.log(focusWidth);
            index = this.getAttribute('index');
            num = index;
            circle = index;
            animate(ul, -index * focusWidth);
        });
    }
    // 把第一个小li设置为橙色
    ul2.children[0].className = 'current';
    // 克隆第一张图片放到最后
    var first = ul.children[0].cloneNode(true);
    ul.appendChild(first);
    var num = 0;
    var circle = 0;
    // 点击右侧按钮，滑动图片
    next.addEventListener('click', function() {
        // 无缝滚动
        if (num == ul.children.length - 1) {
            ul.style.left = 0;
            num = 0;
        }
        num++;
        animate(ul, -num * focusWidth);
        // 小圆圈跟随变化
        circle++;
        if (circle == ul2.children.length) {
            circle = 0;
        }
        for (var i = 0; i < ul2.children.length; i++) {
            ul2.children[i].className = '';
        }
        ul2.children[circle].className = 'current';
    });
    prev.addEventListener('click', function() {
            // 无缝滚动
            if (num == 0) {
                ul.style.left = -(ul.children.length - 1) * focusWidth + 'px';
                num = ul.children.length - 1;
            }
            num--;
            animate(ul, -num * focusWidth);
            // 小圆圈跟随变化
            circle--;
            if (circle < 0) {
                circle = ul2.children.length - 1;
            }
            for (var i = 0; i < ul2.children.length; i++) {
                ul2.children[i].className = '';
            }
            ul2.children[circle].className = 'current';
        })
        //自动播放
    var timer = setInterval(function() {
        next.click();
    }, 2000);

})

1.节流阀

在这里插入图片描述

2.window.scroll(x,y)滚动到指定位置

x，y不用单位，为px

案例：返回顶部

	<style>
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            position: relative;
        }
        
        .first {
            background-color: blue;
            height: 200px;
            width: 80%;
        }
        
        .second {
            background-color: aqua;
            height: 300px;
            width: 80%;
        }
        
        .third {
            background-color: bisque;
            height: 600px;
            width: 80%;
        }
        
        .drive {
            position: fixed;
            top: 300px;
            left: 80%;
            width: 70px;
            height: 20px;
            background-color: cadetblue;
        }
    </style>
</head>

<body>
    <div class="first"></div>
    <div class="second"></div>
    <div class="third"></div>
    <div class="drive"><a href="javascript:;">返回顶部</a></div>
</body>
<script>
    function goBackTop(obj, target, callback) {
        clearInterval(obj.timer);
        obj.timer = setInterval(function() {
            var step = (target - window.pageYOffset) / 10;
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            if (window.pageYOffset == target) {
                clearInterval(obj.timer);
                if (callback) {
                    callback();
                }
            }
            // obj.style.left = obj.offsetLeft + step + 'px';
            window.scroll(0, window.pageYOffset + step);
        }, 15);
    };
    var drive = document.querySelector('.drive');
    drive.addEventListener('click', function() {
        goBackTop(window, 0);
    });
</script>

案例：筋斗云

在这里插入图片描述
在这里插入图片描述
布局：
在这里插入图片描述
效果：
先获取元素
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值