WebAPI-window事件，DOM

最新推荐文章于 2023-08-18 11:19:51 发布
最新推荐文章于 2023-08-18 11:19:51 发布
阅读量251 收藏
点赞数
文章标签： web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_55537701/article/details/115799456
版权

Web APIs-day6

回顾

  • scroll:

    1. 滚动一定程度，出现返回按钮
    2. 点击返回按钮、返回顶部
    3. 判断盒子什么时候到底

  • 加载：

    • window.load:全部资源：外联文件资源;DOM结构渲染在页面
    • img load:获取图片宽度灯，等待其加载才能获取

  • 延迟函数：

    setTimeout(fn,1000)
//延迟函数+递归写法  达到  永久性定时器的效果；
   stepl为了写动画！setp1;
//requestAnimationFrame（）+递归写法step2不需要自己设置事件，根据你屏幕自动【弊端：要求兼容性】

依托 BOM 对象实现对历史、地址、屏幕、浏览器信息的操作或获取，能够读取本地文件并能够
在网页中预览本地图片，进而提升实践能力。

  • 能够读取本地文件的信息
  • 知道图片使用base64编码的有优势

window

学习window对象的属性、方法以及事件监听，理解window在javaScript中的作用，知道各个BOM对象的功能含义。

image-20210409222205524
  • 如上图所示 window对象下包含了 navigator 、location 、document 、history、 screen 5个属
    性，即所谓的 BOM （浏览器对象模型）。
  • document是实现 DOM 的基础，它其实是依附于 window 的属性。
  • 注：依附于 window对象的所有属性和方法，使用时可以省略 window ，然而由于这些属性名和方法
    并并非全部为关键字，因此有可能会被声明的同名变量所覆盖。

属性s

navigator

  • navigator 的数据类型是对象，该对象下记录了浏览器自身的相关信息。

    <script>
    // 通过 userAgent 检测浏览器的版本及平台
	let userAgent = navigator.userAgent;
	// 正则查找设备类型是否为手机
	let isMobile = /iPhone|Android/;
    console.log(isMobile.test(userAgent));
    // 正则查找是浏览器名称
	let isie = /MSIE/;
	console.log(isie.test(userAgent));
  //-------------------------分割线--------------------------------------
//navigator: 值是对象, 打印当前页面使用浏览器平台一些信息;
 //需求:判断不同平台打开同一个页面,有不同欢迎词;
        let info = navigator.userAgent;
        console.log(info);
        let res1 = info.indexOf("Android")
        if (res1 != -1) {
            alert("欢迎安卓手机用户！")
        }
        let res2 = info.indexOf("iPhone")
        if (res2 != -1) {
            alert("欢迎苹果手机用户！")
        }
</script>

  • 总结：

    1. navigator对象下包含有许多信息，如 platform、userAgent
    2. onLine属性检测当前是否处理联网状态
    3. geolocation 属性可以获取用户所在经纬度位置

  • 注：中很多的信息中有许多并不准确。如appName、appCodeName等

history

  • history 的数据类型是对象，该对象与浏览器地址栏的操作相对应，如前进、后退、历史记录等

  • <a href="./01-navigator.html">去01-location页面</a>
<button class="back">返回</button>
    <button class="forward">前进</button>
    <script>
        //window.history:值是个对象，包括浏览器页面历史记录对象 ；方法：定义页面按钮，模拟浏览器  返回和前进
        //场景：一般都在移动端！
        // 获取操作按钮
        let back = document.querySelector(".back")
        let forward = document.querySelector(".forward")
        //返回        按钮添加事件监听
        back.addEventListener("click", function () {
            history.back();
        })
        //前进         按钮添加事件监听
        forward.addEventListener("click", function () {
            history.forward();
        })
</script>

  • 总结：

    1. length 属性记录了与当前页页相关的页面的数量
    2. back方法跳转至上一个链接地址对应的页面，与浏览器的后退操作一致
    3. forward方法跳转至下一个连接地址对应的页面，与浏览器的前端操作一致
    4. go方法跳转到历史记录中任一链接地址对应的页面，参数可以正数也可以是负数
location

  • location的数据类型是对象，它拆分并保存了 URL 地址的各个组成部分。

  • URL 即我们平时所说的链接地址，它有着固定的格式如下图所示：协议、主机、端口、路径、参数、哈希。

    image-20210409223340980 
    	<button class="jumper">学 IT 来传智</button>
    <button class="refresh">刷新</button>
