JavaScript網頁特效經典300例

目錄

第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開發工作者的辛勤工作表示感謝。由於作者水平有限,不足之處甚至錯誤地方在所難免,敬請廣大讀者朋友批評、指正。

編著者

相關詞條

熱門詞條

聯絡我們