jQuery網(wǎng)頁(yè)特效任務(wù)驅(qū)動(dòng)式教程-實(shí)現(xiàn)年月日級(jí)聯(lián)菜單

JavaScript高級(jí)編程任務(wù)4-1年月日級(jí)聯(lián)菜單年月日級(jí)聯(lián)菜單說明三級(jí)菜單初始狀態(tài)都只有提示文本一個(gè)選項(xiàng)，且默認(rèn)選中年份提供了從1941年到2040年共100年的選項(xiàng)月份提供了從1月到12月的選項(xiàng)若是未選擇年份，只選擇月份，則日期沒有選項(xiàng)必須先選擇年份，再選擇月份，日期才有選項(xiàng)若為閏年，則選擇2月份時(shí)，日期共有29項(xiàng)，否則日期有28項(xiàng)JS和jQuery操作select和option假設(shè)使用變量sel代表DOM對(duì)象select獲取選中選項(xiàng)在所有選項(xiàng)中的索引：sel.selectedIndex設(shè)置第n項(xiàng)被選中：sel.selectedIndex=n獲取選中選項(xiàng)的值：sel.value或者$(sel).val()獲取選中選項(xiàng)中的文本：sel.innerText或者$(sel).text()獲取該列表中選項(xiàng)的個(gè)數(shù)：sel.options.length刪除該列表中所有的選項(xiàng)：sel.options.length=0只保留列表中第一個(gè)選項(xiàng)：sel.options.length=1添加選項(xiàng)：sel.options.add(newOption("text","value"))或者$("select").append(...)任務(wù)實(shí)現(xiàn)設(shè)計(jì)頁(yè)面元素年月日級(jí)聯(lián)菜單實(shí)現(xiàn)步驟獲取三個(gè)列表框，分別保存在變量year、month、day中定義年份初始值1941，保存在變量y中添加年份選項(xiàng)循環(huán)100次，在年份列表框中增加從1941-2040年的年份選項(xiàng)添加月份選項(xiàng)循環(huán)12次，在月份列表框中增加從1月到12月的月份選項(xiàng)年月日級(jí)聯(lián)菜單實(shí)現(xiàn)步驟定義年份列表框的change事件函數(shù)：獲取選中選項(xiàng)的value，保存在變量y中清除上次選擇的月份——設(shè)置月份選項(xiàng)第一項(xiàng)（請(qǐng)選擇月份）被選中清除上次選擇的日期——設(shè)置日期列表項(xiàng)中只保留第一項(xiàng)（請(qǐng)選擇日期）定義月份列表框的change事件函數(shù)獲取當(dāng)前選擇的月份值，將數(shù)字值保存在變量m中；清除上次選擇的日期——設(shè)置日期列表項(xiàng)中只保留第一項(xiàng)使用switch結(jié)構(gòu)根據(jù)m的取值確定每個(gè)月的天數(shù)，保存在變量days中在日期列表中添加相應(yīng)天數(shù)的列表項(xiàng)定義日期列表框的change事件函數(shù)獲取日期，在控制臺(tái)輸出xxxx年xx月xx日觀察并發(fā)現(xiàn)問題一發(fā)現(xiàn)問題：如果用戶已經(jīng)選擇過年月日信息，重新點(diǎn)開月份下拉列表框，選擇的是第一個(gè)選項(xiàng)（--請(qǐng)選擇月份--），此時(shí)點(diǎn)開日期列表框，看到下面有31個(gè)日期列表項(xiàng)，為什么會(huì)出現(xiàn)這種現(xiàn)象？要如何解決？問題分析：選擇第一個(gè)選項(xiàng)，value為0，在switch結(jié)構(gòu)中沒有列舉取值0的情況，因此執(zhí)行default子句，得到days變量取值為31解決問題：方案一：case0方案二：設(shè)置日期列表框的選項(xiàng)只有一項(xiàng)之后，判斷m取值如果為0，則直接返回結(jié)束函數(shù)執(zhí)行；或者判斷當(dāng)前選中選項(xiàng)的索引如果為0則返回觀察并發(fā)現(xiàn)問題二發(fā)現(xiàn)問題選擇一次年月日之后，不刷新頁(yè)面，重新更換月份和日期，發(fā)現(xiàn)什么問題？再更換一次月份和日期？再更換一次年月日？原因分析在jQuery中，一個(gè)對(duì)象的事件可以重復(fù)綁定多次，當(dāng)事件被觸發(fā)的時(shí)候，除了要執(zhí)行當(dāng)前最新綁定的事件函數(shù)，還會(huì)執(zhí)行之前綁定的事件函數(shù)，引起代碼多遍執(zhí)行。解決方案在原代碼month.change(function(){})的前面增加month.off("change")，作用是在重新為month列表框注冊(cè)change事件函數(shù)之前，先注銷原來的change事件；同理，在代碼day.change(function(){})的前面增加day.off("change")相關(guān)知識(shí)點(diǎn)-改變DOM樹形結(jié)構(gòu)的常用方法改變DOM樹形結(jié)構(gòu)指的是通過對(duì)元素的添加刪除或者對(duì)屬性的添加刪除或者對(duì)文本的添加刪除等操作，修改初始創(chuàng)建的DOM樹形結(jié)構(gòu)創(chuàng)建元素jQuery中使用構(gòu)造函數(shù)$()創(chuàng)建元素對(duì)象，創(chuàng)建后直接封裝為jQuery對(duì)象返回，創(chuàng)建的元素對(duì)象可以是單一層級(jí)的，也可以是任意多層級(jí)的$("<div></div>")$("<divclass='box'>div內(nèi)部的<span>文本</span></div>")相關(guān)知識(shí)點(diǎn)-改變DOM樹形結(jié)構(gòu)的常用方法更換元素的內(nèi)部結(jié)構(gòu)更換元素的內(nèi)部結(jié)構(gòu)，是指對(duì)某個(gè)元素重新設(shè)置其內(nèi)部的html結(jié)構(gòu)，可以使用html()方法在指定元素內(nèi)部添加任意層級(jí)的元素結(jié)構(gòu)$(".div1").html("<p><ahref=''>山東商業(yè)職業(yè)技術(shù)學(xué)院</a><p>")在元素內(nèi)部插入子元素方法說明$(selector).append(content)向匹配的selector元素中追加內(nèi)容，追加的內(nèi)容將成為元素最后一個(gè)子元素，content可以是html結(jié)構(gòu)或者jQuery對(duì)象$(content).appendTo(selector)將content指定的內(nèi)容追加到selector元素的最后$(selector).prepend(content)向匹配的selector元素內(nèi)部開始添加內(nèi)容，添加的內(nèi)容作為第一個(gè)子元素$(content).prependTo(selector)將content指定的內(nèi)容添加為selector的第一個(gè)子元素$("body").append("<div>頁(yè)面中的最后一個(gè)div</div>")或者$("<div>頁(yè)面中的最后一個(gè)div</div>").appendTo("body")相關(guān)知識(shí)點(diǎn)-改變DOM樹形結(jié)構(gòu)的常用方法在元素外部插入兄弟元素刪除匹配元素格式：$(selector).remove()作用說明：使用remove()方法移除指定元素的同時(shí)，會(huì)自動(dòng)移除元素內(nèi)部的一切，包括綁定的事件及與該元素有關(guān)的jQuery數(shù)據(jù)等。方法說明$(selector).after(content)在匹配的selector元素后面添加兄弟元素$(content).insertAfter(selector)將content指定