js的BOM

最新推荐文章于 2024-07-25 09:24:40 发布
最新推荐文章于 2024-07-25 09:24:40 发布
阅读量85 收藏
点赞数
分类专栏： javascript基础 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46065861/article/details/119278717
版权

参考w3school手册全部查手册

window属性

三种弹框

<script>
    // 1、警告弹框
    // alert('不要出门不要出门!!!')

    // 2、确认弹框
    // var res = confirm('你确定要抛弃我吗？')
    // console.log(res)

    // 3、输入弹框
    var res = prompt('密码是多少?')
    console.log(res)
</script>

window对象方法可以做广告

主要了解如下(重要)

  • innerWidth窗口文档(内容)宽度

  • innerHeight窗口文档(内容)高度

    <scipt>
    console.log('innerWidth:'+window.innerWidth+',innerHeight:'+window.innerHeight)

</scipt>

    image-20210731165319122

  • outerWidth浏览器窗口宽度(包括任务栏和滚动条)

  • outerHeight浏览器窗口高度

    <scipt>
    console.log('outerWidth:'+window.outerWidth+',outerHeight:'+window.outerHeight)

</scipt>v

    image-20210731165357579

  • offsetWidth:元素(比如div)的宽

  • offsetHeight:元素(比如div)的高

  • offsetX: 鼠标位置离盒子的大小 在jQuery中offset().left

  • clientX:鼠标距离 body 的大小 在jQuery中pageX

  • offsetLeft：offsetLeft值的获取跟父级元素没关系，而是跟其上一级的定位元素(除position:static;外的所有定位如fixed,relative,absolute)有关系。即为相对于定位父级的偏移量

  • offsetTopoffsetTop值的获取跟父级元素没关系，而是跟其上一级的定位元素(除position:static;外的所有定位如fixed,relative,absolute)有关系。即为相对于定位父级的偏移量


        <style type="text/css">
            #box{
                width: 200px;
                height: 200px;
                background: orange;
                margin: 0 auto;
            }
        </style>
    </head>
    <body>
        <div id="box"></div>
        <script type="text/javascript">

            var box=document.getElementById('box');
            console.log('offsetHeight:'+box.offsetHeight+'offsetWidth:'+box.offsetWidth)
        </script>
    </body>
</html>

image-20210731165448356

screenLeft:窗口左上角距离屏幕左边的距离

screenTop:窗口左上角距离屏幕上边的距离

image-20210731165551460

scollTop:滚动条距离顶部的距离

window:表示当前对象

opener:表示父窗口

<script type="text/javascript">
    alert('screenLeft:'+window.screenLeft+',screenTop'+window.screenTop)
</script>

window方法

alert()警告弹框

confirm()确认弹框

<script type="text/javascript">
   //alert('不要出门')
    var res=confirm('你确定？')
    console.log(res)//确认为true,取消为false
</script>

prompt输入弹框

<script type="text/javascript">
			var  res=prompt('张三?')
			console.log()
		</script>

image-20210731140904932

open()打开一个子窗口

重要先找到对象，在进行操作

父窗口

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body onunload="closeAll()">
		<button value="lightblue" onclick="setColor(this)">蓝色</button>
		<button value="green" onclick="setColor(this)">绿色</button>
		<button value="pink" onclick="setColor(this)">粉色</button>
		<button onclick="newWin.child()">调用子窗口的方法</button>
		<script type="text/javascript">
		
			// 创建子窗口
			var newWin=window.open('test.html','_blank','width=400,height=400,left=300,top=100')
			function setColor(obj){
				// this代表点击的对象button
				console.log(obj)
				
				// 改变本窗口颜色
				window.document.bgColor=obj.value;
				
				// 改变新窗口的颜色
				newWin.document.bgColor=obj.value;
				
			}
			
			function closeAll(){
				// 当关闭这个窗口时，子窗口也要删除
				newWin.close();
			}
		</script>
	</body>
</html>

