07-10javascript網(wǎng)頁編程03jquery快速開發(fā)

1、jQuery_day01Contents目錄 jQuery 概述 jQuery 的基本使用 jQuery 選擇器 jQuery 樣式操作 jQuery 效果 能夠說出什么是 jQuery 能夠說出 jQuery 的優(yōu)點(diǎn) 能夠簡單使用 jQuery 能夠說出 DOM 對象和 jQuery 對象的區(qū)別 能夠?qū)懗龀Ｓ玫?jQuery 選擇器 能夠操作 jQuery 樣式 能夠?qū)懗龀Ｓ玫?jQuery 動畫目標(biāo)TARGET學(xué)習(xí)jQuery的主要內(nèi)容要點(diǎn)提示jQuery入門導(dǎo)讀掌握程度：了解1.1 jQuery導(dǎo)讀視什么是JavaScript的庫JavaScript庫有哪些要點(diǎn)提示JavaScript庫

2、掌握程度：了解1.2 JavaScript庫視結(jié)1、什么是javascript庫？一個用javascript封裝了很多屬性和方法的文件。2、javascript庫有哪些？jQuery、Prototype、YUI、Dojo、Ext JS、移動端的zepto等1.2 JavaScript庫課堂問答視知識總結(jié)結(jié)jQuery的概念jQuery的優(yōu)點(diǎn)要點(diǎn)提示jQuery概述掌握程度：理解1.3 jQuery概述視結(jié)1、 jQuery的概念jQuery是javascript實(shí)現(xiàn)的一個庫。設(shè)計宗旨是”Write Less，Do More”,即寫的少，做的多。2、jQuery的優(yōu)點(diǎn)跨瀏覽器兼容鏈?zhǔn)骄幊?，隱式迭

3、代簡化DOM操作，支持事件、樣式、動畫支持插件擴(kuò)展開發(fā)開源免費(fèi)1.3 jQuery概述課堂問答視知識總結(jié)結(jié)jQuery的下載及版本介紹jQuery的體驗(yàn)jQuery中的入口函數(shù)要點(diǎn)提示jQuery的使用及入口函數(shù)掌握程度：了解1.4 jQuery的使用及入口函數(shù)視結(jié)jQuery中的入口函數(shù)有哪些 第一種： $(function () . / 此處是頁面 DOM 加載完成的入口 ) ; 第二種： $(document).ready(function() . / 此處是頁面DOM加載完成的入口); 注意：$可換成jQuery。等著 DOM 結(jié)構(gòu)渲染完畢即可執(zhí)行內(nèi)部代碼，不必等到所有外部資源加載完成

4、，jQuery 幫我們完成了封裝。相當(dāng)于原生 js 中的 DOMContentLoaded。不同于原生 js 中的 load 事件是等頁面文檔、外部的 js 文件、css文件、圖片加載完畢才執(zhí)行內(nèi)部代碼。4. 更推薦使用第一種方式。1.4 jQuery的使用及入口函數(shù)課堂問答視知識總結(jié)結(jié)了解jQuery中的頂級對象$要點(diǎn)提示jQuery中的頂級對象$掌握程度：了解1.5 jQuery中的頂級對象$視結(jié)jQuery中的$和jQuery怎么理解 jQuery中$和jQuery是一回事兒，是jQuery中的頂級對象（本質(zhì)是一個方法）?？梢杂?= 判斷，也可以查看源碼，兩個符號完全相同1.5 jQue

5、ry中的頂級對象$課堂問答視知識總結(jié)結(jié)知道jQuery對象和DOM對象的不同要點(diǎn)提示DOM對象和jQuery對象掌握程度：掌握1.6 DOM對象和jQuery對象視知道jQuery對象和DOM對象的相互轉(zhuǎn)換要點(diǎn)提示DOM對象和jQuery對象相互轉(zhuǎn)換掌握程度：掌握1.7 DOM對象和jQuery對象相互轉(zhuǎn)換答視結(jié)1、jQuery對象如何轉(zhuǎn)換成DOM對象？2、DOM對象如何轉(zhuǎn)換成jQuery對象（重點(diǎn)）？1.7 DOM對象和jQuery對象相互轉(zhuǎn)換結(jié)課堂問答答視課堂問答1.7 DOM對象和jQuery對象相互轉(zhuǎn)換課堂問答視知識總結(jié)答結(jié)1、jQuery對象如何轉(zhuǎn)換成DOM對象？jQuery對象索引

