JavaScript_BOM

最新推荐文章于 2021-04-30 09:54:20 发布

Kro_C

最新推荐文章于 2021-04-30 09:54:20 发布

阅读量134

点赞数

分类专栏： JavaScript

为什么要复制我的代码? 难道我写的太好了?

本文链接：https://blog.csdn.net/Kro_C/article/details/114944955

版权

JavaScript 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

JavaScript的组成

JavaScript的组成
ECMAScript : js中核心语法
BOM: browser object model 浏览器对象模型,主要提供一些操作浏览器的方法和属性
DOM: document object model 文档对象模型,主要提供一些操作文档的属性和方法

window：BOM范畴中的顶级对象，es中的全局对象
es中的全局对象: 当全局定义了一个变量的时候,那么会把这个变量存储在window对象中

获取浏览器的窗口尺寸

	window.innerWidth; 获取浏览器可视区域的宽度
	window.innerHeight; 获取浏览器可视区域的宽度
    var w = window.outerWidth; 获取浏览器的宽度
    var h = window.outerHeight; 获取浏览器的高度

	//window可以省略不写
	var w = innerWidth;
    var h = innerHeight;

滚动条的相关属性

window.onscroll 滚动事件,当浏览器中的滚动条在滚动的时候会触发这个事件

	获取滚动条滚动中,页面被卷去的高度
	[1] document.documentElements.scrollTop 如果HTML页面没有<!DOCTYPE html>的时候 获取不到数据 值一直为0
	[2] document.body.scrollTop 如果页面有<!DOCTYPE html>的时候获取不到值
	[3] scrollY 不存在兼容  获取页面被卷去的高度
	[4] scrollX 获取页面被卷去的宽度

	window.onscroll = function(){
        var y = scrollY;
        console.log(y);
    }

scrollTo(): 设置滚动条中页面被卷去的高度
参数: 一般情况下, 给两个参数
参数1: 水平卷去的高度
参数2: 垂直卷去的高度
scrollTo(0,0)
参数还可以设置为对象: scrollTo( {top : 0} )

	回到顶部:
	scrollTo({top:0,behavior:'smooth'});
	behavior:'smooth': 给回到顶部添加顺滑动画

scrollBy()
scrollBy参考位置与scrollTo不一样
scrollTo 参考位置为滚动条的最顶部;
scrollBy 参考位置为滚动条的当前位置, 当值为正数的时候滚动条往下走,当值为负数的时候滚动条往上走.

系统弹窗

alert() 简单的弹窗
prompt() 有输入框的弹窗
confirm() 确认弹窗
open() 打开页面
close() 关闭页面

	var btn = document.getElementById('btn1');
    var btn2 = document.getElementById('btn2');
	
	btn.onclick = function () {
   		open(
    		'https://www.baidu.com',
    		"_blank", // _self 
    		// "width=300,height=300,top=200,left=200",打开窗口的大小以及位置
   			false
        );
	}
    btn2.onclick = function(){
   		close();
   }

location

location: 操作浏览器地址栏的一个属性(对象)

这个对象的属性:
hash: 获取或者设置地址的哈希值(#后面的值)
host: 域名
href: 获取或者设置url地址栏中的地址
origin: 拿到不包括参数和哈希值的地址
protocaol: 获取地址的协议
search: 获取或者设置地址中的参数(?后面的值)

这个对象的方法:
reload() 重新加载
replace() 替换

更改地址栏中的地址
[1] open(‘url地址’)
[2] location.replace(‘url地址’) // 这个会覆盖页面,不会留下历史记录(不能返回)
[3] location.href = ‘url地址’

	var btn = document.getElementById('btn');
    var btn1 = document.getElementById('btn1');

    btn.onclick = function(){
    	location.reload();
    }
    btn1.onclick = function(){
    	location.replace("https://www.taobao.com");
    }