<script>
    //以前  HTML a标签
        //现在：JS  location:地址  属性值  是对象
        // href:设置一个地址
        let jumper = document.querySelector(".jumper")
        jumper.addEventListener("click", function () {
            //通过 location.href  获取地址 
            location.href = "https://www.baidu.com"   //设置新的地址
        })
        let refresh = document.querySelector(".refresh")
        refresh.addEventListener("click", function () {
            //reload 方法用来刷新当前页面，传入参数 true 时表示强制刷新  
            location.reload(true)  //模拟刷新动作
        })
</script>

  • 总结：

    1. href属性获取完整的 URL 地址，对其赋值时用于地址的跳转
    2. search 属性获取地址中携带的参数，符号 ？后面部分
    3. hash属性获取地址中的啥希值，符号 # 后面部分
    4. reload方法用来刷新当前页面，传入参数 true时表示强制刷新
案例-location显示倒计时
<body>
    <h3>案例：点击按钮后，标签倒数计时 5 4 3 2 1s 然后跳转到新的页面</h3>
    <button>点击我</button>
    <p>唱跳rap我样样行，菜👎</p>
    <script>
        //1.获取DOM节点
        let btn = document.querySelector("button")
        let p = document.querySelector("p")
        //2.添加事件
        btn.addEventListener("click", function () {
            //3.p文字内容发生改变 innerText
            let num = 5   //设置倒计时5s
            p.innerText = `还有${num}秒后就页面跳转，网易云👉`;
            let times = setInterval(function () {
                num--
                p.innerText = `还有${num}秒后就页面跳转，网易云👉`
                if (num == 0) {
                    clearInterval(times)
                    location.href = "https://music.163.com/";
                }
            }, 1000);
        })
    </script>
</body>
screen
  1. screen 属性的数据类型是对象，它记录用户电脑屏幕的相关参数，如宽度、高度等。
  2. 总结：该对象的使用场景并不多。

方法

window 下也提供了几个方法可供使用：

 //方法: window上方法:
        // 效果, 弹面、样式完全是由浏览器, 改不了样式;
        //     弹出来，算代码执行到一半（会阻止下面代码继续执行）用户需要点击确定，才能继续执行
        // 落地，简单测试使用。工作中是绝对不用!
//提醒弹窗
        alert('129 hi')
//确认弹窗
       let key = confirm('您确认退出吗？')
       console.log(key);
//输入弹窗
        let str = prompt('请输入密码')
       console.log(str);

总结：警告提示框会阻程序继续执行，直到用户点击确认后

alert
<h3>window 方法</h3>
<button class="alert">警告提示</button>
<script>
// 获取操作所需的按钮元素
let alertBtn = document.querySelector('.alert');
alertBtn.addEventListener('click', function () {
alert('警告：上课不允许睡觉！');
})
</script>

总结：警告提示框会阻程序继续执行，直到用户点击确认后。

comfirm
<body>
<h3>window 方法</h3>
<button class="confirm">确认提示</button>
<script>
    // 获取操作所需的按钮元素
	let confirmBtn = document.querySelector('.confirm');
	confirmBtn.addEventListener('click', function () {
	let result = confirm('确定要删除吗？');
})
</script>
</body>
  • 总结：用户点击确定返回值为true ，点击取消返回值为 false
案例-询问客户跳转案例
<button class="confirm">确认提示</button>
    <script>
        let btn = document.querySelector('.confirm')
        btn.addEventListener('click', function () {
            let result = confirm('你确认要删除吗？')
            if (result == true) {
                location.href = "https://music.163.com/"
            } else {
                false
            }
        })
    </script>
prompt
<body>
<h3>window 方法</h3>
<button class="prompt">输入提示</button>
<script>
// 获取操作所需的按钮元素
let promptBtn = document.querySelector('.prompt');
promptBtn.addEventListener('click', function () {
prompt('请输入您的用户名：', '小明');
});
</script>
</body>
  • 总结：传入第 2 个参数可以充当默认值。
  • 注：这些方法常用于开发阶段的简单调试，正式环境中很少使用！

事件

