JavaScript学习日志(四):BOM

BOM的核心对象就是window,这一章没什么好说的,总结一些比较常用的:

1,a未定义,
a; //报错
window.a; //undefined

不能用delete删除全局变量

2,html5不支持<frame>标签,但是支持<iframe>标签

3,js中window对象的top,opener,parent,self属性(虽然对于window来说,它们是一种属性,但是也可以直接用他们作为对象)的区别:

top:该变更永远指分割窗口最高层次的浏览器窗口。如果计划从分割窗口的最高层次开始执行命令,就可以用top变量。
opener:用于在window.open的页面引用执行该window.open方法的的页面的对象。如果a页面使用了window.open()了b页面,那么我们在b页面要引用a页面,就可以使用opener对象,前提是必须是用window.open()方法打开的才能用;
parent:在iframe,frame中生成的子页面中访问父页面的对象。例如:A页面中有一个iframe或frame,那么iframe或frame中的页面就可以通过parent对象来引用A页面中的对象。这样就可以获取或返回值到A页面中。(不要和jquery的parent()方法混淆)
self:指当前窗口

4,窗口位置

screenLeft,screenTop :  IE, Safari, Opera, Chrome

screenX, screenY : Firefox, Safari, Chrome

跨浏览器获取窗口左边上边位置:

var leftPos = (typeof window.screenLeft == "number") ? window.screenLeft : window.screenX;

var topPos =  (typeof window.screenTop == "number") ? window.screenTop : window.screenY;

window窗口位置移动(这两个方法可能浏览器禁用):

window.moveTo(200,200);  //将窗口向下移动到200像素,向右移动到200像素。(0,0)是屏幕左上角

window.moveBy(-50,100); //将窗口向下移动100像素,向左移动50像素

网页可见区域宽:document.body.clientWidth
网页可见区域高:document.body.clientHeight
网页可见区域宽:document.body.offsetWidth (包括边线的宽)
网页可见区域高:document.body.offsetHeight (包括边线的宽)
网页正文全文宽:document.body.scrollWidth
网页正文全文高:document.body.scrollHeight
网页被卷去的高:document.body.scrollTop
网页被卷去的左:document.body.scrollLeft
网页正文部分上:window.screenTop
网页正文部分左:window.screenLeft
屏幕分辨率的高:window.screen.height
屏幕分辨率的宽:window.screen.width
屏幕可用工作区高度:window.screen.availHeight
屏幕可用工作区宽度:window.screen.availWidth

页面视口大小(跨浏览器):

var pageWidth = window.innerWidth;

var pageHeight = window.innerHeight;

if(typeof pageWidth != "number"){

  if(document.compatMode == "CSS1Compat"){

    pageWidth = document.documentElement.clientWidth;

    pageHeight = document.documentElement.clientHeight;

  }else {

    pageWidth = document.body.clientWidth;

    pageHeight = document.body.clientHeight;

  }

}

5,prompt(que,ans);
que: 对话框的问题
ans: 默认答案

6,location对象:
window.location === document.location; //true

location.hash; //URL中的hash
location.href; //返回的是完整的URL,如果等于一个URL,就相当于跳转到这个URL上
location.host; //返回的是服务器名称和端口号(如果有)
location.hostname; //不带端口号的服务器名称
location.port; //端口号
location.protocol; //页面使用的协议,”http:”或”https:”
location.search; //URL查询的字符串,以问好开头的,可以用location.search.substring(1),表示问号后面的所有字符串,这里的字符串是经过编码的,要用decodeURIComponent(str)来解码

