web前端技術(shù)應(yīng)用 課件 代強(qiáng) 項(xiàng)目四 增強(qiáng)網(wǎng)頁交互行為

項(xiàng)目四任務(wù)一

制作輪播圖交互板塊

目錄說出JavaScript基礎(chǔ)語法說出jQuery過濾的常用方法說出jQuery動(dòng)畫的常用方法熟練應(yīng)用JavaScript控制語句及函數(shù)熟練應(yīng)用DOM節(jié)點(diǎn)操作通過制作動(dòng)態(tài)效果提升合作學(xué)習(xí)能力和自學(xué)能力預(yù)期呈現(xiàn)效果HTML文件中書寫JavaScript代碼，在body標(biāo)簽后書寫<script></script>標(biāo)簽，在<script>標(biāo)簽之間書寫JavaScript代碼方式一：在<script>標(biāo)簽之間書寫JavaScript代碼1.初始JavaScript并引入文件方式一：在<script>標(biāo)簽之間書寫JavaScript代碼1.初始JavaScript并引入文件HTML文件中書寫JavaScript代碼，在body標(biāo)簽后書寫<script></script>標(biāo)簽，在<script>標(biāo)簽之間書寫JavaScript代碼方式一：在<script>標(biāo)簽之間書寫JavaScript代碼方式二：在外部文件書寫JavaScript代碼1.初始JavaScript并引入文件方式二：在外部文件書寫JavaScript代碼1.初始JavaScript并引入文件方式二：在外部文件書寫JavaScript代碼1.初始JavaScript并引入文件方式二：在外部文件書寫JavaScript代碼1.初始JavaScript并引入文件2.數(shù)據(jù)類型JavaScript數(shù)據(jù)類型值類型（原始值）引用類型字符串（String）、數(shù)字（Number）布爾（Boolean）、空（Null）未定義（Undefined）Symbol（獨(dú)一無二的值）對(duì)象（Object）數(shù)組（Array）函數(shù)（Function）3.變量與注釋（1）變量變量名每一個(gè)變量都應(yīng)該有一個(gè)名字變量的數(shù)據(jù)類型每一個(gè)變量都應(yīng)具有一種數(shù)據(jù)類型（在定義時(shí)指定）內(nèi)存中占據(jù)一定的儲(chǔ)存空間變量的值變量對(duì)應(yīng)的存貯空間中所存放的數(shù)3.變量與注釋（1）變量vara=10;3.變量與注釋（1）變量varname=false;3.變量與注釋（2）注釋單行注釋JavaScript中，使用“//注釋內(nèi)容”進(jìn)行單行注釋。“//”后面即為注釋的內(nèi)容，不支持換行多行注釋使用“/*注釋內(nèi)容*/”進(jìn)行多行注釋，在多行注釋時(shí)，是可以將注釋內(nèi)容進(jìn)行換行的4.運(yùn)算符與表達(dá)式（1）JavaScript運(yùn)算符賦值運(yùn)算符=算術(shù)運(yùn)算符+，－，*，/，%比較運(yùn)算符>，<，>=，<=，!=邏輯運(yùn)算符&&，||，!一元運(yùn)算符++，--二元運(yùn)算符+=，-=，*=，/=三元運(yùn)算符（又稱問號(hào)表達(dá)式）表達(dá)式為條件？真：假算數(shù)>比較>邏輯>賦值4.運(yùn)算符與表達(dá)式（2）表達(dá)式JavaScript表達(dá)式是由數(shù)字、算符、數(shù)字分組符號(hào)（括號(hào)）、自由變量和約束變量等以能求得數(shù)值的有意義排列方法所得的組合。算術(shù)表達(dá)式（由+，-，*，/等組成式子）邏輯表達(dá)式（&，|，!）表達(dá)式5.條件控制語句if…else…條件判斷語句switch-case條件選擇語句5.條件控制語句（1）if-else格式if(條件表達(dá)式1){//當(dāng)條件表達(dá)式1為真時(shí)執(zhí)行的代碼}elseif(條件表達(dá)式2){}…else{//當(dāng)前面的表達(dá)式均不匹配時(shí)執(zhí)行的代碼}5.條件控制語句（2）switch-case格式switch(n){case1:break；case2:break；...casen:break；//前面表達(dá)式均不匹配時(shí)執(zhí)行default代碼default：break；//這里的break可寫可不寫}6.setInterval()函數(shù)（1）認(rèn)識(shí)函數(shù)JavaScript函數(shù)是被設(shè)計(jì)為執(zhí)行特定任務(wù)的代碼塊，函數(shù)會(huì)在某代碼調(diào)用它時(shí)被執(zhí)行。function

