資訊專(zhuān)欄INFORMATION COLUMN
摘要：灰姑娘灰姑娘灰姑娘不足點(diǎn)擊事件綁定在代碼中，很笨重，下一篇中將做升級(jí)。
前言：在《DOM編程藝術(shù)》一書(shū)中，作者給出了一個(gè)實(shí)例：創(chuàng)建一個(gè)圖片庫(kù)，其實(shí)功能很簡(jiǎn)單，就是點(diǎn)擊某個(gè)列表項(xiàng)時(shí)，下方出現(xiàn)相應(yīng)的圖片以及圖片說(shuō)明（圖片說(shuō)明事先以title的形式寫(xiě)在HTML中），雖然是一個(gè)簡(jiǎn)單的例子，當(dāng)時(shí)作者在書(shū)中循序漸進(jìn)，不斷的改善圖片庫(kù)中間引入各種知識(shí)點(diǎn)，真的是一本好書(shū)，在此對(duì)這個(gè)實(shí)例進(jìn)行一些總結(jié)。
－－－－－－－－－－－－－－－－－開(kāi)始－－－－－－－－－－－－－－－－－
1.HTML部分電影天堂
選擇一張圖片
2.CSS樣式 h1{
color: #333;
}
a{
color: gray;
font-weight: bold;
text-decoration: none;
}
ul{
padding: 0;
}
li{
float: left;
padding: 1em;
list-style-type: none;
}
img{
display: block;
clear: both;
}
3.js代碼
//首先封裝一個(gè)函數(shù),?參數(shù)whicpic代表一個(gè)元素的節(jié)點(diǎn)，即指向某個(gè)圖片的a元素
function showPic(whichpic){
//獲取某個(gè)圖片的href屬性
var source = whichpic.getAttribute("href");
//獲取占位符圖片的節(jié)點(diǎn)
var placeholder = document.getElementById("placeholder");
//使用setAttribute對(duì)placeholder元素的src屬性進(jìn)行刷新
placeholder.setAttribute("src" , source);
//one more thing:在前換圖片的時(shí)候，將占位符圖片下面的文字內(nèi)容切換為對(duì)應(yīng)圖片的title
//首先獲取圖片對(duì)應(yīng)的title屬性
var text = whichpic.getAttribute("title");
//獲取圖片描述的節(jié)點(diǎn)
var description = document.getElementById("description");
//實(shí)現(xiàn)文本的切換
//首先要獲取到description中的文本，需要先獲取這個(gè)文本節(jié)點(diǎn)再獲取這個(gè)文本節(jié)點(diǎn)的值,并把text的值賦值給它
description.firstChild.nodeValue = text;
//也可以用firstchild：description.firstChild.nodeValue
}
4.總結(jié)
1.首先獲取圖片的href屬性：標(biāo)簽的nodeValue
var text = whichpic.getAttribute("title")
var description = document.getElementById("description")
description.firstChild.nodeValue = text
其中可以通過(guò)childNode獲取節(jié)點(diǎn)的所有子節(jié)點(diǎn)，并且用nodeType屬性進(jìn)行判斷：1代表元素節(jié)點(diǎn)、2代表屬性節(jié)點(diǎn)、3代表文本節(jié)點(diǎn)，因?yàn)楸纠?b>
標(biāo)簽只有一個(gè)子節(jié)點(diǎn)，所以可以用fistChild，或者childNode[0]來(lái)獲取，獲取節(jié)點(diǎn)后再用nodeValue獲取節(jié)點(diǎn)的屬性值。
5.添加onclick處理事件這只是初級(jí)的一個(gè)例子，所以函數(shù)處理事件嵌套在HTML代碼中，并且為了阻止點(diǎn)擊鏈接的默認(rèn)行為（跳轉(zhuǎn)到一個(gè)新的頁(yè)面），后面還要返回給它一個(gè)false。
點(diǎn)擊事件綁定在HTML代碼中，很笨重，下一篇中將做升級(jí)。
7.老規(guī)矩，貼出完整源碼
example
電影天堂
選擇一張圖片
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/79658.html
摘要：前言在編程藝術(shù)中初步實(shí)現(xiàn)的圖片庫(kù)的總結(jié)一中，有很多不足之處比如事件處理嵌套在中，顯得如此笨重和屌絲沒(méi)有對(duì)函數(shù)進(jìn)行相應(yīng)的安全檢查等，本篇文章對(duì)上述問(wèn)題做了全面的升級(jí)。 前言：在《DOM編程藝術(shù)》中初步實(shí)現(xiàn)的圖片庫(kù)的總結(jié)（一）中，有很多不足之處：比如事件處理嵌套在HTML中，顯得如此笨重和屌絲；沒(méi)有對(duì)showPic函數(shù)進(jìn)行相應(yīng)的安全檢查等，本篇文章對(duì)上述問(wèn)題做了全面的升級(jí)。－－－－－－－－...
摘要：三級(jí)事件處理程序級(jí)事件定義了兩個(gè)方法，分別用于處理指定和刪除事件處理程序的操作和，他們都接收三個(gè)參數(shù)要處理的事件名作為事件處理程序的函數(shù)一個(gè)布爾值。布爾值如果是表示在捕獲階段調(diào)用事件處理程序，如果是表示在冒泡階段調(diào)用事件處理程序。 前言：擼完CSS－DOM緊接著來(lái)擼DOM事件，事件總結(jié)完成后我要開(kāi)始總結(jié)動(dòng)畫(huà)，然后用純JS實(shí)現(xiàn)一個(gè)輪播圖，前路漫漫，還有各種框架等著我～～～本篇主要內(nèi)容有：...
摘要：前言這是系列最后一篇，本文主要總結(jié)了的用法，以及最后對(duì)函數(shù)進(jìn)行抽象。一個(gè)多說(shuō)無(wú)益，還是上代碼來(lái)得實(shí)在還記得編程藝術(shù)中的總結(jié)一中那個(gè)無(wú)聊的根據(jù)元素在節(jié)點(diǎn)樹(shù)里的位置來(lái)設(shè)置樣式的吧現(xiàn)在可以用屬性直接更改樣式了。 前言：這是CSS－DOM系列最后一篇，本文主要總結(jié)了className的用法，以及最后對(duì)函數(shù)進(jìn)行抽象。 －－－－－－－－－－－－－－－－－－我是分割線－－－－－－－－－－－－－－－－...
摘要：前言這是系列最后一篇，本文主要總結(jié)了的用法，以及最后對(duì)函數(shù)進(jìn)行抽象。一個(gè)多說(shuō)無(wú)益，還是上代碼來(lái)得實(shí)在還記得編程藝術(shù)中的總結(jié)一中那個(gè)無(wú)聊的根據(jù)元素在節(jié)點(diǎn)樹(shù)里的位置來(lái)設(shè)置樣式的吧現(xiàn)在可以用屬性直接更改樣式了。 前言：這是CSS－DOM系列最后一篇，本文主要總結(jié)了className的用法，以及最后對(duì)函數(shù)進(jìn)行抽象。 －－－－－－－－－－－－－－－－－－我是分割線－－－－－－－－－－－－－－－－...
摘要：前言前面是純總結(jié)，后面實(shí)現(xiàn)了一個(gè)用改變樣式的。開(kāi)始元素節(jié)點(diǎn)的屬性文檔中每個(gè)元素節(jié)點(diǎn)都有一個(gè)屬性，屬性包含著元素的樣式，查詢(xún)這個(gè)這個(gè)屬性將會(huì)返回一個(gè)對(duì)象，節(jié)點(diǎn)對(duì)應(yīng)的樣式都存放在這個(gè)屬性里。 前言：前面是純總結(jié)，后面實(shí)現(xiàn)了一個(gè)用DOM改變樣式的Demo。－－－－－－－－－－－－－－－－－－－開(kāi)始－－－－－－－－－－－－－－－－－－－－－－－－－ 1.元素節(jié)點(diǎn)的style屬性 HTML文檔中...
閱讀 3299·2021-11-22 12:07
閱讀 1968·2021-10-12 10:11
閱讀 1098·2019-08-30 15:44
閱讀 2999·2019-08-30 12:45
閱讀 2296·2019-08-29 16:41
閱讀 1686·2019-08-29 16:35
閱讀 2717·2019-08-29 12:57
閱讀 1212·2019-08-26 13:51
.jpg){kind=link}
幸福來(lái)敲門(mén).jpg){kind=link}