《網(wǎng)站前端技術》（梁玲）621-7 教案 第25課 JQuery常用函數(shù)（二）_第1頁
《網(wǎng)站前端技術》（梁玲）621-7 教案 第25課 JQuery常用函數(shù)（二）_第2頁
《網(wǎng)站前端技術》（梁玲）621-7 教案 第25課 JQuery常用函數(shù)（二）_第3頁
《網(wǎng)站前端技術》（梁玲）621-7 教案 第25課 JQuery常用函數(shù)（二）_第4頁
《網(wǎng)站前端技術》（梁玲）621-7 教案 第25課 JQuery常用函數(shù)（二）_第5頁
已閱讀5頁，還剩4頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

PAGE4PAGE4PAGE3PAGE3PAGE3PAGE3

課題第25課JQuery常用函數(shù)（二）課時2課時（90min）教學目標知識技能目標：（1）掌握JQuery刪除、查找、克隆元素（2）熟悉JQuery常用事件及典型案例素質目標：（1）掌握JQuery的基本使用方法，加強學生的網(wǎng)頁設計能力（2）制作輪播圖，鍛煉學生的實踐能力，培養(yǎng)學生的探究精神教學重難點教學重點：JQuery刪除、查找及克隆元素，JQuery常用事件及典型案例教學難點：制作輪播圖教學方法問答法、討論法、講授法、實踐練習法教學用具電腦、投影儀、多媒體課件、教材、文旌課堂APP教學設計第1節(jié)課：→→→傳授新知（30min）→頭腦風暴（8min）第2節(jié)課：→傳授新知（10min）→綜合案例（25min）→課堂小結（3min）→作業(yè)布置（2min）教學過程主要教學內容及步驟設計意圖第一節(jié)課課前任務【教師】布置課前任務，和學生負責人取得聯(lián)系，讓其提醒同學通過文旌課堂APP或其他學習軟件，完成課前任務請大家了解JQuery刪除、查找及克隆元素的相關內容?！緦W生】完成課前任務通過課前任務，使學生了解本次課的主要內容，增加學生的學習興趣考勤

（2min）【教師】使用文旌課堂APP進行簽到【學生】按照老師要求簽到培養(yǎng)學生的組織紀律性，掌握學生的出勤情況問題導入（5min）【教師】提出以下問題在JQuery中可以對元素進行哪些操作？【學生】思考、舉手回答【教師】通過學生的回答引入要講的知識通過問題導入的方法，引導學生主動思考，激發(fā)學生的學習興趣傳授新知