load
  • 该事件会在网页图片、样式、音频、视频等资源加载完毕是触发
 <img src="./01.jpg" alt="">
    <script>
        window.addEventListener('load', function () {
            console.log('页面资源加载完毕了...');
        })
        console.log('代码至少执行到这里后才会去触发 load 事件...');
    </script>

  • 总结：

    1. load会等待所有的资源（图片、样式、脚本、音视频等）加载完毕后才触发
    2. DOMContentLoaded只要 HTML 结构加载完毕就会被触发，该事件通过 document 进行监听
    3. 将 script标签写在 head标签中时，查找 DOM会失败
beforeunload

  • 该事件会在即将离开当前页面时被触发。

  •  <a href="http://baidu.com">百度一下</a>
    <script>
        window.addEventListener('beforeunload', function (ev) {
            ev.returnValue = '';
            // return '';
        })
    </script>

  • 总结：

    1. beforeunload事件在关闭页面、跳转新页面、刷新当前页面时触发
    2. 该事件常用于提示用户即将离开当前页面
    3. 出于安全考虑不允许自定义提示信息
resize
//size大小
        //resize:事件，监听浏览器大小发生改变的
        window.addEventListener("resize", function () {
            //移动端口：rem布局   等比列缩放 Bootstrap:三端适配（移动  平板  pc）
            //css媒体查询    范围划分不够细
            //flexble.js   让页面元素连续变换！
            console.log('浏览器窗口大小正在发生改变...');
            console.log(document.documentElement.clientWidth);
        })
  • 该事件会在浏览器窗口大小调整时被触发
  • 总结：
    1. 在窗口变化监听的过程中能实时获取视口的大小

注：基于resize可以动态计算 html的字号大小，完成移动端屏幕适配

DOM

进一步学习 DOM 相关知识，基于浏览器开放的能力读取本地文件，体会 Web APIs 的含义，提 升实践的水平。

本地文件

出于安全性考虑 JavaScript 无法直接读取用户本地的文件，必须由用户主动选择才能对本地文件进行读
取，有两种方式引导用户做出选择：<input type="file"> 和文件拖拽。

input

用户使用 input 标签选择本地文件，然后对文件进行读取

 <input type="file" id="file">
     //语法:如何把图片转化为base64字符串
    //万物:00]函数dom用户行为 window文件
        // 0.<input type="file" id="file">
        // 1.  Js角度, 获取选择某个文件得到对象; 
        //       事件change当input状态改变
        let ipt = document.querySelector("#file")
        ipt.addEventListener("change", function () {
            let obj = this.files[0] //文件对象
            //2.使用特别语法转换为base64字符串（不常用，干活，建议收藏）
            //   2.1得到工具：文件读取器
            let reader = new FileReader();
            //  2.2把文件读成一个串，字符串
            reader.readAsDataURL(obj);
            //  2.3获取读取的结果
            reader.addEventListener("load", function () {
                // 以图片为例，实现图片预览功能
                let preview = document.createElement('img')
                preview.src = reader.result;
                document.body.appendChild(preview)
            })
        })

  • 总结：

    1. files是一个 File 类型的对象列表，它包含了文件的大小、名称、格式等信息
    2. multiple属性允许用户同时选择多个文件
    3. FileReader专门用于文件读取，通过监听 load 事件获取读取结果
    4. 以图片文件为例，本地文件读取可以实现图片预览的功能
    5. 浏览器可以将 base64编码图片直接解析，开发中经常用到
    <input type="file" id="file">
