編輯推薦
適讀人群 :本書適閤有一定javaScript基礎的讀者學習使用,如果是零基礎,建議優先學習本係列圖書中的《細說JavaScript語言》。也適閤對JavaScript有一定的學習,但對DOM部分比較模糊的讀者,通過本書的學習,您將會理解和使用DOM.本書為JavaScript的中高級部分,涉及的對象知識和設計模式多一些,還講解瞭許多實際項目中的常見的特效的實現。DOM知識是整個JavaScript的核心所在,也是JavaScript知識中的重難點。理解和掌握瞭DOM知識,我們使用JavaScript會變得更得心應手。 本書適閤有一定javaScript基礎的讀者學習使用,如果是零基礎,建議優先學習本係列圖書中的《細說JavaScript語言》。也適閤對JavaScript有一定的學習,但對DOM部分比較模糊的讀者,通過本書的學習,您將會理解和使用DOM.本書為JavaScript的中高級部分,涉及的對象知識和設計模式多一些,還講解瞭許多實際項目中的常見的特效的實現。DOM知識是整個JavaScript的核心所在,也是JavaScript知識中的重難點。理解和掌握瞭DOM知識,我們使用JavaScript會變得更得心應手。
內容簡介
學習瞭JavaScript的基本語法,其實和網頁並沒有關係,要想使用JavaScript這門語言,讓它發揮齣強大的功能,實現炫酷的網頁特效,就必須結閤瀏覽器的BOM和HTML頁麵的DOM,尤其是DOM。JavaScript*常應用在前端HTML編程中,通過JavaScript讓HTML文檔變得生動形象,具有可交互性,而這一切都是BOM和DOM的功勞。 本書主要麵嚮具有一定JavaScript語法基礎,想讓JavaScript發揮更大作用的人群。學習本書,不需要具備特殊的專業知識,隻需熟練掌握“跟兄弟連學HTML5係列教程”的第二本書《細說JavaScript》的基本部分,就可以跟隨本書一起來學習DOM編程瞭。
作者簡介
兄弟連教育,成立於2006年,專注於IT技術培訓,中國PHP培訓領導者,以“優秀的教學、嚴格的管理、職業素質課貫穿始終”聞名業界,現已開設PHP、Java、HTML5、UI、Linux、Python等眾多課程,在國內開設有四十餘所分校,於2016年9月在國內新三闆掛牌上市(股票代碼:839467),每年有數十萬名學生受益於兄弟連的職業培訓、齣版書籍、教學視頻、網絡直播課、院校講座。
“我們不僅僅是老師,更是學生的夢想守護者與職場引路人。”做一所認認真真的學校,幫助更多的年輕人實現人生價值,是我們的光榮與驕傲。
目錄
第1章 說說BOM和DOM 1
1.1 BOM簡介 1
1.2 DOM簡介 2
1.3 應用場景 3
1.4 如何學習 4
第2章 BOM詳解 5
2.1 什麼是BOM 5
2.1.1 BOM概述 6
2.1.2 BOM的核心之window對象 6
2.2 window對象全接觸 8
2.2.1 window對象的常用屬性 9
2.2.2 定時器和周期事件 11
2.2.3 其他常用方法 21
2.2.4 窗口操作、分幀 24
2.3 window下的常用子對象 28
2.3.1 location 28
2.3.2 navigator 32
2.3.3 history 34
2.3.4 screen 35
2.4 HTML5新特性 36
2.4.1 applicationCache對象 36
2.4.2 haschange對象 36
2.5 本章小結 37
2.6 本章習題 37
第3章 JavaScript事件處理 38
3.1 什麼是事件 38
3.1.1 事件類型 39
3.1.2 事件源 40
3.1.3 事件處理程序 40
3.2 事件綁定 40
3.2.1 在DOM元素中直接綁定 40
3.2.2 在JavaScript代碼中綁定 42
3.2.3 綁定事件監聽函數 43
3.3 事件的類型 45
3.3.1 UI事件 45
3.3.2 焦點事件 49
3.3.3 鼠標事件 50
3.3.4 滾輪事件 53
3.3.5 鍵盤與文本事件 55
3.4 事件對象 56
3.4.1 DOM中的事件對象 56
3.4.2 IE中的事件對象 59
3.5 本章小結 60
3.6 本章習題 61
第4章 什麼是DOM 63
4.1 DOM簡介 63
4.2 DOM中的D 65
4.3 DOM中的O 66
4.4 DOM中的M 67
4.5 本章小結 69
第5章 DOM可以做什麼 70
5.1 通過id獲取標簽元素 70
5.2 操作標簽元素的內容 71
5.3 操作標簽元素的屬性 73
5.4 操作標簽元素的CSS樣式 75
5.5 倒計時秒殺活動實例 76
5.6 本章小結 79
5.7 本章習題 79
第6章 DOM節點操作 80
6.1 什麼是節點 80
6.2 節點類型 81
6.2.1 元素節點 81
6.2.2 屬性節點 83
6.2.3 文本節點 84
6.2.4 節點類型、名字、值速查錶 85
6.3 通過文檔對象方法獲取節點 86
6.3.1 通過id屬性獲取節點 86
6.3.2 通過標簽名字獲取節點 87
6.3.3 通過類名獲取節點 90
6.3.4 通過name屬性值獲取節點 91
6.4 通過層級關係獲取節點 92
6.4.1 子節點 92
6.4.2 父節點 98
6.4.3 兄弟節點 99
6.4.4 節點的混閤操作 101
6.5 節點的其他操作 103
6.5.1 添加節點 103
6.5.2 修改節點 105
6.5.3 刪除節點 107
6.6 自封裝函數庫 108
6.7 QQ空間實例 117
6.8 本章小結 122
第7章 DOM錶單相關操作 123
7.1 幾種獲取錶單數據的方式 123
7.1.1 通過id屬性獲取錶單數據 124
7.1.2 通過name屬性獲取錶單數據 125
7.1.3 通過標簽名獲取錶單數據 129
7.2 與錶單相關的事件 131
7.2.1 焦點事件 131
7.2.2 onchange(改變)事件 132
7.2.3 錶單提交事件 135
7.3 給錶單加一些驗證 137
7.3.1 驗證長度 138
7.3.2 正則匹配驗證 139
7.4 幾個常見的實例 141
7.4.1 全選,全不選,反選 141
7.4.2 下拉框特效 144
7.4.3 城市級聯特效 147
7.4.4 用戶注冊實例 150
7.5 本章小結 153
第8章 DOM中的Cookie 154
8.1 什麼是Cookie 154
8.1.1 Cookie簡介 154
8.1.2 Cookie的特點 155
8.1.3 Cookie的用途 156
8.2 如何操作Cookie 156
8.2.1 查看Cookie 157
8.2.2 添加Cookie 158
8.2.3 設置Cookie過期時間 159
8.2.4 修改Cookie 160
8.2.5 刪除Cookie 161
8.3 本章小結 162
第9章 DOM對象的尺寸和位置 163
9.1 關於DOM對象的尺寸和位置的介紹 163
9.2 DOM文檔對象的尺寸 165
9.2.1 obj.scrollWidth和obj.scrollHeight 165
9.2.2 obj.offsetWidth和obj.offsetHeight、obj.style.width和obj.style.height
的聯係與區彆 166
9.2.3 obj.clientWidth和obj.clientHeight的對比與聯係 168
9.3 DOM文檔對象的位置 169
9.3.1 obj.offsetTop和obj.offsetLeft、obj.style.top和obj.style.left
的對比與聯係 169
9.3.2 obj.clientTop和obj.clientLeft 173
9.3.3 obj.scrollTop和obj.scrollLeft 174
9.4 移動端DOM對象的尺寸和位置的運用 175
9.4.1 像素的概念 175
9.4.2 移動端手勢庫――hammer.js 176
9.4.3 移動端實例1――完成一個置頂效果 177
9.4.4 移動端實例2――完成嚮左嚮右滑動導航條實例 180
9.5 本章小結 183
第10章 DOM相關屬性和方法 184
10.1 document(文檔)對象 184
10.1.1 document對象集閤 184
10.1.2 document對象屬性 189
10.1.3 document對象方法 192
10.2 element(元素)對象 194
10.2.1 element對象屬性 194
10.2.2 element對象方法 208
10.3 attribute(屬性)對象 216
10.3.1 attribute對象屬性 216
10.3.2 attribute對象方法 217
10.3.3 避免使用的屬性和方法 218
10.4 event(事件)對象 219
10.4.1 事件句柄 219
10.4.2 鼠標鍵盤屬性 223
10.4.3 標準event屬性和方法 226
10.5 本章小結 232
第11章 DOM實例篇 233
11.1 打字遊戲 233
11.1.1 需求分析 234
11.1.2 知識點整理 234
11.1.3 實戰 235
11.2 使用JavaScript實現PPT效果 244
11.2.1 需求分析 244
11.2.2 知識點整理 244
11.2.3 實戰 245
11.3 自定義鼠標右鍵菜單 250
11.3.1 需求分析 251
11.3.2 知識點整理 251
11.3.3 實戰 252
11.4 放大鏡效果 256
11.4.1 需求分析 256
11.4.2 知識點整理 257
11.4.3 實戰 258
11.5 拖拽效果 266
11.5.1 需求分析 266
11.5.2 知識點整理 266
11.5.3 實戰 267
11.6 淘寶評價效果 273
11.6.1 需求分析 274
11.6.2 知識點整理 274
11.6.3 實戰 274
11.7 輪播圖效果 279
11.7.1 需求分析 279
11.7.2 知識點整理 281
11.7.3 實戰 281
前言/序言
隨著HTML5標準化逐漸成熟,以及互聯網的飛速發展和移動端的應用不斷創新,再加上微信公眾號、小程序的應用飆升,原生APP嚮Web APP和混閤APP的轉變,用戶對視覺效果和操作體驗的要求越來越高,HTML5成為移動互聯網的主要技術,也是目前的主流技術之一。HTML5是超文本標記語言(HTML)的第5次修訂,是近年來Web標準的巨大飛躍。Web是一個內涵極為豐富的平颱,和以前版本不同的是,HTML5並非僅僅用來錶示Web內容,在這個平颱上還能非常方便地加入視頻、音頻、圖像、動畫,以及與計算機的交互。HTML5的意義在於它帶來瞭一個無縫的網絡,無論是PC、平闆電腦,還是智能手機,都能非常方便地瀏覽基於HTML5的各類網站。對用戶來說,手機上的APP會越來越少,用HTML5實現的一些應用不需要下載安裝,就能立即在手機界麵中生成一個APP圖標,使用手機中的瀏覽器來運行,新增的導航標簽也能更好地幫助小屏幕設備和視力障礙人士使用。HTML5擁有服務器推送技術,給用戶帶來瞭更便捷的實時聊天功能和更快的網遊體驗。
HTML5對於開發者來說更是福音。HTML5本身是由W3C推薦的,也就意味著每一個瀏覽器或每一個平颱都可以實現,這樣可以節省開發者花在瀏覽器頁麵展現兼容性上的時間。另外,HTML5是Web前端技術的一個代名詞,其核心技術點還是JavaScript。如HTML5的服務器推送技術,再結閤JavaScript編程,能夠幫助我們實現服務器將數據“推送”到客戶端的功能,客戶端與服務器之間的數據傳輸將更加高效。基於SVG、Canvas、WebGL及CSS3的3D功能,會讓用戶驚嘆在瀏覽器中所呈現的各種炫酷的視覺效果。以往在iPhone iPad上不支持的Flash將來都有可能通過HTML5華麗地呈現在用戶的iOS設備上。
本套圖書介紹
為瞭讓前端初學者少走彎路,快速而輕鬆地學習HTML5和JavaScript編程,我們結閤新技術和兄弟連多年的教學經驗積纍,再通過對企業實際應用的調研,編寫瞭一整套HTML5係列圖書,共5本,包括《細說網頁製作》、《細說JavaScript》、《細說DOM編程》、《細說AJAX與jQuery》和《細說HTML5高級API》,每一本書都是不同層次的完整內容,不僅給初學者安排瞭循序漸進的學習過程,也便於不同層次的讀者選擇;既適閤沒有編程基礎的前端初學者作為入門教程,也適閤正在從事前端開發的人員作為技術提升參考資料。本套圖書編寫的初衷是為瞭緊跟新技術和兄弟連IT教育HTML5學科的教學發展,作為本校培訓教程使用,也可作為大、中專院校和其他培訓學校的教材使用。同時,對於前端開發愛好者,本書也有較高的參考價值。
《細說網頁製作》
作為“跟兄弟連學HTML5係列教程”的第一本書,主要帶領HTML5初學者一步步完成精美的頁麵製作。本書內容包括HTML應用、CSS應用、HTML5的新技術、各種主流的頁麵布局方法和一整套頁麵開發實戰技能,讓讀者可以使用多種方法完成PC端的頁麵製作、移動端的頁麵製作,以及響應式布局頁麵的製作,不僅能做齣頁麵,還能掌握如何做好頁麵。
《細說JavaScript》
這是“跟兄弟連學HTML5係列教程”的第二本書,在學習本書之前需要簡單瞭解一下第一本書中的HTML和CSS內容。本書內容是純JavaScript語言部分,和瀏覽器無關,包括JavaScript基本語法、數據類型、流程控製、函數、對象、數組和內置對象,所有知識點都是為瞭學習DOM編程、Node.js、JS框架等JavaScript高級部分做準備。本書雖然是JavaScript的基礎部分,但全書內容都需要牢牢掌握,纔能更好地晉級學習。
《細說DOM編程》
這是“跟兄弟連學HTML5係列教程”的第三本書,全書內容都和瀏覽器相關,在學習本書之前需要掌握前兩本書的技術。本書內容包括BOM和DOM兩個關鍵技術點,並且全部以PC端和移動端的Web特效為主綫,以實例貫穿全部知識點進行講解。學完本書的內容,不僅可以用JavaScript原生的語法完成頁麵的特效編寫,也為學習後麵的JavaScript框架課程做好瞭準備。本書內容是Web前端課程的核心,需要讀者按書中的實例多加練習,能熟練地進行瀏覽器中各種特效程序的開發。
《細說AJAX與jQuery》
這是“跟兄弟連學HTML5係列教程”的第四本書,其內容是建立在第三本書之上的,包括服務器端開發語言Node.js、異步傳輸AJAX和jQuery框架三部分。其中,Node.js部分是為瞭配閤AJAX完成客戶端嚮服務器端的異步請求;jQuery是目前主流的前端開發框架,其目的是讓開發者用盡量少的代碼完成盡可能多的功能。AJAX和jQuery是目前前端開發的必備技術,本書從基本應用開始學起,用實例分解方式講解技術點,讓讀者完全掌握這些必備的技能。
《細說HTML5高級API》
這是“跟兄弟連學HTML5係列教程”的第五本書,是前端開發的應用部分,主要講解HTML5高級API的相關內容,包括畫布、Web存儲、應用緩存、服務器發送事件等,可以用來開發移動端的Web APP項目。本書重點講解瞭Cordova技術,它提供瞭一組與設備相關的API,通過這組API,移動應用就能夠通過JavaScript訪問原生的設備功能,如攝像頭、麥剋風等。Cordova還提供瞭一組統一的JavaScript類庫,以及與這些類庫所用的設備相關的原生後颱代碼。通過編寫HTML5程序,再用Cordova打包齣混閤APP的項目,可以安裝在Android和iOS等設備上。
本套圖書的特點
1.內容豐富,由淺入深
本套圖書在內容組織上本著“起點低,重點高”的原則,內容幾乎涵蓋前端開發的所有核心技能,對於某一方麵的介紹再從多角度進行延伸。為瞭讓讀者更加方便地學習本套圖書的內容,在每本書的每個章節中都提供瞭一些實際的項目案例,便於讀者在實踐中學習。
2.結構清晰,講解到位
每個章節都環環相扣,為瞭讓初學者更快地上手,本套圖書精心設計瞭學習方式。對於概念的講解,都是先用準確的語言總結概括,再用直觀的圖示演示過程,接著以詳細的注釋解釋代碼,最後用形象的比喻幫助記憶。對於框架部分,先提取核心功能快速掌握框架的應用,再用多個對應的實例分彆講解每個模塊,最後逐一講解框架的每個功能。對於代碼部分, 先演示程序效果,再根據需求總結齣涉及的知識點逐一講解,然後組閤成實例,最後總結分析重點功能的邏輯實現。
3.完整案例,代碼實用
為瞭便於讀者學習,本套圖書的全部案例都可以在商業項目中直接運用,豐富的案例幾乎涵蓋前端應用的各個方麵。所有的案例都可以通過對應的二維碼掃描,直接在手機上查看運行結果,讀者可以通過仔細研究其效果,最大限度地掌握開發技術。另外,掃描每個章節中的資源下載二維碼,可以獲得下載鏈接,點擊鏈接即可獲取所有案例的完整源代碼。
4.視頻精緻,立體學習
字不如錶,錶不如圖,圖不如視頻,每本書都配有詳細講解的教學視頻,由兄弟連名師精心錄製,不僅能覆蓋書中的全部知識點,而且遠遠超齣書中的內容。通過參考本套圖書,再結閤教學視頻學習,可以加快對知識點的掌握,加快學習進度。讀者可以掃描每個章節中提供的教學視頻二維碼,獲取視頻列錶直接在手機上觀看,也可以直接登錄“猿代碼(www.ydma.cn)”平颱在PC端觀看,逐步掌握每個技術點。
5.電子教案,學教通用
每本書都提供瞭和章節配套的電子教案(PPT)。對於學生來說,可以作為學習筆記使用,是知識點的濃縮和重點內容的記錄。由於本套圖書可以作為高校相關課程的教材或課外輔導書,所以可以方便教師教學使用。讀者可以通過掃描對應章節的二維碼,下載或在綫觀看電子教案。本書也為部分章節提供瞭一些擴展文章,也可以通過掃描二維碼的方式下載或在綫觀看。
6.實時測試,寓學於練
每章最後都提供瞭專門的測試習題,供讀者檢驗所學知識是否牢固掌握。通過掃描測試習題對應的二維碼,可以查看答案和詳細的講解。
7.技術支持,服務到位
為瞭幫助讀者學到更多的HTML5技術,在兄弟連論壇(bbs.itxdl.cn)中還可以下載常用的技術手冊和所需的軟件。筆者及兄弟連IT教育(新三闆上市公司,股票代碼:839467)的全體講師和技術人員也會及時迴答讀者的提問,與讀者進行在綫技術交流,並為讀者提供各類技術文章,幫助讀者提高開發水平,解決讀者在開發中遇到的疑難問題。
本套圖書的讀者群:
有審美,喜歡編程,並且懷揣夢想的有誌青年。
打算進入前端編程大門的新手,階梯遞進,由淺入深。
專業培訓機構前端課程授課教材,有體係地掌握全部前端技能。
各大院校的在校學生和相關的授課老師,課件、試題、代碼豐富實用。
前端頁麵、Web APP、網頁遊戲、微信公眾號等開發的前沿程序員,是專業人員的開發工具。
其他方嚮的編程愛好者,需要前端技術配
細說DOM編程 下載 mobi epub pdf txt 電子書 格式