這個jQuery項目實戰(zhàn)課程在整個HTML5課程體系中的地位呢甜滨，也是很重要的蚊丐，有著承上啟下的作用。
為什么這么說呢艳吠，主要有以下三點原因：
第1麦备，?在掌握原生javascript開發(fā)的基礎(chǔ)上學(xué)習(xí)jQuery，能夠進(jìn)一步提升前端開發(fā)能力昭娩。
而且在我們的原生javascript的課程結(jié)束后學(xué)習(xí)jQuery才是真正能夠從根本上理解jQuery的本質(zhì)凛篙，運用起來才更加的得心應(yīng)手，不至于像有些開發(fā)人員一樣產(chǎn)生jQuery是js的基本組成部分這樣的錯誤認(rèn)識栏渺。
第2呛梆，?為后續(xù)開發(fā)框架的學(xué)習(xí)打下良好的基礎(chǔ)。
后續(xù)還有五六個框架的學(xué)習(xí)磕诊，很多都會用到j(luò)Query的語法填物，甚至有以jQuery為核心的框架。
第3霎终，?積累實際項目經(jīng)驗滞磺。
這門課程中的十幾個項目幾乎涵蓋了前端最常用的功能和效果，隨便拿出一個都是大量的網(wǎng)站或WEBAPP正在使用的功能莱褒，而且能夠?qū)崿F(xiàn)甚至超過目前頂級電商的同樣功能的效果击困。
實際上在工作中jQuery有多重要呢，也可以簡單了解一下广凸。jQuery在整個前端開發(fā)過程中充當(dāng)了一個方便操作dom的工具方法集合阅茶，而除了操作常用的dom操作之外，還給HTML頁面提供數(shù)據(jù)交互能力谅海，進(jìn)行模塊化開發(fā)脸哀，增強(qiáng)事件處理和漂亮的頁面動態(tài)效果，目前jQuery仍然是使用最多的JS框架扭吁，從而在一定程度上形成了事實上的開發(fā)標(biāo)準(zhǔn)撞蜂。另外呢白筹，目前最受歡迎的一些前端框架都使用jQuery作為其框架基礎(chǔ)比如，jQuery
Mobile谅摄，jQuery ui，F(xiàn)oundation系馆，bootstrap（是目前最流行用得最廣泛的前端框架之一）,easy
ui（插件集合）等送漠。Angular是最近幾年火的一塌糊涂的mvc框架，在使用Angular同時也建議配合jQuery使用由蘑。其實很多國內(nèi)外企業(yè)在建立自己的框架時要么直接使用jQuery作為核心闽寡，要么借鑒jQuery的架構(gòu)，要么借鑒jQuery的使用方式尼酿，所以jQuery在目前的前端開發(fā)生態(tài)圈中有著舉足輕重的地位爷狈。
接下來簡單說明下jQuery的幾個優(yōu)點。
jQuery主要有以下幾點優(yōu)勢：
1裳擎，?快速獲取文檔元素,這點也是廣大開發(fā)人員最為欣賞的一點
jQuery的選擇機(jī)制構(gòu)建于Css的選擇器涎永，它提供了快速查詢DOM文檔中元素的能力，而且大大強(qiáng)化了JavaScript中獲取頁面元素的方式鹿响。
2羡微，?漂亮的頁面動態(tài)效果，這個愛美之心人皆有之惶我，大家都很喜歡
jQuery中內(nèi)置了一系列的動畫效果妈倔，可以開發(fā)出非常漂亮的網(wǎng)頁，許多網(wǎng)站都使用jQuery的內(nèi)置的效果绸贡，比如淡入淡出盯蝴、元素移除等動態(tài)特效。
3听怕，?集成AJAX捧挺，這點是做網(wǎng)站或WEBAPP不可或缺的東西
AJAX是異步的JavaScript和ML的簡稱，可以開發(fā)出非常靈敏無刷新的網(wǎng)頁尿瞭，特別是開發(fā)服務(wù)器端網(wǎng)頁時松忍，比如PHP網(wǎng)站，需要往返地與服務(wù)器通信筷厘，如果不使用AJAX鸣峭，每次數(shù)據(jù)更新不得不重新刷新網(wǎng)頁，而使用AJAX特效后酥艳，可以對頁面進(jìn)行局部刷新摊溶，提供動態(tài)的效果。
4充石，?增強(qiáng)的事件處理莫换，開發(fā)人員事半功倍
jQuery提供了對基本JavaScript結(jié)構(gòu)的增強(qiáng)，比如元素迭代和數(shù)組處理等操作。
5拉岁，?豐富的插件與方便的插件擴(kuò)展坷剧，即插即用
jQuery提供了各種頁面事件，它可以避免程序員在HTML中添加大事件處理代碼喊暖，最重要的是惫企，它的事件處理器消除了各種瀏覽器兼容性問題。
6陵叽，?良好的兼容性狞尔，兼容各種主流瀏覽器?
jQuery兼容各種主流瀏覽器，如IE 6.0+巩掺、FF 1.5+偏序、Safari 2.0+、Opera 9.0+等胖替。
本質(zhì)上jQuery的主導(dǎo)思想是寫更少的代碼實現(xiàn)更多的功能研儒，大方向的正確性隨之帶來的就是方便易學(xué)，方便易用独令，所以使用很廣泛殉摔。
我們接下來看看千鋒H5課程中的這門jQuery項目實戰(zhàn)中要學(xué)的一個功能“網(wǎng)頁定位導(dǎo)航“。
這個功能在目前的網(wǎng)站上是非常流行的记焊，我也結(jié)合京東還有天貓來講述這兩個功能的應(yīng)用逸月，同時大家也能夠非常直觀的看到我們學(xué)完這門jQuery項目實戰(zhàn)課程能夠具備什么樣的能力。
下來就專程介紹“網(wǎng)頁定位導(dǎo)航“：
當(dāng)京東或者天貓或者類似的需要大量展示商品的網(wǎng)站遍膜，一個頁面內(nèi)有太多的商品需要展示了碗硬，我們當(dāng)然可以有效的將商品進(jìn)行分類，然后一組一組的展示商品瓢颅。
上面幾張圖呢是京東首頁的商品展示恩尾，當(dāng)然除了服飾美妝、家電手機(jī)挽懦、電腦數(shù)碼翰意、3 C運動幾個商品分類外還有享品質(zhì)、愛吃信柿、母嬰家居冀偶、圖書汽車、虛擬幾個商品分類渔嚷，后邊這幾個商品分類的圖呢就不在這里展示了进鸠，我們使用上邊幾個圖就可以說明網(wǎng)頁定位導(dǎo)航的作用了。
我們試想一下形病，當(dāng)客戶在商城瀏覽商品的時候呢客年，在幾類商品中來回瀏覽霞幅，還要用心去記憶某類商品在什么位置，然后滾動頁面才能夠找到這類商品量瓜，那么我們這個頁面的交互性太不友好了司恳，給客戶瀏覽頁面帶來了不便，怎么才能夠讓用戶方便的瀏覽頁面而又能夠展示足夠多的商品呢绍傲？這時我們就可以利用“網(wǎng)頁定位導(dǎo)航”功能來改善頁面的交互能力扔傅，讓客戶瀏覽頁面變的更加的輕松。
下邊這幅圖就是京東“網(wǎng)頁定位導(dǎo)航”功能的頁面截圖唧取。紅框框起來的就是“網(wǎng)頁定位導(dǎo)航”功能。
這個“網(wǎng)頁定位導(dǎo)航”功能的效果是什么樣的呢划提？如何能夠幫助客戶方便的瀏覽頁面呢枫弟，我們詳細(xì)的了解下。
首先當(dāng)客戶點擊“網(wǎng)頁定位導(dǎo)航”功能條上的商品分類的項目時鹏往，頁面就會自動滾動到對應(yīng)的商品分類的商品展示區(qū)域淡诗。比如我點擊“網(wǎng)頁定位導(dǎo)航”條上的“家電手機(jī)”這個商品分類項目。那么當(dāng)前這個頁面就會自動滾動伊履，把“家電館”這個分類的商品展示區(qū)顯示在瀏覽器顯著位置韩容，等于說我點擊了“網(wǎng)頁定位導(dǎo)航”條上的“家電手機(jī)”這個商品分類項目，頁面自動的把對應(yīng)的分類商品展示區(qū)給我放到了當(dāng)前瀏覽器最顯著的位置唐瀑。
下圖展示的就是上例的情況群凶，小紅框表示的是點擊的“網(wǎng)頁定位導(dǎo)航”功能條上的商品分類的項目“家電手機(jī)”，大紅框表示的是頁面自動的把“家電館”這個分類的商品展示區(qū)顯示在瀏覽器顯著位置哄辣。同時呢大家也看到了请梢，我們的“網(wǎng)頁定位導(dǎo)航”功能條上的商品分類的項目“家電手機(jī)”項目的背景色變成了紅色，與網(wǎng)頁定位導(dǎo)航”功能條上的其他功能項的樣式形成鮮明對比力穗，也是借此提醒客戶當(dāng)前正在瀏覽的商品分類是什么毅弧。
如果客戶滾動頁面自行瀏覽商品，比如說瀏覽到了“愛閱讀”的商品展示區(qū)当窗。這個時候我們的“網(wǎng)頁定位導(dǎo)航”功能條可沒有閑著够坐，你會發(fā)現(xiàn)與“愛閱讀”的商品展示區(qū)對應(yīng)的“網(wǎng)頁定位導(dǎo)航”功能條上的功能項”圖書汽車“這個功能項的背景色變成了紅色，與網(wǎng)頁定位導(dǎo)航”功能條上的其他功能項的樣式形成鮮明對比崖面，這個叫做功能項的”高亮顯示“元咙，現(xiàn)在這個效果讓我們的”網(wǎng)頁定位導(dǎo)航”功能條的另一個重要作用顯現(xiàn)出來了，就是提示訪問網(wǎng)頁的客戶“您現(xiàn)在瀏覽到什么位置了”巫员，因為”網(wǎng)頁定位導(dǎo)航”功能條很直觀蛾坯，上邊有多少個功能項就對應(yīng)了頁面中多少個商品分類的展示區(qū)，不管客戶瀏覽到什么商品分類的展示區(qū)疏遏，都有
“網(wǎng)頁定位導(dǎo)航”功能條上的對應(yīng)功能項高亮顯示脉课，指明客戶在頁面中所處的位置救军，永遠(yuǎn)不會在頁面中迷路。
下圖就展示了用戶瀏覽到愛閱讀時倘零，“網(wǎng)頁定位導(dǎo)航”功能條上的功能項”圖書汽車“這個功能項”高亮顯示“唱遭。
另外有些朋友擔(dān)心這個“網(wǎng)頁定位導(dǎo)航”功能條這么短，頁面一滾動是不是一會就滾沒了看不見了呈驶，這個擔(dān)心是多余的拷泽，因為我們的這個“網(wǎng)頁定位導(dǎo)航”功能條是有一個始終保持在頁面左下或右下的效果的，頁面滾動到哪里都能夠完整的展示出來袖瞻，永遠(yuǎn)給客戶做一個指路的明燈司致。
那么現(xiàn)在電商非常的多，展示的商品呢也是越來越豐富聋迎，每個成功的電商一定會在其頁面中采用“網(wǎng)頁定位導(dǎo)航”功能脂矫，只是樣式稍有區(qū)別，對于我們已經(jīng)完成一期學(xué)習(xí)的學(xué)員來說改變樣式真是小菜一碟霉晕，我們接下來看一看天貓的“網(wǎng)頁定位導(dǎo)航”功能條是什么樣子的庭再。
下圖是天貓首頁的“網(wǎng)頁定位導(dǎo)航”功能條的樣子，可以看到樣式和京東的“網(wǎng)頁定位導(dǎo)航”功能條幾乎一模一樣牺堰，就是高亮顯示的背景色換成了綠色拄轻，另外呢“網(wǎng)頁定位導(dǎo)航”功能項少了些。
下圖是考拉海購的“網(wǎng)頁定位導(dǎo)航”功能條伟葫。和前兩個龍頭電商相比考拉海購的“網(wǎng)頁定位導(dǎo)航”功能條樣式是有了區(qū)別恨搓，但是看上去貌似粗糙了些，另外讓前端工程師最不能忍受的是筏养，居然沒有“高亮顯示”的效果奶卓，作為目前排名靠前的海淘網(wǎng)站，這樣的交互缺點也真是讓人醉了撼玄。
通過上面的實際的各大電商的“網(wǎng)頁定位導(dǎo)航”功能條的效果展示夺姑，清晰的告訴大家，我們千鋒HTML5課程中的jQuery項目實戰(zhàn)中的一個功能就達(dá)到了頂級電商的前端的開發(fā)需求掌猛，也就是說們的學(xué)員畢業(yè)后進(jìn)入BAT這樣的企業(yè)并且能夠勝任這些企業(yè)的工作也不是什么新鮮的事物盏浙。
我們jQuery項目實戰(zhàn)課程中有十幾個功能，涵蓋了絕大多數(shù)的應(yīng)用場景荔茬，如果全部學(xué)會學(xué)精废膘，那么挑一家好的企業(yè)才是真正需要考慮的問題。
來源：千鋒HTML5
