javascript基礎(chǔ)08(js對(duì)象,BOM,庫(kù))

1.js對(duì)象
JavaScript中的所有事物都是對(duì)象:字符串、數(shù)值、數(shù)組、函數(shù)...
此外,JavaScript允許自定義對(duì)象。
JavaScript 提供多個(gè)內(nèi)建對(duì)象,比如String、Date、Array等等。 對(duì)象只是帶有屬性方法的特殊數(shù)據(jù)類型。

1)訪問(wèn)對(duì)象的屬性
語(yǔ)法:objectName.propertyName

var message="Hello World!";
var x=message.length;

2)訪問(wèn)對(duì)象的方法
語(yǔ)法:objectName.methodName()

 var message="Hello world!";
 var x=message.toUpperCase();

3)創(chuàng)建 JavaScript 對(duì)象

方式1:

person=new Object();
person.firstname="John";
person.lastname="Doe";
person.age=50;
person.eyecolor="blue"; 

方式2:

 person={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"}; 

方式3:使用對(duì)象構(gòu)造器

 function person(firstname,lastname,age,eyecolor)
 {
     this.firstname=firstname;
     this.lastname=lastname;
     this.age=age;
     this.eyecolor=eyecolor;
 }

var person1 = new person("Lee", "Loe", "blue");

為什么可以這樣,因?yàn)楹瘮?shù)就是對(duì)象。

2.JavaScript 類

JavaScript 是面向?qū)ο蟮恼Z(yǔ)言(有人認(rèn)為是基于面向?qū)ο笳Z(yǔ)言,基于對(duì)象語(yǔ)言),但 JavaScript不使用類。
我們可以使用面向?qū)ο蟮乃枷肴ナ褂谩?br> 在JavaScript 中,不會(huì)創(chuàng)建,也不會(huì)通過(guò)來(lái)創(chuàng)建對(duì)象(就像在其他面向?qū)ο蟮恼Z(yǔ)言中那樣)。
JavaScript基于 prototype,而不是基于的。

eg:循環(huán)遍歷對(duì)象的屬性:

 var person={fname:"John",lname:"Doe",age:25}; 
 for (x in person)
 {
    txt=txt + person[x];
 }

3.JavaScript Window - 瀏覽器對(duì)象模型

瀏覽器對(duì)象模型 (BOM) 使 JavaScript 有能力與瀏覽器"對(duì)話"。

1)瀏覽器對(duì)象模型 (BOM)
瀏覽器對(duì)象模型(Browser Object Model (BOM))
由于現(xiàn)代瀏覽器已經(jīng)(幾乎)實(shí)現(xiàn)了 JavaScript 交互性方面的相同方法屬性,因此常被認(rèn)為是BOM方法屬性。

2)Window 對(duì)象
所有瀏覽器都支持 window對(duì)象。它表示瀏覽器窗口。
所有 JavaScript全局對(duì)象、函數(shù)以及變量均自動(dòng)成為 window對(duì)象的成員。
全局變量是 window對(duì)象的屬性。
全局函數(shù)是 window對(duì)象的方法。
甚至 HTML DOMdocument也是 window 對(duì)象的屬性之一:window.document.getElementById("header");

3)Window 尺寸

有三種方法能夠確定瀏覽器窗口的尺寸(瀏覽器的視口,不包括工具欄和滾動(dòng)條)。
對(duì)于Internet Explorer、Chrome、Firefox、Opera 以及 Safari

window.innerHeight - 瀏覽器窗口的內(nèi)部高度
window.innerWidth - 瀏覽器窗口的內(nèi)部寬度
對(duì)于 Internet Explorer 8、7、6、5

document.documentElement.clientHeight
document.documentElement.clientWidth

或者

document.body.clientHeight
document.body.clientWidth

實(shí)用的 JavaScript方案(涵蓋所有瀏覽器):

// 寬度
var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
// 高度
var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight; 

其他 Window 方法

window.open() - 打開(kāi)新窗口
window.close() - 關(guān)閉當(dāng)前窗口
window.moveTo() - 移動(dòng)當(dāng)前窗口
window.resizeTo() - 調(diào)整當(dāng)前窗口的尺寸

4)JavaScript Window Screen

5)Window Location

location.hostname 返回 web 主機(jī)的域名
location.pathname 返回當(dāng)前頁(yè)面的路徑和文件名
location.port 返回 web 主機(jī)的端口 (80 或 443)
location.protocol 返回所使用的 web 協(xié)議(http:// 或 https://)

Window Location Href

http://www.shouce.ren/api/view/a/872

Window Location Assign

window.location.assign("http://www.badidu.com"); // 跳轉(zhuǎn)到百度

6)JavaScript Window History

Window History Back

window.history.back();

Window History Forward

window.history.forward();

7)JavaScript Window Navigator

window.navigator 對(duì)象包含有關(guān)訪問(wèn)者瀏覽器的信息。

*注意:來(lái)自navigator對(duì)象的信息具有誤導(dǎo)性,不應(yīng)該被用于檢測(cè)瀏覽器版本,這是因?yàn)椋?/p>

navigator 數(shù)據(jù)可被瀏覽器使用者更改
一些瀏覽器對(duì)測(cè)試站點(diǎn)會(huì)識(shí)別錯(cuò)誤
瀏覽器無(wú)法報(bào)告晚于瀏覽器發(fā)布的新操作系統(tǒng)

4.JavaScript 彈窗

可以在 JavaScript 中創(chuàng)建三種消息框:警告框、確認(rèn)框、提示框。

window.alert("sometext"); // 警告框
window.confirm("sometext");  // 確認(rèn)框
window.prompt("sometext","defaultvalue");  // 提示框

確認(rèn)框:

