學習了JavaScript的基本語法,其實和網頁并沒有關系,要想使用JavaScript這門語言,讓它發揮出強大的功能,實現炫酷的網頁特效,就必須結合瀏覽器的BOM和HTML頁面的DOM,尤其是DOM。JavaScript*常應用在前端HTML編程中,通過JavaScript讓HTML文檔變得生動形象,具有可交互性,而這一切都是BOM和DOM的功勞。 本書主要面向具有一定JavaScript語法基礎,想讓JavaScript發揮更大作用的人群。學習本書,不需要具備特殊的專業知識,只需熟練掌握“跟兄弟連學HTML5系列教程”的第二本書《細說JavaScript》的基本部分,就可以跟隨本書一起來學習DOM編程了。
本書適合有一定javaScript基礎的讀者學習使用,如果是零基礎,建議優先學習本系列圖書中的《細說JavaScript語言》。也適合對JavaScript有一定的學習,但對DOM部分比較模糊的讀者,通過本書的學習,您將會理解和使用DOM.本書為JavaScript的中高級部分,涉及的對象知識和設計模式多一些,還講解了許多實際項目中的常見的特效的實現。DOM知識是整個JavaScript的核心所在,也是JavaScript知識中的重難點。理解和掌握了DOM知識,我們使用JavaScript會變得更得心應手。
兄弟連教育,成立于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