HTML----JavaScript操作对象BOM对象

文章目录

  • 前言
  • 一、pandas是什么?
  • 二、使用步骤
    • 1.引入库
    • 2.读入数据
  • 总结

本章要求

  • 了解BOM模型
  • 掌握BOM模型实际应用

一.BOM模型概述

    BOM(浏览器对象模型)是JavaScript中的一个重要概念,它提供了一组用于控制浏览器窗口和页面内容的对象和方法。

BOM可实现功能:

  • 弹出新的浏览器窗口 移动、
  • 关闭浏览器窗口以及调整窗口的大小
  • 页面的前进、后退

二.BOM核心:window对象

        window对象:表示浏览器窗口或框架。它是BOM的顶层对象,包含了浏览器窗口的各种属性和方法,比如窗口大小、位置、打开新窗口等。

 常用属性

  • history 属性

history属性是一个表示浏览器历史记录的对象。通过history属性可以使用JavaScript执行以下操作:返回上一个页面,进入下一个页面,获取历史记录长度等等。

  •  location属性

location属性表示当前文档的URL地址。它提供了访问和操作URL的方法。

通过上述属性实现的功能和浏览器左上角前进,后退,刷新等按钮一致。

 案例

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8">
<title>主页面</title>
<style type="text/css">
body{margin: 0px auto;text-align:center;
}
</style>
</head>
<body>
<img src="images/flow.jpg" alt="鲜花" /><br />
<a href="javascript:history.back()">返回主页面</a></p><!--返回上一级页面-->
<a href="javascript:location.href='flower.html'">查看鲜花详情</a>  
<a href="javascript:location.reload()">刷新本页</a><!--点击重新加载本页面-->
</body>
</html>

常用方法:

针对window对象的常用方法是对浏览器窗口进行一系列操作,例如点击某个按钮关闭,关闭某页面时需要再次确认等等,这些都可以通过下面的常用方法实现。

prompt() 以及alert()案例在前文基础篇中有详细介绍此处不做过多赘述,重点讲解剩余几种

  • confirm() 案例

confirm() :显示一个带有提示信息,确定和取消按钮的对话框。

语法

window.confirm("提示信息")
<script type="text/javascript">var flag = window.confirm("确认要关闭这个页面嘛?")if(flag == true){window.alert("正在关闭页面,请稍后...");}else{window.alert("已取消关闭...");}
</script>

  •  open ()+close()案例

 open ():打开一个新的浏览器窗口,加载给定 URL 所指定的文档。

close():关闭浏览器页面

语法:

window.open("弹出窗口的url")
<body><script type="text/javascript">function open_index(){window.open("open.html");}function close_index(){window.close();}</script><input type="button" value="点击此处调用open函数打开新页面" onclick="open_index()"/><input type="button" value="点击此处关闭页面" onclick="close_index()"/>
</body>

 

  • setTimeout( ) 案例

 在指定的毫秒数后调用函数或计算表达式。

语法

window.setTimeout("调用的函数",毫秒数);

案例 

<body><p>此页面等待5秒后自动跳转...</p><script type="text/javascript">function fun1(){document.write("这是5秒后执行的函数页面");}window.setTimeout("fun1()",5000);</script>
</body>

 

  •  setInterval( ) 案例

按照指定的周期(以毫秒计)来调用函数或表达式

语法

window.setInterval("调用的函数",毫秒数);

案例 

<body><p>此页面等待3秒后自动跳转...</p><script type="text/javascript">function fun1(){document.write("这是3秒后执行的函数页面");}window.setInterval("fun1()",3000);</script>
</body>

document对象

CSS中选择器代表站在CSS角度去找html文档中的标签,document对象则是站在javascript角度去找html文档中的标签。简单来说,document是JS中的选择器。

通过referrer():返回含有当前问文档的URL

 案例

  • 领奖页面代码

下面的代码中含有 href="praise.html" 即该URL含有奖品显示页面文档,因此当点击超链接跳转时,奖品显示页面会导入领奖页面的URL,此时if 语句中URL不为空,页面将显示

”大奖赶快拿啦!笔记本!数码相机!" 字样。

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>领奖页面</title><style type="text/css">body,h1{margin: 0;padding: 0;}.prize{text-align: center;}</style>
</head>
<body>
<div class="prize"><img src="images/d1.jpg" alt="中奖" /><h1><a href="praise.html">马上去领奖啦!</a></h1>
</div>
</body>
</html>
  • 奖品显示页面代码 

