window对象

1、 window 对象是Global对象,在全局作用域中声明的变量和函数都可以通过window.来访问。跟直接在window上添加属性效果一样。唯一的区别就是delete时,如果是全局变量会返回false,而window的属性会返回true(但是变量依然存在,跟没删除没区别)。所以,全局变量不可以delete,只有局部变量可以通过delete销毁。

2、尝试访问未定义的变量时会抛出异常,但是可以通过window进行异常属性查询。

3、top永远表示最外层框架,parent是直接上级,有时等于top,window是窗口本身始终=self。有时top=parent=window=self;

4、窗口位置:firefox中是screenX和screenY,其他浏览器中是screenLeft和screenTop。但是在IE和opera中保存的是可视区域相对于屏幕的位置,而其他浏览器则是浏览器相对于屏幕的位置。会有 0,0。

5、窗口大小:跨浏览器确定一个窗口的大小不是一件简单的事。innerWidth,innerHeight,outerWidth,outerHeight有的浏览器返回相同的值,有的是窗口可可视区域的值。但是可以跨浏览器确定可视区域的大小。(IE中有4像素的差别,长宽都会)。

6、定时执行:间歇和超时调用,setInterval()对应clearInterval(); setTimeout()对应clearTimeout(); 建议少使用间歇调用,因为后一个间歇调用可能会在前一个间歇调用结束前执行(如果调用执行时间过长),可以通过setTimeout实现间歇调用的效果。

7、通过window.print()和window.find()可以实现打印和查找的功能。

location对象

属性:host=‘www.baidu.com:80’,hostname='www.baidu.com' ,href = 'http://www.baidu.com' pathname='/wp/' port='8080',protocol ='http',search='?p1=v1&p2=v2'
页面跳转:1、location.href='http://...' 2、window.location = URL 3、location.assign(URL); 4、location.replace(URL)(不会添加到历史记录,不能后退)。5、location.reload()重新加载,如果传入true则强制从服务器刷新。

navigator对象

认为比较能用到的属性:cookieEnabled,javaEnabled(),onLine(是否连接到了互联网)platform(浏览器所在的系统平台)

screen对象

screen.height和screen.width电脑屏幕的宽度和高度(像素)

history对象

主要用来前进后退,history.go(-1),history.back();history.forward();;

测试代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
*{ padding:0px; margin:opx; }
</style>
</head> <body>
<script type="text/javascript" language="javascript">
var age =10;
function sayAge(){
alert(this.age);
var v = {id:23,name:'www'};
alert(v.id+' : '+ v.name);
delete v.id;
alert(v.id+' : '+ v.name);
}
window.sayAge();
window.name = 'wch';
alert(delete window.age);
alert(delete window.name);
alert(delete age);
alert(window.age + ' : '+ window.name); if(v){ // 异常
alert('错误!');
}
if(!window.v){
alert('进行一次属性查询,如果未定义就不会跑异常了!');
} alert(top == parent);
alert(top == window.parent.parent);
alert(top == self); var leftPos = (typeof window.screenLeft == 'number') ? window.screenLeft : window.screenX;
var topPos = (typeof window.screenTop == 'number' ) ? window.screenTop : window.screenY;
alert(leftPos + ' : '+ topPos); 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;
}
}
alert(pageWidth + ' : ' + pageHeight); alert(location.href + ' : '+location.search+' : '+ location.port); alert(navigator.cookieEnabled + ' : '+ navigator.javaEnabled()+' : '+navigator.onLine +' : '+navigator.platform) alert(screen.height + ' : '+screen.width)
</script>
</body>
</html>

js 学习笔记---BOM的更多相关文章

  1. JS学习笔记5_DOM

    1.DOM节点的常用属性(所有节点都支持) nodeType:元素1,属性2,文本3 nodeName:元素标签名的大写形式 nodeValue:元素节点为null,文本节点为文本内容,属性节点为属性 ...

  2. Node.js学习笔记(1):Node.js快速开始

    Node.js学习笔记(1):Node.js快速开始 Node.js的安装 下载 官方网址:https://nodejs.org/en/ 说明: 在Windows上安装时务必选择全部组件,包括勾选Ad ...

  3. js学习笔记:webpack基础入门(一)

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  4. Vue.js学习笔记(2)vue-router

    vue中vue-router的使用:

  5. JS 学习笔记--9---变量-作用域-内存相关

    JS 中变量和其它语言中变量最大的区别就是,JS 是松散型语言,决定了它只是在某一个特定时间保存某一特定的值的一个名字而已.由于在定义变量的时候不需要显示规定必须保存某种类型的值,故变量的值以及保存的 ...

  6. WebGL three.js学习笔记 使用粒子系统模拟时空隧道(虫洞)

    WebGL three.js学习笔记 使用粒子系统模拟时空隧道 本例的运行结果如图: 时空隧道demo演示 Demo地址:https://nsytsqdtn.github.io/demo/sprite ...

  7. WebGL three.js学习笔记 法向量网格材质MeshNormalMaterial的介绍和创建360度全景天空盒的方法

    WebGL学习----Three.js学习笔记(5) 点击查看demo演示 Demo地址:https://nsytsqdtn.github.io/demo/360/360 简单网格材质 MeshNor ...

  8. WebGL three.js学习笔记 创建three.js代码的基本框架

    WebGL学习----Three.js学习笔记(1) webgl介绍 WebGL是一种3D绘图协议,它把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的 ...

  9. vue.js 学习笔记3——TypeScript

    目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...

随机推荐

  1. Problem 2669

    Romantic Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total S ...

  2. WeixinJSBridge 微信

    <!DOCTYPE html> <html> <head><title>微信WeixinJSBridge API</title> <m ...

  3. Redhat 6.1安装ArcGIS Server10.1

    http://blog.csdn.net/linghe301/article/details/7762985 操作环境:Redhat 6.1 Linux 安装ArcGIS Server10.1之前,还 ...

  4. Lua的面向对象程序设计

    Account={balance=} function Account.withdraw(self,v) self.balance=self.balance-v end a={balance=,wit ...

  5. UVa 12279 - Emoogle Balance

    题目:给你n个数字推断.零和非零数字的个数差. 分析:简单题. 读入数据非零+1.为零-1. 说明:目标650题╮(╯▽╰)╭. #include <iostream> #include ...

  6. AUTOTRACE

    .sqlplus 设置参数 set atuotrace on SET AUTOTRACE OFF --No AUTOTRACE report is generated. This is the def ...

  7. Android开发之使用sqlite3工具操作数据库的两种方式

    使用 sqlite3 工具操作数据库的两种方式 请尊重他人的劳动成果,转载请注明出处:Android开发之使用sqlite3工具操作数据库的两种方式 http://blog.csdn.net/feng ...

  8. 云上kafka和自建kafka对比

    说起Kafka,许多使用者对它是又爱又恨.Kafka是一种分布式的.基于发布/订阅的消息系统,其极致体验让人欲罢不能,但操心的运维.复杂的安全策略.可靠性易用性的缺失.算不上极致的性能发挥.并不丰富的 ...

  9. poj2011

    Shortest Prefixes Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 17608   Accepted: 765 ...

  10. caffe代码阅读10:Caffe中卷积的实现细节(涉及到BaseConvolutionLayer、ConvolutionLayer、im2col等)-2016.4.3

    一. 卷积层的作用简单介绍 卷积层是深度神经网络中的一个重要的层,该层实现了局部感受野.通过这样的局部感受野,能够有效地减少參数的数目. 我们将结合caffe来解说详细是怎样实现卷积层的前传和反传的. ...