內容簡介
本書從介紹JavaScript的基礎知識開始,圍繞標準Web的各項技術予以展開,通過大量實例對JavaScript、CSS、DOM、Ajax等Web關鍵技術進行深入淺出的分析,主要內容包括JavaScript語法和內置對象、css選擇器與布局、標準DOM模型、jQuery選擇器、遍歷DOM元素、HTML處理、jQuery事件處理、Ajax套用、jQuery動畫效果以及jQuery UI庫的使用。本書內容翔實、結構清晰,講述循序漸進,並注意各個章節、實例之間的呼應和對照,既可作為jQuery初學者的入門教材,也適合Web開發人員進一步學習和參考。
前 言
隨著Web 2.0的興起,JavaScript越來越受到人們的重視,JavaScript腳本在We b應用程式客戶端起到的作用也越來越重要。於是,越來越多的開發者將自己編寫的各種豐富多彩的功能封裝成類庫,發布到網路上供更多的人來解決類似的問題。jQuery就是其中非常優秀的一個。
jQuery是目前套用最廣泛的JavaScript框架之一。它不僅功能強大,而且簡潔優雅,能使用最少的代碼來實現最多的功能;可以幫助用戶毫不費力地把動態功能套用到網頁,包括訪問部分網頁、快速修改網頁內容、套用Ajax技術、添加動畫和特效等。
而且jQuery已經成為微軟Visual Studio和NOKIA等主流開發平台的重要組成部分。藉助jQuery的魔力,數十行JavaScript代碼可以被神奇地壓縮成區區幾行,諸多Web開發人員就是在那一瞬間深深迷戀上了這個方便快捷、功能完備的利器。
本書內容
本書從介紹JavaScript的基礎知識開始,圍繞標準Web的各項技 術予以展開,通過大量實例對JavaScript、CSS、DOM、Ajax等Web關鍵技術進行深入淺出的分析,主要內容包括JavaScript語法和內置對象、CSS選擇器與布局、標準DOM模型、jQuery選擇器、遍歷DOM元素、HTML處理、jQuery事件處理、Ajax套用、jQuery動畫效果以及jQuery UI庫的使用。
本書內容翔實、結構清晰,講述循序漸進,並注意各個章節、實例之間的呼應和對照,既可作為jQuery初學者的入門教材,也適合Web開發人員進一步學習和參考。
第1章從最基礎的JavaScript語法知識開始講起,主要介紹了語法規則、運算符、流程控制、函式以及各種對象的用法等內容。
第2章針對DOM詳解了JavaScript中的實現,包括DOM基本接口、訪問節點、遍歷節點、操作屬性和節點、複製以及替換節點等。
第3章講解了CSS的相關內容,重點對CSS的選擇器進行討論,為後面的jQuery學習打下基礎。
第4章開始講解jQuery,使用jQuery開發了一個簡單的程式,還介紹了整個jQuery最核心的內容——JQuery核心函式。
第5章主要講解了jQuery中的基本選擇器和過濾選擇器。
第6章主要講解了操作jQuery集合的方法,如搜尋操作、串聯操作以及過濾操作等。通過對本章的學習,讀者將會更進一步感受到jQuery的方便快捷。
第7章首先講解了jQuery中DOM操作的分類,然後詳解DOM操作方法,如查找節點、刪除節點、內部/外部插入節點以及各種包裹操作。
第8章講解了jQuery對選中DOM元素進行的HTML操作。例如,獲取元素中的HTML或者文本,為它添加新的屬性和CSS樣式,又或者改變元素的CSS樣式、位置以及尺寸等。
第9章首先回顧了JavaScript的事件機制,然後講解jQuery中的事件類型以及事件處理機制,最後講解jQuery中事件對象的使用。
第10章主要講解了jQuery中的Ajax支持有討論,如載入和傳送請求、JSON以及序列化表單等。
第11章主要講解了如何使用jQuery中的動畫效果,如基本效果、滑動效果、淡入淡出、自定義動畫等。
第12章主要講解了jQuery UI庫中提供的頁面互動組件,如拖動組件、投放組件、排序和選擇組件等。
第13章主要講解了jQuery UI庫中提供的頁面工具集,包括摺疊面板、自動完成組件、按鈕組件、日期選擇器、對話框組件、進度條組件、滑塊組件和選項卡組件等。
第14章主要講解了jQuery UI庫中提供的動畫效果組件,如添加(或移除)頁面樣式、顯示(或隱藏)頁面內容、切換頁面樣式、動態顯示與隱藏、頁面特效等。
第15章主要講解了jQuery庫的功能函式,包括測試操作、函式操作、數組和對象操作等。
第16章主要講解了jQuery的外掛程式機制,並通過一個簡單的外掛程式詳解了開發流程。
第17章為綜合實例,通過電子相冊系統的實現方法,使讀者對jQuery有更深一步的認識,並且能夠靈活地運用它。
本書特色
以實際開發經驗為基礎
本書是在編者使用jQuery開發項目的經驗基礎上編寫的,以實際項目為根本,全面、翔實地介紹了jQuery開發所需具備的各種知識和技能,突出了實用性。
內容豐富,實用性強
本書採用理論為主、案例輔助的方式進行講解,涵蓋了用jQuery開發時所需掌握的jQuery選擇器、jQuery集合、操作DOM和HTML、事件處理、Ajax、動畫效果、jQuery UI庫和外掛程式開發等方面的內容。以掌握基礎知識為目的,以提高實際開發能力為主旨,融“教”、“學”、“練”於一體。
視頻支持
本書提供一套完整的視頻講座,總長度大約13個小時,方便讀者學習。
網站技術支持
讀者對象
本書適合初次接觸jQuery的網頁設計人員閱讀,目標讀者是Web套用前端設計者與開發者,尤其適合那些已經掌握了HTML、CSS和JavaScript等基礎知識,希望全面學習jQuery庫的讀者。本書也可作為大、中院校師生和培訓班的教材。
本書主要由王偉平、郝軍啟、唐有明編寫,其他參與編寫、資料整理、程式開發工作的人員還有郭鄭州、張銀鶴、郝相林、陳軍紅、張水波、王俊偉、於利敏等
目 錄
第1章 JavaScript基礎知識 1
1.1 JavaScript語法規則 2
1.1.1 變數和函式名稱 2
1.1.2 區分大小寫 2
1.1.3 代碼的格式 2
1.1.4 代碼的注釋 2
1.2 變數與數據類型 3
1.2.1 變數 3
1.2.2 數據類型 5
1.3 運算符 7
1.3.1 算術運算符 7
1.3.2 邏輯運算符 7
1.3.3 比較運算符 8
1.3.4字元串運算符8
1.3.5 位操作運算符 8
1.3.6 賦值運算符 9
1.3.7 條件運算符 9
1.3.8 運算符的優先權 10
1.4 流程控制語句 10
1.4.1 if條件語句 10
1.4.2 switch條件語句 13
1.4.3 for循環語句 14
1.4.4 for in循環語句 15
1.4.5 while循環語句 15
1.4.6 do while循環語句 16
1.4.7 try catach finally語句 17
1.4.8 break語句與continue語句 18
1.4.9 return語句與with語句 19
1.5 函式 20
1.5.1 函式定義和函式調用 21
1.5.2 函式參數的使用 22
1.5.3 使用函式返回值 23
1.5.4 JavaScript系統函式 23
1.6 內置對象 25
1.6.1 String對象 25
1.6.2Math對象27
1.6.3 Date對象 28
1.6.4Array對象28
1.7 自定義對象 29
1.8 瀏覽器對象 30
1.8.1 window對象 30
1.8.2document對象31
1.8.3 location對象 33
1.8.4 其他對象 33
第2章 DOM基礎 35
2.1 DOM簡介 36
2.1.1HTML DOM中的節點樹 36
2.1.2 DOM的4個基本接口 37
2.1.3 DOM基本對象的常用屬性和方法 38
2.2 如何使用DOM 40
2.2.1 訪問節點 40
2.2.2 遍歷節點 43
2.2.3 操作屬性節點 46
2.2.4 創建並插入節點 49
2.2.5 複製節點 52
2.2.6 替換節點 53
2.2.7 刪除節點 54
2.3 DOM操作綜合實例 55
第3章 CSS基礎 57
3.1 CSS簡介 58
3.2 CSS樣式規則 59
3.3 引入樣式表 60
3.3.1 內聯樣式表 60
3.3.2內部樣式表60
3.3.3外部樣式表 62
3.4 選擇器 64
3.4.1 全局選擇器 65
3.4.2 標記選擇器 65
3.4.3 類選擇器 66
3.4.4 ID選擇器 67
3.4.5 分組選擇器 67
3.4.6 包含選擇器 68
3.4.7 相鄰選擇器 68
3.4.8 子選擇器 69
3.4.9 屬性選擇器 69
3.4.10偽類選擇器 70
3.5 框模型 70
3.5.1 框模型簡介 71
3.5.2 內邊距 73
3.5.3 框線 74
3.5.4 外邊距 75
3.6 元素定位與布局 77
3.6.1 定位 77
3.6.2 布局 81
3.7 設計浮動布局 84
第4章 jQuery入門 87
4.1 jQuery概述 88
4.1.1 jQuery能做什麼 88
4.1.2 為什麼要用jQuery 89
4.2 編寫jQuery代碼 91
4.2.1 獲取jQuery 91
4.2.2 編寫jQuery程式 92
4.3 jQuery核心函式 93
4.4 配置Dreamweaver對jQuery的智慧型感應功能 95
4.5 解決jQuery和其他庫的衝突 97
4.6 使用開發人員工具調試程式 99
第5章 jQuery選擇器 103
5.1 基本選擇器 104
5.1.1 CSS選擇器 104
5.1.2 層級選擇器 106
5.1.3 表單域選擇器 109
5.2 過濾選擇器 112
5.2.1 簡單過濾選擇器 112
5.2.2 內容過濾選擇器 116
5.2.3 屬性過濾選擇器 119
5.2.4 子元素過濾選擇器 121
5.2.5 表單域屬性過濾選擇器 124
5.2.6 可見性過濾選擇器 126
第6章 操作jQuery集合 127
6.1 搜尋操作 128
6.1.1 搜尋父元素 128
6.1.2 搜尋同輩元素 131
6.1.3 搜尋子元素 136
6.2 串聯操作 138
6.2.1 andSelf( )方法 139
6.2.2 end( )方法 139
6.2.3 add(expr,[context])方法 140
6.2.4 contents( )方法 140
6.3 過濾操作 141
6.3.1 eq(index)方法 141
6.3.2 filter(expr)方法 141
6.3.3 filter(fn)方法 142
6.3.4 has(expr)方法 142
6.3.5 hasClass(class)方法 143
6.3.6 is(expr)方法 143
6.3.7 map(callback)方法 143
6.3.8 not(expr)方法 144
6.3.9 slice(start,[end])方法 144
第7章 jQuery中的DOM操作 145
7.1 DOM操作的分類 146
7.2 jQuery中基本的DOM操作 146
7.2.1 查找節點 147
7.2.2 創建節點 148
7.2.3 刪除節點 150
7.2.4 複製節點 153
7.2.5 替換節點 154
7.3 內部插入 156
7.3.1 append( )方法 156
7.3.2 appendTo( )方法 158
7.3.3 prepend( )方法 159
7.3.4 prependTo( )方法 160
7.4 外部插入 161
7.4.1 after( )方法 162
7.4.2 insertAfter( )方法 163
7.4.3 before( )方法 164
7.4.4 insertBefore( )方法 165
7.5 包裹操作 166
7.5.1 wrap( )方法 167
7.5.2 unwrap( )方法 168
7.5.3 wrapAll( )方法 168
7.5.4 wrapInner( )方法 169
第8章 jQuery中的HTML操作 171
8.1 元素內容 172
8.1.1 操作HTML 172
8.1.2 操作文本 174
8.1.3 操作值 176
8.2 元素屬性 180
8.2.1 讀取和修改屬性 180
8.2.2 刪除屬性 183
8.3 元素樣式 183
8.3.1 添加樣式類 183
8.3.2 移除樣式類 184
8.3.3 切換樣式類 186
8.4 元素CSS 189
8.4.1 讀取CSS樣式 189
8.4.2 設定CSS樣式 190
8.4.3 元素CSS位置 191
8.4.4 元素CSS尺寸 194
第9章 jQuery中的事件處理 197
9.1 事件流模型 198
9.2 傳統的JavaScript事件 199
9.2.1 事件類型 199
9.2.2 事件處理 200
9.3 jQuery中的事件 202
9.3.1 DOM的載入事件 202
9.3.2 鍵盤事件 205
9.3.3 滑鼠事件 206
9.3.4 表單事件 210
9.3.5 其他事件 216
9.3.6 jQuery事件集合特性 221
9.4 jQuery的事件處理 223
9.4.1 綁定事件 223
9.4.2 刪除事件 226
9.4.3 模擬操作 227
9.5 jQuery事件對象 231
第10章 jQuery與Ajax 233
10.1 Ajax簡介 234
10.2 JavaScript中的Ajax 236
10.3 jQuery中的Ajax 239
10.3.1 $.ajax( )方法 239
10.3.2 load( )方法 242
10.3.3 $.get( )方法 244
10.3.4 $.post( )方法 246
10.3.5 $.getJSON( )方法 248
10.3.6 $.getScript( )方法 251
10.4 序列化表單數據 252
10.4.1serialize( )方法 253
10.4.2 serializeArray( )方法 254
10.5 設定全局Ajax默認選項 254
10.6 Ajax全局事件 256
第11章 套用jQuery動畫效果 259
11.1 基本效果 260
11.1.1 隱藏元素 260
11.1.2 顯示元素 262
11.1.3 交替顯示隱藏 263
11.2 滑動效果 266
11.2.1 向上收縮 266
11.2.2 向下展開 267
11.2.3 交替伸縮樣式 267
11.3 淡入淡出效果 268
11.3.1 淡入效果 269
11.3.2 淡出效果 269
11.3.3 自定義不透明度 270
11.4 自定義動畫效果 271
11.4.1 自定義動畫 271
11.4.2 jQuery動畫佇列 275
第12章 頁面互動組件 279
12.1 配置jQuery UI環境 280
12.1.1 下載jQuery UI 280
12.1.2 使用jQuery UI 281
12.2 拖動組件 282
12.2.1 拖動組件簡介 283
12.2.2 配置拖動屬性 284
12.2.3 拖動組件的方法 293
12.2.4 拖動事件回調函式 295
12.3 投放組件 298
12.3.1 投放組件簡介 298
12.3.2 配置投放屬性 299
12.3.3 投放組件的方法 303
12.3.4 投放事件回調函式 303
12.3.5 與拖動組件的組合 305
12.4 尺寸調整組件 308
12.4.1 尺寸調整組件簡介 308
12.4.2 配置尺寸調整組件屬性 311
12.4.3 尺寸調整組件的方法 314
12.4.4 調整事件回調函式 314
12.5 排序組件 316
12.5.1 排序組件簡介 316
12.5.2 關聯排序列表 318
12.5.3 排序組件的方法 321
12.5.4 排序事件回調函式 323
12.6 選擇組件 326
12.6.1 選擇組件簡介 326
12.6.2 過濾選擇項 328
12.6.3 選擇組件的方法 329
12.6.4 選擇事件回調函式 329
第13章 頁面工具集 331
13.1 摺疊面板 332
13.1.1 摺疊面板簡介 332
13.1.2 配置摺疊面板 333
13.1.3 摺疊面板的方法 337
13.1.4 摺疊面板的事件 339
13.2 自動完成組件 340
13.2.1 自動完成組件簡介 340
13.2.2 自動完成組件的方法 342
13.2.3 自動完成組件的事件 342
13.3 按鈕組件 344
13.3.1 按鈕組件簡介 345
13.3.2 按鈕組件的方法 346
13.4 日期選擇器 347
13.4.1 日期選擇器簡介 347
13.4.2 配置日期選擇器 349
13.4.3 日期選擇器的方法 354
13.4.4 日期選擇器的事件 355
13.5 對話框組件 358
13.5.1 對話框組件簡介 359
13.5.2 配置對話框組件 360
13.5.3 對話框組件方法 363
13.5.4 對話框組件的事件 365
13.6 進度條組件 366
13.6.1 進度條組件簡介 366
13.6.2 進度條組件的方法和事件 367
13.7 滑塊組件 369
13.7.1 滑塊組件簡介 369
13.7.2 配置滑塊組件 370
13.7.3 滑塊組件的方法 372
13.7.4 滑塊組件的事件 374
13.8 選項卡組件 375
13.8.1 選項卡組件簡介 375
13.8.2 配置選項卡組件 376
13.8.3 選項卡組件的方法 380
13.8.4 選項卡組件的事件 381
第14章 頁面動畫效果組件 383
14.1 添加頁面樣式 384
14.2 移除頁面樣式 385
14.3 切換頁面樣式 387
14.4 顯示頁面內容 389
14.5隱藏頁面內容 392
14.6 頁面內容動態顯示與隱藏 394
14.7 頁面自定義動畫 397
14.8 頁面特效 398
14.8.1 百葉窗 399
14.8.2 震盪 400
14.8.3 剪輯 401
14.8.4 下落 401
14.8.5 爆炸 402
14.8.6 摺疊 403
14.8.7 高亮 404
14.8.8 消失 405
14.8.9 閃爍 405
14.8.10 按比例縮放 406
14.8.11 晃動 407
14.8.12 改變大小 408
14.8.13 滑動 409
14.8.14 遷移 410
第15章 jQuery的功能函式 412
15.1 URL操作 413
15.2 測試操作 414
15.2.1 contains( )方法 414
15.2.2 isFunction( )方法 415
15.2.3IsArray( )方法 415
15.2.4 isEmptyObject( )方法 416
15.2.5 isPlainObject( )方法 416
15.3 函式操作 416
15.4 數組和對象操作 418
15.4.1 each( )方法 418
15.4.2 map( )方法 419
15.4.3 merge( )方法 421
15.4.4 unique( )方法 421
15.4.5 grep( )方法 422
15.4.6 extend( )方法 423
15.4.7 makeArray( )方法 424
15.4.8toArray( )方法 425
15.4.9 inArray( )方法 427
15.4.10 parseJSON( )方法 428
15.5 字元串操作 428
15.6 瀏覽器屬性 429
15.6.1 support( )方法 429
15.6.2 browser( )方法 432
15.6.3 browser.version( )方法 432
15.6.4 boxModel( )方法 433
第16章 開發自己的jQuery外掛程式 434
16.1 jQuery中的外掛程式類型和規則 435
16.1.1 外掛程式的類型 435
16.1.2 外掛程式的規則 436
16.2 jQuery中的外掛程式機制 437
16.2.1 jQuery.extend( ) 437
16.2.2 jQuery.fn.extend( ) 438
16.3 開發jQuery外掛程式 438
16.3.1 開發外掛程式的流程 439
16.3.2 開發全局函式外掛程式 440
16.3.3 開發對象方法外掛程式 441
16.3.4 保持外掛程式的連綴 442
16.3.5 為外掛程式設定默認值 442
16.3.6 在外掛程式中使用閉包 444
16.3.7 開發一個jQuery外掛程式 445
16.3.8 開發外掛程式的技巧 447
第17章 電子相冊系統 449
17.1 系統概述 450
17.2 相冊管理功能模組 450
17.2.1 圖片淡入 450
17.2.2 高亮圖片框451
17.2.3 圖片放大 452
17.2.4 圖片翻頁 454
17.2.5 jQuery事件 455
17.2.6 彈出上傳圖片的界面 457
17.3 用戶管理功能模組 458
17.3.1 用戶登錄 458
17.3.2 用戶註冊 460
17.4 總結 462