jQuery網(wǎng)頁(yè)特效設(shè)計(jì)基礎(chǔ)教程（慕課版）（第2版）-教案 第9、10章 常用的第三方j(luò)Query插件、jQuery性能優(yōu)化與技巧_第1頁(yè)
jQuery網(wǎng)頁(yè)特效設(shè)計(jì)基礎(chǔ)教程（慕課版）（第2版）-教案 第9、10章 常用的第三方j(luò)Query插件、jQuery性能優(yōu)化與技巧_第2頁(yè)
jQuery網(wǎng)頁(yè)特效設(shè)計(jì)基礎(chǔ)教程（慕課版）（第2版）-教案 第9、10章 常用的第三方j(luò)Query插件、jQuery性能優(yōu)化與技巧_第3頁(yè)
jQuery網(wǎng)頁(yè)特效設(shè)計(jì)基礎(chǔ)教程（慕課版）（第2版）-教案 第9、10章 常用的第三方j(luò)Query插件、jQuery性能優(yōu)化與技巧_第4頁(yè)
jQuery網(wǎng)頁(yè)特效設(shè)計(jì)基礎(chǔ)教程（慕課版）（第2版）-教案 第9、10章 常用的第三方j(luò)Query插件、jQuery性能優(yōu)化與技巧_第5頁(yè)
已閱讀5頁(yè)，還剩5頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

