JavaScript进阶学习(Web APIs)

一、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、付费专栏及课程。

余额充值