直接运行后,未载入本页面文档地址,URL问空,将显示"您不是从领奖页面进入,5秒后将自动跳转到登录页面"

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>奖品显示页面</title><style type="text/css">body{margin: 0;}</style>
</head>
<body><script type="text/javascript">var url = document.referrer;  //载入本页面文档的地址(从哪来的)if(url == ""){document.write("<h2>您不是从领奖页面进入,5秒后将自动跳转到登录页面</h2>");//新技术点(定时函数)window.setTimeout("location.href='login.html'",5000);	}else{document.write("<h2>大奖赶快拿啦!笔记本!数码相机!</h2>");}</script>
</body>
</html>
  • 定时函数跳转页面代码 

5s后自动跳转到该页面


<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>登录页面</title><style type="text/css">body{margin: 0;}</style>
</head>
<body>
<img src="images/login.jpg" alt="登录图片"/>
</body>
</html>


练习

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

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

相关文章

力扣热题100道-矩阵篇

矩阵 73.矩阵置零 给定一个 m x n 的矩阵&#xff0c;如果一个元素为 0 &#xff0c;则将其所在行和列的所有元素都设为 0 。请使用 原地 算法**。** 示例 1&#xff1a; 输入&#xff1a;matrix [[1,1,1],[1,0,1],[1,1,1]] 输出&#xff1a;[[1,0,1],[0,0,0],[1,0,1]]示例…

胡润研究院发布《2023胡润中国最具历史文化底蕴品牌榜》

胡润研究院发布《2023胡润中国最具历史文化底蕴品牌榜》&#xff0c;前十名分别是片仔癀、同仁堂、贵州茅台、五粮液、中国银行、中华、黄山、农业银行、建设银行、汾酒。 榜单调研范围涵盖中国内地具有60年以上历史的为消费者提供产品或服务的品牌&#xff0c;综合考察品牌历史…

C# 语法进阶 委托

1.委托 委托是一个引用类型&#xff0c;其实他是一个类&#xff0c;保存方法的指针 &#xff08;指针&#xff1a;保存一个变量的地址&#xff09;他指向一个方法&#xff0c;当我们调用委托的时候这个方法就立即被执行 关键字&#xff1a;delegate 运行结果&#xff1a; 思…

TikTok舞台背后:短视频如何打破艺术界界限?

TikTok&#xff0c;这个以短视频为媒介的平台&#xff0c;正成为全球年轻一代表达创意的重要舞台。然而&#xff0c;其影响不仅仅停留在娱乐领域&#xff0c;更在艺术界引起了巨大的关注。本文将深入探讨TikTok是如何在短视频的形式下打破传统艺术界的界限&#xff0c;为创作者…

欢迎提交pr共同改进项目, pr的含义?

"提交PR"在软件开发和编程领域是一个常用术语&#xff0c;特别是在使用版本控制系统如Git时。这里的“PR”指的是“Pull Request”&#xff0c;它是一种通知项目维护人员您已经完成了一些代码改动并希望将这些改动合并到主项目中的方式。简单来说&#xff0c;当您对一…

Eureka相关面试题及答案(2024)

1、什么是Eureka&#xff1f; Eureka是一个由Netflix开发的服务发现&#xff08;Service Discovery&#xff09;工具&#xff0c;它是Spring Cloud生态系统中的一个关键组件。服务发现是微服务架构中的一个重要概念&#xff0c;它允许服务实例在启动时注册自己&#xff0c;以便…

【第7期】前端如何实现菜单记忆和用户操作的状态记忆

本期简介 背景一&#xff1a;我们平时使用到管理功能时&#xff0c;会涉及到打开了某个一级菜单&#xff0c;访问了某个二级菜单&#xff0c;打开了相应的页面&#xff0c;那么我们希望一级菜单当前时展开的&#xff0c;二级菜单当前时有选中颜色与其他未访问的菜单进行区分的&…

【银行测试】超细支付功能测试+测试点总结分析(详全)

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 1、支付功能怎么测…

华为鸿蒙应用--文件管理工具(鸿蒙工具)-ArkTs

