細(xì)說DOM編程

目錄

第1章 說說BOM和DOM\t1
1．1 BOM簡(jiǎn)介\t1
1．2 DOM簡(jiǎn)介\t2
1．3 應(yīng)用場(chǎng)景\t3
1．4 如何學(xué)習(xí)\t4
第2章 BOM詳解\t5
2．1 什么是BOM\t5
2．1．1 BOM概述\t6
2．1．2 BOM的核心之window對(duì)象\t6
2．2 window對(duì)象全接觸\t8
2．2．1 window對(duì)象的常用屬性\t9
2．2．2 定時(shí)器和周期事件\t11
2．2．3 其他常用方法\t21
2．2．4 窗口操作、分幀\t24
2．3 window下的常用子對(duì)象\t28
2．3．1 location\t28
2．3．2 navigator\t32
2．3．3 history\t34
2．3．4 screen\t35
2．4 HTML5新特性\t36
2．4．1 applicationCache對(duì)象\t36
2．4．2 haschange對(duì)象\t36
2．5 本章小結(jié)\t37
2．6 本章習(xí)題\t37
第3章 JavaScript事件處理\t38
3．1 什么是事件\t38
3．1．1 事件類型\t39
3．1．2 事件源\t40
3．1．3 事件處理程序\t40
3．2 事件綁定\t40
3．2．1 在DOM元素中直接綁定\t40
3．2．2 在JavaScript代碼中綁定\t42
3．2．3 綁定事件監(jiān)聽函數(shù)\t43
3．3 事件的類型\t45
3．3．1 UI事件\t45
3．3．2 焦點(diǎn)事件\t49
3．3．3 鼠標(biāo)事件\t50
3．3．4 滾輪事件\t53
3．3．5 鍵盤與文本事件\t55
3．4 事件對(duì)象\t56
3．4．1 DOM中的事件對(duì)象\t56
3．4．2 IE中的事件對(duì)象\t59
3．5 本章小結(jié)\t60
3．6 本章習(xí)題\t61
第4章 什么是DOM\t63
4．1 DOM簡(jiǎn)介\t63
4．2 DOM中的D\t65
4．3 DOM中的O\t66
4．4 DOM中的M\t67
4．5 本章小結(jié)\t69
第5章 DOM可以做什么\t70
5．1 通過id獲取標(biāo)簽元素\t70
5．2 操作標(biāo)簽元素的內(nèi)容\t71
5．3 操作標(biāo)簽元素的屬性\t73
5．4 操作標(biāo)簽元素的CSS樣式\t75
5．5 倒計(jì)時(shí)秒殺活動(dòng)實(shí)例\t76
5．6 本章小結(jié)\t79
5．7 本章習(xí)題\t79
第6章 DOM節(jié)點(diǎn)操作\t80
6．1 什么是節(jié)點(diǎn)\t80
6．2 節(jié)點(diǎn)類型\t81
6．2．1 元素節(jié)點(diǎn)\t81
6．2．2 屬性節(jié)點(diǎn)\t83
6．2．3 文本節(jié)點(diǎn)\t84
6．2．4 節(jié)點(diǎn)類型、名字、值速查表\t85
6．3 通過文檔對(duì)象方法獲取節(jié)點(diǎn)\t86
6．3．1 通過id屬性獲取節(jié)點(diǎn)\t86
6．3．2 通過標(biāo)簽名字獲取節(jié)點(diǎn)\t87
6．3．3 通過類名獲取節(jié)點(diǎn)\t90
6．3．4 通過name屬性值獲取節(jié)點(diǎn)\t91
6．4 通過層級(jí)關(guān)系獲取節(jié)點(diǎn)\t92
6．4．1 子節(jié)點(diǎn)\t92
6．4．2 父節(jié)點(diǎn)\t98
6．4．3 兄弟節(jié)點(diǎn)\t99
6．4．4 節(jié)點(diǎn)的混合操作\t101
6．5 節(jié)點(diǎn)的其他操作\t103
6．5．1 添加節(jié)點(diǎn)\t103
6．5．2 修改節(jié)點(diǎn)\t105
6．5．3 刪除節(jié)點(diǎn)\t107
6．6 自封裝函數(shù)庫(kù)\t108
6．7 QQ空間實(shí)例\t117
6．8 本章小結(jié)\t122
第7章 DOM表單相關(guān)操作\t123
7．1 幾種獲取表單數(shù)據(jù)的方式\t123
7．1．1 通過id屬性獲取表單數(shù)據(jù)\t124
7．1．2 通過name屬性獲取表單數(shù)據(jù)\t125
7．1．3 通過標(biāo)簽名獲取表單數(shù)據(jù)\t129
7．2 與表單相關(guān)的事件\t131
7．2．1 焦點(diǎn)事件\t131
7．2．2 onchange（改變）事件\t132
7．2．3 表單提交事件\t135
7．3 給表單加一些驗(yàn)證\t137
7．3．1 驗(yàn)證長(zhǎng)度\t138
7．3．2 正則匹配驗(yàn)證\t139
7．4 幾個(gè)常見的實(shí)例\t141
7．4．1 全選，全不選，反選\t141
7．4．2 下拉框特效\t144
7．4．3 城市級(jí)聯(lián)特效\t147
7．4．4 用戶注冊(cè)實(shí)例\t150
7．5 本章小結(jié)\t153
第8章 DOM中的Cookie\t154
8．1 什么是Cookie\t154
8．1．1 Cookie簡(jiǎn)介\t154
8．1．2 Cookie的特點(diǎn)\t155
8．1．3 Cookie的用途\t156
8．2 如何操作Cookie\t156
8．2．1 查看Cookie\t157
8．2．2 添加Cookie\t158
8．2．3 設(shè)置Cookie過期時(shí)間\t159
8．2．4 修改Cookie\t160
8．2．5 刪除Cookie\t161
8．3 本章小結(jié)\t162
第9章 DOM對(duì)象的尺寸和位置\t163
9．1 關(guān)于DOM對(duì)象的尺寸和位置的介紹\t163
9．2 DOM文檔對(duì)象的尺寸\t165
9．2．1 obj．scrollWidth和obj．scrollHeight\t165

