這個jQuery專案實戰課程在整個HTML5課程體系中的地位呢，也是很重要的，有著承上啟下的作用。

為什麼這麼說呢，主要有以下三點原因：

第1， 在掌握原生javascript開發的基礎上學習jQuery，能夠進一步提升前端開發能力。

而且在我們的原生javascript的課程結束後學習jQuery才是真正能夠從根本上理解jQuery的本質，運用起來才更加的得心應手，不至於像有些開發人員一樣產生jQuery是js的基本組成部分這樣的錯誤認識。

第2， 為後續開發框架的學習打下良好的基礎。

後續還有五六個框架的學習，很多都會用到jQuery的語法，甚至有以jQuery為核心的框架。

第3， 積累實際專案經驗。

這門課程中的十幾個專案幾乎涵蓋了前端最常用的功能和效果，隨便拿出一個都是大量的網站或WEBAPP正在使用的功能，而且能夠實現甚至超過目前頂級電商的同樣功能的效果。

實際上在工作中jQuery有多重要呢，也可以簡單瞭解一下。jQuery在整個前端開發過程中充當了一個方便操作dom的工具方法集合，而除了操作常用的dom操作之外，還給HTML頁面提供資料互動能力，進行模組化開發，增強事件處理和漂亮的頁面動態效果，目前jQuery仍然是使用最多的JS框架，從而在一定程度上形成了事實上的開發標準。另外呢，目前最受歡迎的一些前端框架都使用jQuery作為其框架基礎比如，jQuery Mobile，jQuery ui，Foundation，bootstrap（是目前最流行用得最廣泛的前端框架之一）,easy ui（外掛集合）等。Angular是最近幾年火的一塌糊塗的mvc框架，在使用Angular同時也建議配合jQuery使用。其實很多國內外企業在建立自己的框架時要麼直接使用jQuery作為核心，要麼借鑑jQuery的架構，要麼借鑑jQuery的使用方式，所以jQuery在目前的前端開發生態圈中有著舉足輕重的地位。

接下來簡單說明下jQuery的幾個優點。

jQuery主要有以下幾點優勢：

1， 快速獲取文件元素,這點也是廣大開發人員最為欣賞的一點

jQuery的選擇機制構建於Css的選擇器，它提供了快速查詢DOM文件中元素的能力，而且大大強化了JavaScript中獲取頁面元素的方式。

2， 漂亮的頁面動態效果，這個愛美之心人皆有之，大家都很喜歡

jQuery中內建了一系列的動畫效果，可以開發出非常漂亮的網頁，許多網站都使用jQuery的內建的效果，比如淡入淡出、元素移除等動態特效。

3， 整合AJAX，這點是做網站或WEBAPP不可或缺的東西

AJAX是非同步的JavaScript和ML的簡稱，可以開發出非常靈敏無重新整理的網頁，特別是開發伺服器端網頁時，比如PHP網站，需要往返地與伺服器通訊，如果不使用AJAX，每次資料更新不得不重新重新整理網頁，而使用AJAX特效後，可以對頁面進行區域性重新整理，提供動態的效果。

4， 增強的事件處理，開發人員事半功倍

jQuery提供了對基本JavaScript結構的增強，比如元素迭代和陣列處理等操作。

5， 豐富的外掛與方便的外掛擴充套件，即插即用

jQuery提供了各種頁面事件，它可以避免程式設計師在HTML中新增大事件處理程式碼，最重要的是，它的事件處理器消除了各種瀏覽器相容性問題。

6， 良好的相容性，相容各種主流瀏覽器 

jQuery相容各種主流瀏覽器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

本質上jQuery的主導思想是寫更少的程式碼實現更多的功能，大方向的正確性隨之帶來的就是方便易學，方便易用，所以使用很廣泛。

我們接下來看看千鋒H5課程中的這門jQuery專案實戰中要學的一個功能“網頁定位導航“。

這個功能在目前的網站上是非常流行的，我也結合京東還有天貓來講述這兩個功能的應用，同時大家也能夠非常直觀的看到我們學完這門jQuery專案實戰課程能夠具備什麼樣的能力。

下來就專程介紹“網頁定位導航“：

當京東或者天貓或者類似的需要大量展示商品的網站，一個頁面內有太多的商品需要展示了，我們當然可以有效的將商品進行分類，然後一組一組的展示商品。

上面幾張圖呢是京東首頁的商品展示，當然除了服飾美妝、家電手機、電腦數碼、3 C運動幾個商品分類外還有享品質、愛吃、母嬰家居、圖書汽車、虛擬幾個商品分類，後邊這幾個商品分類的圖呢就不在這裡展示了，我們使用上邊幾個圖就可以說明網頁定位導航的作用了。

