産品特色

內容簡介

　　使用jQuery可以用更少的時間完成更多工作。Web開發和移動開發已經成為主流，jQuery在Web和移動網頁方麵的占有率已經達到70.8%，這給學習jQuery的讀者提供瞭更多工作機會。本書是一本帶領讀者入門的jQuery實戰書。

　　全書分為4部分：第1部分介紹jQuery開發的基礎，包括環境搭建，必須瞭解的JavaScript基礎，jQuery操作HTML、CSS、事件、動畫等；第2部分介紹jQuery的插件，包括自定義插件、UI插件和一些常用插件；第3部分介紹jQuery在移動網頁方麵的開發框架jQuery Mobile；第4部分通過3個完整的項目案例讓讀者完善前麵的學習，並正式開發屬於自己的項目。

　　本書內容精練、重點突齣、實例豐富、講解通俗，是廣大網頁或移動Web設計人員和前端開發人員必備的參考書，同時非常適閤大中專院校師生參考閱讀，也可作為高等院校計算機及相關培訓機構的教材。

作者簡介

劉鑫,資深JAVA語言學者,富有多年的開發及教學經驗。

目錄

第一篇 jQuery基礎
第1章 歡迎進入移動開發的世界 3
1.1 下載jQuery 3
1.2 編寫第一個包含jQuery庫的程序 5
1.3 jQuery庫的核心方法$() 6
1.4 jQuery庫的選擇器 7
1.5 jQuery代碼的注釋 9
1.6 調試jQuery程序 10
1.7 小結 14
第2章 學習jQuery 必會的JavaScript基礎 15
2.1 JavaScript的數據類型 15
2.2 JavaScript的變量 17
2.3 JavaScript的方法和參數 17
2.4 JavaScript的上下文Context 18
2.5 JavaScript的Callback 18
2.6 小結 19
第3章 jQuery操作HTML 20
3.1 獲取或設置元素的內容 20
3.2 獲取或設置元素的屬性 22
3.3 在頁麵中添加元素 24
3.4 從頁麵中刪除元素 27
3.5 通過for…of為頁麵中的元素循環指定ID 29
3.6 利用Ajax實現網頁的get請求 31
3.7 利用Ajax直接執行返迴的JS代碼 34
3.8 一切Ajax都是基於$.ajax() 35
3.9 跨域的AJAX-JSONP 37
3.10 JSONP在jQuery中的應用 39
3.11 實戰1：網頁中的圖片預覽 41
3.12 實戰2：利用Ajax實現微博的實時更新 44
3.13 小結 46
第4章 jQuery操作CSS 47
4.1 添加或刪除樣式 47
4.2 樣式的切換 48
4.3 獲取或設置CSS樣式 49
4.4 更改元素或窗口的大小 51
4.5 實戰：網頁鏈接的提示 52
4.6 小結 54
第5章 jQuery操作事件 55
5.1 什麼是事件 55
5.2 jQuery中的事件 55
5.3 頁麵的初始化事件 57
5.4 綁定事件 59
5.5 新事件綁定on() 62
5.6 移除事件綁定 63
5.7 新移除事件綁定off() 64
5.8 切換事件 66
5.9 錶單事件 67
5.10 實戰：錶單的驗證 69
5.11 小結 72
第6章 jQuery操作動畫 73
6.1 基本動畫 73
6.2 可摺疊的列錶 74
6.3 按鈕的淡入淡齣 76
6.4 停止動畫 77
6.5 自定義動畫 78
6.6 實戰：多樣式動畫 79
6.7 小結 80
第二篇 jQuery插件
第7章 jQuery插件 83
7.1 什麼是jQuery插件 83
7.2 常用的插件網站 87
7.3 jQuery的插件類型 89
7.4 對象級彆的插件開發 89
7.5 類級彆的插件開發 92
7.6 實戰：用第三方插件創建自己的網站 95
7.7 小結 102
第8章 jQuery官方UI插件 103
8.1 jQuery UI插件是官方提供的用戶界麵 103
8.2 下載jQuery UI插件 104
8.3 拖動組件Draggable的使用 105
8.4 拖放組件Droppable的使用 106
8.5 實戰：使用拖動效果模擬Windows係統“迴收站” 108
8.6 實現頁麵中的進度條 112
8.7 實現頁麵中的滑動條 114
8.8 實現頁麵中的日曆 121
8.9 實現頁麵導航的手風琴效果 128
8.10 實現頁麵中的各種對話框特效 130
8.11 實現幻燈和分頁特效 135
8.12 小結 141
第9章 jQuery多媒體插件 142
9.1 圖錶應用 142
9.2 視頻應用 148
9.3 地圖應用 151
9.4 實戰在綫地圖 156
9.5 小結 160
第三篇 jQuery移動開發
第10章 jQuery Mobile移動開發 163
10.1 下載jQuery Mobile 163
10.2 使用Dreamweaver開發jQuery Mobile 164
10.3 創建第一個jQuery Mobile文件 165
10.4 測試jQuery Mobile 165
10.5 選擇頁麵中的元素 169
10.6 設置頁麵中元素的屬性 170
10.7 jQuery Mobile中的控件 170
10.8 使用按鈕實現菜單界麵 172
10.9 使用錶單做一個手機版QQ登錄 175
10.10 使用列錶做一個類貼吧的應用 180
10.11 使用對話框實現一個相冊 183
10.12 實戰：實現電子書閱讀器 186
10.13 小結 188
第11章 開發移動博客 189
11.1 項目規劃 189
11.2 主界麵設計 190
11.3 文章列錶的設計 193
11.4 文章內容頁的實現 197
11.5 文章類的設計 200
11.6 測試環境的搭建 202
11.7 數據庫的設計 207
11.8 內容頁功能的實現 213
11.9 文章列錶的實現 217
11.10 首頁的實現 222
11.11 小結 223



