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

JavaScript高級編程任務(wù)4-1年月日級聯(lián)菜單年月日級聯(lián)菜單說明三級菜單初始狀態(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對象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ì)頁面元素年月日級聯(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)年月日級聯(lián)菜單實(shí)現(xiàn)步驟定義年份列表框的change事件函數(shù)：獲取選中選項(xiàng)的value，保存在變量y中清除上次選擇的月份——設(shè)置月份選項(xiàng)第一項(xiàng)（請選擇月份）被選中清除上次選擇的日期——設(shè)置日期列表項(xiàng)中只保留第一項(xià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)（--請選擇月份--），此時(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)問題選擇一次年月日之后，不刷新頁面，重新更換月份和日期，發(fā)現(xiàn)什么問題？再更換一次月份和日期？再更換一次年月日？原因分析在jQuery中，一個(gè)對象的事件可以重復(fù)綁定多次，當(dāng)事件被觸發(fā)的時(shí)候，除了要執(zhí)行當(dāng)前最新綁定的事件函數(shù)，還會(huì)執(zhí)行之前綁定的事件函數(shù)，引起代碼多遍執(zhí)行。解決方案在原代碼month.change(function(){})的前面增加month.off("change")，作用是在重新為month列表框注冊change事件函數(shù)之前，先注銷原來的change事件；同理，在代碼day.change(function(){})的前面增加day.off("change")相關(guān)知識(shí)點(diǎn)-改變DOM樹形結(jié)構(gòu)的常用方法改變DOM樹形結(jié)構(gòu)指的是通過對元素的添加刪除或者對屬性的添加刪除或者對文本的添加刪除等操作，修改初始創(chuàng)建的DOM樹形結(jié)構(gòu)創(chuàng)建元素jQuery中使用構(gòu)造函數(shù)$()創(chuàng)建元素對象，創(chuàng)建后直接封裝為jQuery對象返回，創(chuàng)建的元素對象可以是單一層級的，也可以是任意多層級的$("<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)，是指對某個(gè)元素重新設(shè)置其內(nèi)部的html結(jié)構(gòu)，可以使用html()方法在指定元素內(nèi)部添加任意層級的元素結(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對象$(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>頁面中的最后一個(gè)div</div>")或者$("<div>頁面中的最后一個(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指定