內 容 簡 介本書作者根據長期教學中獲得的網頁設計教學經驗，完整、詳盡地介紹了JavaScript + jQuery動態網頁設計的技術。全書共分為20章，分別介紹：必須了解的JavaScript知識、JavaScript編程基礎、程序控制結構與語句、函數、對象與數組、日期與字符串對象、數值與數學對象、文檔對象模型與事件驅動、處理窗口和文檔對象、級聯樣式表、表單和表單元素、JavaScript的調試和錯誤處理、JavaScript和Ajax技術、jQuery的基礎知識、jQuery的選擇器、用jQuery控制頁面、jQuery的動畫特效、jQuery的事件處理、jQuery的功能函數、jQuery的插件開發與使用。通過每章的實戰案例，使讀者進一步鞏固所學的知識，提高綜合實戰能力。本書內容豐富、全面，圖文并茂，步驟清晰，通俗易懂，專業性強，使讀者能透徹理解JavaScript + jQuery動態網頁設計的技術，并能解決實際工作中的問題，真正做到“知其然，更知其所以然”。本書涉及面廣泛，幾乎涉及了JavaScript + jQuery動態網頁設計的所有重要知識，適合所有的網頁設計初學者快速入門，同時也適合想全面了解JavaScript + jQuery動態網頁設計的設計人員閱讀。前 言
隨著網頁對用戶頁面體驗要求的提高，JavaScript再度受到廣大技術人員的重視。jQuery是繼prototype之后又一個優秀的JavaScript框架。本書將全面介紹JavaScript + jQuery動態網頁設計的知識，主要針對動態網頁設計的初學者，讓讀者能夠快速入門和上手。
1. 本書特色
(1)知識全面：本書由淺入深，涵蓋了所有JavaScript + jQuery動態網頁設計的知識點，使讀者可以循序漸進地掌握JavaScript + jQuery動態網頁設計技能。
(2)圖文并茂：在介紹案例的過程中，每一個操作均有對應的插圖。圖文結合的方式使讀者在學習過程中能夠直觀、清晰地看到操作的過程及效果，便于更快地理解和掌握。
(3)易學易用：顛覆傳統“看”書的觀念，變成“可操作”的圖書。
(4)案例豐富：把知識點融會于系統的案例實訓中，并且結合經典案例進行講解和拓展。達到“知其然，并知其所以然”的目的。
(5)提示技巧、貼心周到：本書對讀者在學習過程中可能會遇到的疑難問題以“提示”和“注意”等形式進行說明，使讀者在學習的過程中可以少走彎路。
(6)超值贈送：除了本書的相關素材外，還將贈送封面所述的大量資源，使讀者可以全面掌握網頁設計方方面面的知識。
2. 讀者對象
本書不僅適合動態網頁設計初級讀者入門學習，也可作為中、高級用戶的參考手冊。書中大量的實例模擬了真實的網頁設計案例，對讀者的工作有真實的借鑒作用。
3. 作者團隊
本書作者劉玉紅長期從事網站設計與開發工作。胡同夫、梁云亮、王攀登、王婷婷、陳偉光、包慧利、孫若淞、肖品、王維維和劉海松等人參與了編寫工作。
本書雖然傾注了作者的很多努力，但由于水平所限，書中難免有錯漏之處，讀者遇到問題時，敬請與我們聯系，我們將會全力提供幫助。
編 者
目 錄
第1章 必須了解的JavaScript知識 1
1.1 認識JavaScript 2
1.1.1 什么是JavaScript 2
1.1.2 JavaScript的特點 2
1.1.3 JavaScript與Java的區別 3
1.1.4 JavaScript版本 4
1.2 JavaScript的編寫工具 5
1.2.1 記事本 5
1.2.2 UltraEdit-32 6
1.2.3 Dreamweaver 7
1.3 JavaScript在HTML中的使用 8
1.3.1 在HTML網頁頭中嵌入JavaScript代碼 8
1.3.2 在HTML網頁中嵌入JavaScript代碼 9
1.3.3 在HTML網頁的元素事件中嵌入JavaScript代碼 10
1.3.4 在HTML中調用已經存在的JavaScript文件 11
1.3.5 通過JavaScript偽URL引入JavaScript腳本代碼 13
1.4 JavaScript和瀏覽器 14
1.4.1 在Internet Explorer中調用JavaScript代碼 14
1.4.2 在Firefox中調用JavaScript代碼 14
1.4.3 在Opera中調用JavaScript代碼 14
1.4.4 瀏覽器中的文檔對象類型(DOM) 15
1.5 實戰演練——一個簡單的JavaScript示例 15
1.6 疑難解惑 16
第2章 JavaScript編程基礎 19
2.1 JavaScript的基本語法 20
2.1.1 執行順序 20
2.1.2 區分大小寫 20
2.1.3 分號與空格 20
2.1.4 對代碼行進行折行 21
2.1.5 注釋 21
2.1.6 語句 23
2.1.7 語句塊 24
2.2 JavaScript的數據結構 25
2.2.1 標識符 25
2.2.2 關鍵字 25
2.2.3 保留字 26
2.2.4 常量 26
2.2.5 變量 26
2.3 看透代碼中的數據類型 29
2.3.1 typeof運算符 29
2.3.2 Undefined類型 30
2.3.3 Null類型 31
2.3.4 Boolean類型 32
2.3.5 Number類型 33
2.3.6 String類型 33
2.3.7 Object類型 34
2.4 明白數據間的計算法則——運算符 35
2.4.1 算術運算符 35
2.4.2 比較運算符 37
2.4.3 位運算符 38
2.4.4 邏輯運算符 39
2.4.5 條件運算符 40
2.4.6 賦值運算符 42
2.4.7 運算符的優先級 43
2.5 JavaScript的表達式 44
2.5.1 賦值表達式 44
2.5.2 算術表達式 46
2.5.3 布爾表達式 46
2.5.4 字符串表達式 48
2.5.5 類型轉換 49
2.6 實戰演練——局部變量和全局變量的優先級 50
2.7 疑難解惑 51
第3章 程序控制結構和語句 53
3.1 基本處理流程 54
3.2 賦值語句 55
3.3 條件判斷語句 55
3.3.1 if語句 55
3.3.2 if-else語句 56
3.3.3 if-else-if語句 57
3.3.4 if語句的嵌套 58
3.3.5 switch語句 60
3.4 循環控制語句 62
3.4.1 while語句 62
3.4.2 do-while語句 63
3.4.3 for循環 64
3.5 跳轉語句 65
3.5.1 break語句 66
3.5.2 continue語句 67
3.6 使用對話框 68
3.7 實戰演練——顯示距離2014年元旦的天數 70
3.8 疑難解惑 71
第4章 函數 73
4.1 函數的簡介 74
4.2 定義函數 74
4.2.1 不指定函數名 74
4.2.2 指定函數名 75
4.2.3 函數參數的使用 76
4.2.4 函數的返回值 76
4.3 函數的調用 78
4.3.1 函數的簡單調用 78
4.3.2 在表達式中調用 79
4.3.3 在事件響應中調用函數 80
4.3.4 通過鏈接調用函數 81
4.4 JavaScript中常用的函數 82
4.4.1 嵌套函數 82
4.4.2 遞歸函數 83
4.4.3 內置函數 85
4.5 實戰演練——購物簡易計算器 93
4.6 疑難解惑 96
第5章 對象與數組 97
5.1 了解對象 98
5.1.1 什么是對象 98
5.1.2 面向對象編程 99
5.1.3 JavaScript的內部對象 100
5.2 對象訪問語句 101
5.2.1 for-in循環語句 101
5.2.2 with語句 102
5.3 JavaScript中的數組 103
5.3.1 結構化數據 103
5.3.2 創建和訪問數組對象 104
5.3.3 使用for-in語句 107
5.3.4 Array對象的常用屬性和方法 107
5.4 詳解常用的數組對象方法 118
5.4.1 連接其他數組到當前數組 118
5.4.2 將數組元素連接為字符串 119
5.4.3 移除數組中最后一個元素 120
5.4.4 將指定的數值添加到數組中 121
5.4.5 反序排列數組中的元素 122
5.4.6 刪除數組中的第一個元素 123
5.4.7 獲取數組中的一部分數據 123
5.4.8 對數組中的元素進行排序 124
5.4.9 將數組轉換成字符串 126
5.4.10 將數組轉換成本地字符串 126
5.4.11 在數組開頭插入數據 127
5.5 創建和使用自定義對象 128
5.5.1 通過定義對象的構造函數的方法 128
5.5.2 通過對象直接初始化的方法 131
5.5.3 修改和刪除對象實例的屬性 131
5.5.4 通過原型為對象添加新屬性和新方法 133
5.5.5 自定義對象的嵌套 135
5.5.6 內存的分配和釋放 137
5.6 實戰演練——利用二維數組創建動態下拉菜單 137
5.7 疑難解惑 139
第6章 日期與字符串對象 141
6.1 日期對象 142
6.1.1 創建日期對象 142
6.1.2 Date對象屬性 143
6.1.3 日期對象的常用方法 143
6.2 詳解日期對象的常用方法 147
6.2.1 返回當前日期和時間 147
6.2.2 以不同的格式顯示當前日期 148
6.2.3 返回日期所對應的是星期幾 149
6.2.4 顯示當前時間 149
6.2.5 返回距1970年1月1日午夜的時間差 150
6.2.6 以不同的格式來顯示UTC日期 151
6.2.7 根據世界時返回日期對應的是星期幾 152
6.2.8 以不同的格式來顯示UTC時間 153
6.2.9 設置日期對象中的年份、月份與日期值 154
6.2.10 設置日期對象中的小時、分鐘與秒鐘值 155
6.2.11 以UTC日期對Date對象進行設置 157
6.2.12 返回當地時間與UTC時間的差值 157
6.2.13 將Date對象中的日期轉化為字符串格式 158
6.2.14 返回一個以UTC時間表示的日期字符串 159
6.2.15 將日期對象轉化為本地日期 159
6.2.16 日期間的運算 160
6.3 字符串對象 161
6.3.1 創建字符串對象 161
6.3.2 字符串對象的常用屬性 162
6.3.3 字符串對象的常用方法 163
6.4 詳解字符串對象的常用方法 164
6.4.1 設置字符串字體屬性 164
6.4.2 以閃爍方式顯示字符串 165
6.4.3 轉換字符串的大小寫 166
6.4.4 連接字符串 167
6.4.5 比較兩個字符串的大小 168
6.4.6 分割字符串 169
6.4.7 從字符串中提取字符串 169
6.5 實戰演練1——制作網頁隨機驗證碼 170
6.6 實戰演練2——制作動態時鐘 172
6.7 疑難解惑 174
第7章 數值與數學對象 175
7.1 Number對象 176
7.1.1 創建Number對象 176
7.1.2 Number對象的屬性 177
7.1.3 Number對象的方法 180
7.2 詳解Number對象常用的方法 181
7.2.1 把Number對象轉換為字符串 181
7.2.2 把Number對象轉換為本地格式字符串 182
7.2.3 四舍五入時指定小數位數 182
7.2.4 返回以指數記數法表示的數值 183
7.2.5 以指數記數法指定小數位 184
7.3 Math對象 184
7.3.1 創建Math對象 184
7.3.2 Math對象的屬性 185
7.3.3 Math對象的方法 186
7.4 詳解Math對象常用的方法 187
7.4.1 返回數的絕對值 187
7.4.2 返回數的正弦值、正切值和余弦值 188
7.4.3 返回數的反正弦值、反正切值和反余弦值 190
7.4.4 返回兩個或多個參數中的最大值或最小值 192
7.4.5 計算指定數值的平方根 193
7.4.6 數值的冪運算 194
7.4.7 計算指定數值的對數 195
7.4.8 取整運算 196
7.4.9 生成0到1之間的隨機數 196
7.4.10 根據指定的坐標返回一個弧度值 197
7.4.11 返回大于或等于指定參數的最小整數 198
7.4.12 返回小于或等于指定參數的最大整數 199
7.4.13 返回以e為基數的冪 199
7.5 實戰演練——使用Math對象設計程序 200
7.6 疑難解惑 201
第8章 文檔對象模型與事件驅動 203
8.1 文檔對象模型 204
8.1.1 認識文檔對象模型 205
8.1.2 文檔對象的產生過程 206
8.2 訪問節點 207
8.2.1 節點的基本概念 207
8.2.2 節點的基本操作 208
8.3 文檔對象模型的屬性和方法 220
8.4 事件處理 222
8.4.1 常見的事件驅動 222
8.4.2 JavaScript的常用事件 224
8.4.3 JavaScript處理事件的方式 227
8.4.4 使用event對象 231
8.5 實戰演練1——通過事件控制文本框的背景顏色 232
8.6 實戰演練2——在DOM模型中獲得對象 234
8.7 實戰演練3——超級鏈接的事件驅動 235
8.8 疑難解惑 237
第9章 處理窗口和文檔對象 241
9.1 窗口(window)對象 242
9.1.1 窗口(window)簡介 242
9.1.2 window對象的屬性 244
9.1.3 對話框 251
9.1.4 窗口操作 256
9.2 文檔(document)對象 259
9.2.1 文檔的屬性 259
9.2.2 Document對象的方法 268
9.2.3 文檔中的表單和圖片 271
9.2.4 文檔中的超鏈接 273
9.3 實戰演練1——綜合使用各種
對話框 275
9.4 實戰演練2——設置彈出的窗口 276
9.5 疑難解惑 278
第10章 級聯樣式表 281
10.1 CSS介紹 282
10.1.1 CSS的功能 282
10.1.2 CSS的發展歷史 282
10.1.3 瀏覽器與CSS 283
10.2 編輯和瀏覽CSS 283
10.2.1 CSS基礎語法 284
10.2.2 手工編寫CSS 284
10.2.3 用Dreamweaver編寫CSS 285
10.3 在HTML中使用CSS的方法 286
10.3.1 行內樣式 287
10.3.2 內嵌樣式 287
10.3.3 鏈接樣式 289
10.3.4 導入樣式 290
10.3.5 優先級問題 291
10.4 CSS選擇器 294
10.4.1 標簽選擇器 294
10.4.2 類選擇器 295
10.4.3 ID選擇器 297
10.4.4 全局選擇器 298
10.4.5 組合選擇器 299
10.4.6 繼承選擇器 300
10.4.7 偽類選擇器 302
10.4.8 屬性選擇器 303
10.4.9 結構偽類選擇器 305
10.4.10 UI元素狀態偽類選擇器 306
10.5 選擇器聲明 307
10.5.1 集體聲明 307
10.5.2 多重嵌套聲明 308
10.6 實戰演練1——制作五彩標題 309
10.7 實戰演練2——制作新聞菜單 311
10.8 疑難解惑 314
第11章 表單和表單元素 315
11.1 表單概述 316
11.2 表單基本元素的使用 317
11.2.1 單行文本輸入框text 317
11.2.2 多行文本輸入框textarea 318
11.2.3 密碼輸入框password 318
11.2.4 單選按鈕radio 319
11.2.5 復選框checkbox 320
11.2.6 下拉選擇框select 321
11.2.7 普通按鈕button 322
11.2.8 提交按鈕submit 323
11.2.9 重置按鈕reset 324
11.3 表單高級元素的使用 325
11.3.1 url屬性 325
11.3.2 email屬性 326
11.3.3 date和times 327
11.3.4 number屬性 328
11.3.5 range屬性 329
11.3.6 required屬性 329
11.4 表單(Form)對象在JavaScript中的應用 330
11.4.1 HTML表單基礎 331
11.4.2 編輯表單元素的腳本 334
11.4.3 用JavaScript獲取網頁內容實現數據驗證 339
11.5 實戰演練1——創建用戶反饋表單 341
11.6 實戰演練2——處理表單元素 343
11.7 疑難解惑 345
第12章 JavaScript的調試和錯誤處理 347
12.1 常見的錯誤和異常 348
12.2 處理異常的方法 349
12.2.1 用onerror事件處理異常 349
12.2.2 用try-catch-finally語句處理異常 351
12.2.3 使用throw語句拋出異常 352
12.3 使用調試器 353
12.3.1 IE瀏覽器內建的錯誤報告 354
12.3.2 用Firefox錯誤控制臺調試 354
12.4 JavaScript語言調試技巧 355
12.4.1 用alert()語句進行調試 355
12.4.2 用write()語句進行調試 356
12.5 疑難解惑 356
第13章 JavaScript和Ajax技術 359
13.1 Ajax快速入門 360
13.1.1 什么是Ajax 360
13.1.2 Ajax的關鍵元素 363
13.1.3 CSS在Ajax應用中的地位 364
13.2 Ajax的核心技術 364
13.2.1 全面剖析XMLHttpRequest對象 364
13.2.2 發出Ajax請求 367
13.2.3 處理服務器響應 368
13.3 實戰演練1——制作自由拖放的網頁 369
13.4 實戰演練2——制作加載條 375
13.5 疑難解惑 376
第14章 jQuery的基礎知識 379
14.1 jQuery概述 380
14.1.1 jQuery能做什么 380
14.1.2 jQuery的特點 380
14.1.3 jQuery的技術優勢 381
14.2 下載并配置jQuery 383
14.2.1 下載jQuery 384
14.2.2 配置jQuery 385
14.3 jQuery的開發工具 385
14.3.1 JavaScript Editor Pro 385
14.3.2 Dreamweaver 386
14.3.3 UltraEdit 387
14.3.4 記事本工具 387
14.4 jQuery的調試小工具 388
14.4.1 Firebug 388
14.4.2 Blackbird 391
14.4.3 jQueryPad 393
14.5 jQuery與CSS 3 393
14.5.1 CSS構造規則 394
14.5.2 瀏覽器的兼容性 394
14.5.3 jQuery的引入 395
14.6 綜合案例——我的第一個jQuery程序 396
14.6.1 開發前的一些準備工作 396
14.6.2 具體的程序開發 397
14.7 疑難解惑 398
第15章 jQuery的選擇器 399
15.1 jQuery的“$” 400
15.1.1 $符號的應用 400
15.1.2 功能函數的前綴 401
15.1.3 創建DOM元素 402
15.2 基本選擇器 403
15.2.1 通配符選擇器(*) 403
15.2.2 ID選擇器(#id) 404
15.2.3 類名選擇器(.class) 405
15.2.4 元素選擇器(element) 406
15.2.5 復合選擇器 407
15.3 層級選擇器 408
15.3.1 祖先后代選擇器(ancestor descendant) 409
15.3.2 父子選擇器(parent>child) 410
15.3.3 相鄰元素選擇器(prev+next) 412
15.3.4 兄弟選擇器(prev~siblings) 413
15.4 過濾選擇器 414
15.4.1 簡單過濾選擇器 414
15.4.2 內容過濾選擇器 421
15.4.3 可見性過濾器 428
15.4.4 表單過濾器 431
15.5 表單選擇器 433
15.5.1 :input 433
15.5.2 :text 434
15.5.3 :password 435
15.5.4 :radio 436
15.5.5 :checkbox 437
15.5.6 :submit 438
15.5.7 :reset 439
15.5.8 :button 440
15.5.9 :image 441
15.5.10 :file 442
15.6 屬性選擇器 443
15.6.1 [attribute] 444
15.6.2 [attribute=value] 445
15.6.3 [attribute!=value] 446
15.6.4 [attribute$=value] 447
第16章 用jQuery控制頁面 449
16.1 對頁面的內容進行操作 450
16.1.1 對文本內容進行操作 450
16.1.2 對HTML內容進行操作 452
16.1.3 移動和復制頁面內容 454
16.1.4 刪除頁面內容 454
16.1.5 克隆頁面內容 455
16.2 對標記的屬性進行操作 456
16.2.1 獲取屬性的值 456
16.2.2 設置屬性的值 457
16.2.3 刪除屬性的值 458
16.3 對表單元素進行操作 459
16.3.1 獲取表單元素的值 459
16.3.2 設置表單元素的值 460
16.4 對元素的CSS樣式進行操作 461
16.4.1 添加CSS類 461
16.4.2 刪除CSS類 464
16.4.3 動態切換CSS類 465
16.4.4 獲取和設置CSS樣式 466
16.5 實戰演練——制作奇偶變色的表格 468
16.6 疑難解惑 471
第17章 jQuery的動畫特效 473
17.1 jQuery的基本動畫效果 474
17.1.1 隱藏元素 474
17.1.2 顯示元素 477
17.1.3 狀態切換 479
17.2 淡入淡出的動畫效果 480
17.2.1 淡入隱藏元素 480
17.2.2 淡出可見元素 482
17.2.3 切換淡入淡出元素 483
17.2.4 淡入淡出元素至指定數值 484
17.3 滑動效果 485
17.3.1 滑動顯示匹配的元素 485
17.3.2 滑動隱藏匹配的元素 487
17.3.3 通過高度的變化動態切換元素的可見性 488
17.4 自定義的動畫效果 489
17.4.1 創建自定義動畫 489
17.4.2 停止動畫 490
第18章 jQuery的事件處理 493
18.1 jQuery的事件機制概述 494
18.1.1 什么是jQuery的事件機制 494
18.1.2 切換事件 494
18.1.3 事件冒泡 496
18.2 頁面加載響應事件 497
18.3 jQuery中的事件函數 498
18.3.1 鍵盤操作事件 498
18.3.2 鼠標操作事件 500
18.3.3 其他的常用事件 504
18.4 事件的基本操作 506
18.4.1 綁定事件 506
18.4.2 觸發事件 507
18.4.3 移除事件 508
18.5 實戰演練——制作絢麗的多級動畫 菜單 509
18.6 疑難解惑 515
第19章 jQuery的功能函數 517
19.1 功能函數概述 518
19.2 常用的功能函數 519
19.2.1 操作數組和對象 519
19.2.2 操作字符串 523
19.2.3 序列化操作 525
19.2.4 檢測瀏覽器 526
19.3 調用外部代碼 527
19.4 疑難解惑 528
第20章 jQuery插件的開發與使用 531
20.1 理解插件 532
20.1.1 什么是插件 532
20.1.2 如何使用插件 532
20.2 流行的插件 533
20.2.1 jQueryUI插件 534
20.2.2 Form插件 535
20.2.3 提示信息插件 537
20.2.4 jcarousel插件 537
20.3 定義自己的插件 538
20.3.1 插件的工作原理 538
20.3.2 自定義一個簡單的插件 539
20.4 實戰演練——創建拖拽購物車效果 542
20.5 疑難解惑 543
