網頁特效設計基礎第2章-初識jQuery

1、jQuery網頁特效設計基礎教程（慕課版）劉剛 主編新一代信息技術“十三五”系列規(guī)劃教材 第2章 初識jQuery 本章要點： jQuery的應用 jQuery的特點 jQuery的主要版本 jQuery的下載與配置 jQuery對象和DOM對象 解決jQuery和其他庫的沖突 jQuery插件簡介 隨著互聯(lián)網的快速發(fā)展，互聯(lián)網上陸續(xù)涌現(xiàn)了一批優(yōu)秀的 JavaScript 腳本庫。這些腳本庫讓開發(fā)人員從復雜煩瑣的JavaScript 中解脫出來，將開發(fā)的重點從實現(xiàn)細節(jié)轉向功能需求上，提高了項目開發(fā)的效率。其中，jQuery 是一個非常優(yōu)秀的 JavaScript 腳本庫。本章我們將對 jQue

2、ry 的特點以及如何下載與配置jQuery 進行介紹。2.1 jQuery 概述 jQuery 是一套簡潔、快速、靈活的 JavaScript 腳本庫。它是由 John Resig 于 2006 年創(chuàng)建的，它幫助人們簡化了 JavaScript 代碼。由于 jQuery 簡便易用，文檔非常豐富，已被大量的開發(fā)人員所推崇，jQuery 設計的宗旨是“write Less，Do More”，即倡導寫更少的代碼，做更多的事情。 使用 jQuery 可以極大地提高編寫 JavaScript 代碼的效率，讓書寫出來的代碼更加簡潔、健壯。同時網絡上豐富的 jQuery 插件也讓開發(fā)人員的工作變得更為輕松，

3、讓項目的開發(fā)效率有了質的提升。2.1.1 jQuery 的應用 jQuery 可以非常方便快捷地獲取 DOM 元素、可以動態(tài)地修改頁面樣式、可以動態(tài)改變 DOM 內容、及時響應用戶的交互操作、為頁面添加動態(tài)效果、統(tǒng)一 Ajax 操作、簡化常見的 JavaScript 任務。在 Web 2.0 時代， jQuery 還受到許多網站的青睞，例如海爾官網、京東網上商城、去哪兒網等，許多網站都應用了 jQuery。1海爾官網應用的 jQuery 效果 海爾官網的一級導航分為 5 大類：智慧生活、個人與家用產品、商業(yè)解決方案、用戶服務、購買，在一級導航上可以看到應用了 jQuery 實現(xiàn)鼠標指針移入移出

4、的效果，鼠標指針移入懸浮到這些一級導航上面，可以看出顯示相應的二級導航，鼠標指針離開一級導航，二級導航隱藏起來，以實現(xiàn)一級導航和二級導航的聯(lián)動效果，如圖 2-1 所示。圖 2-1 海爾官網應用的 jQuery 效果2京東網上商城手風琴式導航應用的jQuery效果 京東網上商城上面有很多的產品類目，為了將這些產品類目以很清晰明了的方式展現(xiàn)給用戶，電商網站上會采用手風琴式導航的方式來展示所有產品類目。它是采用縱向導航的方式，首先列出產品的大類，然后根據鼠標指針懸浮的效果顯示出所有產品的小類，這也是 jQuery 應用的一個經典實現(xiàn)。如圖 2-2 所示，將鼠標指針移動到家用電器產品類目上，顯示出所有

5、家用電器的產品分類。圖 2-2 京東網上商城手風琴式導航應用的 jQuery 效果3去哪兒網應用的 jQuery 效果 在去哪兒網的門票頁面里，有一個以幻燈片輪播形式顯示的廣告圖片，這也是很多網站會采用的一種設計方式，在有限的區(qū)域內展示多張廣告信息，只能以幻燈片輪播的顯示來展現(xiàn)。如圖 2-3 所示，這里就是應用 jQuery的幻燈片輪播插件實現(xiàn)的。圖 2-3 去哪兒網應用的 jQuery 效果2.1.2 jQuery 的特點 jQuery 是一個簡潔快速的 JavaScript 腳本庫，它能讓人們在網頁上簡單地操作文檔、處理事件、運行動畫效果或者添加異步交互。jQuery 可以提高編程的效率，