6、值jQuery對象.get(索引值)2、DOM對象如何轉(zhuǎn)換成jQuery對象（重點(diǎn)）？$(DOM對象)jQuery常用API功能介紹要點(diǎn)提示jQuery常用API導(dǎo)讀掌握程度：應(yīng)用2.1 jQuery常用API導(dǎo)讀視結(jié)視學(xué)會使用jQuery的基本選擇器學(xué)則標(biāo)簽學(xué)會使用jQuery的層級選擇器學(xué)則標(biāo)簽要點(diǎn)提示jQuery基本和層級選擇器掌握程度：應(yīng)用2.2 jQuery基本和層級選擇器視結(jié)視1.基礎(chǔ)選擇器重點(diǎn)使用：id，類名，標(biāo)簽名。2.層級選擇器中后代和子代全部掌握。3.學(xué)會混合使用，獲取指定元素。2.2 jQuery基本和層級選擇器課堂問答視知識總結(jié)結(jié)知道jQuery中的隱式迭代要點(diǎn)提示掌握

7、程度：了解2.3 隱式迭代視隱式迭代掌握篩選選擇器中的獲取元素方法要點(diǎn)提示篩選選擇器掌握程度：應(yīng)用2.4 篩選選擇器視結(jié)視2.4 篩選選擇器課堂問答視知識總結(jié)結(jié)學(xué)會使用篩選方法獲取父子元素要點(diǎn)提示選取父子元素掌握程度：應(yīng)用2.5 選取父子元素視結(jié)視2.5 選取父子元素課堂問答視知識總結(jié)結(jié)完成下拉菜單案例要點(diǎn)提示案例：新浪下拉菜單掌握程度：應(yīng)用2.6 案例：新浪下拉菜單視練練習(xí)jQuery實(shí)現(xiàn)新浪下拉菜單提示鼠標(biāo)進(jìn)入指定元素，顯示他的子元素鼠標(biāo)移出指定元素，隱藏他的子元素5分鐘2.6 案例：新浪下拉菜單案例：新浪下拉菜單視練能夠使用其他的篩選方法要點(diǎn)提示jQuery其他篩選方法掌握程度：應(yīng)用2.

8、7 jQuery其他篩選方法視結(jié)視2.7 jQuery其他篩選方法課堂問答視知識總結(jié)結(jié)能夠應(yīng)用jQuery中的排他思想解決問題要點(diǎn)提示排他思想掌握程度：應(yīng)用2.8 排他思想視完成淘寶精品服飾要點(diǎn)提示案例：淘寶精品服飾掌握程度：應(yīng)用2.9 案例：淘寶精品服飾視練練習(xí)jQuery實(shí)現(xiàn)淘寶精品服飾提示鼠標(biāo)進(jìn)入指定li標(biāo)簽觸動事件獲取當(dāng)前l(fā)i在父盒子中的索引值讓中間對應(yīng)索引值的div顯示，其他兄弟隱藏5分鐘2.9 案例：淘寶精品服飾案例：淘寶精品服飾視練上午復(fù)習(xí) 將DOM對象轉(zhuǎn)換為jQuery對象的方法是：硬件 jQuery的兩大特點(diǎn)是：硬件和硬件 jQuery中選擇器分為哪三種硬件、硬件、硬件正文-

9、單擊此處標(biāo)題樣式微軟雅黑24號上午復(fù)習(xí) 將DOM對象轉(zhuǎn)換為jQuery對象的方法是：$() jQuery的兩大特點(diǎn)是：連式編程 和 隱式迭代 jQuery中選擇器分為哪三種：基礎(chǔ)選擇器、層級選擇器、篩選選擇器正文-單擊此處標(biāo)題樣式微軟雅黑24號能夠應(yīng)用鏈?zhǔn)骄幊掏瓿?jQuery 編寫代碼要點(diǎn)提示連式編程掌握程度：應(yīng)用2.10 連式編程視利用css()獲取屬性值利用css()設(shè)置屬性值要點(diǎn)提示jQuery修改樣式css方法掌握程度：應(yīng)用3.1 jQuery修改樣式css方法視結(jié)視3.1 jQuery修改樣式css方法課堂問答視知識總結(jié)結(jié)1.獲取值var strColor = $(this).cs

10、s(color);2. 賦值$(this).css(color, red);3. 賦值$(this).css( color:white,font-size:20px);能夠使用jQuery中提供的方法添加類，刪除類，切換類要點(diǎn)提示jQuery修改樣式操作類掌握程度：應(yīng)用3.2 jQuery修改樣式操作類視結(jié)視3.2 jQuery修改樣式操作類課堂問答視知識總結(jié)結(jié)1.添加類$(div).addClass(current);2. 刪除類$(div).removeClass(current);3.切換類$(div).toggleClass(current);完成tab欄切換案例要點(diǎn)提示案例：tab欄

