Pro JavaScript Techniques學(xué)習(xí)筆記
更新時(shí)間:2010年12月28日 19:27:03 作者:
Pro JavaScript Techniques學(xué)習(xí)筆記,學(xué)習(xí)js的朋友可以參考下。
全局變量是Window對(duì)象屬性的一部分,例子:
var test = 'test';
alert(window.test);
瀏覽器渲染和操作HTML的大致順序:
HTML解析完畢
外部腳本和樣式表加載完畢
腳本在文檔內(nèi)解析并執(zhí)行
HTML DOM完全構(gòu)造起來
圖片和外部?jī)?nèi)容加載
網(wǎng)頁完成加載
所有的主流瀏覽器都實(shí)現(xiàn)了innerHTML屬性,但是因?yàn)闆]有統(tǒng)一標(biāo)準(zhǔn),所以或多或少會(huì)有一些怪異的bug。
基于Mozilla的瀏覽器在innerHTML聲明中并不回會(huì)返回<style>元素;
IE返回的元素字符都是大寫的;
innerHTML作為一個(gè)只能用在HTML DOM文檔的元素中的屬性,若在XML DOM文檔中使用的話只會(huì)返回null值。
檢查元素是否有用一個(gè)指定的屬性:
function hasAttribute(elem, name) {
return elem.getAttribute(name) != null;
};
JavaScript事件在兩個(gè)階段中執(zhí)行:捕獲和冒泡。
GET請(qǐng)求不應(yīng)具有破壞性的副作用(比如刪除一條消息)。
點(diǎn)擊、鼠標(biāo)懸停和鼠標(biāo)離開事件的任何場(chǎng)合下,都要考慮提供非鼠標(biāo)綁定的可選事件。
onmouseout –> onblur
onmousedown –> onkeydown
onmouseup –> onkeyup
onclick –> onkeypress
onmouseover –> onfocus
eg.
var ax = document.getElementsByTagName('a');
for (var i = 0; i < ax.length; i++) {
ax[i].onmouseover = ax[i].onfocus = function(){
this.style.backgroundColor = 'blue';
};
ax[i].onmouseout = ax[i].onblur = function(){
this.style.backgroundColor = 'white';
};
};
靜態(tài)定位:這是元素定位的默認(rèn)方式,它簡(jiǎn)單地遵循文檔的普通流動(dòng)(flow)。當(dāng)元素是靜態(tài)定位時(shí),top和left屬性無效。
position:static;top:0px;left:0px;
相對(duì)定位:這種定位形式與靜態(tài)定位非常相似,因?yàn)樵貢?huì)繼續(xù)遵循文檔的普通流動(dòng),除非受到其他指定的影響。但是,設(shè)置top或者left屬性會(huì)引起元素相對(duì)于它的原始(靜態(tài))位置進(jìn)行偏移。
position:relative;top:-50px;left:50px;
絕對(duì)定位:絕對(duì)定位的元素完全跳出頁面布局的普通流動(dòng),它會(huì)相對(duì)于它的第一個(gè)非靜態(tài)定位的祖先元素而展示。如果沒有這樣的祖先元素,則相對(duì)于整個(gè)文檔。
position:absolute;top:20px;left:0px;
固定定位:固定定位把元素相對(duì)于瀏覽器窗口而定位。設(shè)置元素的top和left為0會(huì)使它顯示在瀏覽器左上角,它完全忽略瀏覽器滾動(dòng)條的拖動(dòng),一直會(huì)出現(xiàn)在用戶的視野。
position:fixed;top:20px;left:0px;
開發(fā)預(yù)留退路(degrading gracefully):為頁面增加任何形式的動(dòng)態(tài)交互都有疏遠(yuǎn)某部分用戶的潛在可能。應(yīng)該時(shí)刻在意的是,當(dāng)JavaScript或者CSS禁用的時(shí)候,Web應(yīng)用程序應(yīng)該具備基最基本可用性。
復(fù)制代碼 代碼如下:
var test = 'test';
alert(window.test);
瀏覽器渲染和操作HTML的大致順序:
HTML解析完畢
外部腳本和樣式表加載完畢
腳本在文檔內(nèi)解析并執(zhí)行
HTML DOM完全構(gòu)造起來
圖片和外部?jī)?nèi)容加載
網(wǎng)頁完成加載
所有的主流瀏覽器都實(shí)現(xiàn)了innerHTML屬性,但是因?yàn)闆]有統(tǒng)一標(biāo)準(zhǔn),所以或多或少會(huì)有一些怪異的bug。
基于Mozilla的瀏覽器在innerHTML聲明中并不回會(huì)返回<style>元素;
IE返回的元素字符都是大寫的;
innerHTML作為一個(gè)只能用在HTML DOM文檔的元素中的屬性,若在XML DOM文檔中使用的話只會(huì)返回null值。
檢查元素是否有用一個(gè)指定的屬性:
復(fù)制代碼 代碼如下:
function hasAttribute(elem, name) {
return elem.getAttribute(name) != null;
};
JavaScript事件在兩個(gè)階段中執(zhí)行:捕獲和冒泡。
GET請(qǐng)求不應(yīng)具有破壞性的副作用(比如刪除一條消息)。
點(diǎn)擊、鼠標(biāo)懸停和鼠標(biāo)離開事件的任何場(chǎng)合下,都要考慮提供非鼠標(biāo)綁定的可選事件。
復(fù)制代碼 代碼如下:
onmouseout –> onblur
onmousedown –> onkeydown
onmouseup –> onkeyup
onclick –> onkeypress
onmouseover –> onfocus
eg.
復(fù)制代碼 代碼如下:
var ax = document.getElementsByTagName('a');
for (var i = 0; i < ax.length; i++) {
ax[i].onmouseover = ax[i].onfocus = function(){
this.style.backgroundColor = 'blue';
};
ax[i].onmouseout = ax[i].onblur = function(){
this.style.backgroundColor = 'white';
};
};
靜態(tài)定位:這是元素定位的默認(rèn)方式,它簡(jiǎn)單地遵循文檔的普通流動(dòng)(flow)。當(dāng)元素是靜態(tài)定位時(shí),top和left屬性無效。
position:static;top:0px;left:0px;
相對(duì)定位:這種定位形式與靜態(tài)定位非常相似,因?yàn)樵貢?huì)繼續(xù)遵循文檔的普通流動(dòng),除非受到其他指定的影響。但是,設(shè)置top或者left屬性會(huì)引起元素相對(duì)于它的原始(靜態(tài))位置進(jìn)行偏移。
position:relative;top:-50px;left:50px;
絕對(duì)定位:絕對(duì)定位的元素完全跳出頁面布局的普通流動(dòng),它會(huì)相對(duì)于它的第一個(gè)非靜態(tài)定位的祖先元素而展示。如果沒有這樣的祖先元素,則相對(duì)于整個(gè)文檔。
position:absolute;top:20px;left:0px;
固定定位:固定定位把元素相對(duì)于瀏覽器窗口而定位。設(shè)置元素的top和left為0會(huì)使它顯示在瀏覽器左上角,它完全忽略瀏覽器滾動(dòng)條的拖動(dòng),一直會(huì)出現(xiàn)在用戶的視野。
position:fixed;top:20px;left:0px;
開發(fā)預(yù)留退路(degrading gracefully):為頁面增加任何形式的動(dòng)態(tài)交互都有疏遠(yuǎn)某部分用戶的潛在可能。應(yīng)該時(shí)刻在意的是,當(dāng)JavaScript或者CSS禁用的時(shí)候,Web應(yīng)用程序應(yīng)該具備基最基本可用性。
相關(guān)文章
分享19個(gè)JavaScript 有用的簡(jiǎn)寫寫法
最近很火的一篇來自國外的文章,js的簡(jiǎn)寫寫法一定程度上可以提高你的js書寫水平對(duì)于js的理解也會(huì)更近一步2017-07-07D3.js實(shí)現(xiàn)力向?qū)D的繪制教程詳解
力向?qū)D是繪圖的一種算法,實(shí)現(xiàn)了用以模擬粒子物理運(yùn)動(dòng)的?velocity?Verlet?數(shù)值積分器。本文將利用D3.js實(shí)現(xiàn)力向?qū)D的繪制,需要的可以參考一下2022-11-11基于JavaScript實(shí)現(xiàn)頁面輪播圖漸變效果的示例代碼
這篇文章主要給大家分享如何使用JavaScript實(shí)現(xiàn)一個(gè)頁面輪播圖漸變效果,輪播圖是網(wǎng)頁開發(fā)中常見的功能之一,它能夠展示多個(gè)圖片或內(nèi)容,并以一定的時(shí)間間隔進(jìn)行自動(dòng)切換,而通過添加漸變效果,可以讓切換過程更加平滑流暢,感興趣的小伙伴可以自己動(dòng)手嘗試一下2023-10-10原生JavaScript實(shí)現(xiàn)進(jìn)度條
這篇文章主要為大家詳細(xì)介紹了原生JavaScript實(shí)現(xiàn)進(jìn)度條,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-02-02JavaScript實(shí)現(xiàn)跑馬燈抽獎(jiǎng)活動(dòng)實(shí)例代碼解析與優(yōu)化(二)
這篇文章主要介紹了JavaScript實(shí)現(xiàn)跑馬燈抽獎(jiǎng)活動(dòng)實(shí)例代碼解析與優(yōu)化(二)的相關(guān)資料,需要的朋友可以參考下2016-02-02