JavaScript BOM学习
Mirror王宇阳
2019年11月13日 [首发]
数日没有更新博文了,觉得不好意思了!这不是,整理了一下JavaScript的一下BOM笔记资料,今天贡献出来!(HTML DOM也会随后整理发表)
笔者在接触Js之前就听闻Js的“牛逼”,接触后发现只要想法够贼,Js就能给你的贼想法复现 ~
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学习的更多相关文章
- javascript基础学习(十二)
javascript之BOM 学习要点: 屏幕对象 History对象 Location对象 一.屏幕对象 Screen对象是一个由javascript自动创建的对象,该对象的主要作用是描述客户端的显 ...
- javascript基础学习(十一)
javascript之BOM 学习要点: BOM介绍 Window对象 一.BOM介绍 浏览器对象模型简称为BOM(Brower Object Model),BOM由很多对象构成,对象与对象之间有着相 ...
- JavaScript 基础学习1-day14
JavaScript 基础学习1 知识预览JavaScript概述二 JavaScript的基础三 JavaScript的对象BOM对象DOM对象实例练习js扩展 JavaScript概述 JavaS ...
- javascript立体学习指南
javascript立体学习指南第一章:首先了解javascript 首先,什么是javascript? JavaStrip出生于1995年,是一种文本脚本语言,成都装修公司是一种动态的.弱类型的.基 ...
- JavaScript高级:JavaScript面向对象,JavaScript内置对象,JavaScript BOM,JavaScript封装
知识点梳理 课堂讲义 1.JavaScript面向对象 1.1.面向对象介绍 在 Java 中我们学习过面向对象,核心思想是万物皆对象. 在 JavaScript 中同样也有面向对象.思想类似. 1. ...
- JavaScript BOM对象介绍
bom:即broswer object model(浏览器对象模型),由五个对象组成: Window:对象表示浏览器中打开的窗口 最顶层对象. Navigator :浏览器对 ...
- 正则表达式(javascript)学习总结
正则表达式在jquery.linux等随处可见,已经无孔不入.因此有必要对这个工具认真的学习一番.本着认真.严谨的态度,这次总结我花了近一个月的时间.但本文无任何创新之处,属一般性学习总结. 一.思考 ...
- 大量Javascript/JQuery学习教程电子书合集
[推荐分享]大量Javascript/JQuery学习教程电子书合集,送给有需要的人 不收藏是你的错^_^. 经证实,均可免费下载. 资源名称 资源大小 15天学会jQuery(完整版).pd ...
- [推荐分享]大量Javascript/JQuery学习教程电子书合集,送给有需要的人
不收藏是你的错^_^. 经证实,均可免费下载. 资源名称 资源大小 15天学会jQuery(完整版).pdf 274.79 KB 21天学通JavaScript(第2版)-顾宁燕扫描版.pdf ...
随机推荐
- 服务器时间误差导致的google sign-in后台验证错误(远程调试java程序)
https://developers.google.com/identity/sign-in/web/backend-auth import com.google.api.client.googlea ...
- JZOJ10004 列车调度
[JZOJ100041]列车调度 Description Input Output Sample Input Sample1: 3 1 2 3 Sample2: 9 1 3 2 4 8 6 9 5 7 ...
- repr() Vs str()
在python中,将对象转换为字符串有两个内建函数: str Vs repr .str 是一个友好的,人们可读的字符串.repr 应该包含关于对象内容的详细信息(有时他们会返回相同的内容,例如整数). ...
- java架构之路-(Redis专题)Redis的主从、哨兵和集群
我们使用的redis,单机的绝对做不到高可用的,万一单机的redis宕机了,就没有备用的了,我们可以采用集群的方式来保证我们的高可用操作. 主从架构 大致就是这样的,一个主节点,两个从节点(一般两个就 ...
- 弄明白CMS和G1,就靠这一篇了
目录 1 CMS收集器 安全点(Safepoint) 安全区域 2 G1收集器 卡表(Card Table) 3 总结 4 参考 在开始介绍CMS和G1前,我们可以剧透几点: 根据不同分代的特点,收集 ...
- Java 面试-即时编译( JIT )
当我们在写代码时,一个方法内部的行数自然是越少越好,这样逻辑清晰.方便阅读,其实好处远不止如此,通过即时编译,甚至可以提高执行时的性能,今天就让我们好好来了解一下其中的原理. 简介 当 JVM 的初始 ...
- Oracle注入之带外通信
Oracle注入之带外通信和DNSLOG注入非常相似,例如和mysql中load_file()函数实现无回显注入非常相似. 下面介绍这个技术中常用的函数和使用. 环境这里准备两台测试,一台注入点的靶机 ...
- PHP pa和ma
<?php class Mouse { private $color; public $sex; public function __construct($role){ switch($role ...
- Math中ceil中为什么会有负零
double c=Math.ceil(-0.5); double d=Math.floor(0.5); System.out.println(c); System.out.println(d); Sy ...
- python中eval的使用
eval函数就是实现str与list.dict.tuple之间的转化栗子: a = "[[1,2], [3,4], [5,6], [7,8], [9,0]]" aa = eval( ...