javaweb框架部分教案day47-jquery加強(qiáng)案例

1、WEB 前端技術(shù)開場(chǎng)白（ppt 扉頁(yè)說(shuō)的話）：前面咱們學(xué)習(xí)了 Jquery 的基礎(chǔ)內(nèi)容，包含 Jquery 的簡(jiǎn)介，還有選擇器以及對(duì)DOM 節(jié)點(diǎn)的操作，對(duì) Jquery 內(nèi)容進(jìn)行加強(qiáng)，學(xué)下 Jquery 的事件、動(dòng)畫、AJAX，并且通過(guò)案例來(lái)鞏固 Jquery 的學(xué)習(xí)。Jquery 的內(nèi)容呢，如同 JS一樣，需要開發(fā)牢牢掌握，并且十分的精通，UI 開發(fā)是不會(huì)負(fù)責(zé)這方面的事情的，所以，需要認(rèn)真的學(xué)習(xí)，好了，開始的內(nèi)容吧。0.1 課程內(nèi)容：剛才呢也把的內(nèi)容說(shuō)了一下，關(guān)于事件，是語(yǔ)言的基礎(chǔ)，Jquery都是通過(guò)觸發(fā)事件來(lái)操作網(wǎng)頁(yè)的，這樣才能使網(wǎng)頁(yè)動(dòng)起來(lái)，關(guān)于動(dòng)畫是 Jquery的一個(gè)強(qiáng)大的功能，由

2、Jquery 實(shí)現(xiàn)網(wǎng)頁(yè)上的動(dòng)畫效果，能夠提供給用戶良好的交互性。第三個(gè)是關(guān)于 AJAX，這個(gè)是最能體現(xiàn) Jquery 寫的少，做的多的特點(diǎn)， JS 的 AJAX 需要寫大段的代碼，用Jquery 只需要幾行或一行代碼就能實(shí)現(xiàn)，用Jquery 實(shí)現(xiàn) AJAX 也是常用的方式。第四部分就是關(guān)于的案例，通過(guò)案例來(lái)實(shí)現(xiàn)Jquery 能做的一些事情，加強(qiáng)學(xué)習(xí)。0.2 課程目標(biāo)：的內(nèi)容呢，都是重點(diǎn)，今后開發(fā)中前段頁(yè)面會(huì)經(jīng)常使用，對(duì)于面試也是常問(wèn)的一些問(wèn)題，包括事件、動(dòng)畫和 AJAX 都需要牢牢掌握的案例是作業(yè)，需要大家完整的執(zhí)行一遍，OK，開始的課程第一堂課時(shí)長(zhǎng)：50 分鐘內(nèi)容：19_JQuery 事件

3、window.onload 和$(機(jī)制.avi20_JQuery 事件_事件綁定_事件.avi).ready()的區(qū)別 JQuery 完善的事件處理1.1 Jquery 事件的優(yōu)勢(shì)時(shí)長(zhǎng)：20 分鐘1.1.1 開場(chǎng)白學(xué)習(xí)事件前先來(lái)了解一下，JS 自動(dòng)加載中 window.onload 和Jquery 中的自動(dòng)加載有什么區(qū)別，另外勢(shì)。來(lái)看一下，Jquery 在事件的處理上有什么優(yōu)1.1.2名稱：19_JQuery 事件 window.onload 和$(的事件處理機(jī)制.avi長(zhǎng)度：時(shí)長(zhǎng)：19 分 20 秒).ready()的區(qū)別 JQuery 完善1.1.3 總結(jié)與補(bǔ)充無(wú)1.1.4 課堂提問(wèn)與練習(xí)

