Javascript基礎 09DOM高階操作

2021-07-24 12:01:47 字數 1796 閱讀 5338

1 image物件

1.1 image物件的建立方式

1)通過建構函式方式建立

var img = new image('500','500');

第乙個引數為寬度,第二個引數為高度

2)通過

document.createelement()

建立img物件

var img = document.createelement('img');

1.2 影象物件的屬性

border 影象邊;

compele

是否載入完成;

height,width,src

;hspace

左右邊距;

vspace

上下邊距;

name名稱

1.3 影象物件的事件 1)

onabort

如果載入被中斷

,執行該事件 2)

onload

當載入完之後呼叫該事件 3)

onerror

當載入出現錯誤時

,呼叫該事件 4)

onkeydown,onkeypress,onkeyup

按下鍵觸發事件,長按鍵觸發事件,抬起鍵觸發事件

舉例說明:

var img = document.createelement('img');//通過document.createelement()建立img物件

var body = document.getelementsbytagname("body")[0];//獲取body標籤

//當載入完之後呼叫該事件

img.onload = function();

//注意:src一定寫在onload事件之後,否則程式在ie會報錯

//如果載入被中斷,執行該事件

img.onabort = function();

//當載入失敗時觸發

img.onerror = function();

img.src = "";

//距離左邊的距離

img.hspace = "300";

//距離上邊的乙個距離

img.vspace = "100";

,只要設定了

src2)ie8以下

,opera

不支援oneror

事件的

2 懶載入

懶載入步驟:

1)mage

中src

放一張佔位圖

2)真實放到

data-*(其中*

可以任意取名)中

3)配合頁面滾動事件使用,

滾動時判斷:帶載入的資源相對於瀏覽器頂端的距離

(offsettop)<=

可視區相對於瀏覽器頂端的距離

(document.scrolltop+window.innerheight)

如果true

src進行載入顯示

3 data屬性

1)data-*用於儲存頁面或應用程式私有自定義資料

2)data-*也可以為

html

所有元素嵌入自定義

data

屬性的能力

3)存放在

data-*

中的資料或資源是不會進資料請求或資料庫查詢的

4)data-*中的

*可以取任意名稱 如

:data-img,data-url,data-zhansan

舉例說明:

js點滴 JavaScript進度事件09

進度事件用來描述乙個事件進展的過程,比如xmlhttprequest物件發出的http請求的過程 進度事件有以下幾種。abort事件 當進度事件被中止時觸發。如果發生錯誤,導致程序中止,不會觸發該事件。error事件 由於錯誤導致資源無法載入時觸發。load事件 進度成功結束時觸發。loadstar...

09 javascript物件建立模式

方式1 object建構函式模式 建立乙個人 name tom age 12 先建立空object物件 var p new object p 此時內部資料是不確定的 再動態新增屬性 方法 p.name tom p.age 12 p.setname function name 測試 console.l...

javascript函式基礎 this基礎

this是函式體內自帶的乙個物件指標,它能夠始終指向呼叫物件 這個this代表的物件由this所在的執行作用域決定的,而不是根據this所在的定義作用域決定。this 屬性 如果this未包含屬性,則直接傳遞的是當前物件 1.this代表當前操作物件 this即代表 物件input 2.this代表...