（30min）5.4JQuery刪除、查找及克隆元素【教師】講解JQuery刪除、查找及克隆元素的相關內容5.4.1刪除元素remove()在JQuery中，常使用remove()刪除元素，其語法格式如下：元素對象.remove();【示例5-4-1】將【示例5-2-1】中<script>標簽修改為如下代碼：<script> $(function(){ varspan=$("span"); span.remove(); })</script>【教師】組織學生分組上機完成上面的任務，并在各組中挑選一位學生進行演示，演示完成后教師進行點評【學生】聆聽、上機操作、演示效果：span元素的內容被刪除。5.4.2查找父元素parent()在JQuery中，常使用parent()查找父元素，其語法格式如下：元素對象.parent();【示例5-4-2】將【示例5-4-1】中<script>標簽修改為如下代碼：<script> $(function(){ varspan=$("span"); alert(span.parent().html()); })</script>【教師】組織學生分組上機完成上面的任務，并在各組中挑選一位學生進行演示，演示完成后教師進行點評【學生】聆聽、上機操作、演示效果：彈出警告框，顯示span元素父元素的HTML內容，即“<span>我的中國心</span>”。5.4.3查找子元素find()在JQuery中，常使用find()查找子元素，其語法格式如下：元素對象.find();【示例5-4-3】將【示例5-4-1】中<script>標簽修改為如下代碼：<script> $(function(){ varbox=$("#box"); box.find("span").html("我的愛國心"); })</script>【教師】組織學生分組上機完成上面的任務，并在各組中挑選一位學生進行演示，演示完成后教師進行點評【學生】聆聽、上機操作、演示效果：5.4.4克隆元素clone()和追加元素appendTo()、append()在JQuery中含有一些方法可以克隆和追加元素。clone()用于克隆指定的元素對象，其語法格式如下：元素對象.clone();【提示】克隆元素之后還必須追加元素才能讓克隆出來的元素出現(xiàn)在頁面流中。appendTo()能夠將一個元素對象作為子元素追加到另一個元素對象中，其語法格式如下：元素對象1.appendTo(元素對象2);其中，元素對象1作為子元素被追加到元素對象2中。append()能夠在一個元素對象中追加一個子元素，其語法格式如下：元素對象1.append(元素對象2);其中，元素對象2作為子元素被追加到元素對象1中?！臼纠?-4-4】將【示例5-4-3】中<script>標簽修改為如下代碼：<script> $(function(){ varspan=$("span:eq(0)"); span.clone().appendTo("#box").html("我的愛國心"); })</script>【教師】組織學生分組上機完成上面的任務，并在各組中挑選一位學生進行演示，演示完成后教師進行點評【學生】聆聽、上機操作、演示效果：復制span元素并追加到id屬性值為box的元素內部末尾，將其中的文本設置為“我的愛國心”，即顯示為“我的中國心我的愛國心”?！緦W生】聆聽、記錄、理解5.5JQuery常用事件及典型案例【教師】講解JQuery常用事件的語法格式及典型案例JQuery有很多事件與JavaScript相匹配，下面介紹幾種常用的DOM元素事件和窗口監(jiān)聽事件。常用的DOM元素事件。使用DOM元素事件的語法格式如下：元素對象.事件名稱(function(){事件觸發(fā)行為});【課堂互動】?【教師】提問常用的DOM元素事件有哪些？?【學生】聆聽、思考、回答其中，常用的DOM元素事件有鼠標單擊事件click()、鼠標移至事件mouseover()、鼠標移出事件mouseout()、獲取焦點事件focus()、失去焦點事件blur()等。常用的窗口監(jiān)聽事件。使用窗口監(jiān)聽事件的語法格式如下：$(window).事件名稱(function(){事件觸發(fā)行為});其中，常用的窗口監(jiān)聽事件有窗口滾動事件scrollTop()、窗口尺寸變化事件resize()等。5.5.1案例——選項卡效果【場景描述】選項卡效果應用廣泛，在許多網(wǎng)頁中都能看到它的影子，它能夠將同層級的內容折疊在一起，使用更小的頁面空間展示更多的內容。【教師】ppt展示“選項卡交互前后效果”圖片（詳見教材），并講解【思路分析】（1）設置所有的選項卡元素為同一個類名，所有的內容元素為另一個相同的類名。（2）默認凸顯第一個選項卡及相應內容。（3）在單擊其中一個選項卡時，獲取當前選項卡在該類元素中的下標index。同時，顯示第index個內容元素并凸顯第index選項卡，隱藏其他內容元素?！緦崿F(xiàn)步驟】1編輯HTML文檔<body>標簽的內容，代碼如下：1<body> <divclass="title">標題一</div> <divclass="title">標題二</div> <divclass="title">標題三</div> <divclass="title">標題四</div> <divclass="content">內容一</div> <divclass="content">內容二</div> <divclass="content">內容三</div> <divclass="content">內容四</div> </body>【提示】注意引入JQuery函數(shù)庫。2設置選項卡元素與內容元素的基本樣式。23在相關聯(lián)的JS文件中輸入如下代碼：3$(function(){ $(".content").hide(); $(".content:eq(0)").show(); $(".title:eq(0)").css({ "background":"#B91720" }); $(".title").click(function(){ varindex=$(this).index(".title"); $(".content").hide(); $(".content:eq("+index+")").show(); $(".title").css({ "background":"blue" }); $(".title:eq("+index+")").css({ "background":"#B91720" }); })})【實現(xiàn)效果】頁面加載后，顯示“內容一”面板，單擊“標題二”選項卡，顯示“內容二”面板，依次類推。5.5.2案例——自動顯示與隱藏的返回頂部按鈕【場景描述】許多網(wǎng)頁都設有“返回頂部”按鈕，當窗口滾動條向下移動至一定位置時，單擊該按鈕可以快速返回窗口頂部。而在沒有向下移動窗口滾動條時，該按鈕應自動隱藏?！舅悸贩治觥慷x檢測窗口滾動條位置的事件，在窗口滾動條頂端位置大于一定數(shù)值時，顯示“返回頂部”按鈕，當滾動條頂端位置小于一定數(shù)值時，隱藏“返回頂部”按鈕?！緦崿F(xiàn)步驟】1在HTML文檔中添加“返回頂部”按鈕。12通過CSS控制按鈕為固定定位。23在相關聯(lián)的JS文檔中輸入如下代碼：3window.onload=function(){ varbackTop=$("#back-Top"); backTop.hide(); $(window).scroll(function(){ if($(window).scrollTop()>300){ backTop.show(); }else{ backTop.hide(); } }) backTop.click(function(){ $(window).scrollTop(0); })}【實現(xiàn)效果】頁面加載后，顯示頁面內容及窗口滾動條。當向下移動300px后，頁面右下角顯示“返回頂部”按鈕；當滾動條距離頂端位置小于300px時，“返回頂部”按鈕自動隱藏?！緦W生】聆聽、記錄、理解通過教師講解、課堂互動、演示陳總等方式，使學生了解JQuery刪除、查找及克隆元素的方法，熟悉JQuery常用事件及典型案例上機操作（8min）【教師】組織學生分組，圍繞以下問題開展上機在之前創(chuàng)建的course.html文件中，設置警告框，顯示span元素父元素的HTML內容，即“<span>我的課程</span>”，并設置頁面加載后顯示頁面內容及窗口滾動條。思考、上機通過上機操作鞏固所學知識第二節(jié)課問題導入（5min）【教師】提出以下問題如何實現(xiàn)彈性布局的圖片展示？【學生】思考、舉手回答通過提問引導學生思考本節(jié)課內容傳授新知

