[JS]BOM操作

介绍

BOM(Browser Object Model)是浏览器对象模型

  1. window对象是一个全局对象, 也是JS中的顶级对象
  2. 通过var定义在全局作用域中的变量和函数都会变成window对象的属性和方法
  3. window对象下的属性和方法调用时一般省略window

间歇函数

定时器

定时器是间歇函数的一种, 可以每个每隔一段时间, 重复执行代码, 无需手动触发

// 1.匿名函数
setInterval(()=>{}, 1000)// 2.函数名调用
function fn() {}
setInterval(fn, 1000) // 不带(),否则只调用一次// 3.函数调用
function fn() {}
setInterval('fn()', 1000) // 不推荐// 4.清理定时器
clearInterval(定时器id);

注意:

  1. 完整写法由window调用, 一般省略
  2. 延迟的毫秒数可以省略, 默认0
  3. 定时器创建后会返回 id, 用于清除定时器

延时器

延时器是间歇函数的一种, 可以延时指定时间, 然后执行代码

// 1.匿名函数
setTimeout(()=>{}, 1000)// 2.函数名调用
function fn() {}
setTimeout(fn, 1000) // 不带(),否则只调用一次// 3.函数调用
function fn() {}
setTimeout('fn()', 1000) // 不推荐// 4.清理定时器
clearTimeout(延时器id);

JS执行机制

  1. JS语言的特点之一就是单线程, 同一时间只能处理一个任务
  2. 这是因为JS设计的使命就是处理网页中的用户交互以及DOM操作, 这就要求程序中所有的任务都必须是线性的, 前一个任务结束, 再执行后一个任务, 只有这样, 才能保证用户交互和DOM操作是有序的, 不然同一时间添加一个元素又删除这个元素, 程序就乱套了, 单线程正好符合这种设计要求
  3. 但是单线程也存在问题, 如果JS执行时间过长, 就会造成页面渲染的不连贯, 导致页面阻塞.
  4. 为了解决这个问题, HTML提出了Web Worker标准, 允许JS可以创建多个线程, 于是就有了同步和异步的概念,
  5. 同步任务就是放在主线程上, 立即执行的任务
  6. 异步任务就是交由宿主环境执行, 执行完成后推入任务队列排队的任务, JS的异步是通过回调函数实现的
  7. 为了保证同步任务和异步任务有序执行, 就有了事件循环的概念, 就是先执行主线程的同步任务, 等所有同步任务执行结束后, 再依次读取任务队列中的异步任务, 这种不断读取任务, 执行任务的机制, 称为事件循环
  8. JS虽然通过事件循环实现了异步编程, 但是本质还是单线程语言
  9. 异步任务也可以分两种, 一种是宿主环境执行的宏任务, 执行完毕后推入宏任务队列, 一种是JS引擎执行的微任务, 执行完毕后推入微任务队列, 主线程一旦闲置, 优先清空微任务执行, 再执行宏任务队列

location对象

location对象拆分并保存了URL地址的各个组成部分

  1. location.href 获取或设置整个URL
  2. location.host 返回域名
  3. location.port 返回端口号
  4. location.pathname 返回路径
  5. location.search 返回 ? 后面的查询参数
  6. location.hash 返回 # 后面的内容, 常用于锚点链接
  7. location.assign(); 可以跳转页面,有后退功能
  8. location.replace(); 替换当前页面,不能后退
  9. location.reload(); 刷新当前页面, 如果传入true表示强制刷新(Ctrl + F5)

navigator对象

navigator对象记录了浏览器相关的信息, 较常用的是userAgent属性, 可以返回浏览器版本和平台信息

<script>
if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {window.location.href = "";   //手机
} else {window.location.href = "";  //电脑
} 
</script>

histroy对象

history对象可以与浏览器记录进行交互.

  1. history.back(); 后退页面
  2. history.forward(); 前进功能
  3. history.go(参数); 参数1前进页面, 参数-1后退页面

本地存储

把数据存储在用户硬盘中, 由浏览器进行管理, 实现数据持久化存储

sessionStorage
// 储存数据
sessionStorage.setItem('key',value);
// 获取数据
sessionStorage.getItem('key');
// 删除数据
sessionStorage.removeItem('key');
// 删除所有数据
sessionStorage.clear();
  1. 生命周期为关闭浏览器窗口;
  2. 在同一个窗口下数据可以共享
  3. 容量限制大约5M