第四篇 jQuery實戰
第12章 jQuery+HTML 5實現文件拖動上傳 227
12.1 認識FileDrop.js插件 228
12.1.1 下載FileDrop.js插件 228
12.1.2 使用插件實現文件拖拽上傳 231
12.2 開發圖片拖拽上傳Web應用 235
12.2.1 HTML 5文件上傳功能 235
12.2.2 圖片拖拽上傳HTML代碼 236
12.2.3 圖片拖拽上傳CSS代碼 237
12.2.4 圖片拖拽上傳JS代碼 239
12.2.5 圖片拖拽上傳服務器端PHP代碼 241
12.2.6 圖片拖拽上傳Web應用最終效果 242
12.3 小結 243
第13章 jQuery+HTML 5實現視頻播放器 244
13.1 認識MediaElement.js插件 245
13.1.1 下載音視頻播放器插件 245
13.1.2 開發一個簡單的播放器應用 248
13.1.3 使用MediaElement.js插件模仿Windows Media Player 252
13.2 實現在綫播放器 254
13.2.1 在頁麵中添加MediaElement.js 254
13.2.2 構建播放器頁麵布局 254
13.2.3 播放器頁麵初始化 255
13.3 小結 257
第14章 jQuery+HTML 5實現繪圖程序 258
14.1 準備jquery.deviantartmuro繪圖插件 259
14.1.1 下載jquery.deviantartmuro繪圖插件 259
14.1.2 參數說明 265
14.1.3 使用jquery.deviantartmuro繪圖插件開發Sandbox繪圖應用 268
14.2 基於HTML 5的Canvas繪圖初步應用 271
14.2.1 Canvas簡介 271
14.2.2 Canvas技術基本知識 271
14.3 Canvas技術初步應用 273
14.3.1 Canvas技術繪製矩形應用 273
14.3.2 Canvas技術清除矩形區域應用 274
14.3.3 Canvas技術繪製圓弧應用 275
14.3.4 Canvas技術繪製路徑應用 276
14.3.5 Canvas技術繪製綫段應用 278
14.3.6 Canvas技術繪製貝塞爾麯綫與二次樣條麯綫應用 279
14.4 Canvas技術綜閤應用——繪製花樣 280
14.5 Canvas綜閤應用——繪製復雜圖樣 281
14.6 Canvas綜閤應用——圖形變換 283
14.7 小結 286

