JavaScript高級編程任務(wù)4-2省市區(qū)級聯(lián)關(guān)于JSONJSON(JavaScriptObjectNotation)是一種輕量級的數(shù)據(jù)交換傳輸格式，實際上是JavaScript的原生數(shù)據(jù)格式。它采用完全獨立于語言的文本格式，基本上所有的編程語言都支持JSON數(shù)據(jù)格式注意事項JSON規(guī)定字符集是UTF-8，字符串定界必須使用""，對象的鍵也必須使用""花括號保存對象（數(shù)據(jù)在名稱:值對中，數(shù)據(jù)由逗號分隔），方括號保存數(shù)組。數(shù)組中可以包含對象，對象中可以包含數(shù)組JSON舉例-數(shù)組嵌套對象及訪問內(nèi)部包含對象的數(shù)組定義student=[ {"name":"林若蘭","sex":"女"}, {"name":"王曉紅","sex":"女"}]訪問方式：student[0].name，獲取“林若蘭”；或者student[0]['name']即鍵名可以作為對象的屬性應(yīng)用，也可以以鍵名數(shù)組的方式訪問JSON舉例-對象嵌套對象及訪問內(nèi)部包含對象的對象定義student={ "stu1":{"name":"林若蘭","sex":"女"}, "stu2":{"name":"王曉紅","sex":"女"}}訪問方式：，獲取“林若蘭”；或者student['stu1']['name']JSON舉例-對象定義內(nèi)部包含數(shù)組的對象定義：city={ "name":"北京市", "area":["東城區(qū)","西城區(qū)","朝陽區(qū)","豐臺區(qū)","石景山區(qū)","海淀區(qū)","順義區(qū)","通州區(qū)","大興區(qū)","房山區(qū)","門頭溝區(qū)","昌平區(qū)","平谷區(qū)","密云區(qū)","懷柔區(qū)","延慶區(qū)"]}訪問方式：city.area[0]或者city['area'][0]都獲取到“東城區(qū)”還可以在city數(shù)據(jù)格式基礎(chǔ)上繼續(xù)進(jìn)行數(shù)組和對象的嵌套更加復(fù)雜的JSON數(shù)據(jù)訪問方式：city1[1].city[0].area[1]或者city1[1]['city'][0]['area'][1]都能獲取天津市的河?xùn)|區(qū)獨立存儲的JSON數(shù)據(jù)及訪問方式注意：獨立存儲的json文件，整體上是一個數(shù)組，

在最外層的[]前面不能有任何信息訪問方式$.getJSON(url,success(data){})使用$.getJSON()方法讀取JSON文件數(shù)據(jù)，默認(rèn)是異步模式，就是在讀取JSON數(shù)據(jù)時會同時執(zhí)行其它腳本代碼，為了確保正確使用JSON數(shù)據(jù)，讀取前將默認(rèn)的異步模式改為同步模式。

success()是回調(diào)函數(shù)，讀取的數(shù)據(jù)會自動保存在參數(shù)data中，將其賦給一個全局變量之后，在后續(xù)的函數(shù)中訪問數(shù)據(jù)文件city.json數(shù)據(jù)結(jié)構(gòu)使用$.getJSON()方法獲取數(shù)據(jù)，保存在數(shù)組city中一個省份的所有數(shù)據(jù)屬于city的一個元素，city[1].name為天津市（city[0].name是北京市）每個省份下面有很多市，用數(shù)組city[i].city表示，city[2].city[0].name表示石家莊市

city[2].city[1].name表示唐山市每個市下面有很多區(qū)，數(shù)組city[i].city[j].area表示，例如city[2].city[0].area[0]表示石家莊市的長安區(qū)實現(xiàn)省市區(qū)級聯(lián)功能包含內(nèi)容任務(wù)描述元素設(shè)計樣式定義特效實現(xiàn)省市區(qū)級聯(lián)任務(wù)描述

