[Javascript 高级程序设计]学习心得记录11 js的BOM
来源:互联网 发布:今日赌运测试php 编辑:程序博客网 时间:2024/05/20 13:18
BOM(浏览器对象模型)是web中js的核心,而BOM的核心对象就是window对象。在浏览器中,window对象有双重角色,它既是通过js访问浏览器的一个接口,又是规定的Global对象。此外,还有location等对象,因为整体比较简单,下面说一些值得注意的东西,普通的我就直接粘代码略过了。
一,window对象
1.全局作用域
前面说对象的时候写过Global对象了,在全局作用域中声明的变量和函数都会变成window对象的属性和方法。不过,有两件值得注意的事情:首先,全局变量不能通过delete操作符删除,而直接在window对象上的定义的属性可以。
var age = 29; window.color = "red"; //throws an error in IE < 9, returns false in all other browsers delete window.age; //throws an error in IE < 9, returns true in all other browsers delete window.color; //returns true alert(window.age); //29 alert(window.color); //undefined另外,尝试访问未声明的变量会抛出错误,但是通过查询window对象,可以知道某个可能未声明的变量是否存在。
2.窗口位置和窗口大小
获取窗口位置兼容,移动是moveTo,moveBy
var leftPos = (typeof window.screenLeft == "number") ? window.screenLeft : window.screenX; var topPos = (typeof window.screenTop == "number") ? window.screenTop : window.screenY; alert("Left: " + leftPos); alert("Top: " + topPos);获取页面视口的大小
var pageWidth = window.innerWidth, 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("Width: " + pageWidth); alert("Height: " + pageHeight);3.导航和打开窗口
window.open()方法,既可以导航到一个特定的URL,也可以打开一个新的浏览器窗口。这个方法接收4个参数:要加载的URL、窗口目标、一个特性字符和一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值。这个方法我用得不多,没有细看,贴个教程http://blog.csdn.net/vastskyjoe/article/details/4122104。
4.超时调用和间歇调用
超时调用:在指定的时间过后执行代码;间歇调用:每隔指定的时间就执行一次代码。
超时调用使用的是window对象的setTimeout()方法,接收两个参数:要执行的代码和以毫秒表示的时间。其中,第一个参数可以是包含js代码的字符串(和eval()函数参数一样),也可以是一个函数。会返回超时调用ID,可以传入clearTimeout()方法,取消超时任务。
//set the timeout var timeoutId = setTimeout(function() { alert("Hello world!"); }, 1000); //nevermind ?cancel it clearTimeout(timeoutId);间歇调用用法类似,setInterval()方法
var num = 0; var max = 100; function incrementNumber() { num++; //if the max has not been reached, set another timeout if (num < max) { setTimeout(incrementNumber, 500); } else { alert("Done"); } } setTimeout(incrementNumber, 500);二,location对象
window.location和document.location引用的是同一个对象,可以通过下面的对象属性对URL进行查询和操作
function getQueryStringArgs(){ //get query string without the initial ? var qs = (location.search.length > 0 ? location.search.substring(1) : ""), //object to hold data args = {}, //get individual items items = qs.length ? qs.split("&") : [], item = null, name = null, value = null, //used in for loop i = 0, len = items.length; //assign each item onto the args object for (i=0; i < len; i++){ item = items[i].split("="); name = decodeURIComponent(item[0]); value = decodeURIComponent(item[1]); if (name.length){ args[name] = value; } } return args; } //assume query string of ?q=javascript&num=10 var args = getQueryStringArgs(); alert(args["q"]); //"javascript" alert(args["num"]); //"10"三、history对象
history对象保存着用户上网的历史记录,从窗口被打开的那一刻算起。使用go()方法可以在历史记录间任意跳转。用得也不多,就不讲了。
- [Javascript 高级程序设计]学习心得记录11 js的BOM
- [Javascript 高级程序设计]学习心得记录9 js面向对象
- [Javascript 高级程序设计]学习心得记录10 js函数表达式
- 《JavaScript高级程序设计》BOM
- 《JavaScript高级程序设计》--BOM
- Javascript高级程序设计(BOM)
- [Javascript 高级程序设计]学习心得记录2 Javascript的垃圾回收机制
- javascript中的BOM操作(JS高级程序设计第八章)
- [Javascript 高级程序设计]学习心得记录 函数参数传递与引用
- [Javascript 高级程序设计]学习心得记录4 基本包装类型
- [Javascript 高级程序设计]学习心得记录5 操作符和语句
- [Javascript 高级程序设计]学习心得记录6 变量和作用域
- [Javascript 高级程序设计]学习心得记录7 引用类型(上)
- [Javascript 高级程序设计]学习心得记录8 引用类型(下)
- [Javascript 高级程序设计]学习心得记录12 DOM基础
- javascript高级程序设计读书笔记--BOM
- JavaScript高级程序设计6--BOM
- JS高级程序设计8-BOM
- 阿里内部创新自动化测试工具开放啦
- 软件调试笔记43
- 网络编程预习1
- RecyclerView多条目
- NULL
- [Javascript 高级程序设计]学习心得记录11 js的BOM
- MySQL系列—主从复制的配置(传统方式)
- Scala 与 Java 交互(九)
- springboot自定义http反馈状态码
- cad的font文件夹有字体但是标注显示问号的问题
- Convert ARGB to RGB without losing information
- JQ学习3月没多大长进
- Elasticsearch在UBUNTU下的安装与启动
- 【教程】Excel控件Spire.XLS 教程:在C#,VB.NET中添加Excel边框