Mirror王宇阳

2019年11月13日 [首发]

数日没有更新博文了,觉得不好意思了!这不是,整理了一下JavaScript的一下BOM笔记资料,今天贡献出来!(HTML DOM也会随后整理发表)

笔者在接触Js之前就听闻Js的“牛逼”,接触后发现只要想法够贼,Js就能给你的贼想法复现 ~

作者主页:https://www.cnblogs.com/wangyuyang1016/

BOM简单的说就是浏览器对象模型,对BOM的操作就是对浏览器的功能和属性的操作;

BOM的核心是window,它是一个浏览器的功能实例,浏览器会为HTML文档创建一个专属的window对象,并为每一个框架创建额外的window对象。

window对象是BOM的顶层,所有其他对象都是通过window对象衍生的;但是在调用子对象的时候并不强制要求声明

DOM的document也是window的子对象之一;以下两种写法是相同的:

	window.document.getElementById("herd")
document.getElementById("herd")

window对象常用方法

弹窗

window.alert() 消息框;弹窗会直接显示一段信息字段

window.confirm() 确认框;弹窗显示text字段的同时给出确认和取消两个按钮,返回true和false

window.prompt() 提示框;弹窗显示字段和一个输入框,并返回输入框内容

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="button" value="警告框" onclick="showalert()" />
<input type="button" value="确认框" onclick="showconfirm()" />
<input type="button" value="提示框" onclick="showprompt()" />
<script>
function showalert(){
window.alert("这是一个警告框");
}
function showconfirm(){
window.confirm("这是一个确认框");
}
function showprompt(){
window.prompt("这是一个提示框");
}
</script>
</body>
</html>

浏览器窗口信息

window.open() 打开新窗口

window.open( url , name , features , replace )

url:需要载入的网页URL地址

name:为新窗口命名

features:可选,窗体的特性定义

属性 特性
height 窗口高度
width 窗口宽度
left 左边距
top 左上边距
directories 是否显示链接工具栏
location 是否显示地址栏
menubar 是否显示菜单栏
resizable 是否允许调整窗口尺寸
scrollbars 是否显示滚动条
status 是否显示状态栏
toolbar 是否显示工具栏

window.close() 关闭当前实例化对象的窗口

window.moveTo() 移动当前窗口

window.resizeBy()/resizeTo() 调整窗口

window.focus() 获得当前对象窗口的焦点

window.blur() 释放当前对象窗口的焦点

window.print() 打印当前窗口或Frame

window.scrollBy()/scrollTo() 滚动当前窗口总的HTML文档

setInterval()/clearInterval() 设置定时器

setTimeout()/clearTimeout() 删除定时器

浏览器窗口尺寸

  • IE、Chrome、Firefox、Opera、Safan

    window.innerHeight 浏览器窗口的内部高度

    window.innerWidth 浏览器窗口的内部宽度

  • IE8以下版本

    document.documentElement.clientHeight 高度

    document.documentElement.clientWidth 宽度

    document.body.clientHeight 高度

    document.body.clientWidth 宽度

通常在JavaScript中,一段较为通用代码如下:

var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth ;
var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight ;

窗口页面绝对居中

// 页面绝对居中必须设置style属性: position:absolute;
var left = (w-width)/2;
var top = (h-height)/2;
// 利用margin外边距的top和left来“绝对居中”在浏览器中间
document.getElementById("cen").style.top = top+"px";
document.getElementById("cen").style.left = left+"px";

浏览器信息:navigator

navigator.appCodeName 返回浏览器代码名称(网景 Mozilla)

navigator.appName 返回浏览器名称

navigator.appVersion 返回浏览器版本号

navigator.Platform 返回浏览器操作系统

userAgent 返回包含内码名称、版本号;用于识别用户

<input type="button" value="浏览器信息" onclick="showversion()"/>
function showversion(){
// navigator 浏览器信息
var put = document.getElementById("version");
put.innerHTML = "代号:"+navigator.appCodeName+"<br/>";
put.innerHTML+= "名称:"+navigator.appName+"<br/>";
put.innerHTML+= "版本:"+navigator.appVersion+"<br/>";
put.innerHTML+= "系统:"+navigator.platform+"<br/>";
put.innerHTML+= "信息:"+navigator.userAgent+"<br/>";
}

屏幕对象:screen

属性对象 特性
screen.height 回显屏幕高度
screen.width 回显屏幕宽度
screen.avaiHeight 回显除任务栏的屏幕高度(可用的高度)
screen.avaiWidth 回显除系统部件宽度的宽度(可用的深度)
screen.colorDepth 浏览器分配的颜色或颜色深度
screen.pixelDepth 返回屏幕的颜色分辨率(色彩分辨率)
<input type="button" value="屏幕信息" onclick="showscreen()" />
function showscreen() {
document.getElementById("screen").innerHTML = "屏幕尺寸:"+screen.height+"*"+screen.width+"<br/>";
document.getElementById("screen").innerHTML+= "窗口尺寸:"+screen.availHeight+"*"+screen.availWidth+"<br/>";
document.getElementById("screen").innerHTML+= "色彩深度:"+screen.colorDepth+"/色彩分辨率:"+screen.pixelDepth+"<br/>";
}

地址对象:location

地址对象整理的是当前的URL信息

属性 特性
location.href 整个URL字符串
location.protocol URL的通信协议部分的字符子串
location.hostname URL中服务器名、域名子域名或IP地址
location.port URL中端口号
location.host hostname + port
location.pathname URL中的文件或路径名
location.hash URL中的锚点名称
location.search URL中表示变量的字符子串
location.reload(true/false) 刷新页面(true/false选择是否从服务器刷新)
location.replace(url) 通过url网址刷新当前网页