7,URI三种解码与编码的对比:
decodeURI() & encodeURI():十六进制编码,如果url进行跳转,可以用它来编码,例如:Location.href=encodeURI(http://cang.baidu.com/do/s?word=百度&ct=21);

decodeURIComponent() & encodeURIComponent():也是十六进制编码,但是比上面的要更复杂,更细,特殊符号也会转码,所以适用于作为参数来使用,例如:<script language="javascript">document.write(‘<a href="http://passport.baidu.com/?logout&aid=7&u=‘+encodeURIComponent ("http://cang.baidu.com/bruce42")+‘">退出</a>‘);</script>

escape() & unescape():不推荐使用

8,位置操作:
location.href= “url”; //推荐使用
location.assign= “url”; //等同于上面
location.replace(“url”); //跳转后不能后退,这个有点类似与vue-router里面,this.$router.push和this.$router.replace的区别
location.reload(); //重新加载

9,navigator对象:
主要是针对于客户端浏览器的一些属性,多的不说了,
navigator.onLine; //是否连网
navigator.appName; //浏览器完整名字

10,screen对象:
最常用的就是分辨率了:
window.screen.width/height

11,history对象:
history.go(-1); //后退一页
history.go(1); //前进一页
history.back(); //后退一页
history.forward(); //前进一页

时间: 2024-10-15 01:16:15

JavaScript学习日志(四):BOM的相关文章

JavaScript学习总结(四)——jQuery插件开发与发布

JavaScript学习总结(四)--jQuery插件开发与发布 目录 一.插件开发基础 1.1.$.extend 1.1.1.扩展属性或方法给jQuery 1.1.2.扩展对象 1.2.$.fn.extend 1.3.$.fn 二.插件开发 2.1.jQuery插件开发基本模式 2.2.获取上下文 2.3.第一个jQuery插件 2.4.链式编程 2.5.参数与默认值 2.5.1.默认值 2.5.2.参数对象 2.5.2.参数类型 2.6.命名空间与面向对象 2.7.插件与关联的CSS 2.8

javascript学习日志:前言

javascript学习日志系列的所有博客,主要理论依据是<javascript权威指南>(犀牛书第6版)以及<javascript高级程序设计第三版>(红色书),目前js行业内公认的两本权威圣经,无奈有些地方两本书会有一些说辞不一致,那我加入了一些自我理解,尽量将两者融会贯通,通读之后发现,js确实魅力无限,每次看一遍都会有新的理解和感悟,所以这系列我会持续更新,一旦有新的理解我会立即写下来,不断的推翻重建再推翻再重建,我很享受这个自我认知不断更新的过程. 我知道学习js的路很漫

JavaScript学习4:BOM之window对象

BOM也叫做浏览器对象模型,它提供了很多对象,用于访问浏览器的功能.BOM缺少规范,每个浏览器提供商又按照自己的想法去扩展它,那么浏览器共有的对象就成了事实的标准,所以,BOM本身是没有标准的或者说是还没有哪个组织去为它制定标准. 本文我们主要来看BOM中的核心对象:Window对象 Window对象是BOM的核心对象,它表示浏览器的一个实例.Window对象处于JavaScript结构的最顶层(如下图所示),对于每个打开的窗口,系统都会自动为其定义window对象. 1 对象的属性和方法 Wi

JavaScript学习笔记之BOM

BOM的核心对象是window,它既表示浏览器窗口以及页面可见区域,同时也是ECMAScript中的Globe对象,所有的全局变量和函数都是它的属性,并且所有的原声函数以及其他函数也都存在于它的命名空间下. 一,window窗口相关设置 1)获取浏览器窗口在显示屏的位置 根据浏览器不同,可以采用screenLeft,screenTop或者screenX,screenY,跨浏览器的代码如下: //获取浏览器的位置 var leftPos=(typeof window.screenLeft =='n

JavaScript学习总结(四)——this、原型链、javascript面向对象

一.this 在JavaScript中this表示:谁调用它,this就是谁. JavaScript是由对象组成的,一切皆为对象,万物皆为对象.this是一个动态的对象,根据调用的对象不同而发生变化,当然也可以使用call.apply修改this指向的对象.它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用 1.0.猜猜答案 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8&quo

前端javaScript学习第四天

目前在从事前端工作,特别总结javaScript基础知识供大家学习,本人特总结一下使用方法献给目前正在学习web前端的小伙伴们,希望你们在前端领域闯出属于自己的一片天空来,需要sublime软件安装包的或者前端资料的,可以加我创建的前端群 937268047 一.函数2.1 函数声明函数就是功能(function)我们可以自己封装一些语句在函数内部,函数就具有了某一种特定的功能. 声明函数:function 空格隔开函数名后面紧跟小括号,小括号中可以书写参数,将功能语句书写在大括号中表示整体.

JavaScript学习第四天

1.自定义属性,使用好索引值 例子: 下面有一段js代码: <script> window.onload = function(){ var oBtn = document.getElementByTagName("button"); for(var i=0;i<oBtn.length;i++){ //在循环的时候给每一个btn添加一个自定义属性 oBtn[i].index = i;//这行代码的相当于<button index=0 type="but

Javascript 学习 笔记四

1.children和childNodes(参考:JavaScript中Element与Node的区别,children与childNodes的区别 children和childNodes) Node(节点)是DOM层次结构中的任何类型的对象的通用名称,Node有很多类型,如元素节点,属性节点,文本节点,注释节点等,通过NodeType区分,常见的有: 节点类型 NodeType 元素element 1 属性attr 2 文本text 3 注释comments 8 文档document 9 更多

JavaScript学习(四):JavaScript语法

ECMAScript的语法大量借鉴了C及其他类C语言(如Java和Perl)的语法. (1)区分大小写 区分大小写意味着,变量名test和Test分别表示两个不同的变量.也就是说,关键字.变量.函数名和所有标识符(identifier)都必须采取一致的大小写形式. 但需要注意的是,HTML并不区分大小写(尽管XHTML区分大小写).由于它和客户端JavaScript(运行在Web浏览器中的JavaScript)联系紧密,因此这点区别很容易混淆. 许多客户端JavaScript独享和属性与它们所表