JQuery 動態網頁設計與製作

目    錄

 

第1章  jQuery快速入門 1

1.1  認識jQuery 2

1.1.1  jQuery能做什麽 2

1.1.2  jQuery的特點 2

1.2  下載並安裝jQuery 3

1.2.1  下載jQuery 3

1.2.2  安裝jQuery 4

1.3  測試jQuery 4

1.4  jQuery與CSS 5

1.4.1  CSS 構造規則 5

1.4.2  jQuery的引入 6

1.5  通過案例理解jQuery的技術優勢 7

1.6  上機練習 9

第2章  jQuery的選擇器 11

2.1  jQuery中美元符號$的使用 12

2.1.1  $符號的使用 12

2.1.2  功能函數的前綴 13

2.1.3  創建DOM元素 14

2.2  基本選擇器 14

2.2.1  通配符選擇器(*) 15

2.2.2  ID選擇器(#id) 16

2.2.3  類名選擇器(.class) 17

2.2.4  元素選擇器(element) 18

2.2.5  復合選擇器 19

2.3  層級選擇器 20

2.3.1  祖先後代選擇器(ancestor descendant) 20

2.3.2  父子選擇器(parent>child) 22

2.3.3  相鄰元素選擇器(prev+next) 23

2.3.4  兄弟元素選擇器(prev~siblings) 25

2.4  過濾選擇器 26

2.4.1  簡單過濾選擇器 26

2.4.2  內容過濾選擇器 32

2.4.3  可見性過濾器 38

2.4.4  表單過濾器 41

2.5  表單選擇器 43

2.5.1  :input 43

2.5.2  :text 44

2.5.3  :password 45

2.5.4  :radio 46

2.5.5  :checkbox 47

2.5.6  :submit 48

2.5.7  :reset 49

2.5.8  :button 50

2.5.9  :image 50

2.5.10  :file 51

2.6  屬性選擇器 52

2.6.1  [attribute] 52

2.6.2  [attribute=value] 53

2.6.3  [attribute!=value] 55

2.6.4  [attribute$=value] 56

2.7  上機練習 58

第3章  使用jQuery控制頁面 59

3.1  對頁面的內容進行操作 60

3.1.1  對文本內容進行操作 60

3.1.2  對HTML內容進行操作 61

3.2  對標記的屬性進行操作 63

3.2.1  獲取屬性的值 63

3.2.2  設置屬性的值 64

3.2.3  刪除屬性的值 65

3.3  對表單元素進行操作 66

3.3.1  獲取表單元素的值 66

3.3.2  設置表單元素的值 67

3.4  對元素的CSS樣式進行操作 68

3.4.1  添加CSS類 68

3.4.2  刪除CSS類 70

3.4.3  動態切換CSS類 71

3.4.4  獲取和設置CSS樣式 72

3.5  獲取與編輯DOM節點 74

3.5.1  插入節點 74

3.5.2  刪除節點 76

3.5.3  復制節點 78

3.5.4  替換節點 79

3.6  上機練習 80

第4章  使用jQuery操作事件 83

4.1  jQuery的事件機制 84

4.1.1  什麽是jQuery的事件機制 84

4.1.2  切換事件 84

4.1.3  事件冒泡 85

4.2  頁面加載響應事件 86

4.3  jQuery中的事件函數 87

4.3.1  鍵盤操作事件函數 87

4.3.2  鼠標操作事件 89

4.3.3  其他的常用事件 92

4.4  事件的基本操作 94

4.4.1  綁定事件 94

4.4.2  觸發事件 95

4.4.3  移除事件 96

4.5  上機練習 97

第5章  使用jQuery操作動畫 99

5.1  網頁動畫特效的實現方法 100

5.1.1  通過CSS實現動畫特效 100

5.1.2  通過jQuery實現動畫特效 101

5.2  jQuery的基本動畫效果 103

5.2.1  隱藏元素 103

5.2.2  顯示元素 106

5.2.3  狀態切換 108

5.3  淡入淡出的動畫效果 109

5.3.1  淡入隱藏元素 109

5.3.2  淡出可見元素 111

5.3.3  切換淡入淡出元素 112

5.3.4  淡入淡出元素至指定數值 113

5.4  滑動效果 114

5.4.1  滑動顯示匹配的元素 114

5.4.2  滑動隱藏匹配的元素 116

5.4.3  通過高度的變化動態切換元素的可見性 117

5.5  自定義的動畫效果 119

5.5.1  創建自定義動畫 119

5.5.2  停止動畫 120

5.6  上機練習 121

第6章  jQuery的功能函數 123

6.1  功能函數概述 124

6.2  常用的功能函數 124

6.2.1  操作數組和對象 125

6.2.2  操作字符串 128

6.2.3  序列化操作 130

6.3  上機練習 131

第7章  jQuery插件的應用與開發 133

7.1  理解插件 134

7.1.1  什麽是插件 134

7.1.2  從哪裡獲取插件 134

7.1.3  如何使用插件 134

7.2  流行的jQuery插件 135

7.2.1  jQueryUI插件 135

7.2.2  Form插件 139

7.2.3  提示信息插件 140

7.2.4  jcarousel插件 141

7.3  自定義插件 141

7.3.1  插件的工作原理 141

7.3.2  自定義一個簡單的插件 142

7.4  上機練習 144

第8章  jQuery與Ajax技術的應用 147

8.1  Ajax概述 148

8.1.1  什麽是Ajax 148

8.1.2  Ajax的工作原理 149

8.1.3  Ajax的優缺點 150

8.2  Ajax技術的組成 150

8.2.1  XMLHttpRequest對象 150

8.2.2  XML語言 150

8.2.3  JavaScript語言 152

8.2.4  CSS技術 152

8.2.5  DOM技術 152

8.3  XMLHttpRequest對象 153

8.3.1  初始化XMLHttpRequest對象 153

8.3.2  XMLHttpRequest對象的屬性 153

8.3.3  XMLHttpRequest對象的方法 155

8.4  Ajax異步交互的應用 157

8.4.1  什麽是異步交互 157

8.4.2  異步對象連接服務器 157

8.4.3  GET和POST模式 159

8.4.4  服務器返回XML文檔 161

8.4.5  處理多個異步請求 164

8.5  jQuery中的Ajax 166

8.5.1  load()方法 166

8.5.2  $.get()方法和$.post()方法 169

8.5.3  $.getScript()方法和$.getJson()方法 171

8.5.4  $.ajax()方法 173

8.6  上機練習 174

第9章  jQuery的經典交互特效案例 177

9.1  設計時間軸特效 178

9.2  設計tab頁面切換效果 181

9.3  設計滑動門特效 183

9.4  設計焦點圖輪播特效 185

9.5  設計網頁定位導航特效 189

9.6  設計導航條菜單效果 191

9.7  設計瀑布流特效 194

9.8  設計彈出層效果 196

9.9  設計倒計時效果 198

9.10  設計抽獎效果 200

9.11  上機練習 203

第10章  設計響應式網頁 205

10.1  什麽是響應式網頁設計 206

10.2  像素和屏幕分辨率 207

10.3  視口 207

10.3.1  視口的分類和常用屬性 207

10.3.2  媒體查詢 208

10.4  響應式網頁的佈局設計 209

10.4.1  常用佈局類型 209

10.4.2  佈局的實現方式 210

10.4.3  響應式佈局的設計與實現 211

10.5  響應式圖片 212

10.5.1  使用<picture>標簽 212

10.5.2  使用CSS圖片 213

10.6  響應式視頻 215

10.7  響應式導航菜單 216

10.8  響應式表格 218

10.8.1  隱藏表格中的列 218

10.8.2  滾動表格中的列 221

10.8.3  轉換表格中的列 223

10.9  上機練習 226

第11章  流行的響應式開發框架 Bootstrap 227

11.1  Bootstrap概述 228

11.1.1  Bootstrap的特色 228

11.1.2  Bootstrap 4的重大更新 229

11.2  下載Bootstrap 229

11.3  安裝和使用Bootstrap 231

11.3.1  本地安裝Bootstrap 231

11.3.2  初次使用Bootstrap 232

11.4  使用常用組件 233

11.4.1  使用下拉菜單 233

11.4.2  使用按鈕組 234

11.4.3  使用導航組件 235

11.4.4  綁定導航和下拉菜單 237

11.4.5  使用麵包屑導航 239

11.4.6  使用廣告屏 240

11.4.7  使用card(卡片) 241

11.4.8  使用進度條 243

11.4.9  使用模態框 248

11.4.10  使用滾動監聽 250

11.5  膠囊導航選項卡(Tab欄) 252

11.6  上機練習 253

第12章  綜合項目1——開發商品信息展示系統 255

12.1  項目需求分析 256

12.2  項目技術分析 258

12.3  系統的代碼實現 258

12.3.1  設計首頁 258

12.3.2  開發控制器類的文件 260

12.3.3  開發數據模型類文件 261

12.3.4  開發視圖抽象類的文件 263

12.3.5  項目中的其他js文件 說明 266

第13章  綜合項目2——開發企業門戶網站 267

13.1  系統分析 268

13.2  系統設計 268

13.2.1  系統目標 268

13.2.2  系統功能結構 268

13.2.3  文件夾組織結構 268

13.3  網頁預覽 269

13.3.1  網站首頁 269

13.3.2  產品分類頁面 270

13.3.3  產品介紹頁面 271

13.3.4  新聞中心頁面 271

13.3.5  新聞詳情頁面 272

13.4  項目代碼實現 273

13.4.1  網站首頁頁面代碼 273

13.4.2  圖片動態效果代碼 279

13.4.3  公司簡介頁面代碼 280

13.4.4  產品介紹頁面代碼 281

13.4.5  新聞中心頁面代碼 286

13.4.6  聯系我們頁面代碼 288

13.5  項目總結 289

第14章  綜合項目3——開發連鎖咖啡響應式網站 291

14.1  網站概述 292

14.1.1  網站結構 292

14.1.2  設計效果 292

14.1.3  設計準備 293

14.2  設計首頁佈局 294

14.3  設計可切換導航 295

14.4  主體內容 300

14.4.1  設計輪播廣告區 301

14.4.2  設計產品推薦區 303

14.4.3  設計登錄註冊按鈕 和Logo 303

14.4.4  設計特色展示區 305

14.4.5  設計產品生產流程區 307

14.5  設計底部隱藏導航 309

第15章  綜合項目4——開發網上商城網站 311

15.1  系統分析 312

15.2  系統設計 312

15.2.1  系統功能結構 312

15.2.2  文件夾組織結構 312

15.3  網頁預覽 313

15.3.1  網站首頁效果 313

15.3.2  關於我們效果 314

15.3.3  商品展示效果 315

15.3.4  商品詳情效果 317

15.3.5  購物車效果 317

15.3.6  品牌故事效果 318

15.3.7  用戶登錄效果 318

15.3.8  用戶註冊效果 318

15.4  項目代碼實現 319

15.4.1  首頁頁面代碼 319

15.4.2  動態效果代碼 331

15.4.3  購物車代碼 332

15.4.4  登錄頁面代碼 334

15.4.5  商品展示頁面代碼 335

15.4.6  “聯系我們”頁面代碼 340

15.5  項目總結 341