<img src="#" alt="">
//2.使用特别语法转换为base64字符串（不常用，干活，建议收藏）
//   2.1得到工具：文件读取器
ipt.addEventListener("change", function () {
   let obj = this.files[0]
   let reader = new FileReader();
 //  2.2把文件读成一个串，字符串
    reader.readAsDataURL(obj);
//  2.3获取读取的结果
reader.addEventListener("load", function () {
      img.src = reader.result; 
 })
drag

用户将文件直接拖拽至网页中的某个标签中，然后对文件进行读取

<div class="uploader"></div>
    <a href="http://www.baidu.com">baidu</a>
<script>
 // prevent 阻止
 // Default 默认行为;    
 // drag: 拖拽  移入
        let div = document.querySelector(".uploader");
        div.addEventListener("dragover", function (e) {
            e.preventDefault();
        });
        // drop：投放，拖拽松开鼠标
        div.addEventListener('drop', function (e) {
            // 1. 获取刚才拖入这个图片文件对象
            let obj = e.dataTransfer.files[0];
           // 2. 用干货知识转化为base64字符串
            let reader = new FileReader();
            reader.readAsDataURL(obj);
            // 3. 获取读取到结果,设置相应属性
            reader.addEventListener("load", function () {
                div.style.background = `url(${reader.result}) no-repeat`;
            });
            e.preventDefault();
        });
    </script>
  • 总结：
    1. 用户拖动文件至监听了 dragover 事件的元素之上时，dragover事件就会被触发
    2. 用户拖动文件至监听了 drop事件的元素之上然后松开拖拽文件时，drop事件就会被触发
    3. 事件对象dataTransfer.files是 File 类型对象，包含了文件的大小、名称、格式等信息
    4. 通过 FileReader实现文件的进行读取
叙白wh
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
WebAPI-window对象的常见事件
weixin_44486539的博客
12-03 233
概述 BOM 是 Browser Object Model 的缩写，就是浏览器对象模型；BOM 提供了与浏览器窗口进行交互的对象；BOM 就是由一系列相关的对象构成，并且每个对象都用于许多的方法和属性，其核心对象是 window 与 DOM 和 JavaScript 不同，DOM 拥有标准化组织 W3C， JavaScript 的语法标准化组织是 ECMA，而 BOM 没有官方标准，BOM 最初是...
chat-window：一个简单而灵活的聊天窗口，用于列出消息
02-06
标签"WebComponentsHTML"表明chat-window利用了HTML5的Web Components特性，这包括Shadow DOM（用于封装组件的样式和结构）、模板（用于定义重复或动态内容）和Custom Elements（用于创建自定义HTML标签）。...
前端 window事件
最新发布
qq_45314999的博客
08-18 112
window属性，对象
window.history，页面中的返回按钮
weixin_30252709的博客
06-09 302
一、页面中的返回按钮事件 window.history可以不加window这个前缀 他的方法有： window.history.go(-1); //-n表示后退n页，n表示前进n页，或者是一个url window.history.back(); //同样表示后退一页 window.history.forward(); //表示前进 如果页面是从一个微信上的链接跳...
亲测有效——chrome设置允许访问本地文件（如本地json文件）
meser88的博客
04-18 9340
先在磁盘上创建一个无关紧要的文件夹，你应该也可以指定一个已经存在的文件夹，复制文件夹的路径，在目标一栏中加入--user-data-dir="建议再创建一个新的谷歌浏览器的快捷方式，与之前的快捷方式区分开，在想使用跨域请求的时候打开新的快捷方式，保证上网安全。为了安全起见，建议创建两个谷歌浏览器的快捷方式，一个设置上述参数用于需要请求本地资源的开发，一个用于平时上网。这个目录下系统会自动生成一大堆文件，注意不要跟自己的开发的文件搞混就行，比如我的，本来文件夹在只有一个。
数据库系统原理
凯歌技术控团队
07-26 4839
选择 1，被称为存储数据的仓库的是（C） A：DBS B：Data C:DB D:DBMS 解析： 本题考查数据库基本概念的区分。 数据库系统(DBS) ：指在计算机中引入数据库技术之后的系统。数据（Data）：描述事物的符号记录，是指用物理符号记录下来的、可以鉴别的信息。 数据库（DB） ：通俗地被称为存储数据的仓库，指长期储存在计算机中的有组织的、可共享的数据集合。 数据库管理系统（DBMS）： 专门用于建立和管理数据库的一套软件，介于应用程序和操作系统之间。 ...
Web前端开发技术-认识DOM对象.pptx
07-07
JavaScript语言由3部分组成，分别是ECMAScript、BOM和DOM，其中ECMAScript是JavaScript语言的核心，而Web API包括BOM和DOM两部分。;;API：应用程序编程接口，是一些预先定义的函数，这些函数是由某个软件开放给开发...
Javascript-DOM编程艺术研究.docx
11-17
在实际应用中，JavaScript-DOM编程的艺术不仅包括理解和掌握DOM的基本概念，还包括优化DOM操作以提高性能，比如减少DOM遍历，利用文档碎片（DocumentFragment）进行批量操作，以及使用事件委托等技术。学习DOM编程...
WebApi面试题.pdf
05-15
在本资源中，我们将对 WebApi 相关面试题进行详细解析，从 DOM 结构操作到事件模型，再到 JavaScript 定时器和浏览器渲染过程。 1. 什么是 DOM？ DOM（Document Object Model）是文档对象模型，用于描述 HTML 和 ...
jQueryAPI-090129.rar_jqueryapi
09-22
`$(document).ready()`确保DOM加载完成后执行代码，`$(window).load()`则等待所有资源（包括图片）加载完毕。 四、动画效果 jQuery的动画功能非常强大，`fadeIn()`,`fadeOut()`,`slideToggle()`等方法用于创建平滑...
精通JavaScript（文档对象模型和事件驱动——window对象）
03-07
为了能够操纵浏览器和文档，JavaScript使用分层的父对象和子对象，这就是“文档对象模型”。这些对象的组织类似一个树型结构，并表示一个Web文档的所有内容和组件。 注意：”文档对象模型”不是JavaScript语言的一部分，而是内置在浏览器中的一个应用程序接口(API)，”文档对象模型”不但在Javascript中经常用到，在其他的脚本语言也经常用到。
JS中window.onload事件详解
热门推荐
pseudonym_的博客
05-21 5万+
window.onload事件方法的探讨和一个易懂的实例演示。
将WebAPI发布到本地服务器与远程服务器
weixin_30590285的博客
07-27 1576
一、本地服务器 参考链接：https://blog.csdn.net/shuai_wy/article/details/69221858 1、要实现 IIS Express域名、IP的访问，关键在于需要配置项目的applicationhost.config文件，Server 为项目名称，配置文件的路径位于 D:\Documents\Visual Studio 2015\Projects\Ser...
让页面不缓存，自动刷新
LYFlied的博客
03-18 3178
不让页面从缓存中取的数据， 浏览器后退后，实现自动刷新，不去取缓存
window事件
weixin_30478757的博客
08-31 906
window事件是较为重要的事件，接下来就讲解一下。 1.获取页面滚动栏的距离 　　什么是滚动栏，就是网页内容过多时，通过滚轮控制上下显示或者左右显示； 　　为窗口添加滚动条事件： 　　window.onscroll=function(){}; 　　注意在获取滚动条距离的时候 　　谷歌不识别document.documentElement.scrollTop，必须要加上doc...
Web API的第六天
qq_41943654的博客
04-10 99
Web API的第六天 一、window window 是浏览器内置中的全局对象，我们所学习的所有 Web APIs 的知识内容都是基于 window 对象实现的。 如上图所示 window 对象下包含了 navigator 、 location 、 document 、 history 、 screen 5个属性，即所谓的 BOM （浏览器对象模型）。 document 是实现 DOM 的基础，它其实是依附于 window 的属性。 注：依附于 window 对象的所有属性和方法，使用时可以省略 win
window事件的属性和方法
Qi16011948的博客
01-24 593
针对window对象触发的事件 属性 描述 onafterprint 文档打印之后运行的脚本 onbeforeprint 文档打印之前运行的脚本 onbeforeunload 文档卸载之前运行的脚本 onerror 在错误发生时运行的脚本 onhaschange 当文档已改变时运行的脚本 onload 页面结束加载之后触发 onmessage 在消息被触发时...
JS事件—unload、beforeunload
mtgr的博客
10-10 2万+
unload和beforeunload是在窗口卸载的时候会触发，可以在用户刷新或者关闭窗口的时候处理一些逻辑，如果在两个事件监听中添加 alert、confirm、prompt会忽略，所以我们想提示用户或者想调试一下这种方法是不可行的，要是在事件中添加debugger，窗口关闭的时候可以跟进断点，但是刷新的时候断点也被忽略了。废话少说直接上测试代码 //以两种方式去绑定事件，事件触发写...
winForm调用WebApi程序
weixin_34247155的博客
06-06 1956
///WinForm窗体创建的调用api的类 /// <summary> /// 调用api返回json /// </summary> /// <param name="url">api地址</param> /// <pa...
web API由bom和DOM两部分组成
06-12
是的，你说得对。Web API 由 BOM（浏览器对象模型）和 DOM（文档对象模型）两部分组成。 BOM 是浏览器对象模型，提供了与浏览器窗口交互的对象，例如`window`、`navigator`、`screen`等。BOM 不是 W3C 标准，不同浏览器的实现可能略有不同。 DOM 是文档对象模型，提供了访问和操作网页内容的方法和接口，例如`document`、`Element`、`Node`等。DOM 是 W3C 标准，因此在不同浏览器中的实现是基本相同的。 总的来说，BOM 提供了与浏览器窗口和系统交互的接口，而 DOM 提供了访问和操作网页内容的接口。两者共同构成了 Web API，为开发者提供了丰富的功能和接口。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值