子窗口

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>子窗口</h1>
		<button value="lightblue" onclick="setColor(this)">蓝色</button>
		<button value="green" onclick="setColor(this)">绿色</button>
		<button value="pink" onclick="setColor(this)">粉色</button>
		<script type="text/javascript">
		
			function setColor(obj){
				// openner返回对创建窗口的引入 即父窗口
				// 设置父窗口的颜色
				opener.document.bgColor=obj.value;
				// 设值当前窗口的颜色
				window.document.bgColor=obj.value;
			}
		
		
			function child(){
				alert('子窗口方法')
			}
		</script>
	</body>
</html>

image-20210731150856828

image-20210731151124222

moveTo()移动到指定位置

moveBy()移动多少

父窗口

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body onunload="closeAll()">
		<script type="text/javascript">
		
			
		var newWin=window.open('test.html','_blank','width=400,height=400,left=0,top=0')
		
		// 移动子窗口和变大子窗口到指定大小
		
		setTimeout(function(){
			newWin.moveTo(400,400);
			newWin.resizeTo(500,500)
		},1500)
		
		</script>
	</body>
</html>

子窗口

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>子窗口</h1>
		<button value="lightblue" onclick="setColor(this)">蓝色</button>
		<button value="green" onclick="setColor(this)">绿色</button>
		<button value="pink" onclick="setColor(this)">粉色</button>
		<script type="text/javascript">
		
			function setColor(obj){
				// openner返回对创建窗口的引入 即父窗口
				// 设置父窗口的颜色
				opener.document.bgColor=obj.value;
				// 设值当前窗口的颜色
				window.document.bgColor=obj.value;
			}
		
		
			function child(){
				alert('子窗口方法')
			}
		</script>
	</body>
</html>

image-20210731151925783

resizeTo()变大到指定大小

resizeBy()变大设置大小

父窗口

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body onunload="closeAll()">
		<script type="text/javascript">
		
			
		var newWin=window.open('test.html','_blank','width=400,height=400,left=0,top=0')
		
		// 每次移动子窗口和变大子窗口到指定大小
		
		setInterval(function(){
			newWin.moveBy(40,40);
			newWin.resizeBy(50,50)
		},1500)
		
		</script>
	</body>
</html>

子窗口

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>子窗口</h1>
		<button value="lightblue" onclick="setColor(this)">蓝色</button>
		<button value="green" onclick="setColor(this)">绿色</button>
		<button value="pink" onclick="setColor(this)">粉色</button>
		<script type="text/javascript">
		
			function setColor(obj){
				// openner返回对创建窗口的引入 即父窗口
				// 设置父窗口的颜色
				opener.document.bgColor=obj.value;
				// 设值当前窗口的颜色
				window.document.bgColor=obj.value;
			}
		
		
			function child(){
				alert('子窗口方法')
			}
		</script>
	</body>
</html>

image-20210731152138634

scrollTo()滚动到指定位置

scrollBy()滚动多少

<script>
    for(var i=0;i<1000;i++){
        document.write('<h3>疫情严重，大家请保重！！！！</h3>')
    }

    // setTimeout(function(){
    // 	window.scrollTo(0,3000)
    // },1500)

    setInterval(function(){
        // window.scrollBy(0,100)
    },300)
</script>

History对象(非常重要)

forward()进入下一条历史记录

back()回到上一条历史记录,登录后用这个方法

go()跳转到指定的历史记录

注意

go(-1)与back()效果一致

go(1)与forward()效果一致

注意他们前面必须写history

<script type="text/javascript">
    console.log(window.history)

    setTimeout(function(){
        window.history.back(); 
        window.history.go(-1);
    },3000)
</script>

location对象

hash获取#后面的内容

host获取主机名和端口号

hostname获取主机名

pathname返回当前的url路径

protocol返回协议

href获取或设置地址 有历史记录

search获取?后面的内容