name(參數(shù)1,參數(shù)2,參數(shù)3){要執(zhí)行的代碼}6.setInterval()函數(shù)（2）setInterval()setInterval()方法以指定的時(shí)間間隔（以“ms”為單位）調(diào)用函數(shù)，周期性調(diào)用函數(shù)，直到調(diào)用clearInterval()或關(guān)閉窗口。setInterval(()=>{}，3000)7.DOM刪除節(jié)點(diǎn)如需刪除元素和內(nèi)容，一般可使用以下兩個(gè)jQuery方法：①remove()：刪除被選元素（及其子元素）②empty()：從被選元素中刪除子元素7.DOM刪除節(jié)點(diǎn)7.DOM刪除節(jié)點(diǎn)8.初識(shí)jQuery及下載安裝（1）初識(shí)jQueryjQuery是一個(gè)JavaScript函數(shù)庫。jQuery是一個(gè)輕量級(jí)的“寫得少，做得多”的JavaScript庫。jQuery的特點(diǎn)8.初識(shí)jQuery及下載安裝（1）初識(shí)jQuery①HTML元素選取。②HTML元素操作。③CSS操作。④HTML事件函數(shù)。jQuery庫包含以下功能⑤JavaScript特效和動(dòng)畫。⑥HTMLDOM遍歷和修改。⑦AJAX。8.初識(shí)jQuery及下載安裝（2）下載安裝8.初識(shí)jQuery及下載安裝（2）下載安裝8.初識(shí)jQuery及下載安裝（2）下載安裝9.jQuery基礎(chǔ)選擇器及層次選擇器（1）基礎(chǔ)選擇器jQuery選擇器基于元素的id、類、類型、屬性、屬性值等“查找”（或選擇）HTML元素。jQuery中所有選擇器都以美元符號(hào)開頭，如$()?；A(chǔ)選擇器有以下5種類型：①ID選擇器

$(“#id名”)②元素選擇器

$(“元素名”)③類選擇器

$(“.類名”)④通配符“*”選擇器

$(“*”)⑤并集選擇器

$(“選擇器1，選擇器2，……”)9.jQuery基礎(chǔ)選擇器及層次選擇器（2）層次選擇器層次選擇器有以下幾種類型：（下面的M，N均代表基礎(chǔ)選擇器）①后代選擇器：“$("MN")”②子代選擇器：語法“$("M>N")”③兄弟選擇器：語法“$("M～N")”④相鄰選擇器：語法“$("M+N")”例：$(".page2img")10.設(shè)置CSS樣式（1）CSS屬性操作語法：$().css("屬性名")獲取一個(gè)CSS屬性的取值語法：$().css("屬性"，"取值")設(shè)置單個(gè)CSS屬性的取值語法：$().css({"屬性1"："取值1","屬性2"："取值2",...,"屬性n"："取值n"})設(shè)置多個(gè)CSS屬性的取值10.設(shè)置CSS樣式（2）CSS類名操作類名操作，指的是為元素添加一個(gè)class或刪除一個(gè)class，從而整體控制元素的樣式。①添加class：$().addClass("類名")②刪除class：$().removeClass("類名")③切換class：$().toggleClass("類名")11.jQuery類名過濾（hasClass()）和下標(biāo)過濾（eq）（1）類名過濾（hasClass()）功能：用于檢查當(dāng)前元素是否含有某個(gè)特定的類，如果有，則返回true值。$(selector).hasClass("className")；$(selector).hasClass("className1className2")；；11.jQuery類名過濾（hasClass()）和下標(biāo)過濾（eq）（2）下標(biāo)過濾（eq）功能：用于獲取當(dāng)前鏈?zhǔn)讲僮髦械牡贜個(gè)jQuery對(duì)象，返回jQuery對(duì)象。語法：$().eq(n)$(".popup_list.nav_con").eq(index).addClass("ac")；實(shí)操setInterval(()=>{/*創(chuàng)建計(jì)時(shí)器函數(shù)，每隔3s進(jìn)行輪播*/varindex=+$(".silie").attr("index")；/*獲取圖片索引值index*//*attr()方法設(shè)置或返回被選元素的屬性值；通過“+”將index轉(zhuǎn)為number類型*/if(index>2)index=-1；/*利用if語句實(shí)現(xiàn)放完最后一張圖片時(shí)銜接到第一張圖片*/index++；/*index變量自增*/$(".silie").attr("index"，index)；$(".silieimg").css("left"，-100*index+"%")；/*控制圖片進(jìn)行移動(dòng)*/$(".silie-yuan.yuan").removeClass("ac")；/*移除所有小圓點(diǎn)的突出效果*/$(".silie-yuan.yuan").eq(index).addClass("ac")；/*添加小圓點(diǎn)突出效果*/}，3000)項(xiàng)目四任務(wù)二