9．2．2 obj．offsetWidth和obj．offsetHeight、obj．style．width和obj．style．height
的聯(lián)系與區(qū)別\t166
9．2．3 obj．clientWidth和obj．clientHeight的對(duì)比與聯(lián)系\t168
9．3 DOM文檔對(duì)象的位置\t169
9．3．1 obj．offsetTop和obj．offsetLeft、obj．style．top和obj．style．left
的對(duì)比與聯(lián)系\t169
9．3．2 obj．clientTop和obj．clientLeft\t173
9．3．3 obj．scrollTop和obj．scrollLeft\t174
9．4 移動(dòng)端DOM對(duì)象的尺寸和位置的運(yùn)用\t175
9．4．1 像素的概念\t175
9．4．2 移動(dòng)端手勢(shì)庫(kù)――hammer．js\t176
9．4．3 移動(dòng)端實(shí)例1――完成一個(gè)置頂效果\t177
9．4．4 移動(dòng)端實(shí)例2――完成向左向右滑動(dòng)導(dǎo)航條實(shí)例\t180
9．5 本章小結(jié)\t183
第10章 DOM相關(guān)屬性和方法\t184
10．1 document（文檔）對(duì)象\t184
10．1．1 document對(duì)象集合\t184
10．1．2 document對(duì)象屬性\t189
10．1．3 document對(duì)象方法\t192
10．2 element（元素）對(duì)象\t194
10．2．1 element對(duì)象屬性\t194
10．2．2 element對(duì)象方法\t208
10．3 attribute（屬性）對(duì)象\t216
10．3．1 attribute對(duì)象屬性\t216
10．3．2 attribute對(duì)象方法\t217
10．3．3 避免使用的屬性和方法\t218
10．4 event（事件）對(duì)象\t219
10．4．1 事件句柄\t219
10．4．2 鼠標(biāo)鍵盤屬性\t223
10．4．3 標(biāo)準(zhǔn)event屬性和方法\t226
10．5 本章小結(jié)\t232

第11章 DOM實(shí)例篇\t233
11．1 打字游戲\t233
11．1．1 需求分析\t234
11．1．2 知識(shí)點(diǎn)整理\t234
11．1．3 實(shí)戰(zhàn)\t235
11．2 使用JavaScript實(shí)現(xiàn)PPT效果\t244
11．2．1 需求分析\t244
11．2．2 知識(shí)點(diǎn)整理\t244
11．2．3 實(shí)戰(zhàn)\t245
11．3 自定義鼠標(biāo)右鍵菜單\t250
11．3．1 需求分析\t251
11．3．2 知識(shí)點(diǎn)整理\t251
11．3．3 實(shí)戰(zhàn)\t252
11．4 放大鏡效果\t256
11．4．1 需求分析\t256
11．4．2 知識(shí)點(diǎn)整理\t257
11．4．3 實(shí)戰(zhàn)\t258
11．5 拖拽效果\t266
11．5．1 需求分析\t266
11．5．2 知識(shí)點(diǎn)整理\t266
11．5．3 實(shí)戰(zhàn)\t267
11．6 淘寶評(píng)價(jià)效果\t273
11．6．1 需求分析\t274
11．6．2 知識(shí)點(diǎn)整理\t274
11．6．3 實(shí)戰(zhàn)\t274
11．7 輪播圖效果\t279
11．7．1 需求分析\t279
11．7．2 知識(shí)點(diǎn)整理\t281
11．7．3 實(shí)戰(zhàn)\t281