<script>
	console.log(window.location)
			
			// host获取主机名和端口名
			console.log(window.location.host)//000.0.0.1:8848
			
			// port获取主机名和端口号
			console.log(window.location.port)//8848
			
			// hostname获取主机名
			console.log(window.location.hostname)//000.0.0.1
			
			// pathname返回当前的url路径
			console.log(window.location.pathname)///CQ2108/js%E5%9F%BA%E7%A1%80/0731/04open%E6%89%93%E5%BC%80%E4%B8%80%E4%B8%AA%E6%96%B0%E7%AA%97%E5%8F%A3.html
			
			// protocol返回协议
			console.log(window.location.protocol)//http:
			
			// href获取或设置地址  有历史记录
			console.log(window.location.href)//一段地址
			
			// hash获取#后的内容
			console.log(window.location.hash)
			
			// search获取?后的内容
			console.log(window.location.search)
</script>

replace用于当前页面到注册页面，注册页面到登录,登录直接go(-1)返回当前页面，因为它没有历史记录

assign加载新的页面 有历史记录

<script>
    setTimeout(function(){

        //window.location.href='test.html';

        // assign加载新的页面  有历史记录
        //window.location.assign('test.html')

        // replace替换为新页面  没有历史记录
        window.location.replace('test.html')
    },1500)
</script>

n.hash)

		// search获取?后的内容
		console.log(window.location.search)