（10min）5.5.3案例——彈性布局的圖片展示【教師】講解彈性布局的圖片展示案例的具體內容【場景描述】網(wǎng)站在設計時需要考慮適用性，為了能夠讓網(wǎng)站中的圖片清晰地呈現(xiàn)在大多數(shù)電子產品上，程序員會根據(jù)不同的窗口寬度引用不同的圖片源，并且隨著窗口大小的改變動態(tài)適應。【教師】ppt展示“寬屏顯示效果”“窄屏顯示效果”圖片（詳見教材），并講解例如，蘋果官網(wǎng)展示的手機圖片，在寬屏顯示時，顯示為橫向圖片；在窄屏顯示時，顯示為縱向圖片?！舅悸贩治觥渴紫扰袛啻翱诘膶挾?，為該狀態(tài)設置合適的圖片源。當窗口大小每次發(fā)生變化時，都重新判斷窗口寬度，為此狀態(tài)設置合適的圖片源?！緦崿F(xiàn)步驟】1在HTML文檔中添加一個img元素，其src屬性值為空，id屬性值為img1。12在相關的JS文件中輸入以下代碼：2window.onload=function(){ functionresizeShow(){ if($(window).width()>700){ $("img").attr("src","img/iphone1.jpg").css({ "width":"80%" }); }else{ $("img").attr("src","img/iphone2.jpg").css({ "width":"40%" }); } } $(window).resize(function(){ resizeShow(); }) resizeShow();}【實現(xiàn)效果】頁面首次加載后判斷窗口寬度是否大于700px，如果是，則顯示圖片“iphone1.jpg”；如果不是，則顯示圖片“iphone2.jpg”。在改變窗口大小時，隨時判斷窗口寬度是否大于700px，并應用相對應的圖片源。【提示】（1）為方便測試窗口寬度，該案例封裝了尺寸顯示函數(shù)resizeShow。（2）resize()為響應窗口尺寸變化的事件函數(shù)?！緦W生】聆聽、記錄、理解通過教師講解，使學生了解實現(xiàn)彈性布局的圖片展示的具體方法綜合案例

