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('這是一個提示框','');//返回輸入的值,第一個參數(shù)是說明狠角,第二個參數(shù)是輸入框的默認值
特點:
confirm()返回一個布爾值号杠,如果用戶點擊確定按鈕則返回true,如果取消或關閉則返回false丰歌。
prompt()返回用戶的輸入值姨蟋。使用率不高
print()//調出打印
find()//調出查找
defaultStatus='lee';//設置默認值永久的
status='xxx';//只是設置暫時
另外關于status,有些瀏覽器已經取消了狀態(tài)條的設置立帖,所以不建議使用眼溶,open()
open('http://www.baidu.com','baidu','width=400,height=400,top=100,left=100,location=no,toolbar=no')
特點:一般接收三個參數(shù)
第一參數(shù):要加載的URL,
第二個參數(shù):窗口名稱或窗口目標,可以給新窗口設置一個名稱晓勇,凡是以這個名稱打開的窗口都會在這個名稱下打開目標:_blank新建一個窗口堂飞,_parent表示在本窗口內加載,
第三個參數(shù)表示各種參數(shù)的設置
上面的例子中使用的第二個參數(shù)是名稱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);
特點:有以上四種做法是創(chuàng)建超時調用定時器的辦法坑雅。
a:不推薦是因為第一個參數(shù)如果是代碼串,會造成不能使用過于復雜的代碼
b:這樣將第一個參數(shù)改為函數(shù)的引用衬横,但是卻顯得不夠封裝
c:這是推薦做法裹粤,足夠封裝,但是會影響消除
d:這個就夠啦蜂林,當需要消除時遥诉,直接把值傳過去就消除啦-
間歇調用定時器
var box=setInterval('alert(2)',2000)
clearInterval(box);
這個的使用方法可超時調用時一樣的,這個會每隔一段時間來調用一個函數(shù)
利用這兩個定時器噪叙,可以分別完成一個倒數(shù)計時器的效果矮锈,不過推薦使用超時定時器來做
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)
值相等猫缭,均表示當前網(wǎng)頁的鏈接- .hash
這個屬性表示頁面的標簽值
location.hash='#ee'
alert(location.hash);
我們有時候會看到某個鏈接后面會附上#admin來標識該網(wǎng)頁,通過為網(wǎng)頁鏈接上附上不同的標簽值壹店,可以使用前進后退來查看猜丹,不同標示符下的網(wǎng)頁(這個我還不知道具體用途,)
- .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
屬性的使用硅卢,這個屬性返回一個字符串射窒,是(?……)即包括問號在內的鏈接后面的參數(shù)将塑÷龆伲可以通過這個方法來獲取傳遞的參數(shù)。 - 重新加載
location.reload();
location.reload(true);
不傳遞參數(shù)true表示在緩存中加載網(wǎng)頁点寥,加上參數(shù)true表示重新向服務器獲取艾疟。 - 替代
location.replace('http://www.baidu.com');//不產生任何歷史記錄
這個的意思是,通過使用這個辦法可以直接定向的某個網(wǎng)頁,但是后退后無法返回蔽莱。即不產生相應的歷史記錄弟疆。 - .href
這個就是定向網(wǎng)頁啦,最常用的
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對象是用來檢測瀏覽器的柑司,下一篇筆記再來寫