var b = confirm("queding?");
if(b){        
    document.write("yes");
}else {    
    document.write("no");
}

5.計(jì)時(shí)事件

1)每隔一段時(shí)間執(zhí)行函數(shù)
語(yǔ)法:setInterval("javascript function",milliseconds);

eg:
setInterval(function(){alert("Hello")},3000);

如何停止執(zhí)行?
語(yǔ)法:window.clearInterval(intervalVariable)

var myVar=setInterval(function(){myTimer()},1000);
clearInterval(myVar);

2)setTimeout()

等待3秒,然后彈出 "Hello":
setTimeout(function(){alert("Hello")},3000);

myVar=setTimeout(function(){alert("Hello")},3000);
clearTimeout(myVar);

6.cookie

Cookies用于存儲(chǔ) web頁(yè)面的用戶信息。

1)什么是 Cookies?
Cookies 是一些數(shù)據(jù), 存儲(chǔ)于你電腦上的文本文件中。
當(dāng)web 服務(wù)器向?yàn)g覽器發(fā)送 web 頁(yè)面時(shí),在連接關(guān)閉后,服務(wù)端不會(huì)記錄用戶的信息。
Cookies 的作用就是用于解決 "如何記錄客戶端的用戶信息":

2)使用 JavaScript 創(chuàng)建Cookie

JavaScript 可以使用 document.cookie 屬性來(lái)創(chuàng)建 、讀取、及刪除 cookies。

document.cookie="username=John Doe";

eg:document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT"

3)使用 JavaScript 讀取 Cookie

var x = document.cookie;

4)使用 JavaScript 修改 Cookie

document.cookie="username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";

5)使用 JavaScript 刪除 Cookie

刪除 cookie 非常簡(jiǎn)單。您只需要設(shè)置 expires 參數(shù)為以前的時(shí)間即可,如下所示,設(shè)置為 Thu, 01 Jan 1970 00:00:00 GMT:

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

6)設(shè)置 cookie 值的函數(shù)

function setCookie(cname,cvalue,exdays)
{
    var d = new Date();
    d.setTime(d.getTime()+(exdays*24*60*60*1000));
    var expires = "expires="+d.toGMTString();
    document.cookie = cname + "=" + cvalue + "; " + expires;
}

7)獲取cookie的值

var ca_arr = document.cookie.split(';');

7.javascript庫(kù)

JavaScript庫(kù) - jQuery、Prototype、MooTools。

JavaScript高級(jí)程序設(shè)計(jì)(特別是對(duì)瀏覽器差異的復(fù)雜處理),通常很困難也很耗時(shí)。
為了應(yīng)對(duì)這些調(diào)整,許多的 JavaScript (helper) 庫(kù)應(yīng)運(yùn)而生。
這些 JavaScript 庫(kù)常被稱為 JavaScript 框架。

所有這些框架都提供針對(duì)常見(jiàn)JavaScript 任務(wù)的函數(shù),包括動(dòng)畫(huà)、DOM操作以及 Ajax 處理。

1)jQuery

它使用 CSS選擇器來(lái)訪問(wèn)和操作網(wǎng)頁(yè)上的HTML 元素(DOM對(duì)象)

jQuery 同時(shí)提供 companion UI(用戶界面)和插件。
引用jQuery:

<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js">

</script>

實(shí)例:

 function myFunction()
 {
 var obj=document.getElementById("h01");
 obj.innerHTML="Hello jQuery";
 }
 onload=myFunction;

等價(jià)于:

function myFunction()
{
   $("#h01").html("Hello jQuery");
}
$(document).ready(myFunction);

主要的jQuery 函數(shù)是 $() 函數(shù)(jQuery函數(shù))。如果您向該函數(shù)傳遞 DOM對(duì)象,它會(huì)返回 jQuery對(duì)象,帶有向其添加的 jQuery功能。

當(dāng)向 jQuery 傳遞DOM對(duì)象時(shí),jQuery會(huì)返回以HTML DOM對(duì)象包裝的jQuery 對(duì)象。

$(document)
$(#id_01)

jQuery 函數(shù)會(huì)返回新的 jQuery 對(duì)象,其中的 ready() 是一個(gè)方法。

$(#document).ready()

由于在 JavaScript 中函數(shù)就是變量,因此可以把 myFunction 作為變量傳遞給 jQuery 的 ready 方法。

$(#document).ready(checkCookies())

jQuery 允許鏈接(鏈?zhǔn)秸Z(yǔ)法)。鏈接(Chaining)是一種在同一對(duì)象上執(zhí)行多個(gè)任務(wù)的便捷方法。

$("#id_05").attr("style", "color:#f00").html("我設(shè)置了style和內(nèi)容");

2)Prototype

提供用于執(zhí)行常見(jiàn) web任務(wù)的簡(jiǎn)單API。
API是應(yīng)用程序編程接口(Application Programming Interface)的縮寫(xiě)。它是包含屬性和方法的庫(kù),用于操作 HTML DOM。

引用 Prototype
<script src="http://apps.bdimg.com/libs/prototype/1.7.1.0/prototype.js"></script>

3)MooTools

MooTools 也是一個(gè)框架,提供了可使常見(jiàn)的 JavaScript 編程更為簡(jiǎn)單的 API。
MooTools 也含有一些輕量級(jí)的效果和動(dòng)畫(huà)函數(shù)。

使用框架:

決定為網(wǎng)頁(yè)使用 JavaScript 框架之前,首先對(duì)框架進(jìn)行測(cè)試是明智的,JavaScript 框架很容易進(jìn)行測(cè)試,您無(wú)需在計(jì)算機(jī)上安裝它們,同時(shí)也沒(méi)有安裝程序,只需從網(wǎng)頁(yè)中引用一個(gè)庫(kù)文件。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容