jQuery网页特效任务驱动式教程-省市区级联

JavaScript高级编程任务4-2省市区级联关于JSONJSON(JavaScriptObjectNotation)是一种轻量级的数据交换传输格式，实际上是JavaScript的原生数据格式。它采用完全独立于语言的文本格式，基本上所有的编程语言都支持JSON数据格式注意事项JSON规定字符集是UTF-8，字符串定界必须使用""，对象的键也必须使用""花括号保存对象（数据在名称:值对中，数据由逗号分隔），方括号保存数组。数组中可以包含对象，对象中可以包含数组JSON举例-数组嵌套对象及访问内部包含对象的数组定义student=[ {"name":"林若兰","sex":"女"}, {"name":"王晓红","sex":"女"}]访问方式：student[0].name，获取“林若兰”；或者student[0]['name']即键名可以作为对象的属性应用，也可以以键名数组的方式访问JSON举例-对象嵌套对象及访问内部包含对象的对象定义student={ "stu1":{"name":"林若兰","sex":"女"}, "stu2":{"name":"王晓红","sex":"女"}}访问方式：，获取“林若兰”；或者student['stu1']['name']JSON举例-对象定义内部包含数组的对象定义：city={ "name":"北京市", "area":["东城区","西城区","朝阳区","丰台区","石景山区","海淀区","顺义区","通州区","大兴区","房山区","门头沟区","昌平区","平谷区","密云区","怀柔区","延庆区"]}访问方式：city.area[0]或者city['area'][0]都获取到“东城区”还可以在city数据格式基础上继续进行数组和对象的嵌套更加复杂的JSON数据访问方式：city1[1].city[0].area[1]或者city1[1]['city'][0]['area'][1]都能获取天津市的河东区独立存储的JSON数据及访问方式注意：独立存储的json文件，整体上是一个数组，

在最外层的[]前面不能有任何信息访问方式$.getJSON(url,success(data){})使用$.getJSON()方法读取JSON文件数据，默认是异步模式，就是在读取JSON数据时会同时执行其它脚本代码，为了确保正确使用JSON数据，读取前将默认的异步模式改为同步模式。

success()是回调函数，读取的数据会自动保存在参数data中，将其赋给一个全局变量之后，在后续的函数中访问数据文件city.json数据结构使用$.getJSON()方法获取数据，保存在数组city中一个省份的所有数据属于city的一个元素，city[1].name为天津市（city[0].name是北京市）每个省份下面有很多市，用数组city[i].city表示，city[2].city[0].name表示石家庄市

city[2].city[1].name表示唐山市每个市下面有很多区，数组city[i].city[j].area表示，例如city[2].city[0].area[0]表示石家庄市的长安区实现省市区级联功能包含内容任务描述元素设计样式定义特效实现省市区级联任务描述

所有元素都包含在相对定位的.divW内部绝对定位的#tabWhole设计该框鼠标指向时显示下面的绝对定位的#divWhole初始时点击“请选择地市”和“请选择区县”，内容区都为空只有省份选项卡内容区有内容页面元素设计元素样式定义.divW页面所有元素都放在相对定位的divW中，宽度400，高度0，填充0，边距0，相对定位.divW的两个子元素是#tabWhole和#divWholedivWhole和tabWhole的位置关系为了在显示divWhole时能够出现与tabWhole连成一体的效果，两个div都设置为绝对定位，且垂直方向有一个像素的重叠，tabWhole的z-index为2，divWhole的z-index为1，在显示divWhole时，tabWhole的下边框变为白色，覆盖divWhole上边框相应区域，实现上下一体的效果。#tabWhole与#divWhole#tabWhole宽度自动,高度20px，填充5px，边距为0，白色背景，边框1px、实线、#999，绝对定位，z-index为2，top设置1px，字号10pt，文本行高20px#divWhole宽度380px，最小高度60px（保证初始时选项卡能够在高度范围内，当显示具体的省市区信息时，高度跟随内容高度发生变化），上填充10px，左右填充10px，下填充0，边距0，白色背景（保证浮在其它内容上方时，能够遮挡后面的内容），边框1px、实线、#999，绝对定位，z-index为1，top为32px（与上面div下边框重合），初始状态隐藏鼠标指向divW时#tabWhole下边框为白色#divWhole显示使用.divWimg{}设置所有图片高度10px，左边距10px#divWhole中的内容说明选项卡区.tabDiv宽380，高34，填充0，边距0，绝对定位，z-index为2（

