前端--阶段笔记（三） JS WebAPI 04 + 05 + 06 +07

最新推荐文章于 2024-03-04 09:55:48 发布

codeMoonkey

最新推荐文章于 2024-03-04 09:55:48 发布

阅读量2.3k

点赞数 1

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

本文链接：https://blog.csdn.net/codemokey/article/details/114382013

版权

这篇博客详细介绍了前端开发中JavaScript的WebAPI、BOM和DOM相关内容，包括键盘事件、页面加载机制、window对象、定时器、location对象、navigator对象、history对象以及网页特效，如京东淘宝案例动画原理，涉及到offset、client、scroll系列，还有移动端轮播图插件和本地存储技术的应用。

摘要由CSDN通过智能技术生成

Day 04 键盘事件 BOM js 执行机制

常见键盘事件

onkeyup，onkeydown，onkeypress

//先执行down 在执行press 最后按键弹起执行UP

document.addEventListener('keyup',function(){
   
console.log('我弹起了')；
})

//keypress 能识别功能键  按下的时候触发
document.addEventListener('keydown',function(){
   
console.log('我按下了down')；
})

//keypress 不识别功能键  按下的时候触发
document.addEventListener('keypress',function(){
   
console.log('我按下了press')；
})

keyup和keydown 不区分大小写，keypress区分。

document.addEventListener('keyup',function(e){
   
	console.log(e.keyCode);
    //可以使用keycode返回ASCII码值来判读啊用户按下那个按键
    if (e.keyCode === 65) {
    //注意 keyCode C大写
        alert('you press button a');
    }else {
   
         alert("it's not  button a");
    }
})

js中的focus

//按下s键 自动聚焦到搜索框 
var search = document.querySelector('input');
document.addEventListener('keyup',funciton(e){
   
if (e.keyCode === 83) {
   
    search.focus();
	}                          
})

快递单号案例

获取输入框内内容，this.value

keydown和keypress在文本框内的特点：他们两个都是在事件触发的时候，文字还没有落入文本框中。容易造成，文字少一个显示。

BOM浏览器对象模型

JS有三部分组成，ECMAscript ， dom ， bom。

BOM：Browser Object Model ，浏览器对象模型，提供了独立于内容而与浏览器窗口进行交互的对象，核心对象是windows。BOM由一系列对象组成，提供了很多方法与属性。

前进刷新，滑动条滚动，窗口缩放都算是BOM范畴。

DOM与BOM对比

DOM	BOM
文档对象模型	浏览器对象模型
DOM就是把文档当对象来看待	BOM吧整个窗口当对象来看待
顶级对象是document	顶级对象是windows
主要学习的是操作页面元素	浏览器窗口交互的一些对象
W3C标准规范	各个浏览器厂商自定义兼容性差

window双重角色

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

1.是js访问浏览器窗口的一个接口

2.是一个全局对象。定义在全局作用域中的变量函数都会变成windows对象的属性和方法。

页面加载事件

window.onload 是窗口（页面）加载事件。当文档内容完全加载

传统注册方式

window.onload = function () {
   

}

onload传统注册方法只能写一个，写多个以最后一个为准。

DOMContentLoaded 只需dom加载完成（标签加载完），不用包括样式图标图片等

document.addEventListener('DOMContentLoaded',function(){
   

})

调整窗口大小事件

window.onresize = function(){}

window.addEventListener(“resize”,function(){})

window.addEventListener('resize',function(){
console.log('changed');
})

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

