<html>
<head>
<title>第七章 動態創建標記 優化圖片庫</title>
</head>
<body>
<h1>Snapshots</h1>
<ul id="imagegallery">
<li><a href="img/1.jpg" title="a" >a</a></li>
<li><a href="img/2.jpg" title="b" >b</a></li>
<li><a href="img/3.jpg" title="c" >c</a></li>
<li><a href="img/4.jpg" title="d" >d</a></li>
<li><a href="img/5.jpg" title="e" >e</a></li>
<li><a href="img/6.jpg" title="f" >f</a></li>
<li><a href="img/7.jpg" title="g" >g</a></li>
<li><a href="img/8.jpg" title="h" >h</a></li>
</ul>
</body>
<script type="text/javascript">
function addloadEvent(func){
//將現有的事件處理函數的值存入變量中
var oldonload =window.onload;
//如果這個事件處理函數沒有綁定任何函數，就把新函數添加給它
if(typeof window.onload!="function"){
window.onload=func;
}else{
//如果已經綁定了函數，就把新函數追加到現有指令的末尾
window.onload=function(){
oldonload();
func();
}
}
}
function insertAfter (newElement,targetElement) {
//把被插入的元素的父元素存進一個變量裏
var parent=targetElement.parentNode;
//如果最後的節點是目標元素，則直接添加。因爲默認是最後
if (parent.lastChild==targetElement) {
parent.appendChild(newElement);
}else{
//如果不是，則插入在目標元素的下一個兄弟節點 的前面。也就是目標元素的後面
parent.insertBefore(newElement,targetElement.nextSibling)
}
}
function prearePlaceholder(){
//if語句均爲測試是否存在
if (!document.createElement)return false;
if (!document.createTextNode)return false;
if (!document.getElementById)return false;
if (!document.getElementById("imagegallery"))return false;
//創建一個img元素
var placeholder=document.createElement("img");
//爲img元素添加id屬性
placeholder.setAttribute("id","placeholder");
//爲img元素添加alt屬性
placeholder.setAttribute("alt","my imgae gallery");
//創建一個p元素
var description=document.createElement("p");
//爲p元素添加id屬性
description.setAttribute("id","description");
//創建一個文本節點
var desctxt=document.createTextNode("這是圖片描述語句");
//添加到p元素中
description.appendChild(desctxt);
//獲取ul列表
var gallery=document.getElementById("imagegallery");
//添加到這個列表後邊
insertAfter(placeholder,gallery);
//添加到img元素後邊
insertAfter(description,placeholder);
}
function prepareGallery(){
// 三個if都是測試 是否存在
if (!document.getElementById)return false;
if (!document.getElementsByTagName)return false;
if (!document.getElementById("imagegallery"))return false;
//獲取ul列表
var gallery=document.getElementById("imagegallery");
//獲取ul列表裏面的a元素
var links=gallery.getElementsByTagName("a");
//遍歷所有的a元素，並添加點擊事件
for (var i = 0; i < links.length; i++) {
links[i].onclick=function(){
//測試，有showpic()則阻止a元素默認行爲，無則不阻止
return showPic(this)?false:true;
}
//把點擊事件的行爲方法同樣給到鍵盤事件
links[i].onkeypress=links[i].onclick
}
}
prepareGallery();
function showPic(whichpic){
//測試是否存在
if (!document.getElementById("placeholder")) return false;
//獲取 href 屬性的鏈接
var source=whichpic.getAttribute("href");
//獲取佔位符
var placeholder=document.getElementById("placeholder");
//測試是否存在
if(placeholder.nodeName!="IMG")return false;
//把獲取 href 屬性的鏈接給到佔位符的 src
placeholder.setAttribute("src",source);
//測試是否存在
if (document.getElementById("description")){
//三元操作符，判斷，有選擇前者，無選擇後者，獲取的值給到text
var text=whichpic.getAttribute("title")?whichpic.getAttribute("title"):"";
//獲取 p 元素
var description=document.getElementById("description");
//判斷節點是否等於3（文本節點）
if(description.firstChild.nodeType==3){
//把獲取的 litile 屬性的值給到 p 元素的文本節點
description.firstChild.nodeValue=text;
}
}return true;
}
addloadEvent(prearePlaceholder);
addloadEvent(prepareGallery);
/*
本章裏，知識點： document.write
innerHTML
createElement
createTextNode
appendChild
insertBefore
封裝的實用函數：insertAfter
addEvent
使用這些方法的關鍵是將web文檔視爲節點樹。用createElement等方法創建
出來的節點只是javascript世界裏的孤兒，利用appendChild和insertBefore
方法，把這些對象插入某個文檔的節點樹，讓他們呈現在瀏覽器裏。
（我並沒有添加css代碼使其美化，有興趣的可自己琢磨，因爲這個頁面着實有些醜）
*/
</script>
</html>
第七章 動態創建標記 優化圖片庫
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章