學(xué)習(xí)了JavaScript的基本語法,其實和網(wǎng)頁并沒有關(guān)系,要想使用JavaScript這門語言,讓它發(fā)揮出強(qiáng)大的功能,實現(xiàn)炫酷的網(wǎng)頁特效,就必須結(jié)合瀏覽器的BOM和HTML頁面的DOM,尤其是DOM。JavaScript*常應(yīng)用在前端HTML編程中,通過JavaScript讓HTML文檔變得生動形象,具有可交互性,而這一切都是BOM和DOM的功勞。 本書主要面向具有一定JavaScript語法基礎(chǔ),想讓JavaScript發(fā)揮更大作用的人群。學(xué)習(xí)本書,不需要具備特殊的專業(yè)知識,只需熟練掌握“跟兄弟連學(xué)HTML5系列教程”的第二本書《細(xì)說JavaScript》的基本部分,就可以跟隨本書一起來學(xué)習(xí)DOM編程了。
本書適合有一定javaScript基礎(chǔ)的讀者學(xué)習(xí)使用,如果是零基礎(chǔ),建議優(yōu)先學(xué)習(xí)本系列圖書中的《細(xì)說JavaScript語言》。也適合對JavaScript有一定的學(xué)習(xí),但對DOM部分比較模糊的讀者,通過本書的學(xué)習(xí),您將會理解和使用DOM.本書為JavaScript的中高級部分,涉及的對象知識和設(shè)計模式多一些,還講解了許多實際項目中的常見的特效的實現(xiàn)。DOM知識是整個JavaScript的核心所在,也是JavaScript知識中的重難點。理解和掌握了DOM知識,我們使用JavaScript會變得更得心應(yīng)手。
兄弟連教育,成立于2006年,專注于IT技術(shù)培訓(xùn),中國PHP培訓(xùn)領(lǐng)導(dǎo)者,以“優(yōu)秀的教學(xué)、嚴(yán)格的管理、職業(yè)素質(zhì)課貫穿始終”聞名業(yè)界,現(xiàn)已開設(shè)PHP、Java、HTML5、UI、Linux、Python等眾多課程,在國內(nèi)開設(shè)有四十余所分校,于2016年9月在國內(nèi)新三板掛牌上市(股票代碼:839467),每年有數(shù)十萬名學(xué)生受益于兄弟連的職業(yè)培訓(xùn)、出版書籍、教學(xué)視頻、網(wǎng)絡(luò)直播課、院校講座。
“我們不僅僅是老師,更是學(xué)生的夢想守護(hù)者與職場引路人。”做一所認(rèn)認(rèn)真真的學(xué)校,幫助更多的年輕人實現(xiàn)人生價值,是我們的光榮與驕傲。
第1章 說說BOM和DOM 1
1.1 BOM簡介 1
1.2 DOM簡介 2
1.3 應(yīng)用場景 3
1.4 如何學(xué)習(xí) 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 本章小結(jié) 37
2.6 本章習(xí)題 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 綁定事件監(jiān)聽函數(shù) 43
3.3 事件的類型 45
3.3.1 UI事件 45
3.3.2 焦點事件 49
3.3.3 鼠標(biāo)事件 50
3.3.4 滾輪事件 53
3.3.5 鍵盤與文本事件 55
3.4 事件對象 56
3.4.1 DOM中的事件對象 56
3.4.2 IE中的事件對象 59
3.5 本章小結(jié) 60
3.6 本章習(xí)題 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 本章小結(jié) 69
第5章 DOM可以做什么 70
5.1 通過id獲取標(biāo)簽元素 70
5.2 操作標(biāo)簽元素的內(nèi)容 71
5.3 操作標(biāo)簽元素的屬性 73
5.4 操作標(biāo)簽元素的CSS樣式 75
5.5 倒計時秒殺活動實例 76
5.6 本章小結(jié) 79
5.7 本章習(xí)題 79
第6章 DOM節(jié)點操作 80
6.1 什么是節(jié)點 80
6.2 節(jié)點類型 81
6.2.1 元素節(jié)點 81
6.2.2 屬性節(jié)點 83
6.2.3 文本節(jié)點 84
6.2.4 節(jié)點類型、名字、值速查表 85
6.3 通過文檔對象方法獲取節(jié)點 86
6.3.1 通過id屬性獲取節(jié)點 86
6.3.2 通過標(biāo)簽名字獲取節(jié)點 87
6.3.3 通過類名獲取節(jié)點 90
6.3.4 通過name屬性值獲取節(jié)點 91
6.4 通過層級關(guān)系獲取節(jié)點 92
6.4.1 子節(jié)點 92
6.4.2 父節(jié)點 98
6.4.3 兄弟節(jié)點 99
6.4.4 節(jié)點的混合操作 101
6.5 節(jié)點的其他操作 103
6.5.1 添加節(jié)點 103
6.5.2 修改節(jié)點 105
6.5.3 刪除節(jié)點 107
6.6 自封裝函數(shù)庫 108
6.7 QQ空間實例 117
6.8 本章小結(jié) 122
第7章 DOM表單相關(guān)操作 123
7.1 幾種獲取表單數(shù)據(jù)的方式 123
7.1.1 通過id屬性獲取表單數(shù)據(jù) 124
7.1.2 通過name屬性獲取表單數(shù)據(jù) 125
7.1.3 通過標(biāo)簽名獲取表單數(shù)據(jù) 129
7.2 與表單相關(guān)的事件 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 城市級聯(lián)特效 147
7.4.4 用戶注冊實例 150
7.5 本章小結(jié) 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 設(shè)置Cookie過期時間 159
8.2.4 修改Cookie 160
8.2.5 刪除Cookie 161
8.3 本章小結(jié) 162
第9章 DOM對象的尺寸和位置 163
9.1 關(guān)于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
的聯(lián)系與區(qū)別 166
9.2.3 obj.clientWidth和obj.clientHeight的對比與聯(lián)系 168
9.3 DOM文檔對象的位置 169
9.3.1 obj.offsetTop和obj.offsetLeft、obj.style.top和obj.style.left
的對比與聯(lián)系 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――完成向左向右滑動導(dǎo)航條實例 180
9.5 本章小結(jié) 183
第10章 DOM相關(guān)屬性和方法 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 鼠標(biāo)鍵盤屬性 223
10.4.3 標(biāo)準(zhǔn)event屬性和方法 226
10.5 本章小結(jié) 232
第11章 DOM實例篇 233
11.1 打字游戲 233
11.1.1 需求分析 234
11.1.2 知識點整理 234
11.1.3 實戰(zhàn) 235
11.2 使用JavaScript實現(xiàn)PPT效果 244
11.2.1 需求分析 244
11.2.2 知識點整理 244
11.2.3 實戰(zhàn) 245
11.3 自定義鼠標(biāo)右鍵菜單 250
11.3.1 需求分析 251
11.3.2 知識點整理 251
11.3.3 實戰(zhàn) 252
11.4 放大鏡效果 256
11.4.1 需求分析 256
11.4.2 知識點整理 257
11.4.3 實戰(zhàn) 258
11.5 拖拽效果 266
11.5.1 需求分析 266
11.5.2 知識點整理 266
11.5.3 實戰(zhàn) 267
11.6 淘寶評價效果 273
11.6.1 需求分析 274
11.6.2 知識點整理 274
11.6.3 實戰(zhàn) 274
11.7 輪播圖效果 279
11.7.1 需求分析 279
11.7.2 知識點整理 281
11.7.3 實戰(zhàn) 281