1.window对象是最顶层的对象
2.window对象有6大属性
(document,frames,history,location,navigator,screen),这6大属性本身也是对象
3.window对象旗下的document属性也是对象,并且document对象旗下也有5大属性,同时也是对象。(anchors,forms,images,links,location)
弹出框
alert('这是一个含有一段消息,以及一个确认按钮的警告框')
confirm('这是一个含有一段消息以及一个确认按钮和一个取消按钮的对话框')
prompt('这是一个提示框','');//返回输入的值,第一个参数是说明,第二个参数是输入框的默认值
特点:
confirm()返回一个布尔值,如果用户点击确定按钮则返回true,如果取消或关闭则返回false。
prompt()返回用户的输入值。使用率不高
print()//调出打印
find()//调出查找
defaultStatus='lee';//设置默认值永久的
status='xxx';//只是设置暂时
另外关于status,有些浏览器已经取消了状态条的设置,所以不建议使用,open()
open('http://www.baidu.com','baidu','width=400,height=400,top=100,left=100,location=no,toolbar=no')
特点:一般接收三个参数
第一参数:要加载的URL,
第二个参数:窗口名称或窗口目标,可以给新窗口设置一个名称,凡是以这个名称打开的窗口都会在这个名称下打开目标:_blank新建一个窗口,_parent表示在本窗口内加载,
第三个参数表示各种参数的设置
上面的例子中使用的第二个参数是名称opener
这个属性时子窗口控制父窗口的一个接口。
可以在子窗口的js内写下这么一段代码,来向父窗口内添加内容。
document.onclick=function(){
window.opener.document.write('ddd')
}获取窗口位置
这个存在兼容问题
//获取窗口的位置的兼容做法
var leftX=typeof window.screenLeft=='number'?window.screenLeft:screenX;
var topY=typeof window.screenTop=='number'?window.screenTop:screenY;
alert('X:'+leftX+'Y:'+topY)
特点:由于火狐不支持.screenLeft
这个方法,所以通过选择判断语句来进行判断,如果不支持那么就选择火狐支持的screenX
,如果直接用这个属性,但是IE又不支持。获取可视窗口大小
同样这个也存在兼容问题
//获取可视窗口大小的兼容做法
var width=window.innerWidth;
var height=window.innerHeight;
if(typeof width!='number'){
if(document.compatMode=='CSS1Compat'){
width=document.documentElement.clientWidth;
height=document.documentElement.clientHeight;
}else{
width=document.body.clientWidth;
height=document.body.clientHeight;
}
}
特点:innerWidth为可视窗口的宽度,outerWidth为可视窗口加上外边框的宽度,但是IE不支持,Chrome内二者值一样。
对于IE,可以使用DOM的办法获取可视窗口的大小,但是对于怪异模式下的情况,还有些问题,需要将文档元素替换成body才可以。超时调用定时器
setTimeout('alert(1)',1000);//不推荐--------------------a
function box(){
alert(22)
}
setTimeout(box,2000);//不够封装-------------------------b
setTimeout(function(){alert(22)},3000);//推荐-----------c
var box=setTimeout(function(){alert(22)},3000);//推荐---d
clearTimeout(box);
特点:有以上四种做法是创建超时调用定时器的办法。
a:不推荐是因为第一个参数如果是代码串,会造成不能使用过于复杂的代码
b:这样将第一个参数改为函数的引用,但是却显得不够封装
c:这是推荐做法,足够封装,但是会影响消除
d:这个就够啦,当需要消除时,直接把值传过去就消除啦-
间歇调用定时器
var box=setInterval('alert(2)',2000)
clearInterval(box);
这个的使用方法可超时调用时一样的,这个会每隔一段时间来调用一个函数
利用这两个定时器,可以分别完成一个倒数计时器的效果,不过推荐使用超时定时器来做
var num=0,max=5,id=null;
function box(){
num++;
var i=0;
i+=num;
document.getElementById('a').innerHTML=i;
if(num==max){
clearInterval(id);
alert('5秒到啦');
}
}
id=setInterval(box,1000);//使用超时调用模拟 var num=0,max=5,id=null; function box(){ num++; var i=0; i+=num; document.getElementById('a').innerHTML=i; if(num==max){ clearTimeout() alert('5秒到啦'); }else{ setTimeout(box,1000) } } setTimeout(box,1000)
这两种方法都可以使用c方法来封装,只不过,为了便于观看,我分开写了。
-
location
这个对象既是window的属性对象也是document的属性对象。不过他们包含的属性还是一样的
alert(window.location)
alert(window.document.location)
值相等,均表示当前网页的链接- .hash
这个属性表示页面的标签值
location.hash='#ee'
alert(location.hash);
我们有时候会看到某个链接后面会附上#admin来标识该网页,通过为网页链接上附上不同的标签值,可以使用前进后退来查看,不同标示符下的网页(这个我还不知道具体用途,)
- .hash
- 获取键值
//获取键值
//http://192.168.1.103:8020/1AAA%E5%89%8D%E7%AB%AF/Test/js/BOM/window/window.html?id=222&search=hudhu
function getArgs(){
var args={};
var qs=location.search.length>0?location.search.substring(1):'';
var items=qs.split('&');
for(var i=0;i<items.length;i++){
var item=items[i].split('=');
args[item[0]]=item[1];
}
return args;
}
var args=getArgs();
alert(args['id'])
alert(args['search'])
特点:这个主要是location.search
属性的使用,这个属性返回一个字符串,是(?……)即包括问号在内的链接后面的参数。可以通过这个方法来获取传递的参数。 - 重新加载
location.reload();
location.reload(true);
不传递参数true表示在缓存中加载网页,加上参数true表示重新向服务器获取。 - 替代
location.replace('http://www.baidu.com');//不产生任何历史记录
这个的意思是,通过使用这个办法可以直接定向的某个网页,但是后退后无法返回。即不产生相应的历史记录。 - .href
这个就是定向网页啦,最常用的
location.href('http://www.baidu.com') - history
- .length用于显示当前窗口的历史记录一共有几次
alert(history.length) - .back .next用于指定当前窗口向前或向后浏览历史记录
function back(){
history.back();
}
history.next() - .go()用于指定当前窗口向前或向后浏览指定的历史记录
history.go(3);//前进3页历史记录
history.go(-3);//倒退3页历史记录
这些并不全,也不是所有最常用的,还有几个window对象是用来检测浏览器的,下一篇笔记再来写