```

replace永远当前页面到注册页面，注册页面到登录,登录直接go(-1)返回当前页面，因为它没有历史记录

assign加载新的页面 有历史记录

<script>
    setTimeout(function(){

        //window.location.href='test.html';

        // assign加载新的页面  有历史记录
        //window.location.assign('test.html')

        // replace替换为新页面  没有历史记录
        window.location.replace('test.html')
    },1500)
</script>
最love酸奶
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript BOM操作
brokyz
06-30 671
BOM （Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window。BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。BOM 缺乏标准，JavaScript 语法的标准化组织是 ECMA，DOM 的标准化组织是 W3C，BOM 最初是 Netspace 浏览器标准的一部分。window 对象是浏览器的顶级对象，它具有双重角色。在调用的时候可以省略 window，前面学习的对话框都属于 window 对象方法，如
JS BOM对象
hbl020305的博客
08-09 621
JS BOM对象
JS BOM Location
weixin_44154094的博客
01-24 145
Location1.定义1.1 location1.2 assign()1.3 reload()1.4 replace() 1.定义 Location * - 该对象中封装了浏览器的地址栏的信息 1.1 location 如果直接打印location，则可以获取到地址栏的信息（当前页面的完整路径） 如果直接将location属性修改为一个完整的路径，或相对路径 * 则我们页面会自动跳转到该路径，并且会生成相应的历史记录 location = "https://www.nxys.xyz";
JavaScript BOM 对象详解
xycxycooo的博客
07-16 615
在 JavaScript 编程中，BOM（Browser Object Model）是指浏览器对象模型，它提供了一组用于与浏览器窗口进行交互的对象。BOM 对象允许开发者控制浏览器的行为和获取浏览器的信息。本文将详细介绍 JavaScript 中的 BOM 对象，并通过丰富的示例帮助你更好地理解。通过本文的详细讲解，相信你已经对 JavaScript 中的 BOM 对象有了全面的了解。在实际编程中，合理使用 BOM 对象可以提高代码的效率和可读性。对象是 BOM 的核心对象，代表浏览器窗口或标签页。
Javascript BOM 思维导图
Jeyaker的博客
09-14 661
Javascript 什么是BOM
2201_75883077的博客
12-31 1344
核心说明window 对象表示浏览器窗口。它是 BOM 的核心对象，提供了浏览器窗口的各种方法和属性。location 对象表示当前文档的 URL 信息。它提供了访问和操作浏览器地址栏的方法和属性。navigator 对象对象：提供了浏览器的相关信息，如浏览器的名称、版本等。screen 对象提供了关于用户屏幕的信息，如屏幕尺寸、颜色深度等。history 对象表示浏览器的浏览历史记录，可以通过它来前进或后退到不同的页面。document对象。
JavaScript BOM 案例
qq_52476758的博客
12-15 941
BOM 案例 1. 5秒后自动关闭广告 <body> <img src="images/ad.jpg" alt="" class="ad"> <script> var ad=document.querySelector('.ad'); setTimeout(function(){ ad.style.display='none'; },5000); </script&gt
JavaScript BOM操作(超详细)
wu_ry的博客
03-13 1254
由于window对象是全局对象，所以在使用window对象的属性和方法时，window可以省略不写.例如，之前直接使用的alert()方法、confirm()方法及prompt()方法的用法、本节主要讲解open()方法和close()方法，JavaScript定时函数会在后面中详细介绍。设置间谒调用的方法是setInterval(),接收的参数与setTimeout()方法相同，为要执行的代码和每次执行之前需要等待的毫秒数。可以通过数组的名称和下标直接访问数组的元素，访问数组的表示形式，数组名[下标]。
js BOM
随风的博客
10-04 479
什么是BOM BOM（browser odject model）浏览器对象模型 BOM对象 window 所有的全局变量和全局方法都被归在window上 window对象方法 navigator screen history location document event ...
JavaScript之BOM操作
fusheng_lee的博客
03-29 512
BOM操作
JavaScript BOM操作 示例代码
07-01
JavaScript BOM操作 示例代码JavaScript BOM操作 示例代码JavaScript BOM操作 示例代码JavaScript BOM操作 示例代码JavaScript BOM操作 示例代码JavaScript BOM操作 示例代码JavaScript BOM操作 示例代码JavaScript ...
JavaScript bom操作 window-event 示例代码
06-27
JavaScript bom操作 window_event 示例代码JavaScript bom操作 window_event 示例代码JavaScript bom操作 window_event 示例代码JavaScript bom操作 window_event 示例代码JavaScript bom操作 window_event 示例代码...
JavaScript bom操作 window对象的方法 示例代码
06-27
JavaScript bom操作 window对象的方法 示例代码JavaScript bom操作 window对象的方法 示例代码JavaScript bom操作 window对象的方法 示例代码JavaScript bom操作 window对象的方法 示例代码JavaScript bom操作 ...
JavaScript BOM操作 window对象的子级对象 示例代码
07-01
JavaScript BOM操作 window对象的子级对象 示例代码JavaScript BOM操作 window对象的子级对象 示例代码JavaScript BOM操作 window对象的子级对象 示例代码JavaScript BOM操作 window对象的子级对象 示例代码...
Vue 3 和 SpringBoot 实现文件分片上传示例
exlink2012的专栏
07-22 456
实现分片上传，并使用Spring Boot在后端保存文件。前端将文件分片并逐个上传到后端，后端接收到所有分片后再进行合并，最终保存为一个完整文件。
Next.js静态导出与动态路由优化
天涯学馆
07-20 1067
Next.js 是一个流行的 React 框架，它简化了构建服务端渲染（SSR）和静态站点生成（SSG）的应用。静态导出是Next.js的一项强大特性，它允许你将整个应用程序导出为静态文件，从而在无服务器环境下运行，提高加载速度和降低服务器成本。动态路由则允许你根据数据生成页面，即使在静态导出的情况下也能保持灵活性。
HarmonyOS应用开发者高级认证，Next版本发布后最新题库 - 多选题序号4
Gusha_的博客
07-23 1168
HarmonyOS应用开发者高级认证最新题库，编写于2024年7月19日，Next版本发布之后
【React 】开发环境搭建详细指南
lph159的博客
07-24 1019
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
在Vue程序中，如何检测用户的登录状态并跳转到对应页面
最新发布
exlink2012的专栏
07-25 292
通过以上步骤，你可以在Vue应用程序中检测用户的登录状态，并在用户尝试访问受保护页面时跳转到登录页面。同时，在用户登录和登出后，你可以根据需要跳转到相应的页面。
JavaScript BOM与基本语法实战
"JavaScript基本语法和BOM模型" 在Web开发中，JavaScript是一种广泛使用的脚本语言，主要用于增强用户的交互体验。本章节主要介绍JavaScript的基本语法和浏览器对象模型（Browser Object Model，简称BOM）。BOM允许...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值