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

下載本文檔

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

文檔簡(jiǎn)介

PAGE4PAGE4PAGE3PAGE3PAGE3PAGE3

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

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

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

（10min）5.5.3案例——彈性布局的圖片展示【教師】講解彈性布局的圖片展示案例的具體內(nèi)容【場(chǎng)景描述】網(wǎng)站在設(shè)計(jì)時(shí)需要考慮適用性，為了能夠讓網(wǎng)站中的圖片清晰地呈現(xiàn)在大多數(shù)電子產(chǎn)品上，程序員會(huì)根據(jù)不同的窗口寬度引用不同的圖片源，并且隨著窗口大小的改變動(dòng)態(tài)適應(yīng)?！窘處煛縫pt展示“寬屏顯示效果”“窄屏顯示效果”圖片（詳見教材），并講解例如，蘋果官網(wǎng)展示的手機(jī)圖片，在寬屏顯示時(shí)，顯示為橫向圖片；在窄屏顯示時(shí)，顯示為縱向圖片?！舅悸贩治觥渴紫扰袛啻翱诘膶挾?，為該狀態(tài)設(shè)置合適的圖片源。當(dāng)窗口大小每次發(fā)生變化時(shí)，都重新判斷窗口寬度，為此狀態(tài)設(shè)置合適的圖片源?！緦?shí)現(xiàn)步驟】1在HTML文檔中添加一個(gè)img元素，其src屬性值為空，id屬性值為img1。12在相關(guān)的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();}【實(shí)現(xiàn)效果】頁(yè)面首次加載后判斷窗口寬度是否大于700px，如果是，則顯示圖片“iphone1.jpg”；如果不是，則顯示圖片“iphone2.jpg”。在改變窗口大小時(shí)，隨時(shí)判斷窗口寬度是否大于700px，并應(yīng)用相對(duì)應(yīng)的圖片源?！咎崾尽浚?）為方便測(cè)試窗口寬度，該案例封裝了尺寸顯示函數(shù)resizeShow。（2）resize()為響應(yīng)窗口尺寸變化的事件函數(shù)?！緦W(xué)生】聆聽、記錄、理解通過教師講解，使學(xué)生了解實(shí)現(xiàn)彈性布局的圖片展示的具體方法綜合案例

（25min）5.6綜合案例——輪播圖【教師】講解制作輪播圖的具體流程【課堂互動(dòng)】?【教師】提問輪播圖可以起到什么效果？制作輪播圖需要用到哪些內(nèi)容？?【學(xué)生】聆聽、思考、回答JQuery配合CSS3共同使用，能夠?yàn)槠戒佒睌⒌木W(wǎng)頁(yè)添加許多生動(dòng)的動(dòng)態(tài)效果。例如，許多網(wǎng)站頭部都有的輪播圖效果，就是使用了JQuery中的時(shí)間間隔函數(shù)，讓廣告圖片自動(dòng)輪播，實(shí)現(xiàn)更加亮眼的宣傳效果?！窘處煛縫pt展示“輪播圖瞬間效果”圖片（詳見教材），并講解具體制作要求有以下幾點(diǎn)。（1）輪播圖放置在頁(yè)面正中央?！靖呤贮c(diǎn)撥】為了讓元素永遠(yuǎn)放置在窗口正中央，應(yīng)同時(shí)設(shè)置固定定位、外邊距屬性值為auto、左右上下偏移量均為0。（2）輪播圖每次播放三張圖片，其中第一張圖片繞自身中心旋轉(zhuǎn)“45度”，第二張圖片沿紙面向外方向前移200px，第三張圖片繞自身中心旋轉(zhuǎn)“?45度”。（3）每次輪播向左移一張圖片?！景咐龑?shí)現(xiàn)】1.搭建網(wǎng)站，創(chuàng)建相關(guān)HTML、CSS、JS文件（1）在C盤創(chuàng)建文件夾“l(fā)unbo”，并在其中創(chuàng)建目錄“css”“js”“img”。（2）將素材“img”文件夾整體復(fù)制到“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”文件復(fù)制并粘貼到“C:/lunbo/js”。（7）編輯“index.html”文檔頭部，將“index.css”“index.js”“jquery-1.12.1.js”文件關(guān)聯(lián)至本頁(yè)面。2.在頁(yè)面中添加div元素并使其處于窗口中央（1）在index.html中添加div元素，設(shè)置id屬性值為lunbo-box。（2）在index.css中設(shè)置該元素的大小為1200×200（單位為px），固定在窗口的正中央，隱藏溢出部分。3.在div元素中添加一個(gè)子元素（1）在剛添加的div元素中再添加一個(gè)div元素，id屬性值為lunbo-boxs。（2）在index.css中設(shè)置該元素的大小為3200×200（單位為px）。4.循環(huán)加載8個(gè)div元素并在其中添加img元素在index.js文件的窗口加載事件中，使用循環(huán)語(yǔ)句在id屬性值為lunbo-boxs的div元素中添加8個(gè)類名為lunbo的div子元素，且每個(gè)div子元素內(nèi)都添加一個(gè)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.設(shè)置8個(gè)div子元素的CSS樣式（1）設(shè)置它們的大小為400×130（單位為px），上邊距為30px，向左浮動(dòng)。（2）設(shè)置它們的透視焦距為800px，透視中心為“centercenter”。6.設(shè)置前三張圖片的3D轉(zhuǎn)換樣式并封裝show函數(shù)（1）在index.js的文件中封裝show函數(shù)，設(shè)置前三張圖片的初始化狀態(tài)。即第一張圖片繞Y軸旋轉(zhuǎn)“45deg”，第二張圖片沿屏幕向外平移200px，第三張圖片繞Y軸旋轉(zhuǎn)“-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文件的窗口加載事件中調(diào)用show函數(shù)。7.實(shí)現(xiàn)輪播效果（1）在index.js文件中使用間隔函數(shù)，使得每2s輪播一張banner圖片。間隔函數(shù)的語(yǔ)法格式如下：setInterval(function(){ 代碼塊},2000);（2）數(shù)，完成輪播的動(dòng)作。具體代碼如下：$(".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等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 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)論