置于内容区前方；默认横坐标和纵坐标是多少？注意：divWhole有10像素上填充）每个选项卡.tab：宽自动，高20，填充5，右边距5、其它边距0，边框2px#999，下边框2px#c00，向左浮动，字号10pt，文本行高20px（占总高度多少？）选中的选项卡.tabSel：边框2px#c00，下边框2px#fff每个内容区.cont宽380，高自动，上填充10、其余填充0，边距auto，整体没有边框，上边框2px#c00，绝对定位，z-index为1，top为42（保证上边框与.tab的下边框重合，盒子divWhole有10px上填充，盒子tab高度34）.contspan：宽95，高30，填充边距都是0，向左浮动，字号10pt，蓝色鼠标手状.contspan:hover：文本颜色红色省市区级联功能-jQuery特效准备工作读取city.json文件，使用数组city保存数据将数组city中所有省份名称各自以span元素连接在一起放在变量contProv中应用闭包实现级联功能第一步，对每个选项卡注册click事件，完成样式设置并添加省份名称第二步，在选项卡的click事件函数内部注册省份内容区span元素的click事件，完成省份的选择并设置地市内容区内容，跳转到地市选项卡第三步，在省份span的click事件函数中注册地市内容区的span元素的click事件，完成地市的选择并设置区县内容区内容，跳转到区县选项卡第四步，在地市span的click事件函数中注册区县内容区的span元素的click事件，完成区县的选择并设置tabWhole的内容省市区级联功能-jQuery特效对每个选项卡注册click事件（后面所有内容都属于该事件函数中）获取选项卡的索引，保存在变量index中对所有选项卡移除类名tabSel，即去掉选中后的特效为当前选项卡应用类名tabSel，表示被选中三个内容区都隐藏，然后显示当前选项卡对应的内容区判断索引index若是为0将contProv内容作为内容区.prov的内容获取该内容区的高度，增加60之后设置为#divWhole的高度jQuery特效为.prov中的span（省份名称）注册click事件（后面所有内容都属于该事件函数）使用text()方法获取span元素的文本，保存在变量provText中（用于在选项卡中显示省份名称）使用index()方法获取span元素的索引，保存在变量provInd中（作为索引用于获取相应省份下面的地市）使用$(".tab").eq(0).html()，设置省份选项卡内容为“省份名称+向下小箭头图片”使用$(".tab").eq(1).trigger('click');触发地市选项卡click事件将当前选中省份的所有地市以span元素连接在一起放在变量contCity中将contCity内容作为内容区.city的内容获取当前内容区.city的高度，增加60px之后，作为#divWhole的高度jQuery特效为.city中的span元素（地市名称）注册click事件（后面所有内容都属于该事件函数）使用text()方法获取文本，保存在变量cityText中（用于在选项卡中显示地市名称）使用index()方法获取索引，保存在变量cityInd中（用于作为索引获取相应地市下面的区）设置地市选项卡内容为“地市名称+向下小箭头图片”触发区县选项卡的click事件将当前选中地市的所有区以span元素内容形式连接在一起放在变量contArea中将contArea内容作为内容区.area的内容获取当前内容区.area的高度，增加60px之后，作为#divWhole的高度jQuery特效为.area中的span元素（区县名称）注册click事件使用text()方法获取文本，保存在变量areaText中（用于在选项卡中显示区县名称）设置区县选项卡内容为“区县名+向下小箭头图片”设置变量selText内容为“省份名称/地市名称/区县名称+向下小箭头”,作为#tabWhole的内容程序中的缺陷及解决方案-1选完某个市并进入区选择框之后，再

重新选择市，高度会出现问题，例如

选择了山东省威海市，再点回选择市解决方案第一种方法：在程序的最后增加对点击“选择市”和“选择区”两个选项卡的函数定义，分别获取city和area的内容区高度，为divWhole增加该高度值。第二种方法：在tab的click事件函数中if(ind==0){}后面增加elseif(ind==1){根据city高度设置divWhole高度}else{根据area高度设置divWhole高度}程序中的缺陷及解决方案-2缺陷在省市区选择完成