所有元素都包含在相對定位的.divW內(nèi)部絕對定位的#tabWhole設(shè)計該框鼠標(biāo)指向時顯示下面的絕對定位的#divWhole初始時點擊“請選擇地市”和“請選擇區(qū)縣”，內(nèi)容區(qū)都為空只有省份選項卡內(nèi)容區(qū)有內(nèi)容頁面元素設(shè)計元素樣式定義.divW頁面所有元素都放在相對定位的divW中，寬度400，高度0，填充0，邊距0，相對定位.divW的兩個子元素是#tabWhole和#divWholedivWhole和tabWhole的位置關(guān)系為了在顯示divWhole時能夠出現(xiàn)與tabWhole連成一體的效果，兩個div都設(shè)置為絕對定位，且垂直方向有一個像素的重疊，tabWhole的z-index為2，divWhole的z-index為1，在顯示divWhole時，tabWhole的下邊框變?yōu)榘咨采wdivWhole上邊框相應(yīng)區(qū)域，實現(xiàn)上下一體的效果。#tabWhole與#divWhole#tabWhole寬度自動,高度20px，填充5px，邊距為0，白色背景，邊框1px、實線、#999，絕對定位，z-index為2，top設(shè)置1px，字號10pt，文本行高20px#divWhole寬度380px，最小高度60px（保證初始時選項卡能夠在高度范圍內(nèi)，當(dāng)顯示具體的省市區(qū)信息時，高度跟隨內(nèi)容高度發(fā)生變化），上填充10px，左右填充10px，下填充0，邊距0，白色背景（保證浮在其它內(nèi)容上方時，能夠遮擋后面的內(nèi)容），邊框1px、實線、#999，絕對定位，z-index為1，top為32px（與上面div下邊框重合），初始狀態(tài)隱藏鼠標(biāo)指向divW時#tabWhole下邊框為白色#divWhole顯示使用.divWimg{}設(shè)置所有圖片高度10px，左邊距10px#divWhole中的內(nèi)容說明選項卡區(qū).tabDiv寬380，高34，填充0，邊距0，絕對定位，z-index為2（

