js图片库 案例
事件處理函數(shù)：事件處理函數(shù)的作用是，在特定事件發(fā)生時(shí)調(diào)用特定的JavaScript代碼。本例中想要在用戶點(diǎn)擊某個(gè)鏈接的時(shí)候觸發(fā)一個(gè)動(dòng)作，所以需要使用onclick事件處理函數(shù)。
添加事件處理函數(shù)的語法：
event="JavaScript statement(s)"
js代碼包含在一對(duì)引號(hào)之間，可以把任意數(shù)量的js語句放在這對(duì)引號(hào)之間，只要把各條語句用分號(hào)隔開就可以。
οnclick="showPic(this);"//this表示這個(gè)對(duì)象，本例中即這個(gè)<a>元素標(biāo)簽
事件處理函數(shù)的工作機(jī)制：在給某個(gè)元素添加了世間處理函數(shù)后，一旦事件發(fā)生，相應(yīng)的js代碼就會(huì)執(zhí)行。被調(diào)動(dòng)的js會(huì)返回一個(gè)值，這個(gè)值將會(huì)被傳遞給那個(gè)時(shí)間處理函數(shù)。本例中當(dāng)鏈接被點(diǎn)擊時(shí)，如果執(zhí)行的js代碼返回true，事件處理函數(shù)就認(rèn)為這個(gè)鏈接被點(diǎn)擊了，反之如果返回的值是false，onclick事件處理函數(shù)就認(rèn)為這個(gè)鏈接沒有被點(diǎn)擊。return false;就會(huì)將false返回給事件處理函數(shù)，所以這個(gè)鏈接的默認(rèn)行為沒有被觸發(fā)（打開圖片查看器。）
?
<!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;事件處理函數(shù)工作機(jī)制
?? ?<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">//選用一個(gè)無用圖片做占位符圖片
<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屬性
在一顆節(jié)點(diǎn)樹上，childNodes屬性可以用來獲取任何一個(gè)元素的所有子元素，它是一個(gè)包含這個(gè)元素全部子元素的數(shù)組：element.childNodes
childNodes返回的數(shù)組包含所有類型的節(jié)點(diǎn)，不僅僅是元素節(jié)點(diǎn)。
?
每個(gè)節(jié)點(diǎn)都有nodeType屬性，這個(gè)屬性讓我們知道正在與哪一種節(jié)點(diǎn)打交道。
語法：node.nodeType
nodeType的值是一個(gè)數(shù)字。
alert(body_element.nodeType)
nodeType屬性總共有12中可取值，但是其中僅有3種具有實(shí)用價(jià)值。
元素節(jié)點(diǎn)的nodeType屬性值是1；
屬性節(jié)點(diǎn)的nodeType屬性值是2；
文本節(jié)點(diǎn)的nodeType屬性值是3；
?
nodeValue屬性
如果想要改變一個(gè)文本節(jié)點(diǎn)的值，那就使用DOM提供的nodeValue屬性，它用來得到（和設(shè)置）一個(gè)節(jié)點(diǎn)的值：node.nodeValue；
不僅可以用來檢索節(jié)點(diǎn)的值，還可以用來設(shè)置節(jié)點(diǎn)的值。
?
firstChild和lastChild屬性
只要需要訪問childNodes數(shù)組中的第一個(gè)元素，都可以寫成firstChild?? node.firstChild ? ←==→ ? node.childNodes[0]
node.lastChild ? ←==→ ? node.childNodes[node.childNodes.length-1]
轉(zhuǎn)載于:https://www.cnblogs.com/yuanxinru321/p/6646126.html
總結(jié)
- 上一篇： 请求WebApi的几种方式
- 下一篇： Jquery的ajax提交成功后刷新页面