完成動(dòng)畫與鼠標(biāo)交互效果

目錄說出setTimeout()函數(shù)的語法牢記常見鼠標(biāo)事件函數(shù)及鍵盤事件的語法說出表單事件的語法應(yīng)用鼠標(biāo)事件函數(shù)正確使用鍵盤事件熟練使用表單事件通過制作動(dòng)畫與鼠標(biāo)交互效果提升邏輯思維能力和合作學(xué)習(xí)能力預(yù)期呈現(xiàn)效果1.setTimeout()函數(shù)setTimeout()方法在若干毫秒后調(diào)用函數(shù)，只執(zhí)行一次。setTimeout(()=>{$(".loader").remove()；}，1600)1.setTimeout()函數(shù)setTimeout()方法在若干毫秒后調(diào)用函數(shù)，只執(zhí)行一次。setTimeout(()=>{$(".loader").remove()；}，1600)2.事件HTML事件可以是瀏覽器行為，也可以是用戶行為。jQuery基本事件有以下6種：①頁面加載事件；②鼠標(biāo)事件；③鍵盤事件；④表單事件；⑤編輯事件；⑥滾動(dòng)事件。2.事件（1）常見的鼠標(biāo)事件事件說明click鼠標(biāo)單擊事件mouseover鼠標(biāo)移入事件mouseout鼠標(biāo)移出事件mousedown鼠標(biāo)按下事件mouseup鼠標(biāo)松開事件mousemove鼠標(biāo)移動(dòng)事件2.事件（2）hover()hover()方法規(guī)定了當(dāng)鼠標(biāo)指針懸停在被選元素上時(shí)要運(yùn)行的兩個(gè)函數(shù)。$().hover(fn1,fn2)$(".page1_tab.ul-1li").hover(function(){代碼1}，function(){代碼2})2.事件（3）比較：mouseenter、mouseleave和mouseover、mouseoutmouseentermouseleavemouseovermouseout鼠標(biāo)移入鼠標(biāo)移出2.事件（3）比較：mouseenter、mouseleave和mouseover、mouseoutmouseentermouseover只要鼠標(biāo)指針移入事件所綁定的元素或其子元素，都會(huì)觸發(fā)該事件只有鼠標(biāo)指針移入事件所綁定的元素時(shí)，才會(huì)觸發(fā)該事件2.事件（3）比較：mouseenter、mouseleave和mouseover、mouseoutmouseleavemouseout只要鼠標(biāo)指針移出事件所綁定的元素或其子元素，都會(huì)觸發(fā)該事件只有鼠標(biāo)指針移出事件所綁定的元素時(shí)，才會(huì)觸發(fā)該事件2.事件（4）單擊事件①給輪播圖的按鈕綁定單擊事件$(".silie-btn").click(function(){}$(".silie-yuan.yuan").click(function(){}②給新聞中心的每個(gè)選項(xiàng)卡綁定單擊事件$(".page3_tab.tab").click(function(){})3.數(shù)組及index()（1）定義數(shù)組varx=newArray()；varx=newArray(size)；varx=newArray(element0,element1,...,elementN)；3.數(shù)組及index()（2）數(shù)組下標(biāo)與長(zhǎng)度數(shù)組元素的個(gè)數(shù)即為數(shù)組長(zhǎng)度數(shù)組下標(biāo)是對(duì)數(shù)組元素的編號(hào)，從0開始，最大下標(biāo)為數(shù)組長(zhǎng)度減13.數(shù)組及index()（3）index()index()返回指定元素相對(duì)于其他指定元素的index位置。這些元素可通過jQuery選擇器或DOM元素來指定。如果未找到元素，index()將返回-1。varindex=$(this).index()；3.this在JS中，this的意思為“這個(gè)；當(dāng)前”，是一個(gè)指針型變量，它動(dòng)態(tài)地指向當(dāng)前函數(shù)的運(yùn)行環(huán)境。例：在$("div").click(function(){……}中，$(this)等價(jià)于$("div")。而在$("p").click(function(){……}中，$(this)等價(jià)于$("p")。實(shí)操1.制作垃圾分類動(dòng)畫展示效果2.制作加載動(dòng)畫效果3.制作新聞中心選項(xiàng)卡切換效果4.制作政策條例動(dòng)態(tài)交互效果項(xiàng)目四任務(wù)三

制作志愿者招募交互板塊

目錄說出on事件的語法牢記并應(yīng)用正則表達(dá)式區(qū)分search()和replace()方法使用off()方法解除元素綁定了解event對(duì)象及其type屬性熟練使用on事件通過制作“志愿者招募”板塊提升合作學(xué)習(xí)能力和自學(xué)能力預(yù)期呈現(xiàn)效果1.on事件功能：為元素綁定一個(gè)事件或者多個(gè)事件1.on事件功能：為元素綁定一個(gè)事件或者多個(gè)事件$(selector).on(event，childSelector，data，function)1.on事件功能：為元素綁定一個(gè)事件或者多個(gè)事件$(selector).on(event，childSelector，data，function)必需可選1.on事件功能：為元素綁定一個(gè)事件或者多個(gè)事件$(selector).on(event，childSelector，data，function)規(guī)定要從被選元素添加的一個(gè)或多個(gè)事件或命名空間1.on事件功能：為元素綁定一個(gè)事件或者多個(gè)事件$(selector).on(event，childSelector，data，function)規(guī)定要從被選元素添加的一個(gè)或多個(gè)事件或命名空間規(guī)定只能添加到指定的子元素上的事件處理程序1.on事件功能：為元素綁定一個(gè)事件或者多個(gè)事件$(selector).on(event，childSelector，data，function)規(guī)定要從被選元素添加的一個(gè)或多個(gè)事件或命名空間規(guī)定只能添加到指定的子元素上的事件處理程序規(guī)定傳遞到函數(shù)的額外數(shù)據(jù)1.on事件功能：為元素綁定一個(gè)事件或者多個(gè)事件$(selector).on(event，childSelector，data，function)規(guī)定要從被選元素添加的一個(gè)或多個(gè)事件或命名空間規(guī)定只能添加到指定的子元素上的事件處理程序規(guī)定傳遞到函數(shù)的額外數(shù)據(jù)規(guī)定當(dāng)事件發(fā)生時(shí)運(yùn)行的函數(shù)2.正則表達(dá)式正則表達(dá)式是由一個(gè)字符序列形成的搜索模式，可以是一個(gè)簡(jiǎn)單的字符或一個(gè)更復(fù)雜的模式。正則表達(dá)式可用于所有文本搜索和文本替換的操作。（1）概念2.正則表達(dá)式（2）語法格式/正則表