PAGE1PAGE第9章常用的第三方j(luò)Query插件課程名稱jQuery網(wǎng)頁(yè)特效設(shè)計(jì)基礎(chǔ)教程項(xiàng)目名稱常用的第三方j(luò)Query插件任務(wù)名稱常用的第三方j(luò)Query插件課時(shí)3項(xiàng)目性質(zhì)□演示性□驗(yàn)證性□設(shè)計(jì)性√綜合性授課班級(jí)授課日期授課地點(diǎn)教學(xué)目標(biāo)知識(shí)目標(biāo)1.了解什么是jQuery插件。2.了解常用的jQuery插件。3.了解如何調(diào)用第三方j(luò)Query插件。4.掌握常用jQuery插件的使用。能力目標(biāo)1.能夠應(yīng)用第三方j(luò)Query插件。2.能夠了解第三方j(luò)Query插件如何被調(diào)用。素質(zhì)目標(biāo)1.培養(yǎng)學(xué)生自主學(xué)習(xí)、舉一反三的能力。2.培養(yǎng)學(xué)生快速應(yīng)用第三方庫(kù)的能力。教學(xué)內(nèi)容1.任務(wù)描述2.任務(wù)展示與實(shí)現(xiàn)（1）使用uploadify、zTree插件進(jìn)行操作（2）使用NivoSlider、Pagination、jQZoom插件進(jìn)行操作（2）學(xué)生動(dòng)手操作3.教師講解本任務(wù)涉及的知識(shí)點(diǎn)4.任務(wù)小結(jié)教學(xué)重點(diǎn)1.在網(wǎng)頁(yè)中使用第三方j(luò)Query插件的操作方法2.編寫jQuery代碼教學(xué)難點(diǎn)1.在網(wǎng)頁(yè)中使用第三方j(luò)Query插件教學(xué)準(zhǔn)備1.裝有jQuery的電腦2.教學(xué)課件PPT3.教材：《jQuery網(wǎng)頁(yè)特效設(shè)計(jì)基礎(chǔ)教程（慕課版）》劉剛?cè)嗣襦]電出版社作業(yè)設(shè)計(jì)1．使用ColorPicker插件制作顏色選擇器教學(xué)過(guò)程教學(xué)內(nèi)容與過(guò)程（教學(xué)內(nèi)容、教學(xué)方法、組織形式、教學(xué)手段）做好課前“5分鐘”教學(xué)管理（多媒體、實(shí)訓(xùn)室），做好上課前的各項(xiàng)準(zhǔn)備工作（打開電腦、打開課件、打開軟件、打開U盤中的素材位置、打開授課計(jì)劃、教案等），吸引學(xué)生注意力?！菊n前說(shuō)明】本章主要介紹了jQuery插件的概念、調(diào)用第三方插件的方法、常用的第三方插件等知識(shí)點(diǎn)。其中重點(diǎn)介紹了常用的第三方插件，包括uploadify、zTree、NivoSlider、Pagination、jQZoom插件等?！灸康摹渴箤W(xué)生從了解本單元的學(xué)習(xí)目標(biāo)、學(xué)習(xí)重點(diǎn)、考評(píng)方式等方面明確學(xué)習(xí)本單元知識(shí)的要求和目標(biāo)。一、jQuery插件概述jQuery插件是一種用來(lái)提高網(wǎng)站開發(fā)效率的、已經(jīng)封裝好的JavaScript腳本庫(kù)，由于jQuery的開源特性，現(xiàn)在有很多第三方的jQuery插件可供開發(fā)人員直接使用。jQuery插件的主要特點(diǎn)如下。提高Web網(wǎng)站的開發(fā)效率。高度集成，使用方便。根據(jù)自身需求進(jìn)行修改，增強(qiáng)擴(kuò)展性。界面美觀。二、常用的jQuery第三方插件通過(guò)多個(gè)案例講解jQuery第三方插件的操作方法。案例：1.本實(shí)例使用jQZoom插件制作一個(gè)圖片放大鏡，運(yùn)行程序，當(dāng)鼠標(biāo)指針在圖片上移動(dòng)時(shí)，圖片的局部會(huì)以放大形式顯示在網(wǎng)頁(yè)的右側(cè)空白區(qū)域。程序開發(fā)步驟如下。（1）新建一個(gè)index.html文件，將其放到9-5文件夾中。（2）將jQZoom插件的css文件夾、js文件夾復(fù)制到9-5文件夾中。（3）使用Dreamweaver打開index.html文件，該文件中首先引入jQuery文件、jQZoom插件及其CSS樣式文件；然后，定義一個(gè)JavaScript函數(shù)，使用jQZoom顯示放大效果；最后，在<body></body>區(qū)域中加入一個(gè)DIV，在該DIV中，分別使用<img>標(biāo)記和<a>標(biāo)記設(shè)置要顯示的原圖和局部放大效果圖。代碼如下：<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>jQZoom插件的使用</title><scriptsrc="js/jquery-1.6.js"type="text/javascript"></script><scriptsrc="js/jquery.jqzoom-core.js"type="text/javascript"></script><linkrel="stylesheet"href="css/jquery.jqzoom.css"type="text/css"/><scripttype="text/javascript">$(function(){ $(".jqzoom").jqzoom( {zoomWidth:200,zoomHeight:200 });});</script></head><body><div> <ahref="test.JPG"class="jqzoom"title="放大效果"><imgsrc="test.JPG"style="border:1pxsolid#666;"/> </a></div></body></html>綜合實(shí)例：使用ColorPicker插件制作顏色選擇器在使用QQ聊天時(shí)，如果想設(shè)置字體顏色，可以打開QQ聊天對(duì)話框中的設(shè)置字體顏色對(duì)話框，在這個(gè)對(duì)話框中設(shè)置顏色的界面就是顏色拾取器。本實(shí)例使用第三方的ColorPicker插件制作了一個(gè)簡(jiǎn)單的顏色拾取器。通過(guò)學(xué)習(xí)，學(xué)生能夠掌握jQuery插件的基本概念、調(diào)用方式、jQuery的常用第三方插件的應(yīng)用方法。本節(jié)課主要運(yùn)用案例教學(xué)法，通過(guò)對(duì)jQuery插件的深入理解，掌握jQuery插件的特點(diǎn)及優(yōu)勢(shì)，深入探討jQuery插件的編程方法，通過(guò)實(shí)例的方法加強(qiáng)對(duì)jQuery插件的掌握，達(dá)到能夠獨(dú)立熟練運(yùn)用jQuery插件來(lái)解決實(shí)際問(wèn)題的能力。教學(xué)評(píng)價(jià)方式以小組為單位，以完成案例的質(zhì)量為評(píng)價(jià)標(biāo)準(zhǔn)，形成任務(wù)驅(qū)動(dòng)，小組協(xié)作，質(zhì)量與速度并存的課堂評(píng)價(jià)方式，促進(jìn)學(xué)生的自主、創(chuàng)新學(xué)習(xí)的方式。第10章jQuery性能優(yōu)化與技巧課程名稱jQuery網(wǎng)頁(yè)特效設(shè)計(jì)基礎(chǔ)教程項(xiàng)目名稱jQuery性能優(yōu)化與技巧任務(wù)名稱jQuery性能優(yōu)化與技巧課時(shí)2項(xiàng)目性質(zhì)□演示性□驗(yàn)證性□設(shè)計(jì)性√綜合性授課班級(jí)授課日期授課地點(diǎn)教學(xué)目標(biāo)知識(shí)目標(biāo)1.掌握jQuery性能優(yōu)化的方法。2.掌握jQuery常用技巧的使用。能力目標(biāo)1.能夠進(jìn)行jQuery性能優(yōu)化的能力。2.能夠應(yīng)用jQuery常用技巧的能力。素質(zhì)目標(biāo)1.培養(yǎng)學(xué)生持續(xù)改進(jìn)的能力。2.培養(yǎng)學(xué)生靈活應(yīng)用的能力。教學(xué)內(nèi)容1.任務(wù)描述2.任務(wù)展示與實(shí)現(xiàn)（1）練習(xí)使用常用的jQuery性能優(yōu)化技術(shù)（2）聯(lián)系使用jQuery的常用技巧（2）學(xué)生動(dòng)手操作3.教師講解本任務(wù)涉及的知識(shí)點(diǎn)4.任務(wù)小結(jié)教學(xué)重點(diǎn)1.常用的jQuery性能優(yōu)化技術(shù)2.jQuery的常用技巧3.編寫jQuery代碼教學(xué)難點(diǎn)1.jQuery的常用技巧教學(xué)準(zhǔn)備1.裝有jQuery的電腦2.教學(xué)課件PPT3.教材：《jQuery網(wǎng)頁(yè)特效設(shè)計(jì)基礎(chǔ)教程（慕課版）》劉剛?cè)嗣襦]電出版社作業(yè)設(shè)計(jì)1．使用jQuery實(shí)現(xiàn)圖片的預(yù)加載2.檢測(cè)瀏覽器是否為IE10瀏覽器3.切換ID與class教學(xué)過(guò)程教學(xué)內(nèi)容與過(guò)程（教學(xué)內(nèi)容、教學(xué)方法、組織形式、教學(xué)手段）做好課前“5分鐘”教學(xué)管理（多媒體、實(shí)訓(xùn)室），做好上課前的各項(xiàng)準(zhǔn)備工作（打開電腦、打開課件、打開軟件、打開U盤中的素材位置、打開授課計(jì)劃、教案等），吸引學(xué)生注意力?！菊n前說(shuō)明】本章主要介紹了jQuery使用過(guò)程中常用的性能優(yōu)化及技巧。使開發(fā)人員有效利用jQuery使網(wǎng)站達(dá)到最佳性能?！灸康摹渴箤W(xué)生從了解本單元的學(xué)習(xí)目標(biāo)、學(xué)習(xí)重點(diǎn)、考評(píng)方式等方面明確學(xué)習(xí)本單元知識(shí)的要求和目標(biāo)。一、關(guān)鍵知識(shí)點(diǎn)（1）定義jQuery變量時(shí)，應(yīng)添加一個(gè)$符號(hào)到變量前。（2）有必要時(shí)可以在jQuery代碼中使用原生的JavaScript函數(shù)，這樣能獲得更好的性能。（3）經(jīng)常標(biāo)準(zhǔn)化jQuery代碼，可以查詢哪個(gè)比較慢，然后替換它?？梢杂肍irebug控制臺(tái)，也可以使用jQuery的快捷函數(shù)使測(cè)試變得更容易。（4）如果使用版本比較新的jQuery類庫(kù)，請(qǐng)使用.on，其他任何方法都是最終使用.on來(lái)實(shí)現(xiàn)的。（5）在jQuery中最快的選擇器是ID選擇器，因?yàn)樗苯觼?lái)自于JavaScript的getElementById()方法。（6）jQuery中第二快的選擇器是tag選擇器（如$('head')），因?yàn)樗苯觼?lái)自于原生的JavaScript方法getElementsByTagName()。（7）可以擴(kuò)展jQuery的$.expr[':']對(duì)象，編寫適合自己的選擇器。（8）在jQuery中，使用內(nèi)部函數(shù)data()存儲(chǔ)信息，性能更好。（9）通過(guò)為HTML添加“JS”的class，可以啟用JavaScript，而只有當(dāng)JavaScript啟用時(shí)，才可以將整個(gè)HTML內(nèi)容隱藏起來(lái)，用jQuery來(lái)實(shí)現(xiàn)指定的功能（例如：收起某些面板或當(dāng)用戶單擊它們時(shí)展開）。（10）通過(guò)將jQuery函數(shù)綁定到$(window).load事件的方法，可以減少頁(yè)面載入時(shí)的CPU使用率，它會(huì)在所有的html（包括iframe）被下載完成后執(zhí)行。（11）養(yǎng)成將jQuery對(duì)象緩存到變量的習(xí)慣。（12）在jQuery中應(yīng)該對(duì)直接的DOM操作進(jìn)行限制，遇到這種情況時(shí)，可以首先在內(nèi)存中創(chuàng)建需要的內(nèi)容，然后更新DOM，因?yàn)橹苯拥腄OM操作速度很慢。案例：1.ID與Class之間轉(zhuǎn)換$(document).ready(function(){functioncheckWindowSize(){if($(window).width()>1200){$('body').addClass('large');}else{$('body').removeClass('large');}}$(window).resize(checkWindowSize);});操作元素樣式替換指定元素引用Google主機(jī)上的jQuery類庫(kù)直接給DOM元素添加style標(biāo)簽通過(guò)學(xué)習(xí)，學(xué)生能夠掌握jQuery使用過(guò)程中常用的性能優(yōu)化及技巧。本節(jié)課主要運(yùn)用案例教學(xué)法，通過(guò)對(duì)jQuery使用過(guò)程中

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論