（25min）5.6綜合案例——輪播圖【教師】講解制作輪播圖的具體流程【課堂互動】?【教師】提問輪播圖可以起到什么效果？制作輪播圖需要用到哪些內容？?【學生】聆聽、思考、回答JQuery配合CSS3共同使用，能夠為平鋪直敘的網(wǎng)頁添加許多生動的動態(tài)效果。例如，許多網(wǎng)站頭部都有的輪播圖效果，就是使用了JQuery中的時間間隔函數(shù)，讓廣告圖片自動輪播，實現(xiàn)更加亮眼的宣傳效果。【教師】ppt展示“輪播圖瞬間效果”圖片（詳見教材），并講解具體制作要求有以下幾點。（1）輪播圖放置在頁面正中央。【高手點撥】為了讓元素永遠放置在窗口正中央，應同時設置固定定位、外邊距屬性值為auto、左右上下偏移量均為0。（2）輪播圖每次播放三張圖片，其中第一張圖片繞自身中心旋轉“45度”，第二張圖片沿紙面向外方向前移200px，第三張圖片繞自身中心旋轉“?45度”。（3）每次輪播向左移一張圖片?！景咐龑崿F(xiàn)】1.搭建網(wǎng)站，創(chuàng)建相關HTML、CSS、JS文件（1）在C盤創(chuàng)建文件夾“l(fā)unbo”，并在其中創(chuàng)建目錄“css”“js”“img”。（2）將素材“img”文件夾整體復制到“C:/lunbo”。（3）創(chuàng)建“index.html”文件并保存在“C:/lunbo”。（4）創(chuàng)建“index.css”文件并保存在“C:/lunbo/css”。（5）創(chuàng)建“index.js”文件并保存在“C:/lunbo/js”。（6）將“jquery-1.12.1.js”文件復制并粘貼到“C:/lunbo/js”。（7）編輯“index.html”文檔頭部，將“index.css”“index.js”“jquery-1.12.1.js”文件關聯(lián)至本頁面。2.在頁面中添加div元素并使其處于窗口中央（1）在index.html中添加div元素，設置id屬性值為lunbo-box。（2）在index.css中設置該元素的大小為1200×200（單位為px），固定在窗口的正中央，隱藏溢出部分。3.在div元素中添加一個子元素（1）在剛添加的div元素中再添加一個div元素，id屬性值為lunbo-boxs。（2）在index.css中設置該元素的大小為3200×200（單位為px）。4.循環(huán)加載8個div元素并在其中添加img元素在index.js文件的窗口加載事件中，使用循環(huán)語句在id屬性值為lunbo-boxs的div元素中添加8個類名為lunbo的div子元素，且每個div子元素內都添加一個img元素，其中引用的圖片地址為“banner1.jpg”～“banner8.jpg”。具體代碼如下：for(vari=1;i<=8;i++){ varimgs=$("<divclass='lunbo'><imgsrc='img/banner"+i+".jpg'></div>"); imgs.appendTo("#lunbo-boxs");}5.設置8個div子元素的CSS樣式（1）設置它們的大小為400×130（單位為px），上邊距為30px，向左浮動。（2）設置它們的透視焦距為800px，透視中心為“centercenter”。6.設置前三張圖片的3D轉換樣式并封裝show函數(shù)（1）在index.js的文件中封裝show函數(shù)，設置前三張圖片的初始化狀態(tài)。即第一張圖片繞Y軸旋轉“45deg”，第二張圖片沿屏幕向外平移200px，第三張圖片繞Y軸旋轉“-45deg”。具體代碼如下：functionshow(){ $(".lunbo:eq(0)img").css({ "transform":"rotateY(45deg)" }); $(".lunbo:eq(1)img").css({ "transform":"translateZ(200px)" }); $(".lunbo:eq(2)img").css({ "transform":"rotateY(-45deg)" });}（2）在index.js文件的窗口加載事件中調用show函數(shù)。7.實現(xiàn)輪播效果（1）在index.js文件中使用間隔函數(shù)，使得每2s輪播一張banner圖片。間隔函數(shù)的語法格式如下：setInterval(function(){ 代碼塊},2000);（2）數(shù)，完成輪播的動作。具體代碼如下：$(".lunbo:eq(0)").remove().appendTo("#lunbo-boxs");show();【教師】講解代碼參考1.HTML部分<divid="lunbo-box"> <divid="lunbo-boxs"></div></div>2．CSS部分#lunbo-box{ position:fixed; margin:auto; bottom:0; top:0; right:0; left:0; width:1200px; height:200px; overflow:hidden;}……（詳見教材）3.JS部分window.onload

溫馨提示

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

評論

0/150

提交評論