js图片库 案例
事件處理函數：事件處理函數的作用是，在特定事件發生時調用特定的JavaScript代碼。本例中想要在用戶點擊某個鏈接的時候觸發一個動作，所以需要使用onclick事件處理函數。
添加事件處理函數的語法：
event="JavaScript statement(s)"
js代碼包含在一對引號之間，可以把任意數量的js語句放在這對引號之間，只要把各條語句用分號隔開就可以。
οnclick="showPic(this);"//this表示這個對象，本例中即這個<a>元素標簽
事件處理函數的工作機制：在給某個元素添加了世間處理函數后，一旦事件發生，相應的js代碼就會執行。被調動的js會返回一個值，這個值將會被傳遞給那個時間處理函數。本例中當鏈接被點擊時，如果執行的js代碼返回true，事件處理函數就認為這個鏈接被點擊了，反之如果返回的值是false，onclick事件處理函數就認為這個鏈接沒有被點擊。return false;就會將false返回給事件處理函數，所以這個鏈接的默認行為沒有被觸發（打開圖片查看器。）
?
<!DOCTYPE html>
<html lang="en">
<head>
?? ?<meta charset="utf-8">
?? ?<title>Images</title>
</head>
<body>
<h1>圖片庫</h1>
<ul>
?? ?<li><a href="images/door.jpg" οnclick="showPic(this);return false;" title="red door">Door</a></li>//return false;事件處理函數工作機制
?? ?<li><a href="images/heart.jpg" οnclick="showPic(this);return false;" title="red heart">Heart</a></li>
?? ?<li><a href="images/lake.jpg" οnclick="showPic(this);return false;" title="Xuanwu Lake">Lake</a></li>
?? ?<li><a href="images/light.jpg" οnclick="showPic(this);return false;" title="lights">Light</a></li>
?? ?<li><a href="images/river.jpg" οnclick="showPic(this);return false;" title="Qinhuai River">River</a></li>
</ul>
<img id="placeholder" src="images/1.jpg" alt="my image gallery">//選用一個無用圖片做占位符圖片
<script type="text/javascript" >
?? ?function showPic(whichpic){
?? ??? ?var source = whichpic.getAttribute("href");
?? ??? ?var placeholder=document.getElementById("placeholder");
?? ??? ?placeholder.setAttribute("src",source);
?? ?}
</script>
</body>
</html>
?
?
childNodes屬性
在一顆節點樹上，childNodes屬性可以用來獲取任何一個元素的所有子元素，它是一個包含這個元素全部子元素的數組：element.childNodes
childNodes返回的數組包含所有類型的節點，不僅僅是元素節點。
?
每個節點都有nodeType屬性，這個屬性讓我們知道正在與哪一種節點打交道。
語法：node.nodeType
nodeType的值是一個數字。
alert(body_element.nodeType)
nodeType屬性總共有12中可取值，但是其中僅有3種具有實用價值。
元素節點的nodeType屬性值是1；
屬性節點的nodeType屬性值是2；
文本節點的nodeType屬性值是3；
?
nodeValue屬性
如果想要改變一個文本節點的值，那就使用DOM提供的nodeValue屬性，它用來得到（和設置）一個節點的值：node.nodeValue；
不僅可以用來檢索節點的值，還可以用來設置節點的值。
?
firstChild和lastChild屬性
只要需要訪問childNodes數組中的第一個元素，都可以寫成firstChild?? node.firstChild ? ←==→ ? node.childNodes[0]
node.lastChild ? ←==→ ? node.childNodes[node.childNodes.length-1]
轉載于:https://www.cnblogs.com/yuanxinru321/p/6646126.html
總結
- 上一篇： 请求WebApi的几种方式
- 下一篇： Jquery的ajax提交成功后刷新页面