6、它的主要特點如下。1代碼精致小巧2功能函數(shù)強大3跨瀏覽器4鏈式的語法風格5對 DOM 對象封裝6Ajax 操作完善7文檔豐富8開源9插件豐富2.1.3 jQuery 的版本 2.1.4 jQuery 版本的選擇 截至 2018 年，jQuery 已經發(fā)布到了 3.3 版本，由于 jQuery 各個大的版本 1.x、2.x、3.x 對瀏覽器版本的支持不同，讀者可以按自己的需求選取合適的版本。 1.x：兼容 IE 6、IE 7、IE 8 瀏覽器，使用最為廣泛，官方只做 BUG 維護，功能不再新增，對于早期建設的項目或者要求對 IE 6、IE 7、IE 8 瀏覽器支持的話，可以選擇 1.x 這個版本

7、。 2.x：不兼容 IE 6、IE 7、IE 8 瀏覽器，2.x 版本系列發(fā)布的比較少，使用的人也少，官方只做 BUG 維護，功能不再新增。如果不考慮兼容低版本 IE 6、IE 7、IE 8 的瀏覽器可以使用 2.x。 3.x：不兼容 IE 6、IE 7、IE 8 瀏覽器，只支持最新的瀏覽器，很多老的 jQuery 插件不支持這個版本，目前該版本是官方主要更新維護的版本。2.2 jQuery 下載與配置2.2.1 下載 jQuery jQuery 是一個開源的腳本庫，可以從它的官方網站中下載。（1）進入 jQuery 官方網站的首頁，如圖 2-4 所示。圖 2-4 jQuery 官方網站的首頁

8、（2）在 jQuery 官方網站的首頁中，可以下載所需要的 jQuery 庫，本書使用 jQuery 3.3.1 版本。單擊網站首頁的“Download jQuery”按鈕，頁面跳轉，之后單擊“Download the compressed，production jQuery 3.3.1”超鏈接，選擇“另存為”，將彈出圖 2-5 所示的對話框。（3）單擊“保存”按鈕，將 jQuery 庫下載到本地計算機上。下載后的文件名為 jquery-3.3.1. min.js。圖 2-5 下載 jquery 3.3.1.min.js2.2.2 配置 jQuery 將 jQuery 庫下載到本地計算機后，還

9、需要在項目中配置 jQuery 庫。即將下載后的文件放置到項目指定的文件夾中，通常放在 js 文件夾中，然后在需要應用 jQuery 的頁面中使用下面的語句，將其引用到文件中。 或者2.2.3 我的第一個 jQuery 腳本【例 2-1】 應用 jQuery 彈出一個提示對話框（實例位置：源碼第 2 章2-1）。（1）創(chuàng)建一個名稱為 js 的文件夾，并將 jquery-3.3.1.min.js 復制到該文件夾中。（2）創(chuàng)建一個名稱為 index.html 的文件，在該文件的標記中引用 jQuery 庫文件，關鍵代碼如下： （3）編寫 jQuery 代碼，實現(xiàn)在頁面載入完畢后，彈出一個提示對話框

10、，具體代碼如下： $(document).ready(function() alert(我的第一個jQuery腳本！); ); 實際上，上面的代碼還可以更簡單，也就是將$(document).ready 用“$”符號代替，替換后的代碼如下： $(function() alert(我的第一個jQuery腳本！); ); 運行 index.html，將彈出圖 2-6 所示的對話框。圖 2-6 彈出的提示對話框 熟悉 JavaScript 的讀者知道，要實現(xiàn)例 2-1 的效果，還可以通過下面的代碼實現(xiàn)： window.onload=function() alert(我的第一個jQuery腳本！);

11、2.3 jQuery 對象和 DOM 對象2.3.1 jQuery 對象和 DOM 對象簡介1DOM 對象 DOM 是 Document Object Model，即文檔對象模型的縮寫。DOM 是以層次結構組織的節(jié)點或信息片段的集合，每一份 DOM 都可以表示成一棵樹。 下面構建一個基本的網頁，網頁代碼如下： DOM對象 人郵圖書 jQuery基礎開發(fā)教程 網頁的初始化效果如圖 2-7 所示。圖 2-7 一個非?；镜木W頁 可以把上面的 HTML 結構描述為一棵 DOM 樹，如圖 2-8 所示。圖 2-8 把網頁元素表示為 DOM 樹 在這棵 DOM 樹中，、節(jié)點都是 DOM 元素的節(jié)點，可以