0、代码 import fs from ohos.file.fs; import { Logger } from ./Logger; import { Constants } from ../constants/Constants; import { toast } from ./ToastUtils;export class FileUtils {/*** 获取目录下所有文件* param filesDir* returns*/static getFiles(filesDir: …

Vue3.0 所采用的 Composition Api 与 Vue2.x 使用的 Options Api 有什么不同

Vue3.0 所采用的 Composition Api 与 Vue2.x 使用的 Options Api 有什么不同? Composition API 解决了什么问题 Composition API 可以说是 Vue3 的最大特点&#xff0c;那么为什么要推出 Composition Api &#xff0c;解决了什么问题? 通常使用 Vue2 开发的项目&#xff0…

Java 将base64编码字符串转换为图片工具类

前言 在一些前后端分离项目中&#xff0c;接口方需要前端把图片转换成base64编码字符串&#xff0c;和表单信息一起通过json接口提交。故在后端中&#xff0c;需要对前端传过来的bas64编码字符串转换成图片文件进行存储。 代码 import lombok.extern.slf4j.Slf4j;import jav…

PostgreSQL10数据库源码安装及plpython2u、uuid-ossp插件安装

PostgreSQL10数据库源码安装及plpython2u、uuid-ossp插件安装 1、环境2、安装包下载3、安装3.1 、解压3.2、配置3.3、编译安装3.4 、启动与关闭 4、安装 uuid-ossp 、plpython2u插件5、参考 1、环境 centos 7 、 postgresql 10.19 2、安装包下载 postgres 源码安装包 3、安…

【面试高频算法解析】算法练习1 二分查找

目录 前言算法解析练习题二分查找在排序数组中查找元素的第一个和最后一个位置搜索旋转排序数组 前言 本篇章开放目的是按算法类型学习算法&#xff0c;学习对应算法理论&#xff0c;并通过练习一些经典算法题深入理解这类算法&#xff0c;避免出现刷了很多算法题&#xff0c;…

golang学习专栏

GOLANG专栏 Golang基础教程 Golang基础教程 Golang练手算法 Golang练手算法 Golang设计模式 Golang设计模式 Golang数据结构和算法 Golang数据结构和算法 Golang并发编程 Golang并发编程 ORM框架Gorm Golang ORM框架gorm Golang源码分析 Golang源码分析 MySQL教程 MySQ…

11.Kubernetes Ingress NGINX Controller 部署

Ingresss是对集群中服务的外部访问进行管理的 API 对象,典型的访问方式是 HTTP。 Ingress 可以提供负载均衡、SSL 终结和基于名称的虚拟托管。 Ingress NGINX Controller 是kubernetes官方维护的 Ingress 控制器 至此、kubernetes必要的组件都已经安装完成,后面可以演示一…

Java 读取超大excel文件

注意&#xff1a;此参考解决方案只是针对xlsx格式的excel文件&#xff01; Maven <dependency><groupId>com.monitorjbl</groupId><artifactId>xlsx-streamer</artifactId><version>2.2.0</version> </dependency>读取方式1…

xxl.job docker 命令部署

xxl.job docker 命令部署 docker run -e \ PARAMS"--xxl.job.accessTokentoken123456 \ --server.servlet.context-path/xxjob-path \ --spring.datasource.usernamexxl_job \ --spring.datasource.passwordmysqlpwd \ --spring.datasource.urljdbc:mysql://192.168.121.…

安装elasticsearch、kibana、IK分词器、扩展IK词典

安装elasticsearch、kibana、IK分词器、扩展IK词典 后面还会安装kibana&#xff0c;这个会提供可视化界面方面学习。 需要注意的是elasticsearch和kibana版本一定要一样&#xff01;&#xff01;&#xff01; 否则就像这样 elasticsearch 1、创建网络 因为我们还需要部署k…

java常用数据结构

List&#xff1a;ArrayList 和 LinkedList 1、ArrayList 和 LinkedList都是非线程安全 2、ArrayList 可以直接根据下表定位元素&#xff0c;查找速度快&#xff0c;但是修改元素慢&#xff1b;LinkedList 查找元素必须从第一个开始逐个查找&#xff0c;查找速度慢&#xf…

力扣labuladong一刷day51天单调栈应用

力扣labuladong一刷day51天单调栈应用 一、239. 滑动窗口最大值 题目链接&#xff1a;https://leetcode.cn/problems/sliding-window-maximum/ 思路&#xff1a;滑动窗口最大值&#xff0c;既要维护加入的时间顺序&#xff0c;又要 class Solution {public int[] maxSliding…