JS的BOM

1.BOM:browser object model的簡稱,瀏覽器對象模型,將整個瀏覽器頁面看作是window對象.

2.BOM瀏覽對象模型圖:window對象是整個瀏覽器對象模型的核心.

img

3.history對象:

常用方法:

前進:forward()<==>go(1)

後退:back()<==>go(-1)

刷新:go(0)

4.location對象

常用屬性

獲得當前頁面url:location.href

跳轉頁面(與超鏈接的效果相同):location.href="url";

window.location.href="url";

window.location="url";

常用方法

刷新:reload();<==>history.go(0)

替換頁面:replace("url");

eg:function show1(){

alert(location.href);

}

 

function show2(){

//location.href="2.history2.html";

window.location="2.history2.html";

}

 

function show3(){

location.reload();

}

 

function show4(){

location.replace("1.history1.html");

}

5.window對象

5.1:確定框:alert();

5.2:確定取消框: var boolean類型的變量= confirm("提示語");

5.3:輸入框:var 變量= prompt("提示語",[默認值]);

5.4:打開一個窗體:open("URL","窗體名稱","窗體特徵");

5.5:關閉窗體:close();只有通過 JavaScript 代碼打開的窗口才能夠由 JavaScript 代 碼關閉。這阻止了惡意的腳本終止用戶的瀏覽器。

5.6:在指定的毫秒數後調用一次函數或計算表達式:setTimeout(要執行的代碼或函數, 毫秒);

5.7:取消由 setTimeout() 方法設置的 timeout。clearTimeout(變量名);

5.8:可按照指定的週期(以毫秒計)來調用函數或計算表達式:setInterval(要執行的代 碼或函數, 毫秒);

5.9:取消由 setInterval() 設置的 timeout:clearInterval(變量名);

eg:<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>window對象的使用</title>

<script type="text/javascript">

function show1(){

window.alert("這是一個確定框");

}

 

function show2(){

var result=window.confirm("確定要刪除嗎?");

if (result==true) {

alert("刪除成功");

} else{

alert("那就不刪除了");

}

}

 

function show3(){

var name=prompt("請輸入你的姓名:","張三");

alert("接收的姓名爲:"+name);

}

 

function show4(){

window.open("3.location.html","第三個窗體","width=300,height=300,left=300,top=200")

}

 

var a;

function show5(){

a=window.setTimeout(function(){

alert("要下課了");

},5000);

}

 

function show6(){

window.clearTimeout(a);

}

 

var b;

function show7(){

b=window.setInterval(function(){

alert("要休息了");

},6000);

}

 

function show8(){

window.clearInterval(b);

}

 

 

</script>

</head>

<body>

<input type="button" value="彈出一個確定框" οnclick="show1()"/>

<input type="button" value="彈出一個確定取消框" οnclick="show2()"/>

<input type="button" value="彈出一個輸入框" οnclick="show3()"/>

<input type="button" value="彈出一個窗體" οnclick="show4()"/>

<input type="button" value="5秒後我要下課了" οnclick="show5()"/>

<input type="button" value="清除5秒後提示" οnclick="show6()"/>

<input type="button" value="每隔6秒提示我休息" οnclick="show7()"/>

<input type="button" value="清除每隔6秒提示" οnclick="show8()"/>

</body>

</html>

6.js中對象:萬物皆對象.

6.1:自定義對象:

/第一種:創建Json(javaScript object notation)對象/

//聲明一個json對象

var ob1={"sname":"葉倫","sage":"20","ssex":"女"};

//用對象調用屬性:對象.屬性名 或者 對象["屬性名"]

document.write(ob1.sname+","+ob1["sage"]+","+ob1.ssex);

document.write(" ");

 

/第二種:用Object創建對象/

//創建對象

var ob2=new Object();

//給對象的屬性賦值

ob2.nickName="大齡剩女";

ob2.age=30;

document.write(ob2.nickName+","+ob2["age"]);

document.write(" ");

 

/第三種:用構造方法創建對象/

//聲明一個構造方法

function person(name,age,address){

this.name=name;

this.age=age;

this.address=address;

}

//用構造方法創建對象

var ob3=new person("林玉詳",90,"千鋒");

var ob4=new person("田其剛",80,"千鋒");

//用對象調用屬性:對象.屬性名 或者 對象["屬性名"]

document.write(ob3.name+","+ob3["age"]+","+ob3.address);

document.write(" ");

document.write(ob4.name+","+ob4["age"]+","+ob4.address);

document.write(" ");

 

6.2:prototype 屬性使您有能力向對象添加屬性和方法。

eg://聲明一個構造方法

function person(name,age,address){

this.name=name;

this.age=age;

this.address=address;

}

 

//用prototype給對象添加屬性和方法

person.prototype.sex="女";

 

person.prototype.showMyself=function(){

document.write(this.name+","+this.age+","+this.address+","+this.sex);

document.write(" ");

};

 

//用構造方法創建對象

var ob3=new person("林玉詳",90,"千鋒");

var ob4=new person("田其剛",80,"千鋒");

//用對象調用屬性:對象.屬性名 或者 對象["屬性名"]

document.write(ob3.name+","+ob3["age"]+","+ob3.address);

document.write(" ");

document.write(ob4.name+","+ob4["age"]+","+ob4.address);

document.write(" ");

//用對象調用方法

document.write("----------------------------------- ")

ob3.sex="男";

ob3.showMyself();

ob4.showMyself();

6.3:系統對象

Date 日期對象

Array 數組對象

Math 對數字作處理的對象

string 字符串對象

RegExp 正則表達式對象

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章