精彩書摘

　　第13章

　　jQuery+HTML5實現視頻播放器

　　以往很多喜歡上網看視頻、玩遊戲的網友經常抱怨不爽，因為網上好多視頻和遊戲都需要安裝Flash插件，並且速度非常慢。HTML5標準的齣現解決瞭這一難題，HTML5提供瞭音頻視頻的標準接口，實現瞭無須任何插件支持，隻需用戶瀏覽器支持相應的HTML5標簽即可。難怪業內都堅信HTML5標準是Flash的終結者！目前，IE9+、Safari、Firefox和Chrome等主流瀏覽器都支持HTML5標準，用戶可以免除Flash插件安裝的煩瑣而直接在網頁中播放音視頻。

　　圖13.1是Youtube視頻網站的HTML5視頻播放器頁麵。

　　圖13.1HTML5視頻播放器

　　本章主要內容

　　?使用MediaElement.js音視頻播放器插件

　　?熟悉HTML5音視頻技術

　　?製作HTML5頁麵音視頻播放器

　　13.1認識MediaElement.js插件

　　MediaElement.js音視頻播放器插件是一個HTML5音頻和視頻的解決方案，該插件支持使用HTML5的音頻和視頻標簽及CSS生成的音視頻播放器。對於老的瀏覽器，MediaElement.js插件使用自定義的Flash或Silverlight播放器模擬HTML5音視頻技術。總體上，MediaElement.js是一款支持眾多應用的音視頻播放器插件，包括jQuery、Wordpress、Drupel、Joomla等，同時完全兼容目前主流瀏覽器（IE9+、Safari、Firefox和Chrome等）。

　　13.1.1下載音視頻播放器插件

　　MediaElement.js音視頻播放器插件的官方網址如下：

　　http://www.mediaelementjs.com/

　　在MediaElement.js插件的官方網站，用戶可以看到MediaElement.js插件的産品介紹、樣例演示鏈接、源代碼下載鏈接、開發嚮導鏈接、官方博客鏈接、支持文檔以及網站版權信息等內容，如圖13.2所示。

　　圖13.2查看産品介紹、樣例演示鏈接等信息

　　用戶繼續嚮下瀏覽，可以看到MediaElement.js插件的特性介紹、瀏覽器支持與Demo演示鏈接等信息，如圖13.3所示。

　　圖13.3查看特性介紹、瀏覽器支持等信息

　　目前，選擇MediaElement.js音視頻播放器插件是一個很不錯的選擇。MediaElement.js插件具有以下優秀特性，全方位支持設計人員開發：

　　?自由聯盟和開放源碼支持，無許可限製。

　　?上手容易，安裝部署簡單快捷。

　　?使用純HTML與CSS開發。

　　?完全支持HTML5標準的

　　?廣泛的平颱支持，支持多編解碼器、跨瀏覽器和跨平颱。

　　?全麵支持WordPress、Drupal、Joomla、jQuery、BlogEngine.NET、RubyGem、Plone、Typo3等流行Web技術。

　　?為早期瀏覽器的Adobe?Flash?標準與Silverlight技術提供一緻的API接口。

　　?可擴展的體係結構，方便開發人員完善改進。

　　?積極和不斷增長地為開源社區提供支持。

　　?提供全麵的文檔和入門指南。

　　MediaElement.js音視頻播放器插件具有很好的跨瀏覽器支持性，全麵兼容目前各款主流瀏覽器與設備。下麵是瀏覽器支持情況一覽。

　　?Windows：Firefox、Chrome、Opera、Safari、IE9+。

　　?WindowsPhone：WindowsPhoneBrowser。

　　?iOS：MobileSafari、iPad、iPhone、iPodTouch。

　　?Android：Android2.3Browser+。

　　對於MediaElement.js音視頻播放器插件，官方網站還提供瞭相當豐富的API文檔與樣例說明，具體如圖13.4所示。

　　圖13.4查看API文檔與樣例說明

