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 DOM 的 document也是 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ù)文件。