localStorage
// 储存数据
localStorage.setItem('key',value);
// 获取数据
localStorage.getItem('key');
// 删除数据
localStorage.removeItem('key');
// 删除所有数据
localStorage.clear();
  1. 生命周期为永久,除非手动删除;
  2. 在不同窗口下数据也可以共享(同一浏览器都可以);
  3. 容量限制大约20M
查看本地存储数据

存储复杂数据

本地存储里面只能存储字符串的数据格式, 如需需要储存复杂数据, 就需要使用JSON对象

JSON对象就是 属性 和 值 都由双引号包裹的数据结构

// 序列化
// 把复杂数据转换成JSON字符串
JSON.stringify(数据)// 反序列化
// 把JSON字符串还原成对象格式 
JSON.parse(数据)

窗口操作

//1.打开空窗口
window.open();   //2.打开窗口
// url文件路径
// name新窗口的名称
// features窗口属性,大小等信息
// 会返回刚刚创建的窗口,用于关闭
window.open(url,[name],[features]);//3.关闭窗口
window.close();    //3.关闭刚刚创建的窗口
newWin.close();   //4.把当前窗口关闭
window.close();    

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/37019.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

酒店客房管理系统(Java+MySQL)

技术栈 Java: 作为主要编程语言。Swing GUI: 用于开发图形用户界面。MySQL: 作为数据库管理系统。JDBC: 用于连接和操作MySQL数据库。 功能要点 管理登录认证 系统提供管理员登录认证功能。通过用户名和密码验证身份&#xff0c;确保只有授权的用户可以访问和管理酒店客房信…

【three.js案例二】时空隧道

import * as THREE from ./build/three.module.js // 引入轨道控制器扩展库OrbitControls.js import { OrbitControls } from three/addons/controls/OrbitControls.js; // 引入dat.gui.js的一个类GUI import { GUI } from three/addons/libs/lil-gui.module.min.js;// 场景 co…

刷题——合并二叉树

合并二叉树_牛客题霸_牛客网 方法一&#xff1a; TreeNode* mergeTrees(TreeNode* t1, TreeNode* t2) {// write code hereif(t1 NULL) return t2;if(t2 NULL) return t1;TreeNode* head new TreeNode(t1->val t2->val);head->left mergeTrees(t1->left, t2-…

Supplemental Logging LOG DATA (ALL) COLUMNS

加的columns越多&#xff0c;说明一个普通的update中where 条件校验的列越多 update "SCOTT"."EMP" set "ENAME" ALLKEY where "EMPNO" 7566 and "ENAME" JONES and "JOB" MANAGER and "MGR" 783…

Android Service两种启动方式的区别

在Android中&#xff0c;启动Service的方式主要有两种&#xff0c;分别是通过startService()和bindService()。以下是这两种方式的详细解释&#xff1a; 1、通过startService()启动Service&#xff1a; 这是最常用的启动Service的方式。开发者可以通过Intent来指定要启动的Se…

名企面试必问30题(十)——你有自己的方法论吗?

1.思路 第一&#xff0c;方法论指的是做某些事情或业务的套路&#xff0c;但它没有绝对的正确性&#xff0c;每个人都可以拥有专属的方法论。 第二&#xff0c;方法论必定源自于自身实战经验的总结。 2.参考解答 “在软件测试工作中&#xff0c;我逐渐形成了自己的一套方法论。…

python简单爬虫firefox selenium

# codingutf-8# 1.先设置编码&#xff0c;utf-8可支持中英文&#xff0c;如上&#xff0c;一般放在第一行# 2.注释&#xff1a;包括记录创建时间&#xff0c;创建人&#xff0c;项目名称。Created on 2019-11-25 author: Project: python selenium-打开和关闭浏览器 # 3.导入模…

学习记录:`for` 语句与`while`语句的区别

for 语句与while语句的区别&#xff1a; for 和 while 语句都是循环控制结构&#xff0c;用于重复执行一段代码直到满足特定条件。尽管它们的基本目的是相似的&#xff0c;但它们的语法和一些使用场景有所不同。 for 语句&#xff1a; 用途&#xff1a;通常用于已知循环次数…

离线安装docker社区版

以下是离线安装 Docker 社区版的一般步骤&#xff1a; 准备工作&#xff1a; 在有网络的环境下&#xff0c;从 Docker 官网下载适合你系统的 Docker 社区版安装包以及相关依赖包。 传输安装包到离线机器&#xff1a; 使用移动存储设备或其他合适的方式将下载好的安装包及依赖转…

