目錄

第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