4、1.window.onload 和$().ready()的區(qū)別？1.1.5 習(xí)題Window.onload 必須等到頁(yè)面所有元素加載完再加載，只能綁定一個(gè)函數(shù)).ready()當(dāng)形成 dom 樹之后就加載，可以綁定多個(gè)函數(shù)，有簡(jiǎn)寫形式$(1.2 事件綁定、事件時(shí)長(zhǎng)：30 分鐘1.2.1 開場(chǎng)白接下來(lái)就來(lái)詳細(xì)的學(xué)下 Jquery 的事件，包括綁定和。一起來(lái)看一下1.2.2名稱：20_JQuery 事件_事件綁定_長(zhǎng)度：26 分 04 秒事件.avi1.2.3 總結(jié)與補(bǔ)充無(wú)1.2.4 課堂提問(wèn)與練習(xí)無(wú)1.2.5 習(xí)題無(wú)第二堂課時(shí)長(zhǎng)：50內(nèi)容：21_JQuery 動(dòng)畫_show 和 hide.avi

5、22_JQuery 動(dòng)畫_animate 的使用_toggle 和 slideToggle.avi 23_JQuery 之 Ajax 操作_demo1-load.avi2.1. show 和 hide時(shí)長(zhǎng)：10 分鐘2.1.1 開場(chǎng)白上節(jié)課學(xué)習(xí)了 Jquery 的事件，這節(jié)課開始學(xué) Jquery 的動(dòng)畫，首先學(xué)習(xí)兩個(gè)簡(jiǎn)單的，show 和 hide，其實(shí)在 JS 中就對(duì)應(yīng)一下。控制 DOM 對(duì)象的 display 屬性，一起來(lái)看2.1.2名稱：21_JQuery 動(dòng)畫_show 和 hide.avi長(zhǎng)度：06 分 22 秒2.3.3 總結(jié)與補(bǔ)充無(wú)2.3.4 課堂提問(wèn)與練習(xí)無(wú)2.3.5 習(xí)題無(wú)2.

6、2. animate、toggle、slideToggle時(shí)長(zhǎng)：15 分鐘2.2.1 開場(chǎng)白繼續(xù)學(xué)習(xí) Jquery 的動(dòng)畫，動(dòng)畫效果在頁(yè)面中運(yùn)用的非常多，運(yùn)用的好的話，能給客戶提供非常好的體驗(yàn)，有的時(shí)候就是這樣，你的代碼寫的再漂亮也是給自己給們看的，真正展示給客戶的效果才是他們想要的。Jquery 的動(dòng)畫就是非常好的一種實(shí)現(xiàn)方式。接下來(lái)學(xué)習(xí)三種動(dòng)畫，非常的有意思。2.2.2名稱：22_JQuery 動(dòng)畫_animate 的使用_toggle 和slideToggle.avi長(zhǎng)度：13 分 00 秒2.2.3 總結(jié)與補(bǔ)充無(wú)2.2.4 課堂提問(wèn)與練習(xí)無(wú)3.1.5 習(xí)題無(wú)2.3AJAX 操作-loa

7、d 方式時(shí)長(zhǎng)：15 分鐘2.3.1 開場(chǎng)白OK，接下來(lái)來(lái)學(xué)習(xí) AJAX 在 Jquery 中的使用，JS 中一大段的代碼，在Jquery 中只需要簡(jiǎn)單的一行就可以實(shí)現(xiàn)，函數(shù)實(shí)現(xiàn)。首先來(lái)看第式，通過(guò) load2.3.2名稱：23_JQuery 之 Ajax 操作_demo1-load.avi長(zhǎng)度：12 分 38 秒2.3.3 總結(jié)與補(bǔ)充無(wú)2.3.4 課堂提問(wèn)與練習(xí)無(wú)2.3.5 習(xí)題無(wú)第三堂課時(shí)長(zhǎng)：50 分鐘內(nèi)容：24_JQuery 之 Ajax 操作_demo2-get 25_JQuery 之 Ajax 操作_demo2-get 26_JQuery 之 Ajax 操作_demo2-gett_字符

8、串方式的 Aja t_XML 方式的 Aja t_JSON 方式的Aja互.avi互.avi互.avi3.1.AJAX 操作-get、t 方式-字符串交互時(shí)長(zhǎng)：18 分鐘3.1.1 開場(chǎng)白接下來(lái)學(xué)習(xí) AJAX 的 Get 和t 方式進(jìn)行交互，首先交互的數(shù)據(jù)用字符串的形式，一起來(lái)學(xué)下。3.1.2名稱：24_JQuery 之 Ajax 操作_demo2-gett_字符串方式的 Aja互.avi長(zhǎng)度：15 分 28 秒3.1.3 總結(jié)與補(bǔ)充無(wú)3.1.4 課堂提問(wèn)與練習(xí)無(wú)3.1.5 習(xí)題無(wú)3.2AJAX 操作-get、t 方式-XML 交互時(shí)長(zhǎng)：10 分鐘3.2.1 開場(chǎng)白接下來(lái)學(xué)下 get 和t 方

9、式中通過(guò) XML 形式進(jìn)行數(shù)據(jù)交互。3.2.2名稱：25_JQuery 之 Ajax 操作_demo2-get長(zhǎng)度：08 分 57 秒t_XML 方式的 Aja互.avi3.2.3 總結(jié)與補(bǔ)充無(wú)3.2.4 課堂提問(wèn)與練習(xí)無(wú)3.2.5 習(xí)題無(wú)3.3 AJAX 操作-get、t 方式-JSON 交互時(shí)長(zhǎng)：10 分鐘3.2.1 開場(chǎng)白Get 和t 方式中還可以通過(guò) JSON 數(shù)據(jù)的形式進(jìn)行交互，這種方式在很多開發(fā)當(dāng)中比較常用，數(shù)據(jù)結(jié)構(gòu)簡(jiǎn)單，直接就可以下，非常方便，一起來(lái)學(xué)3.2.2名稱：26_JQuery 之 Ajax 操作_demo2-get長(zhǎng)度：07 分 31 秒t_JSON 方式的 Aja互.

10、avi3.2.3 總結(jié)與補(bǔ)充無(wú)3.2.4 課堂提問(wèn)與練習(xí)無(wú)3.2.5 習(xí)題無(wú)第四堂課時(shí)長(zhǎng)：50 分鐘內(nèi)容：27_JQuery 之 Ajax 操作_demo3-ajax.avi 28_JQuery 插件開發(fā).avi29_JQuery 常用 API 拓展.avi4.1 AJAX 操作-AJAX 方式時(shí)長(zhǎng) 10 分鐘4.1.1 開場(chǎng)白AJA互除了 load、get 和t，還有 ajax 的方式，可以通過(guò) ajax 的函數(shù)進(jìn)行交互，結(jié)構(gòu)稍微的不同，來(lái)一起學(xué)下4.1.2名稱：27_JQuery 之 Ajax 操作_demo3-ajax.avi長(zhǎng)度：06 分 48 秒4.1.3 總結(jié)與補(bǔ)充無(wú)4.1.4 課

11、堂提問(wèn)與練習(xí)無(wú)4.1.5 習(xí)題無(wú)4.2 Jquery 插件開發(fā)時(shí)長(zhǎng) 10 分鐘4.2.1 開場(chǎng)白Jquery 中可以通過(guò)自定義插件來(lái)增強(qiáng) Jquery 的功能，下 Jquery 的插件開發(fā)。接下來(lái)就學(xué)4.2.2名稱：28_JQuery 插件開發(fā).avi長(zhǎng)度：08 分 15 秒4.2.3 總結(jié)與補(bǔ)充無(wú)4.2.4 課堂提問(wèn)與練習(xí)無(wú)4.2.5 習(xí)題無(wú)4.3 Jquery 常用 API 拓展時(shí)長(zhǎng) 15 分鐘4.3.1 開場(chǎng)白JS 中并沒(méi)有多少 API 方法的提供，在Jquery 中有很多 API 的方法，接下。下來(lái)學(xué)些常用的 API 方法，方便在開發(fā)當(dāng)中使用一起來(lái)學(xué)4.3.2名稱：29_JQuery

12、常用 API 拓展.avi長(zhǎng)度：13 分 27 秒4.3.3 總結(jié)與補(bǔ)充無(wú)4.3.4 課堂提問(wèn)與練習(xí)無(wú)4.3.5 習(xí)題無(wú)第五堂課時(shí)間：50 分鐘內(nèi)容：30_JQuery 案例開發(fā)_表單驗(yàn)證插件的適用.avi31_JQuery 案例開發(fā)_超提示和提示效果.avi32_JQuery 案例開發(fā)_JQuery 實(shí)現(xiàn)全選,反選，全不選.avi 33_JQuery 案例開發(fā)_Tabs 切換的制作.avi5.1 表單驗(yàn)證插件的適用時(shí)長(zhǎng): 20 分鐘5.1.1 開場(chǎng)白接下來(lái)一起來(lái)學(xué)來(lái)使用一下表單驗(yàn)證插件，對(duì)于下表單內(nèi)容的驗(yàn)證非常的實(shí)用，5.1.2名稱：30_JQuery 案例開發(fā)_表單驗(yàn)證插件的適用.avi長(zhǎng)

13、度：17 分 31 秒5.1.3 總結(jié)與補(bǔ)充無(wú)5.1.4 課堂提問(wèn)與練習(xí)無(wú)5.1.5 習(xí)題無(wú)5.2 超提示和提示效果時(shí)長(zhǎng)：15 分鐘5.2.1 開場(chǎng)白接下來(lái)敲的。的案例是對(duì)超提示和提示的一個(gè)效果操作，這些案例需要?jiǎng)邮?.2.2名稱：31_JQuery 案例開發(fā)_超長(zhǎng)度：13 分 47 秒提示和提示效果.avi5.2.3 總結(jié)與補(bǔ)充無(wú)5.2.4 課堂提問(wèn)與練習(xí)無(wú)5.2.5 習(xí)題無(wú)5.3Jquery 實(shí)現(xiàn)全選、反選、全不選時(shí)長(zhǎng)：10 分鐘5.3.1 開場(chǎng)白通過(guò) Jquery 的基礎(chǔ)知道 Jquery 的選擇器非常強(qiáng)大，各個(gè)層級(jí)的對(duì)象非常方便就能找到，那么接下來(lái)來(lái)實(shí)現(xiàn)一下對(duì)對(duì)象的全選，反選、全不選的操作。5.3.2名稱：32_JQuery 案例開發(fā)_JQuery 實(shí)現(xiàn)全選,反選，全不選.avi長(zhǎng)度：03 分