資訊專欄INFORMATION COLUMN
摘要：灰姑娘灰姑娘灰姑娘不足點(diǎn)擊事件綁定在代碼中，很笨重，下一篇中將做升級。
前言：在《DOM編程藝術(shù)》一書中，作者給出了一個(gè)實(shí)例：創(chuàng)建一個(gè)圖片庫，其實(shí)功能很簡單，就是點(diǎn)擊某個(gè)列表項(xiàng)時(shí)，下方出現(xiàn)相應(yīng)的圖片以及圖片說明（圖片說明事先以title的形式寫在HTML中），雖然是一個(gè)簡單的例子，當(dāng)時(shí)作者在書中循序漸進(jìn)，不斷的改善圖片庫中間引入各種知識點(diǎn)，真的是一本好書，在此對這個(gè)實(shí)例進(jìn)行一些總結(jié)。
－－－－－－－－－－－－－－－－－開始－－－－－－－－－－－－－－－－－
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對placeholder元素的src屬性進(jìn)行刷新
placeholder.setAttribute("src" , source);
//one more thing:在前換圖片的時(shí)候，將占位符圖片下面的文字內(nèi)容切換為對應(yīng)圖片的title
//首先獲取圖片對應(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
其中可以通過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]來獲取，獲取節(jié)點(diǎn)后再用nodeValue獲取節(jié)點(diǎn)的屬性值。
5.添加onclick處理事件這只是初級的一個(gè)例子，所以函數(shù)處理事件嵌套在HTML代碼中，并且為了阻止點(diǎn)擊鏈接的默認(rèn)行為（跳轉(zhuǎn)到一個(gè)新的頁面），后面還要返回給它一個(gè)false。
點(diǎn)擊事件綁定在HTML代碼中，很笨重，下一篇中將做升級。
7.老規(guī)矩，貼出完整源碼
example
電影天堂
選擇一張圖片
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/79658.html
摘要：前言在編程藝術(shù)中初步實(shí)現(xiàn)的圖片庫的總結(jié)一中，有很多不足之處比如事件處理嵌套在中，顯得如此笨重和屌絲沒有對函數(shù)進(jìn)行相應(yīng)的安全檢查等，本篇文章對上述問題做了全面的升級。 前言：在《DOM編程藝術(shù)》中初步實(shí)現(xiàn)的圖片庫的總結(jié)（一）中，有很多不足之處：比如事件處理嵌套在HTML中，顯得如此笨重和屌絲；沒有對showPic函數(shù)進(jìn)行相應(yīng)的安全檢查等，本篇文章對上述問題做了全面的升級。－－－－－－－－...
摘要：三級事件處理程序級事件定義了兩個(gè)方法，分別用于處理指定和刪除事件處理程序的操作和，他們都接收三個(gè)參數(shù)要處理的事件名作為事件處理程序的函數(shù)一個(gè)布爾值。布爾值如果是表示在捕獲階段調(diào)用事件處理程序，如果是表示在冒泡階段調(diào)用事件處理程序。 前言：擼完CSS－DOM緊接著來擼DOM事件，事件總結(jié)完成后我要開始總結(jié)動(dòng)畫，然后用純JS實(shí)現(xiàn)一個(gè)輪播圖，前路漫漫，還有各種框架等著我～～～本篇主要內(nèi)容有：...
摘要：前言這是系列最后一篇，本文主要總結(jié)了的用法，以及最后對函數(shù)進(jìn)行抽象。一個(gè)多說無益，還是上代碼來得實(shí)在還記得編程藝術(shù)中的總結(jié)一中那個(gè)無聊的根據(jù)元素在節(jié)點(diǎn)樹里的位置來設(shè)置樣式的吧現(xiàn)在可以用屬性直接更改樣式了。 前言：這是CSS－DOM系列最后一篇，本文主要總結(jié)了className的用法，以及最后對函數(shù)進(jìn)行抽象。 －－－－－－－－－－－－－－－－－－我是分割線－－－－－－－－－－－－－－－－...
摘要：前言這是系列最后一篇，本文主要總結(jié)了的用法，以及最后對函數(shù)進(jìn)行抽象。一個(gè)多說無益，還是上代碼來得實(shí)在還記得編程藝術(shù)中的總結(jié)一中那個(gè)無聊的根據(jù)元素在節(jié)點(diǎn)樹里的位置來設(shè)置樣式的吧現(xiàn)在可以用屬性直接更改樣式了。 前言：這是CSS－DOM系列最后一篇，本文主要總結(jié)了className的用法，以及最后對函數(shù)進(jìn)行抽象。 －－－－－－－－－－－－－－－－－－我是分割線－－－－－－－－－－－－－－－－...
摘要：前言前面是純總結(jié)，后面實(shí)現(xiàn)了一個(gè)用改變樣式的。開始元素節(jié)點(diǎn)的屬性文檔中每個(gè)元素節(jié)點(diǎn)都有一個(gè)屬性，屬性包含著元素的樣式，查詢這個(gè)這個(gè)屬性將會(huì)返回一個(gè)對象，節(jié)點(diǎn)對應(yīng)的樣式都存放在這個(gè)屬性里。 前言：前面是純總結(jié)，后面實(shí)現(xiàn)了一個(gè)用DOM改變樣式的Demo。－－－－－－－－－－－－－－－－－－－開始－－－－－－－－－－－－－－－－－－－－－－－－－ 1.元素節(jié)點(diǎn)的style屬性 HTML文檔中...
閱讀 3249·2021-11-22 12:07
閱讀 1892·2021-10-12 10:11
閱讀 1056·2019-08-30 15:44
閱讀 2953·2019-08-30 12:45
閱讀 2227·2019-08-29 16:41
閱讀 1649·2019-08-29 16:35
閱讀 2641·2019-08-29 12:57
閱讀 1161·2019-08-26 13:51
幸福來敲門.jpg){kind=link}