12、使用 JavaScript 中的 getElementById或 getElementsByTagName 來獲取，得到的元素就是 DOM 對象。DOM 對象可以使用 JavaScript 中的方法。例如：var domObject = document.getElementById(id); var html = domObject.innerHTML;2jQuery 對象 jQuery 對象就是通過 jQuery 包裝 DOM 對象后產生的對象。jQuery 對象是獨有的，可以使用 jQuery 里的方法。例如：$(#test).html(); / 獲取id為test的元素內的html代碼

13、 這段代碼等同于：document.getElementById(test).innerHTML; 雖然 jQuery 對象是包裝 DOM 對象后產生的，但是 jQuery 無法使用 DOM 對象的任何方法，同理 DOM 對象也不能使用 jQuery 里面的方法。例如：$(#test).innerHTML、document. getElementById(test).html()等的寫法都是錯誤的。2.3.2 jQuery對象和DOM對象的相互轉換1jQuery 對象轉換成 DOM 對象 jQuery 提供了兩種轉換方式將一個 jQuery 對象轉換成 DOM 對象，即index和 get(i

14、ndex)。（1）jQuery 對象是一個類似數(shù)組的對象，可以通過index的方法得到相應的 DOM 對象。例如：var $mr = $(#mr); / jQuery對象var mr = $mr0 ; / DOM對象alert(mr.value); / 獲取DOM元素的value的值并彈出（2）jQuery 本身也提供 get(index)方法，可以得到相應的 DOM 對象。例如：var $mr = $(#mr); / jQuery對象var mr = $mr.get(0); / DOM對象alert(mr.value); / 獲取DOM元素的value的值并彈出2DOM 對象轉換成 jQue

15、ry 對象 對于一個 DOM 對象，只需要用$()把它包裝起來，就可以得到一個 jQuery 對象，即$(DOM 對象)。例如：var mr= document.getElementById(mr); / DOM對象var $mr = $(mr); / jQuery對象alert($(mr).val(); / 獲取文本框的值并彈出 轉換后，DOM 對象就可以任意使用 jQuery 中的方法了。 通過以上方法，可以任意實現(xiàn) DOM 對象和 jQuery 對象之間的轉換。需要再次強調的是，DOM 對象才能使用 DOM 中的方法，而 jQuery 對象是不可以使用 DOM 中的方法的?！纠?2-2】

16、 DOM 對象轉換為 jQuery 對象（實例位置：源碼第 2 章2-2）。（1）創(chuàng)建一個名稱為 js 的文件夾，并將 jquery-3.3.1.min.js 復制到該文件夾中。（2）創(chuàng)建一個名稱為 index.html 的文件，在該文件的標記中引用 jQuery 庫文件，關鍵代碼如下： （3）編寫 jQuery 代碼，實現(xiàn)在頁面載入完畢后，首先使用 DOM 對象的方法彈出 p 節(jié)點的內容，之后將DOM 對象轉換為 jQuery 對象，同樣再彈出 p 節(jié)點的內容。具體代碼如下： $(document).ready(function() var domObj = document.getElem

17、entById(testp); alert(使用DOM方法獲取p節(jié)點的內容：+domObj.innerHTML); var $jqueryObj = $(domObj); alert(使用jQuery方法獲取p節(jié)點的內容：+$jqueryObj.html(); ) 運行 index.html，將彈出圖 2-9 所示的提示對話框。圖 2-9 彈出的提示對話框【例 2-3】 jQuery 對象轉換為 DOM 對象（實例位置：源碼第 2 章2-3）。（1）創(chuàng)建一個名稱為 js 的文件夾，并將 jquery-3.3.1.min.js 復制到該文件夾中。（2）創(chuàng)建一個名稱為 index.html 的文件

18、，在該文件的標記中引用 jQuery 庫文件，關鍵代碼如下： （3）編寫 jQuery 代碼，實現(xiàn)在頁面載入完畢后，首先獲取兩個 jQuery 對象，使用 jQuery 對象的方法分別彈出兩個 p 節(jié)點的內容，之后分別使用index和 get(index)的方法將 jQuery 對象轉換為 DOM 對象，同樣再彈出兩次 p 節(jié)點的內容。具體代碼如下： $(document).ready(function() var $jQueryObj = $(#testp); alert(使用jQuery方法獲取第一個p節(jié)點的內容：+$jQueryObj.html(); var $jQueryObj1 =

19、$(#testp1); alert(使用jQuery方法獲取第二個p節(jié)點的內容：+$jQueryObj1.html(); var domObj = $jQueryObj0; alert(使用DOM方法獲取第一個p節(jié)點的內容：+domObj.innerHTML); var domObj1 = $jQueryObj1.get(0); alert(使用DOM方法獲取第二個p節(jié)點的內容：+domObj1.innerHTML); ) 運行 index.html，將彈出圖 2-10 所示的提示對話框。圖 2-10 彈出的提示對話框2.4 解決 jQuery 和其他庫的沖突 在使用 jQuery 開發(fā)的時候

20、，還可能會用到其他的 JavaScript 庫，例如，Prototype、MooTools 等。但多庫共存時可能會發(fā)生沖突，若發(fā)生沖突，可以通過以下方案進行解決。2.4.1 jQuery 庫在其他庫之前導入 jQuery 庫在其他庫之前導入，可以直接使用 jQuery (callback)方法。 如果 jQuery 庫在其他庫之前導入，可以直接使用“jQuery”來做一些 jQuery 的工作，而使用$()方法作為其他庫的快捷方式。例如： jQuery庫在其他庫之前導入 prototype jQuery（將被綁定click事件） jQuery(function() / 在這里直接使用jQuer

21、y代替$符號 jQuery(p).click(function() alert(jQuery(this).html(); / 獲取p節(jié)點的內容 ); ); $(prototypepp).style.display = none; / 使用prototype 2.4.2 jQuery 庫在其他庫之后導入 jQuery庫在其他庫之后導入，使用jQuery.noConflick()方法將變量$的控制權讓給其他庫。 具體有以下幾種方式。（1）使用 jQuery.noConflick()方法之后，將 jQuery()函數(shù)作為 jQuery 對象的制造工廠。 jQuery庫在其他庫之后導入 prototy

22、pe jQuery（將被綁定click事件） jQuery.noConflict(); / 將變量$的控制權交給prototype.js jQuery(function() / 使用jQuery jQuery(p).click(function() alert(jQuery(this).text(); ) ) $(prototypepp).style.display = none; / 使用prototype （2）自定義一個快捷方式，例如，$jq、$j、$m 等。var $m = jQuery.noConflict(); / 自定義一個快捷方式 $m(function() / 利用自定義的快

23、捷方式$m $m(p).click(function() alert($m(this).text(); ) ) $(prototypepp).style.display = none; / 使用prototype（3）如果不想給 jQuery 自定義名稱，又想使用$，同時又不想與其他庫相沖突，那么可以嘗試使用以下兩種方法：jQuery.noConflict(); / 將變量的控制權交給prototype.js jQuery(function($) / 使用jQuery，設定頁面加載時執(zhí)行的函數(shù)$(p).click(function() / 在函數(shù)內部可以繼續(xù)使用$()方法 alert($(th

24、is).text(); ) ) $(prototypepp).style.display = none; / 使用prototype或者： jQuery.noConflict(); / 將變量$的控制權交給prototype.js (function($) / 定義匿名函數(shù)并設置形參為$ $(function() / 匿名函數(shù)內部的$都是jQuery $(p).click(function() / 繼續(xù)使用$()方法 alert(jQuery(this).text(); ) ) )(jQuery) $(prototypepp).style.display = none; / 使用prototy

25、pe2.5 jQuery 插件簡介 jQuery 具有強大的擴展能力，允許開發(fā)人員使用或是創(chuàng)建自己的 jQuery 插件來擴展jQuery 的功能，這些插件可以幫助開發(fā)人員提高開發(fā)效率，節(jié)約項目成本。而且一些比較著名的插件也受到了開發(fā)人員的追捧，插件又將 jQuery 的功能提升到一個新的層次。2.5.1 插件的使用 使用 jQuery 插件比較簡單，首先將要使用的插件下載到本地計算機中，然后按照下面的步驟操作，就可以使用插件實現(xiàn)想要的效果了。（1）把下載的插件包含到標記內，并確保它位于主 jQuery 源文件之后。（2）包含一個自定義的 JavaScript 文件，并在其中使用插件創(chuàng)建或擴展

26、的方法。2.5.2 流行的插件 在 jQuery 官方網站中，有一個“Plugins”（插件）超級鏈接，單擊該超級鏈接，將進入到 jQuery 的插件分類列表頁面，如圖 2-11 所示。圖 2-11 jQuery 的插件分類列表頁面1jCarousel 插件 jQuery 的 jCarousel 插件可以實現(xiàn)如圖 2-12 所示的圖片傳送帶效果。單擊左、右兩側的箭頭可以向左或向右翻看圖片。當?shù)竭_第一張圖片時，左側的箭頭將變?yōu)椴豢捎脿顟B(tài)；當?shù)竭_最后一張圖片時，右側的箭頭變?yōu)椴豢捎脿顟B(tài)。圖 2-12 jCarousel 插件實現(xiàn)的圖片傳送帶效果2EasySlide 插件 使用jQuery的EasySlide插件可以實現(xiàn)圖 2-13 所示的圖片輪顯效果。當頁面運行時，要顯示的多張圖片將輪流顯示，同時顯示所對應的圖片說明內容。新聞類的網站可以使用該插件顯示圖片新聞。圖 2-13 EasySlide 插件實現(xiàn)的圖片輪顯效果3Facelist 插件 使用 jQuery 的 Facelist 插件可以實現(xiàn)圖 2-14 所示的類似 Google S