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. java虚拟机(一)-java内存区域与内存溢出异常

    1.简述:java虚拟机在执行java程序的过程中,会把他所管理的内存分为以下几个区域, 1.1.程序计数器 1.2.虚拟机栈 1.3.本地方法栈 1.4.java堆 1.5.方法区 如图所示: 2. ...

  2. rpm 命令的使用

    rpm -ivh    xv-3.10a-13.i386.rpm 在Terminal中,基本的安装指令如下: rpm -i    xv-3.10a-13.i386.rpm 如果你的连网速度足够快,也可 ...

  3. Ubuntu 16.04安装Sublime Text3

    1.安装: sudo add-apt-repository ppa:webupd8team/sublime-text-3 sudo apt-get update sudo apt-get instal ...

  4. 26、Java并发性和多线程-线程池

    以下内容转自http://ifeve.com/thread-pools/: 线程池(Thread Pool)对于限制应用程序中同一时刻运行的线程数很有用.因为每启动一个新线程都会有相应的性能开销,每个 ...

  5. Html5 history Api简介

    一. Html4的History API back() 后退,跟按下“后退”键是等效的. forward() 前进,跟按下“前进”键是等效的. go() 用法:history.go(x):在历史的范围 ...

  6. Html5离线缓存简介

    一. 什么是manifest 首先manifest是一个后缀名为minifest的文件,在文件中定义那些需要缓存的文件,支持manifest的浏览器,会将按照manifest文件的规则,像文件保存在本 ...

  7. C语言实现strcmp()和strcpy()函数

    #include <stdio.h> #include <assert.h> char *strcpy(char *strDest, const char *strScr) { ...

  8. vector实现

    typedef int size_type; /* vector维护的是一个连续线性空间,提供的迭代器是Random Access Iterators即普通指针 */ template <cla ...

  9. 设计模式(一)单例模式:创建模式 ASPNET CORE WEB 应用程序的启动 当项目中 没有STARTUP.CS 类如何设置启动 配置等等

    设计模式(一)单例模式:创建模式 先聊一下关于设计的几个原则(1)单一原则(SRP):一个类应该仅有一个引起它变化的原因 :意思就是 (一个类,最好只负责一件事情,并且只有一个引起它变化的原因(2)开 ...

  10. 高效开发之SASS篇 灵异留白事件——图片下方无故留白 你会用::before、::after吗 link 与 @import之对比 学习前端前必知的——HTTP协议详解 深入了解——CSS3新增属性 菜鸟进阶——grunt $(#form :input)与$(#form input)的区别

    高效开发之SASS篇   作为通往前端大神之路的普通的一只学鸟,最近接触了一样稍微高逼格一点的神器,特与大家分享~ 他是谁? 作为前端开发人员,你肯定对css很熟悉,但是你知道css可以自定义吗?大家 ...