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

下載本文檔

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

文檔簡介

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

溫馨提示

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

最新文檔

評論

0/150

提交評論