11、切換掌握程度：應(yīng)用3.3 案例：tab欄切換答視練1、tab欄切換案例使用css()能否實(shí)現(xiàn)？2、為什么要用類操作的方法？3.3 案例：tab欄切換課堂問答練答視課堂問答練習(xí)完成tab欄切換案例提示鼠標(biāo)進(jìn)入指定li標(biāo)簽觸動事件獲取當(dāng)前l(fā)i在父盒子中的索引值指定索引值的元素顯示，其他兄弟隱藏10分鐘3.3 案例：tab欄切換tab欄切換鞏固練習(xí)視答練了解jQuery中的類操作不同于className普通操作要點(diǎn)提示掌握程度：了解3.4 jQuery中類操作和className的區(qū)別視jQuery中類操作和className的區(qū)別學(xué)會使用jQuery中的顯示隱藏完成特效要點(diǎn)提示掌握程度：應(yīng)用4.1

12、 jQuery中的顯示和隱藏效果視jQuery中的顯示和隱藏效果學(xué)會使用jQuery中的滑入滑出完成特效能夠使用hover()事件完成特定需求要點(diǎn)提示jQuery滑動效果以及事件切換掌握程度：應(yīng)用4.2 jQuery滑動效果以及事件切換視結(jié)視4.2 jQuery滑動效果以及事件切換課堂問答視知識總結(jié)結(jié)1.滑入$(div).slideDown();2. 滑出$(div).slideUp();3.滑出滑出切換$(div).slideToggle();學(xué)會使用jQuery中stop()阻止動畫排隊利用stop()去除新浪下拉菜單bug要點(diǎn)提示掌握程度：應(yīng)用4.3 jQuery停止動畫排隊stop()

13、視jQuery停止動畫排隊stop()學(xué)會使用jQuery淡入淡出動畫完成指定特效能夠?qū)懗鐾怀鲲@示案例要點(diǎn)提示jQuery淡入淡出以及突出顯示案例掌握程度：應(yīng)用4.4 jQuery淡入淡出以及突出顯示案例視練練習(xí)完成突出顯示案例提示鼠標(biāo)進(jìn)入li，觸動事件當(dāng)前l(fā)i透明度設(shè)置為1，其他兄弟設(shè)置為0.410分鐘4.4 jQuery淡入淡出以及突出顯示案例突出顯示案例視練學(xué)習(xí)使用jQuery中自定義動畫完成指定特效要點(diǎn)提示jQuery自定義動畫animate方法掌握程度：應(yīng)用4.5 jQuery自定義動畫animate方法答視1、說出animate()中四個參數(shù)的具體功能。4.5 jQuery自定義動

14、畫animate方法課堂問答答視課堂問答王者榮耀手風(fēng)琴案例（css部分）要點(diǎn)提示案例：王者榮耀手風(fēng)琴(上)掌握程度：應(yīng)用4.6 案例：王者榮耀手風(fēng)琴視練完成王者榮耀手風(fēng)琴案例要點(diǎn)提示案例：王者榮耀手風(fēng)琴(下)掌握程度：應(yīng)用4.6 案例：王者榮耀手風(fēng)琴視練練習(xí)完成王者榮耀手風(fēng)琴案例提示完成樣式布局借助jQuery實(shí)現(xiàn)手風(fēng)琴特效10分鐘4.6 案例：王者榮耀手風(fēng)琴案例：王者榮耀手風(fēng)琴視練今日復(fù)習(xí) 將DOM對象轉(zhuǎn)換為jQuery對象的方法是：硬件 jQuery的兩大特點(diǎn)是： 硬件 和 硬件 jQuery中選擇器分為哪三種:硬件、硬件、硬件 jQuery中常見的類操作方法：硬件系、軟件系、軟件系 jQuery中阻止動畫排隊的方法是：硬件系統(tǒng) jQuery中滑入滑出效果方法：硬件系統(tǒng)與軟件系統(tǒng)正文-單擊此處標(biāo)題樣式微軟雅黑24號今日復(fù)習(xí) 將DOM對象轉(zhuǎn)換為jQuery對象的方法是：$() jQuery的兩大特點(diǎn)是：鏈?zhǔn)骄幊毯碗[式迭代 jQuery中選擇器分為哪三種: 基礎(chǔ)選擇器、層級選擇器、過濾選擇器 jQuery中常見的類操作方法：addClass()、removeClass()、toggleCla