目錄
第1篇 JavaScript基礎篇
第1章 網頁特效 2
實例001 自動刷新頁面 2
難度指數 ★☆☆☆☆ 占用時間 ○○
實例002 讓頁面後退和前進 3
難度指數 ★☆☆☆☆ 占用時間 ○○
實例003 動態關閉頁面 4
難度指數 ★☆☆☆☆ 占用時間 ○○
實例004 頁面載入等待界面 5
難度指數 ★★☆☆☆ 占用時間 ○○
實例005 若干秒後不操作自動關閉視窗 6
難度指數 ★☆☆☆☆ 占用時間 ○○
實例006 修改網頁標題 7
難度指數 ★☆☆☆☆ 占用時間 ○○
實例007 禁止網頁放入框架 8
難度指數 ★☆☆☆☆ 占用時間 ○○
實例008 跳轉到其他頁面 9
難度指數 ★☆☆☆☆ 占用時間 ○○
實例009 進入頁面時的問候 10
難度指數 ★☆☆☆☆ 占用時間 ○○
實例010 在網頁里動態載入JavaScript 11
難度指數 ★★★☆☆ 占用時間 ○
實例011 設為首頁 12
難度指數 ★★☆☆☆ 占用時間 ○○
實例012 收藏本頁 13
難度指數 ★★☆☆☆ 占用時間 ○○
實例013 判斷頁面是否載入完畢 14
難度指數 ★★☆☆☆ 占用時間 ○
實例014 避免瀏覽器使用快取載入頁面 16
難度指數 ★☆☆☆☆ 占用時間 ○
實例015 視窗打開時顯示大廣告圖片及其自動關閉 17
難度指數 ★☆☆☆☆ 占用時間 ○
實例016 帶關閉按鈕的右下角圖片廣告 19
難度指數 ★★★☆☆ 占用時間 ○○
第2章 DOM操作 21
實例017 通過id獲取網頁中的某一部分 21
難度指數 ★☆☆☆☆ 占用時間 ○○
實例018 根據name獲取網頁中的全部複選框 22
難度指數 ★☆☆☆☆ 占用時間 ○○
實例019 根據標籤名獲取網頁中的多個元素 23
難度指數 ★☆☆☆☆ 占用時間 ○○
實例020 遍歷列印一個元素的所有屬性 24
難度指數 ★☆☆☆☆ 占用時間 ○○
實例021 遍歷HTML文檔內容 26
難度指數 ★☆☆☆☆ 占用時間 ○○
實例022 動態創建網頁新元素 27
難度指數 ★☆☆☆☆ 占用時間 ○○
實例023 刪除元素 28
難度指數 ★☆☆☆☆ 占用時間 ○○
實例024 主動觸發按鈕的單擊事件 29
難度指數 ★☆☆☆☆ 占用時間 ○○
實例025 替換元素內容 31
難度指數 ★☆☆☆☆ 占用時間 ○○
實例026 修改元素的屬性值 32
難度指數 ★☆☆☆☆ 占用時間 ○○
實例027 引用同級的元素 33
難度指數 ★☆☆☆☆ 占用時間 ○○
實例028 克隆元素 34
難度指數 ★★☆☆☆ 占用時間 ○○
實例029 隱藏或顯示元素 35
難度指數 ★☆☆☆☆ 占用時間 ○○
實例030 倒排序子元素 36
難度指數 ★★★☆☆ 占用時間 ○○
實例031 刪除所有的子元素 38
難度指數 ★☆☆☆☆ 占用時間 ○○
第3章 控制表單控制項 40
實例032 遍歷表單的所有控制項 40
難度指數 ★☆☆☆☆ 占用時間 ○○
實例033 通過控制項名訪問特定的控制項 41
難度指數 ★☆☆☆☆ 占用時間 ○○
實例034 修改控制項的值 42
難度指數 ★☆☆☆☆ 占用時間 ○○
實例035 獲取表單內文本框的個數 44
難度指數 ★☆☆☆☆ 占用時間 ○○
實例036 修改表單的提交方法 45
難度指數 ★☆☆☆☆ 占用時間 ○○
實例037 動態指定表單的動作屬性 46
難度指數 ★☆☆☆☆ 占用時間 ○○
實例038 動態選擇聚焦的控制項 47
難度指數 ★☆☆☆☆ 占用時間 ○○
實例039 初始化表單里的所有控制項的值到最初狀態 48
難度指數 ★☆☆☆☆ 占用時間 ○○
實例040 為表單加上一個框 50
難度指數 ★☆☆☆☆ 占用時間 ○○
實例041 批量為所有的表單控制項加一個說明 51
難度指數 ★★☆☆☆ 占用時間 ○○
實例042 設定下拉選單的值 53
難度指數 ★☆☆☆☆ 占用時間 ○○
實例043 使用隱藏控制項為表單添加參數 54
難度指數 ★☆☆☆☆ 占用時間 ○○
實例044 勾選全部複選框 55
難度指數 ★★☆☆☆ 占用時間 ○
實例045 為表單的聚焦控制項設定醒目的樣式 57
難度指數 ★★☆☆☆ 占用時間 ○○
第4章 視窗的控制和框架的互操作 59
實例046 計算視窗內的框架數量 59
難度指數 ★☆☆☆☆ 占用時間 ○○
實例047 父框架對子框架的引用 60
難度指數 ★☆☆☆☆ 占用時間 ○○
實例048 子框架的互相引用 61
難度指數 ★☆☆☆☆ 占用時間 ○○
實例049 用top操作頂部框架 63
難度指數 ★☆☆☆☆ 占用時間 ○○
實例050 確保網頁只能被框架載入 64
難度指數 ★★★☆☆ 占用時間 ○○
實例051 動態創建框架 65
難度指數 ★☆☆☆☆ 占用時間 ○○
實例052 打開一個新視窗 66
難度指數 ★☆☆☆☆ 占用時間 ○○
實例053 得到是誰打開了子視窗 67
難度指數 ★☆☆☆☆ 占用時間 ○○
實例054 通過子視窗獲取數據輸入 69
難度指數 ★☆☆☆☆ 占用時間 ○
實例055 隨意改變框架的大小組合 70
難度指數 ★★☆☆☆ 占用時間 ○○
實例056 巧用self操作當前文檔所在的框架或視窗 72
難度指數 ★☆☆☆☆ 占用時間 ○○
實例057 iframe自適應高度 73
難度指數 ★★★★☆ 占用時間 ○
實例058 網頁打開5秒後彈出廣告視窗 75
難度指數 ★★☆☆☆ 占用時間 ○○
第5章 滑鼠特效 76
實例059 禁用滑鼠右鍵 76
難度指數 ★★☆☆☆ 占用時間 ○○
實例060 動態定義滑鼠指針形狀 77
難度指數 ★☆☆☆☆ 占用時間 ○○
實例061 滑鼠進出時字型大小變化 79
難度指數 ★☆☆☆☆ 占用時間 ○○
實例062 雙擊滑鼠滾動到網頁底部 80
難度指數 ★☆☆☆☆ 占用時間 ○
實例063 當按下滑鼠左鍵時彈出廣告視窗 81
難度指數 ★★☆☆☆ 占用時間 ○○
實例064 滑鼠放上連結出現不同的顏色 82
難度指數 ★★☆☆☆ 占用時間 ○○
實例065 用滑鼠拖動圖片 83
難度指數 ★★☆☆☆ 占用時間 ○○
實例066 讓滑鼠滑輪失效 85
難度指數 ★★☆☆☆ 占用時間 ○○
第6章 按鈕特效 87
實例067 為按鈕加上背景顏色 87
難度指數 ★☆☆☆☆ 占用時間 ○○
實例068 自定義按鈕的click事件 88
難度指數 ★☆☆☆☆ 占用時間 ○○
實例069 不同的按鈕提交不同的表單地址 89
難度指數 ★★☆☆☆ 占用時間 ○○
實例070 在網頁上為用戶定義一個列印按鈕 90
難度指數 ★☆☆☆☆ 占用時間 ○○
實例071 Enter鍵自動提交表單 91
難度指數 ★☆☆☆☆ 占用時間 ○○
實例072 按鈕在單擊以後就失效 92
難度指數 ★★☆☆☆ 占用時間 ○○
實例073 刪除按鈕必需的提醒功能 93
難度指數 ★☆☆☆☆ 占用時間 ○○
實例074 圖片式的按鈕 94
難度指數 ★★☆☆☆ 占用時間 ○○
實例075 通過單擊按鈕改變狀態欄信息 95
難度指數 ★☆☆☆☆ 占用時間 ○○
實例076 不同的狀態展示不同樣式的按鈕 96
難度指數 ★★☆☆☆ 占用時間 ○
實例077 註冊按鈕倒計時效果 98
難度指數 ★★★☆☆ 占用時間 ○
實例078 閱讀完協定以後才可以單擊的註冊按鈕 99
難度指數 ★★★★☆ 占用時間 ○
實例079 會變色的按鈕 100
難度指數 ★★☆☆☆ 占用時間 ○○
第7章 連結特效 102
實例080 帶下畫線的連結 102
難度指數 ★☆☆☆☆ 占用時間 ○○
實例081 改變連結的單擊事件 103
難度指數 ★☆☆☆☆ 占用時間 ○○
實例082 關閉視窗的那個"X"連結 104
難度指數 ★★☆☆☆ 占用時間 ○○
實例083 用連結模擬一個按鈕 105
難度指數 ★★☆☆☆ 占用時間 ○○
實例084 用連結替代表單提交按鈕 106
難度指數 ★★☆☆☆ 占用時間 ○○
實例085 動態修改一個連結的地址 107
難度指數 ★☆☆☆☆ 占用時間 ○○
實例086 讓所有連結都在新視窗中打開 108
難度指數 ★★☆☆☆ 占用時間 ○○
實例087 讓頁面所有的超級連結都失效 109
難度指數 ★★☆☆☆ 占用時間 ○○
實例088 為連結地址多加一個參數 110
難度指數 ★★★☆☆ 占用時間 ○○
實例089 回到頂部的連結 112
難度指數 ★☆☆☆☆ 占用時間 ○
實例090 需要確認的連結 113
難度指數 ★☆☆☆☆ 占用時間 ○○
實例091 幾條連結交替顯示 114
難度指數 ★★☆☆☆ 占用時間 ○○
第8章 文本輸入框和下拉選單特效 116
實例092 讓文本框只帶有下畫線 116
難度指數 ★☆☆☆☆ 占用時間 ○
實例093 用正則表達式驗證E-mail格式 117
難度指數 ★★☆☆☆ 占用時間 ○○
實例094 首字母或全部字母大寫 118
難度指數 ★☆☆☆☆ 占用時間 ○○
實例095 只能輸入數字的文本框 120
難度指數 ★★☆☆☆ 占用時間 ○○
實例096 判斷漢字的個數 121
難度指數 ★★☆☆☆ 占用時間 ○○
實例097 成為焦點時清除文本框內容 122
難度指數 ★☆☆☆☆ 占用時間 ○○
實例098 動態為下拉選單設定項目 123
難度指數 ★★★☆☆ 占用時間 ○○
實例099 聯動的省市下拉選單 124
難度指數 ★★★★☆ 占用時間 ○
實例100 三級聯動的省市縣下拉選單 126
難度指數 ★★★★☆ 占用時間 ○
實例101 用戶輸入完以後立刻進行格式校驗 128
難度指數 ★★☆☆☆ 占用時間 ○○
實例102 滑鼠划過文本框改變其背景色 130
難度指數 ★★☆☆☆ 占用時間 ○○
實例103 輸入文字時文本框框線閃爍 131
難度指數 ★★☆☆☆ 占用時間 ○○
第9章 層的套用 133
實例104 從下往上的信息滾動特效 133
難度指數 ★★☆☆☆ 占用時間 ○
實例105 燈箱效果 134
難度指數 ★★★★☆ 占用時間
實例106 可以拖動的層 136
難度指數 ★★☆☆☆ 占用時間 ○
實例107 讓層的疊放層次分明 138
難度指數 ★★☆☆☆ 占用時間 ○○
實例108 隨意改變層的尺寸 139
難度指數 ★★☆☆☆ 占用時間 ○○
實例109 新聞切換特效 140
難度指數 ★★★★☆ 占用時間
實例110 懸浮的廣告層 144
難度指數 ★★☆☆☆ 占用時間
實例111 由左向右地滾動廣告 145
難度指數 ★★★★☆ 占用時間 ○
實例112 右下角的提示層 147
難度指數 ★☆☆☆☆ 占用時間 ○
實例113 帶關閉按鈕的右下角提示層 148
難度指數 ★☆☆☆☆ 占用時間 ○
實例114 底部工具列 150
難度指數 ★★★★☆ 占用時間
第10章 表格的控制 152
實例115 動態地為表格中的單元格文字添加樣式 152
難度指數 ★★☆☆☆ 占用時間 ○○
實例116 動態加入一個新的表格行 153
難度指數 ★★☆☆☆ 占用時間 ○○
實例117 可變樣式的表格框線 154
難度指數 ★★☆☆☆ 占用時間 ○○
實例118 克隆表格 156
難度指數 ★★☆☆☆ 占用時間 ○
實例119 將表格的數據根據某一列排序 157
難度指數 ★★★☆☆ 占用時間 ○
實例120 讓表格行的背景顏色間隔開 159
難度指數 ★☆☆☆☆ 占用時間 ○
實例121 刪除表格中的任意一行 161
難度指數 ★★☆☆☆ 占用時間 ○
實例122 隱藏表格數據 162
難度指數 ★☆☆☆☆ 占用時間 ○○
實例123 用背景色重點突出表格行 163
難度指數 ★☆☆☆☆ 占用時間 ○
第2篇 JavaScript進階篇
第11章 導航選單特效 168
實例124 簡單的導航選單 168
難度指數 ★☆☆☆☆ 占用時間 ○
實例125 凸顯正在瀏覽的選單項的導航選單 169
難度指數 ★★☆☆☆ 占用時間 ○
實例126 二級導航選單 170
難度指數 ★★★☆☆ 占用時間
實例127 三級導航選單 173
難度指數 ★★★☆☆ 占用時間
實例128 動態載入導航選單 175
難度指數 ★★★★☆ 占用時間 ○
實例129 三級聯動導航選單 177
難度指數 ★★★★☆ 占用時間
實例130 樹形導航選單 180
難度指數 ★★★☆☆ 占用時間 ○
實例131 當網頁超過一屏時導航選單始終置頂 182
難度指數 ★★★☆☆ 占用時間 ○
第12章 日期和時間特效 184
實例132 標題欄顯示當前的日期 184
難度指數 ★☆☆☆☆ 占用時間 ○○
實例133 不同時段顯示不同的標題歡迎詞 185
難度指數 ★☆☆☆☆ 占用時間 ○○
實例134 不同月份顯示不同的背景效果 186
難度指數 ★★☆☆☆ 占用時間 ○○
實例135 倒計時效果 187
難度指數 ★★☆☆☆ 占用時間 ○○
實例136 查看"今天是否為節假日" 188
難度指數 ★☆☆☆☆ 占用時間 ○○
實例137 每秒刷新的時間展示效果 190
難度指數 ★★☆☆☆ 占用時間 ○○
實例138 日期輸入框 191
難度指數 ★★★☆☆ 占用時間 ○
實例139 使用定時器 194
難度指數 ★★★☆☆ 占用時間 ○○
實例140 算出兩個時間之間的時間差 195
難度指數 ★★☆☆☆ 占用時間 ○○
實例141 用表格來完成一個日曆特效 196
難度指數 ★★★★☆ 占用時間
實例142 月底和月初的網頁標題各不相同 198
難度指數 ★☆☆☆☆ 占用時間 ○○
實例143 顯示登錄的時間 199
難度指數 ★★☆☆☆ 占用時間 ○○
第13章 樣式的操作 201
實例144 不同瀏覽器載入不同的CSS檔案 201
難度指數 ★★☆☆☆ 占用時間 ○○
實例145 動態濾鏡效果 202
難度指數 ★★★☆☆ 占用時間 ○○
實例146 訪問外部定義的CSS樣式 203
難度指數 ★☆☆☆☆ 占用時間 ○○
實例147 訪問元素中style屬性的CSS樣式 204
難度指數 ★☆☆☆☆ 占用時間 ○○
實例148 切換樣式表 206
難度指數 ★★☆☆☆ 占用時間 ○○
實例149 讓樣式動起來 207
難度指數 ★★☆☆☆ 占用時間 ○○
實例150 同時改變多個DOM的樣式 208
難度指數 ★☆☆☆☆ 占用時間 ○○
實例151 隱藏和顯示的切換效果 209
難度指數 ★★☆☆☆ 占用時間 ○○
實例152 用JavaScript代碼替代CSS實現連結樣式 210
難度指數 ★★☆☆☆ 占用時間 ○○
實例153 自定義錯誤樣式 212
難度指數 ★☆☆☆☆ 占用時間 ○○
第14章 網頁中變數和函式的套用 214
實例154 無處不在的變數 214
難度指數 ★☆☆☆☆ 占用時間 ○○
實例155 套用不同場景的變數類型 215
難度指數 ★☆☆☆☆ 占用時間 ○○
實例156 無所不能的變數載體 216
難度指數 ★★☆☆☆ 占用時間 ○○
實例157 巧妙地使用內部變數 217
難度指數 ★★☆☆☆ 占用時間 ○○
實例158 閉包的概念和使用 218
難度指數 ★★★☆☆ 占用時間 ○
實例159 使用動態的函式參數 219
難度指數 ★★☆☆☆ 占用時間 ○○
實例160 調用動態函式 220
難度指數 ★★★☆☆ 占用時間 ○○
第15章 圖片特效 222
實例161 仿iPhone圖片查看器效果 222
難度指數 ★★★☆☆ 占用時間 ○
實例162 仿QQ空間相冊效果 223
難度指數 ★★☆☆☆ 占用時間
實例163 放大鏡特效 224
難度指數 ★★★★☆ 占用時間
實例164 讓圖片保持在層里的上下左右都居中 226
難度指數 ★★☆☆☆ 占用時間 ○○
實例165 讓圖片自適應框的大小 228
難度指數 ★★☆☆☆ 占用時間 ○○
實例166 圖片新聞效果 229
難度指數 ★★★☆☆ 占用時間
實例167 為圖片加上框線 231
難度指數 ★☆☆☆☆ 占用時間 ○○
實例168 顯示圖片的局部 232
難度指數 ★★★☆☆ 占用時間 ○
實例169 動態載入圖片 233
難度指數 ★★★☆☆ 占用時間 ○
實例170 重新載入驗證碼圖片 234
難度指數 ★★☆☆☆ 占用時間 ○
實例171 延遲載入圖片 235
難度指數 ★★★★☆ 占用時間
第16章 檔案和列印的技巧 238
實例172 判斷檔案上傳的類型 238
難度指數 ★★☆☆☆ 占用時間 ○
實例173 單獨打開一個頁面來完成列印功能 239
難度指數 ★★☆☆☆ 占用時間
實例174 限制多檔案上傳的檔案類型 241
難度指數 ★★☆☆☆ 占用時間 ○
實例175 上傳圖片以後顯示縮略圖 242
難度指數 ★★★☆☆ 占用時間 ○
實例176 在列印內容里隱藏列印按鈕 243
難度指數 ★☆☆☆☆ 占用時間 ○○
第17章 對象和數組 246
實例177 創建自定義對象 246
難度指數 ★★☆☆☆ 占用時間 ○○
實例178 創建數組的多種方法 247
難度指數 ★★☆☆☆ 占用時間 ○○
實例179 擴展數組的元素數目 248
難度指數 ★☆☆☆☆ 占用時間 ○○
實例180 在數組的末尾處加入和移除元素 249
難度指數 ★★☆☆☆ 占用時間 ○○
實例181 在數組的任意位置加入和移除元素 251
難度指數 ★★☆☆☆ 占用時間 ○
實例182 把數據轉換成對象 252
難度指數 ★★☆☆☆ 占用時間 ○○
實例183 把數組裡的元素按照自然排序 254
難度指數 ★★☆☆☆ 占用時間 ○○
實例184 數組的本質就是對象 255
難度指數 ★★☆☆☆ 占用時間 ○○
第3篇 JavaScript高級篇
第18章 Ajax套用 258
實例185 創建動態的XMLHttpRequest對象 258
難度指數 ★☆☆☆☆ 占用時間 ○○
實例186 自定義Ajax回調函式 259
難度指數 ★☆☆☆☆ 占用時間 ○○
實例187 自定義Ajax請求方法 261
難度指數 ★☆☆☆☆ 占用時間 ○○
實例188 為Ajax請求添加參數 262
難度指數 ★☆☆☆☆ 占用時間 ○○
實例189 Ajax請求中的友好等待界面 264
難度指數 ★★☆☆☆ 占用時間 ○○
實例190 根據不同的HTTP返回代碼進行不同的回響 266
難度指數 ★☆☆☆☆ 占用時間 ○○
實例191 Ajax傳輸JSON數據實例 268
難度指數 ★★☆☆☆ 占用時間 ○○
實例192 定義一套自己的Ajax框架 271
難度指數 ★★☆☆☆ 占用時間 ○
第19章 面向對象的特性 273
實例193 定義一個類 273
難度指數 ★★☆☆☆ 占用時間 ○○
實例194 利用prototype為類創建靜態成員 274
難度指數 ★★☆☆☆ 占用時間 ○○
實例195 模擬繼承機制 275
難度指數 ★★★☆☆ 占用時間 ○○
實例196 為string類型的變數擴展一個replaceAll()函式 276
難度指數 ★★★☆☆ 占用時間 ○
實例197 為對象擴展一個動態屬性 277
難度指數 ★★☆☆☆ 占用時間 ○○
實例198 為對象擴展一個方法 279
難度指數 ★★☆☆☆ 占用時間 ○○
第20章 經典JavaScript框架套用 281
實例199 框架對JavaScript編碼的意義 281
難度指數 ★☆☆☆☆ 占用時間 ○○
實例200 Prototype讓JavaScript面向對象 282
難度指數 ★☆☆☆☆ 占用時間 ○○
實例201 利用Prototype實現繼承機制 283
難度指數 ★☆☆☆☆ 占用時間 ○○
實例202 用Prototype來包裝JavaScript事件 284
難度指數 ★☆☆☆☆ 占用時間 ○○
實例203 用Prototype輕鬆獲取DOM的實際尺寸 285
難度指數 ★☆☆☆☆ 占用時間 ○○
實例204 用Dojo動態創建層的DOM 287
難度指數 ★☆☆☆☆ 占用時間 ○○
實例205 用Dojo動態指定按鈕的click事件 288
難度指數 ★☆☆☆☆ 占用時間 ○○
實例206 用Dojo隱退圖片 289
難度指數 ★☆☆☆☆ 占用時間 ○○
實例207 用Dojo輕鬆實現元素的拖曳 290
難度指數 ★☆☆☆☆ 占用時間 ○○
實例208 利用YUI來動態監聽單擊事件 291
難度指數 ★☆☆☆☆ 占用時間 ○○
實例209 利用YUI模擬向左滑動以刪除選單項 292
難度指數 ★☆☆☆☆ 占用時間 ○○
實例210 利用YUI實現被單擊按鈕樣式突出的效果 294
難度指數 ★★☆☆☆ 占用時間 ○○
實例211 利用YUI實現網頁元素隱藏和顯示的切換 295
難度指數 ★☆☆☆☆ 占用時間 ○○
實例212 利用YUI實現層的收縮隱藏特效 297
難度指數 ★☆☆☆☆ 占用時間 ○○
實例213 利用YUI實現層的隨意拖動效果 298
難度指數 ★☆☆☆☆ 占用時間 ○○
實例214 利用YUI實現圖片的滾動延遲載入 299
難度指數 ★☆☆☆☆ 占用時間 ○○
實例215 利用YUI隨意改變層的尺寸 300
難度指數 ★☆☆☆☆ 占用時間 ○○
第21章 jQuery的妙用 302
實例216 選擇所有的元素 302
難度指數 ★☆☆☆☆ 占用時間 ○○
實例217 選擇相同標籤的元素 303
難度指數 ★☆☆☆☆ 占用時間 ○○
實例218 選擇相同class的元素 304
難度指數 ★☆☆☆☆ 占用時間 ○○
實例219 快速選擇表單元素 305
難度指數 ★☆☆☆☆ 占用時間 ○○
實例220 選擇所有已勾選的複選框 306
難度指數 ★☆☆☆☆ 占用時間 ○○
實例221 指定下拉選單的已選項 307
難度指數 ★☆☆☆☆ 占用時間 ○○
實例222 選擇包含特定內容的層 308
難度指數 ★☆☆☆☆ 占用時間 ○○
實例223 修改元素屬性的值 309
難度指數 ★☆☆☆☆ 占用時間 ○○
實例224 獲取和指定元素的內容 310
難度指數 ★☆☆☆☆ 占用時間 ○○
實例225 一次選擇多個不同類的元素 311
難度指數 ★☆☆☆☆ 占用時間 ○○
實例226 刪除部分文檔內容 313
難度指數 ★☆☆☆☆ 占用時間 ○○
實例227 一次選擇多個不同類的元素 314
難度指數 ★☆☆☆☆ 占用時間 ○○
實例228 快速修改樣式規則 315
難度指數 ★☆☆☆☆ 占用時間 ○○
實例229 獲取實際元素的高度和寬度 316
難度指數 ★☆☆☆☆ 占用時間 ○○
實例230 指定頁面載入完成的回調 317
難度指數 ★☆☆☆☆ 占用時間 ○○
實例231 為元素動態添加某種事件 318
難度指數 ★☆☆☆☆ 占用時間 ○○
實例232 隱藏或顯示元素 319
難度指數 ★☆☆☆☆ 占用時間 ○○
實例233 滑動效果 320
難度指數 ★☆☆☆☆ 占用時間 ○○
實例234 淡入效果 321
難度指數 ★☆☆☆☆ 占用時間 ○○
實例235 讓Ajax如此簡單 322
難度指數 ★★☆☆☆ 占用時間 ○○
實例236 使用Ajax獲取JSON數據 323
難度指數 ★★☆☆☆ 占用時間 ○○
第22章 豐富的jQuery外掛程式套用 324
實例237 帶伸縮功能的內容分段 324
難度指數 ★★☆☆☆ 占用時間 ○○
實例238 帶自動提示功能的文本輸入框 325
難度指數 ★★☆☆☆ 占用時間 ○○
實例239 多功能按鈕 326
難度指數 ★☆☆☆☆ 占用時間 ○○
實例240 自定義格式的日期輸入框 328
難度指數 ★☆☆☆☆ 占用時間 ○○
實例241 選擇日期段 329
難度指數 ★☆☆☆☆ 占用時間 ○○
實例242 自定義提示框 331
難度指數 ★★☆☆☆ 占用時間 ○○
實例243 輕鬆實現層的拖動功能 332
難度指數 ★☆☆☆☆ 占用時間 ○○
實例244 多級選單 333
難度指數 ★★☆☆☆ 占用時間 ○○
實例245 用幻燈片方式瀏覽圖片 335
難度指數 ★★☆☆☆ 占用時間 ○○
實例246 進度條 337
難度指數 ★☆☆☆☆ 占用時間 ○○
實例247 可改變大小的層 338
難度指數 ★☆☆☆☆ 占用時間 ○○
實例248 可被選擇的選單項 339
難度指數 ★★☆☆☆ 占用時間 ○○
實例249 滑塊效果 341
難度指數 ★☆☆☆☆ 占用時間 ○○
實例250 選擇範圍的滑塊效果 342
難度指數 ★☆☆☆☆ 占用時間 ○○
實例251 可排序的列表 343
難度指數 ★☆☆☆☆ 占用時間 ○○
實例252 可拖動的選擇項 344
難度指數 ★☆☆☆☆ 占用時間 ○○
實例253 數字輸入框 346
難度指數 ★☆☆☆☆ 占用時間 ○○
實例254 時間輸入框 347
難度指數 ★★☆☆☆ 占用時間 ○○
實例255 多頁切換效果 348
難度指數 ★★☆☆☆ 占用時間 ○○
實例256 帶提示信息的輸入框 350
難度指數 ★☆☆☆☆ 占用時間 ○○
第23章 HTML 5的新套用 351
實例257 視頻尺寸動態修改示例 351
難度指數 ★☆☆☆☆ 占用時間 ○○
實例258 動態播放或暫停視頻 352
難度指數 ★☆☆☆☆ 占用時間 ○○
實例259 指定視頻的播放進度 354
難度指數 ★☆☆☆☆ 占用時間 ○○
實例260 隱藏音頻播放器的控制按鈕 355
難度指數 ★☆☆☆☆ 占用時間 ○○
實例261 拖動頁面上的元素 356
難度指數 ★★☆☆☆ 占用時間 ○○
實例262 讓圖片不可以拖動 358
難度指數 ★☆☆☆☆ 占用時間 ○○
實例263 使用canvas畫一個矩形圖案 359
難度指數 ★★☆☆☆ 占用時間 ○○
實例264 使用canvas畫一個圓形圖案 360
難度指數 ★★☆☆☆ 占用時間 ○○
實例265 用HTML 5繪製一個SVG標量圓形 362
難度指數 ★★☆☆☆ 占用時間 ○○
實例266 獲取用戶當前的地理坐標 363
難度指數 ★★☆☆☆ 占用時間 ○
實例267 根據地理信息定位城市 364
難度指數 ★★☆☆☆ 占用時間 ○○
實例268 在地圖上標識附近加油站的地址 365
難度指數 ★★★☆☆ 占用時間 ○○
實例269 使用localStorage實現計數器 366
難度指數 ★★☆☆☆ 占用時間 ○○
實例270 使用sessionStorage實現計數器 367
難度指數 ★★☆☆☆ 占用時間 ○○
實例271 使用Web Worker為學生考試計時 368
難度指數 ★★☆☆☆ 占用時間 ○
第24章 CSS 3帶給我們的新體驗 371
實例272 圓角框線 371
難度指數 ★★☆☆☆ 占用時間 ○○
實例273 圖形框線 372
難度指數 ★★☆☆☆ 占用時間 ○○
實例274 圖片陰影效果 373
難度指數 ★★★☆☆ 占用時間 ○○
實例275 文字陰影效果 374
難度指數 ★★☆☆☆ 占用時間 ○○
實例276 帶有可見度的背景顏色 375
難度指數 ★★☆☆☆ 占用時間 ○
實例277 多列顯示文字 377
難度指數 ★★☆☆☆ 占用時間 ○○
實例278 使用CSS 3實現過渡效果 378
難度指數 ★★☆☆☆ 占用時間 ○
實例279 使用CSS 3實現動畫效果 379
難度指數 ★★★☆☆ 占用時間 ○
實例280 使用CSS 3實現圖片旋轉效果 380
難度指數 ★★☆☆☆ 占用時間 ○○
實例281 可移動的圖片 382
難度指數 ★☆☆☆☆ 占用時間 ○○
實例282 放大和縮小圖片 383
難度指數 ★☆☆☆☆ 占用時間 ○○
實例283 扭曲的圖片 384
難度指數 ★☆☆☆☆ 占用時間 ○○
實例284 讓圖片立體旋轉 385
難度指數 ★★☆☆☆ 占用時間 ○○
第25章 JavaScript在智慧型手機上的套用 387
實例285 判斷是否為移動瀏覽器 387
難度指數 ★★☆☆☆ 占用時間 ○○
實例286 測試是否支持滑動事件 388
難度指數 ★★☆☆☆ 占用時間 ○○
實例287 通過滑動修改網頁字型大小 390
難度指數 ★★★☆☆ 占用時間 ○
實例288 用手勢來改變圖片大小 392
難度指數 ★★★☆☆ 占用時間 ○
實例289 用手勢改變圖片的顯示方向 393
難度指數 ★★☆☆☆ 占用時間 ○
實例290 使用手機GPS定位用戶所在城市 395
難度指數 ★★★☆☆ 占用時間 ○
第26章 其他套用和技巧 397
實例291 利用瀏覽器的cookie保存用戶名 397
難度指數 ★★☆☆☆ 占用時間 ○○
實例292 eval()函式大行其道 399
難度指數 ★☆☆☆☆ 占用時間 ○○
實例293 妙用正則表達式來減少JS代碼 400
難度指數 ★★☆☆☆ 占用時間 ○○
實例294 按拼音首字母排序 402
難度指數 ★★☆☆☆ 占用時間 ○○
實例295 用try和catch來讓程式更友好 403
難度指數 ★☆☆☆☆ 占用時間 ○○
實例296 不用Ajax也可以達到不刷新頁面的效果 405
難度指數 ★★★☆☆ 占用時間 ○
實例297 讓輸入的英文字母自動變成大寫 406
難度指數 ★★☆☆☆ 占用時間 ○○
實例298 用JSON格式來保存數據 407
難度指數 ★☆☆☆☆ 占用時間 ○○
實例299 得到用戶顯示器的最大解析度 409
難度指數 ★☆☆☆☆ 占用時間 ○○
實例300 用JavaScript實現的抽獎程式 410
難度指數 ★★☆☆☆ 占用時間 ○
前言
對於剛剛進入Web客戶端開發的讀者來說,一本具有豐富案例和詳細解析的指導書是不可缺少的。本書精心選擇了300個實例,對JavaScript的常見套用進行了舉例說明,其中不僅涵蓋了JavaScript的各類基礎知識,還包括一些高級Web編程技巧。本書凝聚了筆者多年大型軟體公司Web客戶端編程的開發經驗和技巧。
本書的實例儘量求簡,通過簡單的編程代碼直接反映JavaScript的基礎知識和套用技巧,把大篇幅的理論介紹化簡為零,分布在各個實例中,讀者可以從中體會JavaScript靈活的機制和強大的功能。書中的大多數程式可在各類瀏覽器環境下調試通過,只有少量一些實例,比如HTML 5和CSS 3,則需要在版本較新的瀏覽器中運行。
本書的特點
本書選擇的實例都是實戰Web開發中JavaScript會遇到的編程問題。本書從實踐的角度闡述如何運用JavaScript的各種特性和各種流行的第三方框架。熟練掌握本書實例所介紹的JavaScript知識後,可以很快提高讀者對於實際問題的處理能力。全書講解方式簡單直接,內容全面,深度和廣度兼顧,實例安排從簡到難,由淺入深。全書在內容安排和實例講解上的主要特點如下。
選擇的實例系統全面,貼近實際,涵蓋了JavaScript的基本知識點,力求給讀者最大的實踐指導。
講解細緻入微,適合初學者的學習方式,用準確的語言引出實例,然後用規範、精簡的代碼實現,用詳細的講解為初學者學習和掌握基礎知識提供了鋪墊。
本書的實例代碼都長度適中,力爭每個代碼都介紹清楚,給出清晰的代碼執行思路和該類問題的解決思路,相關的注意事項可以幫助讀者打開進一步擴展功能的思路。
本書對於重要的代碼,給出了詳細的說明或注釋,讀者認真閱讀詳細的注釋可以起到觸類旁通的作用。
除了傳統的Web客戶端開發,本書還介紹了最新的HTML 5和CSS 3的相關知識,有助於讀者更好地把握未來Web開發的方向。
本書還介紹了幾類流行的JavaScript開發框架,通過這些框架代碼的學習,讀者可以掌握這些框架的核心使用方法。在日後的實際開發中,讀者可以根據實際的項目需要選擇合適的框架,以提高開發效率。
本書內容及知識體系
第一篇 JavaScript基礎篇(第1~10章),涵蓋了網頁的基本組成部分,學習JavaScript如何控制這些基礎的網頁元素來完成相關操作或實現某些常見特效。
本篇包括124個實例,主要涉及一些網頁特效和操作,包括視窗和框架、表單控制項、滑鼠特效、按鈕特效、連結特效、層和表格的相關特效等,所有高級的特效都以這些網頁元素為基礎。
第二篇 JavaScript進階篇(第11~17章),介紹了幾類相對高級的網頁特效實現,使用的JavaScript代碼也更具技巧性。
本篇包括61個實例,主要涉及導航選單、樣式的控制、日期與時間的特效、圖片特效、變數與函式的使用等,讀者通過這幾章的學習和練習,可以進一步提升JavaScript的編程能力。
第三篇 JavaScript高級篇(第18~26章),主要是一些新的技術和第三方框架的使用,讀者可以通過這些章節的學習打開未來使用JavaScript編程的思路。
本篇包括115個實例,主要涉及Ajax使用技巧、面向對象的實現、流行的JavaScript開發框架、HTML 5和CSS 3的實踐、智慧型手機上的JavaScript開發等。
本書約定
【實例描述】對實例的背景和套用場景做出說明,對於某些複雜的問題給出了舉例演示。
【實現代碼】解決問題的代碼實現,對代碼中重要的變數或複雜的語句給出注釋和解釋。
【運行效果】實例的運行效果截圖,讓讀者更直觀地看到實例的結果。
【難點剖析】講解實例的代碼或步驟,解析代碼涉及的知識點。
【其他說明】提出需要特別注意的一些知識點和內容或相關信息,是讀者在驗證實例時需注意的實現細節。
適合閱讀本書的讀者
對Web客戶端開發感興趣的自學讀者。
JavaScript語言剛剛入門,需進一步提高實戰技術的開發人員。
大中專院校和培訓學校的師生,課餘練習資料。
JavaScript初、中級程式設計師的參考資料。
網頁設計與製作人員。
閱讀本書的建議
為了提高讀者的學習效率,增強學習效果,筆者特提出以下學習建議。
對於剛剛接觸JavaScript的初學者,最好還是按照章節依次閱讀本書,而不要隨便跳躍章節,這樣才便於更加系統地學習。
對於每一個實例,先自己寫原始碼,思考實例實現的思路及涉及的語法知識,然後再閱讀,學習效果會更好。
每一個實例的實現思路和實現過程完整地閱讀一遍後,親自動手編寫和調試代碼,完成書中的所有實例,這樣才能加深對內容的理解和記憶。
學會利用網路資源,遇到問題能夠從網路上獲取相關資源並解決問題。
為了方便讀者開發學習,建議使用Firefox瀏覽器及其Firebug外掛程式來運行和調試實例代碼,以獲得最佳的學習體驗,提高學習效率。
在寫作過程中,作者分析了很多網路代碼和面試材料,通過對比分析找到更有效的代碼實現手法,在此向網路上JavaScript及Web開發工作者的辛勤工作表示感謝。由於作者水平有限,不足之處甚至錯誤地方在所難免,敬請廣大讀者朋友批評、指正。
編著者