JavaScript DOM編程藝術 學習筆記(四)JavaScript 圖片庫

此例子是實現一個圖片庫,雖然網頁標記代碼沒有多大,但加上幾張圖片後用戶要下載的數據量就相當可觀了。所以

此例中做了以下幾件事:

1.保持圖片清單list在當前頁面

2.保持點擊文字鏈接時不要轉到新的窗口(即文字鏈接加一個onclick事件)

3.添加一個placeholder img來作爲圖片的顯示替換,以此減少圖片全部一起顯示造成的下載數據量大的問題,做到按需顯示


每個鏈接加上onclick事件屬性onclick = “showPic(this);”  this代表的就是此元素節點對象

鏈接點擊事件的實現就是:

function showPic(whichpic){

var source = whichpic.getAttribute(“href”);

//也可以不用setAttribute直接用.src 但儘量使用setAttribute~~~~~

document.getElementById(“placeholder”).setAttribute(“src”,source);

}


但是加了onclick事件後,點擊鏈接既會出發onclick方法也會執行其默認行爲即轉到其href所指向的那個鏈接,走到下一個窗口。如何防止瀏覽器轉到下個鏈接中去呢?答案是在onclick的事件中返回false

可參考:http://www.cnblogs.com/caishuhua226/archive/2012/03/20/2408165.html

這篇文章的說法。



剛纔的例子是頁面加載出來後點擊鏈接才執行js方法,如果是頁面加載中我就需要執行一些方法去做一些事情,應該放到哪個函數裏呢?

答案是onload

onloadwindow對象的方法

window.onload = init(); 即頁面加載時調用init方法


下面講幾個屬性

1.childNodes:一個元素的所有子元素數組(錯)應該是所有子節點節點不只包括元素節點,還有文字節點和屬性節點~!

2.nodeType節點類型元素節點爲1 屬性節點爲文本節點爲3

3.nodeValue: <p id = “description”>choose an image.</p> 

通過id拿到p元素,由於p元素無子元素節點無屬性節點 只有一個文本節點 所以獲取到其文本節點的nodeValue就用description.childNodes[0].nodeValue即可

var description = document.getElementById(“description”);

alert(description.childNodes[0].nodeValue);//因爲p元素本身的nodeValue是個空值,其文本節點是其第一個字節點,這樣的到的纔是我們想要的choose an image.文本

descrition.firstChild.nodeType=3

4.firstChild lastChild 即是childNodes數組的第一個和最後一個元素 

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