我們試想一下，當客戶在商城瀏覽商品的時候呢，在幾類商品中來回瀏覽，還要用心去記憶某類商品在什麼位置，然後滾動頁面才能夠找到這類商品，那麼我們這個頁面的互動性太不友好了，給客戶瀏覽頁面帶來了不便，怎麼才能夠讓使用者方便的瀏覽頁面而又能夠展示足夠多的商品呢？這時我們就可以利用“網頁定位導航”功能來改善頁面的互動能力，讓客戶瀏覽頁面變的更加的輕鬆。

下邊這幅圖就是京東“網頁定位導航”功能的頁面截圖。紅框框起來的就是“網頁定位導航”功能。

這個“網頁定位導航”功能的效果是什麼樣的呢？如何能夠幫助客戶方便的瀏覽頁面呢，我們詳細的瞭解下。

首先當客戶點選“網頁定位導航”功能條上的商品分類的專案時，頁面就會自動滾動到對應的商品分類的商品展示區域。比如我點選“網頁定位導航”條上的“家電手機”這個商品分類專案。那麼當前這個頁面就會自動滾動，把“家電館”這個分類的商品展示區顯示在瀏覽器顯著位置，等於說我點選了“網頁定位導航”條上的“家電手機”這個商品分類專案，頁面自動的把對應的分類商品展示區給我放到了當前瀏覽器最顯著的位置。

下圖展示的就是上例的情況，小紅框表示的是點選的“網頁定位導航”功能條上的商品分類的專案“家電手機”，大紅框表示的是頁面自動的把“家電館”這個分類的商品展示區顯示在瀏覽器顯著位置。同時呢大家也看到了，我們的“網頁定位導航”功能條上的商品分類的專案“家電手機”專案的背景色變成了紅色，與網頁定位導航”功能條上的其他功能項的樣式形成鮮明對比，也是藉此提醒客戶當前正在瀏覽的商品分類是什麼。

如果客戶滾動頁面自行瀏覽商品，比如說瀏覽到了“愛閱讀”的商品展示區。這個時候我們的“網頁定位導航”功能條可沒有閒著，你會發現與“愛閱讀”的商品展示區對應的“網頁定位導航”功能條上的功能項”圖書汽車“這個功能項的背景色變成了紅色，與網頁定位導航”功能條上的其他功能項的樣式形成鮮明對比，這個叫做功能項的”高亮顯示“，現在這個效果讓我們的”網頁定位導航”功能條的另一個重要作用顯現出來了，就是提示訪問網頁的客戶“您現在瀏覽到什麼位置了”，因為”網頁定位導航”功能條很直觀，上邊有多少個功能項就對應了頁面中多少個商品分類的展示區，不管客戶瀏覽到什麼商品分類的展示區，都有 “網頁定位導航”功能條上的對應功能項高亮顯示，指明客戶在頁面中所處的位置，永遠不會在頁面中迷路。

下圖就展示了使用者瀏覽到愛閱讀時，“網頁定位導航”功能條上的功能項”圖書汽車“這個功能項”高亮顯示“。

另外有些朋友擔心這個“網頁定位導航”功能條這麼短，頁面一滾動是不是一會就滾沒了看不見了，這個擔心是多餘的，因為我們的這個“網頁定位導航”功能條是有一個始終保持在頁面左下或右下的效果的，頁面滾動到哪裡都能夠完整的展示出來，永遠給客戶做一個指路的明燈。

那麼現在電商非常的多，展示的商品呢也是越來越豐富，每個成功的電商一定會在其頁面中採用“網頁定位導航”功能，只是樣式稍有區別，對於我們已經完成一期學習的學員來說改變樣式真是小菜一碟，我們接下來看一看天貓的“網頁定位導航”功能條是什麼樣子的。

下圖是天貓首頁的“網頁定位導航”功能條的樣子，可以看到樣式和京東的“網頁定位導航”功能條几乎一模一樣，就是高亮顯示的背景色換成了綠色，另外呢“網頁定位導航”功能項少了些。

下圖是考拉海購的“網頁定位導航”功能條。和前兩個龍頭電商相比考拉海購的“網頁定位導航”功能條樣式是有了區別，但是看上去貌似粗糙了些，另外讓前端工程師最不能忍受的是，居然沒有“高亮顯示”的效果，作為目前排名靠前的海淘網站，這樣的互動缺點也真是讓人醉了。

通過上面的實際的各大電商的“網頁定位導航”功能條的效果展示，清晰的告訴大家，我們千鋒HTML5課程中的jQuery專案實戰中的一個功能就達到了頂級電商的前端的開發需求，也就是說們的學員畢業後進入BAT這樣的企業並且能夠勝任這些企業的工作也不是什麼新鮮的事物。

我們jQuery專案實戰課程中有十幾個功能，涵蓋了絕大多數的應用場景，如果全部學會學精，那麼挑一家好的企業才是真正需要考慮的問題。

來源：千鋒HTML5