　　用戶從MediaElement.js插件官方網站可以下載一個大約10MB的源文件壓縮包，編寫本書時，最新版文件名為johndyer-mediaelement-2.13.2.zip。用戶解壓縮後可以得到MediaElement.js插件完整的源代碼，包括所需jQuery框架支持的類庫文件、MediaElement.js插件的相關類庫文件以及MediaElement.js插件的全部資源文件。

　　同時，MediaElement.js插件開發方還將其源代碼提交到瞭GitHub資源庫，便於設計人員學習交流使用。MediaElement.js插件的GitHub資源庫鏈接地址如下：

　　https://github.com/johndyer/mediaelement/

　　MediaElement.js插件的GitHub頁麵如圖13.5所示。

　　圖13.5MediaElement.js音視頻播放器插件GitHub頁麵

　　……

前言/序言

　　前言

　　jQuery是高效、精簡並且功能豐富的JavaScript工具庫。jQuery提供的API易於使用且兼容眾多瀏覽器，讓HTML文檔遍曆和操作、事件處理、動畫和Ajax操作等更加簡單。如果你想學習Web開發或移動開發框架，那麼非jQuery莫屬。jQuery跨平颱特性既減少瞭開發人員的工作量，又能讓新手快速入門。

　　本書是一本從零起步的jQuery入門書，無論你是否有HTMLCSSJavaScript基礎，都能很好地上手學習，隻要多練習、多寫代碼，看完本書就能夠具備實際開發Web和移動Web項目的能力。

　　本書的編寫特點

　　?本書無論是基礎理論知識的介紹，還是綜閤案例應用的開發，都從實際應用角度齣發，講解細緻、分析透徹。

　　?深入淺齣、輕鬆易學。以示例為主綫，激發讀者的閱讀興趣，讓讀者能夠真正學習到jQuery最實用、最前沿的技術。

　　?技術新穎、最新版本、與時俱進，較為全麵地覆蓋時下熱門的jQuery技術。

　　?閤理的章節安排，先把環境搭建好，然後從基礎的jQuery操作HTML元素入手，進而學習jQuery的一些操作特性，如Ajax、動畫、事件、CSS等，最後介紹jQueryMobile在移動方麵的開發基礎。

　　本書的內容安排

　　本書共分4篇14章，內容從jQuery基礎到jQuery插件，再到jQueryMobile。

　　第一篇jQuery基礎（第1章~第6章）

　　首先手把手教讀者搭建jQuery的開發環境，然後掌握一些必要的JavaScript基礎，進而學習jQuery操作HTML、jQuery操作CSS的快捷方式，最後把jQuery的核心特性——事件和動畫利用示例的方式逐步演示。

　　第二篇jQuery插件（第7章~第9章）

　　jQuery插件是jQuery之所以流行的最大特色。jQuery插件不隻提供jQueryUI插件，因為其開源的特性，很多公司和個人也貢獻瞭很多有意思且能提高開發效率的插件，如多媒體插件能幫助我們更好地開發絢麗多彩的網頁和移動界麵。

　　第三篇jQuery移動開發（第10章~第11章）

　　移動網頁開發已經普及，企業的網站需要支持更多平颱，jQueryMobile是跨平颱方案的首選。本篇重點介紹jQuery移動開發的基礎，通過一個完整的移動網頁讓讀者學習jQueryMobile的選擇器、事件、移動開發、APP布局等。

　　第四篇jQuery實戰（第12章~第14章）

　　通過3個案例詳細解析jQuery開發中的各種步驟、代碼和技術，包括插件的使用、界麵的設計、數據庫的連接等。

　　本書麵對的讀者

　　?網頁設計入門者

　　?網頁開發入門者

　　?網頁美工人員

　　?移動設備網頁開發者

　　?大、中專院校的學生

　　?各種IT培訓學校的學生

　　?網站後颱開發人員

　　?前端開發入門者

　　?網站建設與網頁設計的相關威客兼職人員

　　本書由劉鑫編寫，其他參與的人員有張澤娜、曹卉、林江閩、林龍、李陽、宋陽、王剛、楊超、張光澤、趙東、李玉莉、劉岩、李雷霆、王小輝。

　　編者

　　2017年4月