一.window对象 (浏览器对象模型)
window对象表示浏览器中打开的窗口,它是javaScript浏览器对象模型中的顶层对象,其中还包括了
-
Document:是我们可以从脚本中对HTML页面中的所有元素进行访问
-
History:包含用户(在浏览器中)访问过的URL。
-
Location:包含有关当前URL的信息
-
Navigator:包含有关浏览器的信息
-
Screen:包含有关客户端显示屏幕的信息
说明:
-
所有浏览器都支持window对象。他表示浏览器窗口
-
所有JavaScript全局对象、函数以及变量,均自动成为window对象的成员
-
全局变量是window对象的属性,全局函数是window对象的方法
-
给属性赋值,不需要声明;只有给变量赋值,没有声明就报错
1. window对象
1.1位置
-
screenX 返回相对于屏幕窗口的x坐标
-
screenY //前两者,IE不支持
-
screenLeft
-
screenTop //后两者通用
1.2 窗口大小
-
window.innerWidth
-
window.innerHeight //前两者IE不支持
-
document.documentElement.clientWidth
-
document.documentElement.clientHeight //后两者通用
2.window 对象的方法
2.1 窗体的移动和尺寸(仅IE有效)
2.2滚动条的控制
-
window.scrollBy(x,y) 相对于当前滚动条的位置移动
-
window.scrollTo(x,y) 把内容滚动到指定的坐标
2.3 时间间隔函数(计时器)
-
setTimeout(fn,2000):让谁延迟多少时间 (毫秒)
-
setInterval(fn,2000):每隔多长时间执行一次
-
clearInterval(x,y) 取消由setInterval()方法设置的timeout
-
clearTimeout(code, millisec)
2.4 打开新窗口
window.open(URL,name,specs,replace)
参数说明:http://www.runoob.com/jsref/met-win-open.html
2 . history对象
2.1 属性:length 表示历史列表中的网址数
2.2 方法:
-
history.back() 加载历史列表中的前一个URL
-
history.forward()
-
history.go(1)
-
history.go(number|URL)
3 .location对象
3.1 属性
-
location.href :返回完整的URL
-
location.hostname: 返回URL的主机名
-
location.pathname: 返回URL的路径名
-
location.port: 返回一个URL服务器使用的端口号 (默认是80)
-
location.search: 返回一个URL的查询部分
3.2 方法
-
location.assign(URL):加载一个新的文档
-
location.reload: 刷新当前文档
-
location.replace(newURL): 用一个新文档取代当前文档
4. screen对象
4.1 属性
-
availHeight: 返回屏幕的高度(不包括任务栏)
-
availWidth: 返回屏幕的宽度
-
返回屏幕的宽度
-
height: 返回屏幕的总高度
5. Navigator对象 包含浏览器的有关信息
5.1 属性
-
appCodeName:返回浏览器的代码名
-
appName: 返回浏览器的名称
-
appVersion: 返回浏览器的平台和版本信息
-
platform:返回运行浏览器对的操作系统平台
重点:针对全局变量同名覆盖的情况:
解决:
-
尽量避免使用全局变量;
-
把所有的代码全部装在一个函数function内部 -只有一次:匿名函数
(function(){
var a = 10;
var b = 20;
})();
把这样立即用小括号去去调用的函数,叫立即执行函数或自执行函数
同步和异步:
-
同步:对于一个比较花费时间的事情来说,等待这件事情完成之后,再去执行下面的事情
confirm,peompt,alert都是同步的语句,都会阻塞js的执行
-
异步:对于一个比较花费时间的事情来说,在这件事情执行的同时,就去做下面的事情
setTimeout,setInterval
例:
(function(){
var fn = function(){
console.log("hello,word")
};
setTimeout(fn,2000);
//鉴别:(fn,2000)和(fn(),2000)的区别//(fn,2000):延迟2000秒才出现//(fn(),2000):直接出现//fn()传的是fn函数的返回值,如果fn没有return,就传undefined,//所以fn加上()后,就没有显示
// setInterval(fn,2000)//每隔一段时间去执行某段代码
//清除计时器
var timer = setInterval(function(){console.log("hello");},1000);
setTimeout(function(){clearInterval(timer);},5000);
})();
//练习:每隔1秒打印出1-20
var times = 0;
var timer = setInterval(function(){
times++;
console.log(times);
if(times >= 20){
clearInterval(timer);
}
},1000);
法二: