2. 程式人生 > >JavaScript DOM程式設計藝術（第2版）第七章 動態建立標記

JavaScript DOM程式設計藝術（第2版）第七章 動態建立標記

阿新 • • 發佈：2018-12-21
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 preparePlaceholder
() { if (!document.createElement) return false; if (!document.createTextNode) return false; if (!document.getElementById) return false; if (!document.getElementById("imagegallery")) return false; var placeholder = document.createElement("img"); placeholder.
setAttribute("id","placeholder"); placeholder.setAttribute("src","../img/timeqq.png"); placeholder.setAttribute("alt","my image gallery"); var description = document.createElement("p"); description.setAttribute("id","description"); var desctext = document.createTextNode("Choose an image"); description.appendChild(desctext); var gallery = document.getElementById("imagegallery"); insertAfter(placeholder,gallery);//圖片placeholder插到gallery後面 insertAfter(description,placeholder);//文字description插到placeholder後面 } function prepareGallery() { if (!document.getElementsByTagName) return false; if (!document.getElementById) return false; if (!document.getElementById("imagegallery")) return false; var gallery = document.getElementById("imagegallery"); var links = gallery.getElementsByTagName("a"); for (var i=0;i<links.length;i++){ links[i].onclick = function () { return showPic(this); } links[i].onkeypress=links[i].onclick; } } function showPic(whichpic) { if (!document.getElementById("placeholder")) return true; var source = whichpic.getAttribute("href"); var placeholder = document.getElementById("placeholder"); placeholder.setAttribute("src", source); if (!document.getElementById("description")) return false; if (whichpic.getAttribute("title")) { var text = whichpic.getAttribute("title"); } else { var text = ""; } //用一個變數存放description的文字p var description = document.getElementById("description"); if (description.firstChild.nodeType == 3) {//nodeType屬性檢查返回一個大寫字母的值 //把連結title傳給text變數 description.firstChild.nodeValue = text; } return false; } addLoadEvent(prepareGallery); addLoadEvent(preparePlaceholder);

相關推薦

JavaScript DOM程式設計藝術（第2版）第二章 語法

一.變數 把值存在變數的操作——賦值 JavaScript可以直接對變數賦值而不需事先宣告。 如果在對某個變數賦值前沒有宣告，賦值操作會自動宣告該變數。var age; JavaScript中變數不能包含空格或標點符號 變數可以使用駝峰命名 二.資料型別 1.必須明確型別宣告

JavaScript DOM程式設計藝術（第2版）第四章 JavaScript圖片庫 第五章 最佳實踐 第六章圖片庫的改進版

第四章 JavaScript圖片庫 點選有a連結的圖片，不發生跳轉頁面再顯示圖片而是在本頁展示圖片 佔位符 最好使用一個有序清單元素（ol） <!DOCTYPE html> <ht

JavaScript DOM程式設計藝術（第2版）第七章 動態建立標記

function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload !='function'){ window.onload = func;

對《JavaScript DOM程式設計藝術（第2版）》的閱讀感受

       嚴格來講這本書算是我接觸的JavaScript書籍中的第一本書，當時是因為萌生了想要好好學習一下JavaScript的想法，於是在度孃的幫助下選擇了這本書，跟紅皮書相比這本書的內容少而且淺顯易懂，絕對是JavaScript學習的入門經典書籍。

Android程式設計權威指南（第2版）—第16章挑戰練習

16.7挑戰練習：優化照片顯示 (1)新建dialog_photo.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.androi

Android程式設計權威指南（第2版）—第5章挑戰練習

5.5 挑戰練習 （1）使用者作弊後，可以旋轉CheatActivity來清除作弊痕跡 這個可以用書本前面讓題目橫屏後不重置的方法來進行： 新建兩個常量和一個變數 private static final String TAG = "CheatActivity"; pri

Android程式設計權威指南（第2版）—第13章挑戰練習

13.6 挑戰練習：刪除crime記錄 這個比較簡單，分三步 第一步建立一個button 第二步在CrimeLab增加刪除方法 public void removeCrime(Crime c) {         mCrimes.remove(c);     } 第三步修改

Android程式設計權威指南（第2版）—第2章挑戰練習

2.8 挑戰練習：為TextView新增監聽器 解說：直接新增監聽器即可 2.9 挑戰練習: 新增後退按鈕 for activity_quiz.xml 其實這裡的程式碼已經直接把按鈕改成了圖示按鈕，想看按鈕的效果請檢視註釋的灰色程式碼。注意xml裡面改成ImageBu

Android程式設計權威指南（第2版）—第14章挑戰練習

14.8 挑戰練習：刪除Crime記錄 修改CrimeLab的deleteCrime方法 public void deleteCrime(Crime c) { //mCrimes.remove(c); mDatabase.delete(

Android程式設計權威指南（第2版）—第20章挑戰練習

20.9 挑戰練習：建立多版本主題 用的模擬器版本是Lollipop （1）建立values-v21資料夾 （2）建立目錄下的styles.xml檔案 <?xml version="1.0" encoding="utf-8"?> <resources&g

挑戰程序設計競賽（第2版）第112頁勘誤

body pda ret oid print 最短 代碼 inf code 整個代碼段改為 // 輸入 int N, ML, MD; int AL[MAX_ML], BL[MAX_ML], DL[MAX_ML]; int AD[MAX_MD], BD[MAX_MD], DD

tcp/ip入門經典（第2版） 第十五章 監控和遠端訪問

1.本章內容 telnet berkeley r*工具 ssh 遠端控制 網路管理 snmp rmon 2.網路可以說是為了共享遠端的資源而建立的，所以在網路上做的幾乎所有的事情都可以歸結為遠端訪問。 3.telnet telnet是對遠端計算機進

JavaScript DOM 編程藝術（第2版）---P9

關鍵字 規則 大寫字母 字母 技術 語法元素 ... 第2版 就是 2.1 引入JS文件的方式 （1）引入外部js 示例： （2）當前頁面中 示例： 這部分內容可以放在頁面中的任何位置。但是一般放在頁面的底部。這樣的話便於頁面加載完成再執行js文件。 2.2 語法 語法

學習Javascript數據結構與算法（第2版）筆記（1）

布爾值 efi prim ray 叠代器 undefined ply 內部 HA 第 1 章 JavaScript簡介 使用 Node.js 搭建 Web 服務器 npm install http-server -g http-server JavaScript 的類型有

學習Javascript數據結構與算法（第2版）筆記（3）

清空 tac math bcd lse += 基本類型 In 所有 第 3 章 1. 棧數據結構 棧是一種遵從後進先出（LIFO）原則的有序集合。新添加的或待刪除的元素都保存在棧的同一端，稱作棧頂，另一端就叫棧底。在棧裏，新元素都靠近棧頂，舊元素都接近棧底。 1.1 棧的操

Java程式設計題解與上機指導（第四版）第七章 Java語言的高階特性 7.2藉助泛型定義一個線性表

線性表：由相同型別的物件組成的一個線性結構360百科： 定義 線性表(linear list)是資料結構的一種，一個線性表是n個具有相同特性的資料元素的有限序列。資料元素是一個抽象的符號，其具體含義在不同的情況下一般不同。 在稍複雜的線性表中，一個數據元素可由多個數據項(

學習JavaScript資料結構與演算法（第2版）.epub

  【下載地址】 本書首先介紹了JavaScript 語言的基礎知識以及ES6 和ES7 中引入的新功能，接下來討論了陣列、棧、佇列、連結串列、集合、字典、散列表、樹、圖等資料結構，之後探討了各種排序和搜尋演算法，包括氣泡排序、選擇排序、插入排序、歸併排序、快速排序、堆排序、

C程式設計語言（第2版）簡單讀書筆記

最近重新看了C語言聖經，查漏補缺，記了簡單的筆記，全部來自原書，共9866字，記錄一下。  騰訊文件地址：https://docs.qq.com/doc/DUmt5VU5Tem1LQUxx 第一章 導言 　　c語言中一個通用的例項：在允許使用某種型別變數值的任何場合，都可以使用該型別的更復雜的

《JavaScript Dom 程式設計藝術》讀書筆記-第9章

SS-DOM，本章內容： style屬性 如何檢索樣式 如何改變樣式三頁一體的網頁 結構層：由HTML或XHTML之類的標記語言負責建立。標籤（tag）也就是尖括號裡的單詞，對網頁內容的語義含義做出了描述。 表示層：由CSS負責完成。CSS描述頁面內容應該如何呈現。定義這樣一個CSS來宣告：文字段應

《C語言程式設計：現代方法（第2版）（K.N.King 著）》學習筆記一：C語言概述

1.1 C語言的歷史 1.1.1 起源 C語言是美國貝爾實驗室的 Dennis Ritchie、Ken Thompson 等人為開發 UNIX 作業系統而於 1972 年設計的一種計算機程式語言。