【剑指Offer系列】53-0到n中缺失的数字(index)

给定一个包含 [0, n] 中 n 个数的数组 nums &#xff0c;找出 [0, n] 这个范围内没有出现在数组中的那个数。 示例 1&#xff1a; 输入&#xff1a;nums [3,0,1] 输出&#xff1a;2 解释&#xff1a;n 3&#xff0c;因为有 3 个数字&#xff0c;所以所有的数字都在范围 [0,3]…

应用决策树批量化自动生成【效果好】【非过拟合】的策略集

决策树在很多公司都实际运用于风险控制,之前阐述了决策树-ID3算法和C4.5算法、CART决策树原理(分类树与回归树)、Python中应用决策树算法预测客户等级和Python中调用sklearn决策树。 本文介绍应用决策树批量自动生成效果好,非过拟合的策略集。 文章目录 一、什么是决策树二…

数字化那点事:一文读懂数字乡村

一、数字乡村的定义 数字乡村是指利用信息技术和数字化手段&#xff0c;推动乡村社会经济发展和治理模式变革&#xff0c;提升乡村治理能力和公共服务水平&#xff0c;实现乡村全面振兴的一种新型发展模式。它包括农业生产的数字化、乡村治理的智能化、乡村生活的现代化等方面…

Elasticsearch的节点、集群和分片

Elasticsearch的节点、集群和分片 节点 什么是节点 ES是使用Java语言开发的。ES可以创建多个节点&#xff0c;一个节点就是一个ES实例&#xff0c;也就是一个Java线程。ES在生产环境中每个节点都是分布在不同的服务器上的&#xff0c;目的是达到集群的高可用多个节点构成一个…

Nginx系列-1 Nginx安装与使用

背景 最近对项目进行了Https改造&#xff0c;改造过程涉及Nginx技术&#xff0c;因此进行简单总结。 从本文开始将开启一个新的专题Nginx系列&#xff0c;用于收集Nginx相关的文章&#xff0c;内容将包括&#xff1a; Nginx系列—1 Nginx安装与使用Nginx系列—2 Nginx配置Ngi…

记一次小程序渗透

这次的小程序渗透刚好每一个漏洞都相当经典所以记录一下。 目录 前言 漏洞详情 未授权访问漏洞/ 敏感信息泄露&#xff08;高危&#xff09; 水平越权&#xff08;高危&#xff09; 会话重用&#xff08;高危&#xff09; 硬编码加密密钥泄露&#xff08;中危&#xff0…

熟练掌握爬虫技术

一、Crawler、Requests反爬破解 1. HTTP协议与WEB开发 1. 什么是请求头请求体&#xff0c;响应头响应体 2. URL地址包括什么 3. get请求和post请求到底是什么 4. Content-Type是什么1.1 简介 HTTP协议是Hyper Text Transfer Protocol&#xff08;超文本传输协议&#xff09;…

整合 Mybatis Plus

什么是 MyBatis Plus&#xff1f; MyBatis Plus &#xff08;简称 MP&#xff09; 是一款持久层框架&#xff0c;说白话就是一款操作数据库的框架。它是一个 MyBatis 的增强工具&#xff0c;就像 iPhone手机一般都有个 plus 版本一样&#xff0c;它在 MyBatis 的基础上只做增强…

NOI大纲——普及组——编码

编码 ##ASCLL码 ASCII码&#xff08;American Standard Code for Information Interchange&#xff0c;美国信息交换标准代码&#xff09;是一种基于拉丁字母的字符编码方案&#xff0c;主要用于表示文本数据。ASCII码包含128个字符&#xff08;0-127&#xff09;&#xff0c…

2024最新boss直聘岗位数据爬虫,并进行可视化分析

前言 近年来,随着互联网的发展和就业市场的变化,数据科学与爬虫技术在招聘信息分析中的应用变得越来越重要。通过对招聘信息的爬取和可视化分析,我们可以更好地了解当前的就业市场动态、职位需求和薪资水平,从而为求职者和招聘企业提供有价值的数据支持。本文将介绍如何使…

python自动化办公之PyPDF2

用到的库&#xff1a;PyPDF2 实现效果&#xff1a;打开pdf文件&#xff0c;把每一页的内容读出来 代码&#xff1a; import PyPDF2 # 打开pdf文件 fileopen(friday.pdf,rb) # 创建pdf文件阅读器对象 readerPyPDF2.PdfReader(file) # 获取pdf文件的总页数 total_pageslen(rea…