2。经常利用这个事件完成响应式布局。window.innerWidth 获取当前屏幕宽度/获取当前页面宽度。

        window.addEventlistener('load', function () {
   
            var div = document.querySelector('div');
            window.addEventListener('resize', function () {
   
                consolo.log(window.innerWidth);

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

定时器setTimeout Interval

两个定时器
1.setTimeout

window.setTimeout(调用函数，[延迟毫秒数])
注意：
1。window在调用的时候可以省略

2。延时时间单位ms，可以省略，如果省略默认是0，立即执行

3。调用的函数被称为回调函数，可以直接写函数体，可以单独写一个函数，在这里面写函数名来调用，还可以写 ‘函数名()’

4。为了做以区分，经常给setTimeout加上标志符（名字），注意不是标志位。

  <script>
      function callback() {
   
            console.log('boom!');
        }

        var time1 = window.setTimeout(callback,3000);
        var time2 = setTimeout('callback()',5000);

    </script>

案例：5s后关闭一个模块

var ad = document.querySelector('.ad');//类为ad
setTimeout(function(){
   
ad.stytle.display = none;
},5000);

清除/停止定时器

window.clearTimeout(timeoutID)

        var btn = document.querySelector('button');
        var timer1 = setTimeout(function(){
   
                console.log('bottom!');
            },5000);

        btn.addEventListener('click',function(){
   
                clearTimeout(timer1);
            })

2.setInterval

window.setInerval(callback function,delayTime(ms));

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

clearInterval(function);

按钮隔时间案例

1禁用按钮 disabled = true
2改变button里面的文字用innerHTMl修改

        var btn = document.querySelector('botton');
        var time = 3;

        btn.addEventListener('click', function () {
   
            btn.disabled = true;

            //只能使用setInerval 不然无法重复循环
            var timer = setInterval(function () {
   
                if (time = 0) {
   
                    btn.disabled = false;
                    btn.innerHTML = 'click';
                    clearInterval(timer);
                    time = 3;
                } else {
   

                    btn.innerHTML = '还剩' + time + 's';
                    timer--;
                }

            })
        })

this指向问题

this 在写函数的时候无法确定，在调用的时候才可以确定，this指向被调用对象
1。全局作用域this指向window BOM

        console.log(this);

        function fn(){
   
            console.log(this);
        }
        window.fn();
        window.setTimeout(function () {
   
            console.log(this);
        }, 1000);

	//以上结果均为window

2。在方法中，指向调用，谁调用指向谁


        var o = {
   
            sayHi: function () {
   
                console.log(this);
            }
        }

        o.sayHi();

        var btn = document.querySelector('button');

        btn.onclick = function(){
   
            console.log(this);
        }

3。构造函数

指向新的函数

JS 执行机制

JS单线程语言，一次只做一件事。所有任务排队。

为了充分利用多核计算机能力，H5 提出web worker标准，允许js创建多线程，于是js中出现了同步和异步。

同步：上一个执行完才能执行下一个。

异步：在做一个事情的同时可以做其他事情，多任务多线程。

主线程执行栈会反复到任务队列里面查询是否有事件需要执行，称为事件循环。

location对象

window对象提供给一个location属性用于获取或者设置窗体的url，并可用于设置url。这个属性返回的是一个对象，故也成为location对象。

URL

URL ：uniform resourse location 统一资源定位符，互联网上标准资源地址。互联网上的每个文件都有一个唯一的url包含的信息指出文件位置以及浏览器该怎么处理它。

语法格式：

protocol :// hostname[:port] / path / [;parameters][?query]#fragment

组成	说明
protocol	通信协议常用的有http ftp maito 等
host	主机（域名）例如 www.baidu.com
port	端口号可省略生了时使用方案默认端口，如http默认80
path	路径由零或者多个’/’ 反斜杠隔开的字符串表示主机上的一个目录
query	参数以键值对的形式通过 & 来进行分隔
fragmaent	片段 # 后面内容常见于链接锚点

loaction对象属性

href是Hypertext Reference的缩写。意思是指定超链接目标的URL

hash	返回一个URL的锚部分
host	返回一个URL的主机名和端口
hostname	返回URL的主机名
href	返回完整的URL
pathname	返回的URL路径名。
port	返回一个URL服务器使用的端口号
protocol	返回一个URL协议
search	返回一个URL的查询部分

案例5秒后跳转新页面

 var btn = document.querySelector('button');
        var div = document.querySelector('div');
        btn.addEventListener('click', function() {
   
            // console.log(location.href);
            location.href = 'http://www.baidu.com';
        })
        var timer = 5;
        setInterval(function() {
   
            if (timer == 0) {
   
                location.href = 'http://www.baidu.com';
            } else {
   
                div.innerHTML = '您将在' + timer + '秒钟之后跳转到首页';
                timer--;
            }

        }, 1000);

案例获取URL参数

HTML:

	<form action="idnex.html">

        用户名：<input type="text" name = "uname">
        <input type="submit" value="登录"

最低0.47元/天解锁文章