此例子是實現一個圖片庫,雖然網頁標記代碼沒有多大,但加上幾張圖片後用戶要下載的數據量就相當可觀了。所以
此例中做了以下幾件事:
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
onload是window對象的方法
window.onload = init(); 即頁面加載時調用init方法
下面講幾個屬性
1.childNodes:一個元素的所有子元素數組(錯)應該是所有子節點節點不只包括元素節點,還有文字節點和屬性節點~!
2.nodeType:節點類型元素節點爲1 屬性節點爲2 文本節點爲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數組的第一個和最後一個元素