置于內(nèi)容區(qū)前方；默認(rèn)橫坐標(biāo)和縱坐標(biāo)是多少？注意：divWhole有10像素上填充）每個選項卡.tab：寬自動，高20，填充5，右邊距5、其它邊距0，邊框2px#999，下邊框2px#c00，向左浮動，字號10pt，文本行高20px（占總高度多少？）選中的選項卡.tabSel：邊框2px#c00，下邊框2px#fff每個內(nèi)容區(qū).cont寬380，高自動，上填充10、其余填充0，邊距auto，整體沒有邊框，上邊框2px#c00，絕對定位，z-index為1，top為42（保證上邊框與.tab的下邊框重合，盒子divWhole有10px上填充，盒子tab高度34）.contspan：寬95，高30，填充邊距都是0，向左浮動，字號10pt，藍(lán)色鼠標(biāo)手狀.contspan:hover：文本顏色紅色省市區(qū)級聯(lián)功能-jQuery特效準(zhǔn)備工作讀取city.json文件，使用數(shù)組city保存數(shù)據(jù)將數(shù)組city中所有省份名稱各自以span元素連接在一起放在變量contProv中應(yīng)用閉包實現(xiàn)級聯(lián)功能第一步，對每個選項卡注冊click事件，完成樣式設(shè)置并添加省份名稱第二步，在選項卡的click事件函數(shù)內(nèi)部注冊省份內(nèi)容區(qū)span元素的click事件，完成省份的選擇并設(shè)置地市內(nèi)容區(qū)內(nèi)容，跳轉(zhuǎn)到地市選項卡第三步，在省份span的click事件函數(shù)中注冊地市內(nèi)容區(qū)的span元素的click事件，完成地市的選擇并設(shè)置區(qū)縣內(nèi)容區(qū)內(nèi)容，跳轉(zhuǎn)到區(qū)縣選項卡第四步，在地市span的click事件函數(shù)中注冊區(qū)縣內(nèi)容區(qū)的span元素的click事件，完成區(qū)縣的選擇并設(shè)置tabWhole的內(nèi)容省市區(qū)級聯(lián)功能-jQuery特效對每個選項卡注冊click事件（后面所有內(nèi)容都屬于該事件函數(shù)中）獲取選項卡的索引，保存在變量index中對所有選項卡移除類名tabSel，即去掉選中后的特效為當(dāng)前選項卡應(yīng)用類名tabSel，表示被選中三個內(nèi)容區(qū)都隱藏，然后顯示當(dāng)前選項卡對應(yīng)的內(nèi)容區(qū)判斷索引index若是為0將contProv內(nèi)容作為內(nèi)容區(qū).prov的內(nèi)容獲取該內(nèi)容區(qū)的高度，增加60之后設(shè)置為#divWhole的高度jQuery特效為.prov中的span（省份名稱）注冊click事件（后面所有內(nèi)容都屬于該事件函數(shù)）使用text()方法獲取span元素的文本，保存在變量provText中（用于在選項卡中顯示省份名稱）使用index()方法獲取span元素的索引，保存在變量provInd中（作為索引用于獲取相應(yīng)省份下面的地市）使用$(".tab").eq(0).html()，設(shè)置省份選項卡內(nèi)容為“省份名稱+向下小箭頭圖片”使用$(".tab").eq(1).trigger('click');觸發(fā)地市選項卡click事件將當(dāng)前選中省份的所有地市以span元素連接在一起放在變量contCity中將contCity內(nèi)容作為內(nèi)容區(qū).city的內(nèi)容獲取當(dāng)前內(nèi)容區(qū).city的高度，增加60px之后，作為#divWhole的高度jQuery特效為.city中的span元素（地市名稱）注冊click事件（后面所有內(nèi)容都屬于該事件函數(shù)）使用text()方法獲取文本，保存在變量cityText中（用于在選項卡中顯示地市名稱）使用index()方法獲取索引，保存在變量cityInd中（用于作為索引獲取相應(yīng)地市下面的區(qū)）設(shè)置地市選項卡內(nèi)容為“地市名稱+向下小箭頭圖片”觸發(fā)區(qū)縣選項卡的click事件將當(dāng)前選中地市的所有區(qū)以span元素內(nèi)容形式連接在一起放在變量contArea中將contArea內(nèi)容作為內(nèi)容區(qū).area的內(nèi)容獲取當(dāng)前內(nèi)容區(qū).area的高度，增加60px之后，作為#divWhole的高度jQuery特效為.area中的span元素（區(qū)縣名稱）注冊click事件使用text()方法獲取文本，保存在變量areaText中（用于在選項卡中顯示區(qū)縣名稱）設(shè)置區(qū)縣選項卡內(nèi)容為“區(qū)縣名+向下小箭頭圖片”設(shè)置變量selText內(nèi)容為“省份名稱/地市名稱/區(qū)縣名稱+向下小箭頭”,作為#tabWhole的內(nèi)容程序中的缺陷及解決方案-1選完某個市并進(jìn)入?yún)^(qū)選擇框之后，再

重新選擇市，高度會出現(xiàn)問題，例如

選擇了山東省威海市，再點回選擇市解決方案第一種方法：在程序的最后增加對點擊“選擇市”和“選擇區(qū)”兩個選項卡的函數(shù)定義，分別獲取city和area的內(nèi)容區(qū)高度，為divWhole增加該高度值。第二種方法：在tab的click事件函數(shù)中if(ind==0){}后面增加elseif(ind==1){根據(jù)city高度設(shè)置divWhole高度}else{根據(jù)area高度設(shè)置divWhole高度}程序中的缺陷及解決方案-2缺陷在省市區(qū)選擇完成