历史对象:history

历史对象保存着用户上网的历史记录

属性方法 特性
history.back() 显示浏览器的历史列表中后退一个网址的网页
history.forward() 显示浏览器的历史列表中前进一个网址的网页
history.go(n)/go(url) 显示浏览器的历史列表中的第n个网址网页,大于0表示前进,小于0表示后退,等于0表示刷新当前页

JavaScript BOM学习的更多相关文章

  1. javascript基础学习(十二)

    javascript之BOM 学习要点: 屏幕对象 History对象 Location对象 一.屏幕对象 Screen对象是一个由javascript自动创建的对象,该对象的主要作用是描述客户端的显 ...

  2. javascript基础学习(十一)

    javascript之BOM 学习要点: BOM介绍 Window对象 一.BOM介绍 浏览器对象模型简称为BOM(Brower Object Model),BOM由很多对象构成,对象与对象之间有着相 ...

  3. JavaScript 基础学习1-day14

    JavaScript 基础学习1 知识预览JavaScript概述二 JavaScript的基础三 JavaScript的对象BOM对象DOM对象实例练习js扩展 JavaScript概述 JavaS ...

  4. javascript立体学习指南

    javascript立体学习指南第一章:首先了解javascript 首先,什么是javascript? JavaStrip出生于1995年,是一种文本脚本语言,成都装修公司是一种动态的.弱类型的.基 ...

  5. JavaScript高级:JavaScript面向对象,JavaScript内置对象,JavaScript BOM,JavaScript封装

    知识点梳理 课堂讲义 1.JavaScript面向对象 1.1.面向对象介绍 在 Java 中我们学习过面向对象,核心思想是万物皆对象. 在 JavaScript 中同样也有面向对象.思想类似. 1. ...

  6. JavaScript BOM对象介绍

    bom:即broswer object model(浏览器对象模型),由五个对象组成:        Window:对象表示浏览器中打开的窗口 最顶层对象.       Navigator :浏览器对 ...

  7. 正则表达式(javascript)学习总结

    正则表达式在jquery.linux等随处可见,已经无孔不入.因此有必要对这个工具认真的学习一番.本着认真.严谨的态度,这次总结我花了近一个月的时间.但本文无任何创新之处,属一般性学习总结. 一.思考 ...

  8. 大量Javascript/JQuery学习教程电子书合集

    [推荐分享]大量Javascript/JQuery学习教程电子书合集,送给有需要的人   不收藏是你的错^_^. 经证实,均可免费下载. 资源名称 资源大小   15天学会jQuery(完整版).pd ...

  9. [推荐分享]大量Javascript/JQuery学习教程电子书合集,送给有需要的人

    不收藏是你的错^_^. 经证实,均可免费下载. 资源名称 资源大小   15天学会jQuery(完整版).pdf 274.79 KB   21天学通JavaScript(第2版)-顾宁燕扫描版.pdf ...

随机推荐

  1. Spring Boot 常用注解汇总

    一.启动注解 @SpringBootApplication @Target(ElementType.TYPE) @Retention(RetentionPolicy.RUNTIME) @Documen ...

  2. python+selenium自动化框架

    ---恢复内容开始--- 主要使用的模块: selenium/webdriver模块(须准备Chrome驱动),主要用于调用浏览器实现自动点击. unittest模块,主要用于整合测试用例. xlrd ...

  3. 虚拟机上安装centos8.0

    一.准备宿主机 为了培训Hadoop生态的部署和调优技术,需要准备3台虚拟机部署Hadoop集群环境,能够保证HA,即主要服务没有单点故障,可执行基本功能,完成小内存模式的参数调整. 1.1.准备安装 ...

  4. Unreal Engine 4 系列教程 Part 1:入门

    原文:Unreal Engine 4 Tutorial for Beginners: Getting Started 作者:Tommy Tran 译者:Shuchang Liu 本篇教程将引导你安装U ...

  5. 代码审计-YXcms1.4.7

    题外: 今天是上班第一天,全都在做准备工作,明天开始正式实战做事. 看着周围稍年长的同事和老大做事,自己的感觉就是自己还是差的很多很多,自己只能算个废物. 学无止境,我这样的垃圾废物就该多练,保持战斗 ...

  6. ‎Cocos2d-x 学习笔记(13) ActionEase

    ActionEase是ActionInterval的子类,能够变速执行动作.把内部动作进行了包装,通过传进update的time,加上不同的计算公式,算出新的time,作为内部动作的time,实现了内 ...

  7. php函数分为哪两种?

    PHP的真正威力源自于它的函数.函数分为内置函数和自定义函数. 内置函数 所谓PHP内置函数,就是在php程序的库里面已经定义了的函数,比如echo,mysql_connect,include_onc ...

  8. Vue中Class与Style如何动态绑定

    Class 可以通过对象语法和数组语法进行动态绑定: 对象语法: <div v-bind:class="{ active: isActive, 'text-danger': hasEr ...

  9. jQuery插件图片懒加载lazyload

    来自XXX的前言: 什么是ImageLazyLoad技术 在页面上图片比较多的时候,打开一张页面必然引起与服务器大数据量的 交互.尤其是对于高清晰的图片,占的几M的空间.ImageLazyLoad技术 ...

  10. gulp 自动化管理工具实现全过程

    1.全局安装gulp npm install gulp -g 2.项目内安装gulp npm install gulp -s 3.项目根目录新建gulpfile.js js内代码: //载入gulp核 ...