专栏首页一枝花算不算浪漫的专栏[jQuery学习系列三 ]3-JQuery学习二-字典操作

[jQuery学习系列三 ]3-JQuery学习二-字典操作

前言: 如果看过了第一篇和第二篇, 相信大家会对jQuery有个初步的认识了, 对于jQuery的选择器和数组的操作都已经很熟悉了, 这一篇就单独罗列jQuery中字典的操作相关的内容.

1. 数组中添加map

var arr = []; 
var key = 'Jeremy'; 
var value = '!!!!' 
arr.push({ 
'key': key, 
'value': value, 
}); 

document.write("key: " + arr[0]['key'] + 
"<br/>value: " + arr[0]['value']);

输出结果:
key: Jeremy
value: !!!!

2. 数组遍历输出

var arr = []; 
arr.push("Jeremy"); 
arr.push("Jimmy"); 
for(var i in arr) 
document.write(i + ": " + arr[i] + "</br>");

输出结果:
0: Jeremy
1: Jimmy

3. 类似字典(map)遍历

var dict = []; //or dict = new Array() 
dict["Jeremy"] = 20; 
dict["Jimmy"] = 30; 
for(var key in dict) 
document.write(key + ": " + dict[key] + "</br>"); 

输出结果:
Jeremy: 20
Jimmy: 30

4. 字典声明时赋值

var dict = { 
"Jeremy" : 20, 
"Jimmy" : 30 
}; 
for(var key in dict) 
document.write(key + ": " + dict[key] + "</br>"); 

输出结果:
Jeremy: 20
Jimmy: 30
var dict = { 
"Jeremy" : ["Chinese", "Math"] , 
"Jimmy" : ["Art", "English"] 
}; 
var name = "Jeremy"; 
for(var courseIndex in dict[name]) 
document.write(dict[name][courseIndex] + "</br>"); 

输出结果:
Chinese
Math

5. 字典里value为数组, 数组内为字典,

var dict = []; 
var courseListOfJeremy = [ 
{"Chinese" : 3}, 
{"Math": 5} 
]; 
dict['Jeremy'] = courseListOfJeremy; 
var courseListOfJimmy = [ 
{"Art": 3}, 
{"English": 5} 
]; 
dict['Jimmy'] = courseListOfJimmy; 

document.write("Jimmy's Course Number Of Chinese: " + dict['Jeremy'][0]['Chinese']);

输出结果:
Jimmy's Course Number Of Chinese: 3

小例子:用JS实现省市县三级联动

<h3>
    您的地址是:
</h3>
<select id="Province" onchange="SelectValueChanged('Province', 'Get_City')">
    <option id="Not_data1">Province</option>
    <option id="GuangDong" value="GuangDong">GuangDong</option>
    <option id="ShanDong" value="ShanDong">ShanDong</option>
    <option id="HuNan" value="HuNan">HuNan</opetion>
</select>
<select id="City" onchange="SelectValueChanged('City', 'Get_Country')">
    <option id="Not_data2">City</option>
</select>
<select id="Country">
    <option id="Not_data3">Country</option>
</select>


"use strict"
//初始化的数据
var placeDictionary = {
    "GuangDong":{
        "GuangZhou":["PanYu","HuangPu","TianHe"],
        "QingYuan":["QingCheng","YingDe","LianShan"],
        "FoShan":["NanHai","ShunDe","SanShui"]
    },
    "ShanDong":{
        "JiNan":["LiXia","ShiZhong","TianQiao"],
        "QingDao":["ShiNan","HuangDao","JiaoZhou"]
    },
    "HuNan":{
        "ChangSha":["KaiFu","YuHua","WangCheng"],
        "ChenZhou":["BeiHu","SuXian","YongXian"]
    }
};

//通过province或city的变化连动
function SelectValueChanged(idType, perpose) {
    var selectedValue = GetSelectedId(idType);
    if(perpose == "Get_City")
    {
        AddCity(selectedValue);
    }
    else if(perpose == "Get_Country")
    {
        AddCountry(selectedValue);
    }
}

function GetSelectedId(id){
    var prop = document.getElementById(id);
    var selectedValue = prop.options[prop.selectedIndex].id;
    return selectedValue;
}

function AddCity(provinceSelectedValue){
    //保持联动的一致性, 当Province的index变化时都需要清空City和Country的值
    $("#City").empty();
    $("#City").append("<option>City</option>");
    $("#Country").empty();
    $("#Country").append("<option>Country</option>");
    var cityNames = placeDictionary[provinceSelectedValue];
    for(var city in cityNames)
    {
        //这里遍历的值直接是value
        var value = "<option id='"+ city +"'>" + city + "</option>";
        $("#City").append(value);
    }
}

function AddCountry(citySelectedValue) {
    //保持联动一致性,当City的index变化时需要清空Country中的值
    $("#Country").empty();
    $("#Country").append("<option>Country</option>");
    var provinceSelectedId = GetSelectedId("Province");
    //获得城市列表
    var countries = placeDictionary[provinceSelectedId][citySelectedValue];
    for(var index in countries)
    {
        //这里index获取的是id 值
        var value = "<option id='"+ countries[index] +"'>" + countries[index] + "</option>";
        $("#Country").append(value);
    }
}

效果如下图:

英语小贴士:

I ache all over. 我浑身酸痛。 I'm flattered. 过奖了。 I'm mad at myself. 我生自己的气。 I'm not myself today. 我今天心神不宁。 I'm very/ really/ terribly/ awfully/ extremely sorry. 十分抱歉。 I'm working on it. 我正在努力。 It can't be helped. 无能为力。 I can't seem toget to sleep. 我好像睡不着。 I don't feel up to that. 我觉得不能胜任那工作。 I have a runny nose. 我流鼻涕。 I have a sweet tooth. 我喜欢吃甜食。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • [jQuery学习系列六]6-jQuery实际操作小案例

    一枝花算不算浪漫
  • [JavaWeb]关于DBUtils中QueryRunner的一些解读.

    一枝花算不算浪漫
  • 比AtomicLong更优秀的LongAdder确定不来了解一下吗?

    文章中所有高清无码图片在公众号号回复: 图片666 即可查阅, 可直接关注公众号:壹枝花算不算浪漫

    一枝花算不算浪漫
  • HTML五级下拉联动菜单

    做网页的菜单联动网上的看起来很负责,可以直接看着个,懂点jQuery就可以。 这个代码简单,而且在上一篇 android下拉五级菜单联动的博文中的理论思想已...

    张泽旭
  • zTree创建quickSearch检索框

    河岸飞流
  • 我去,脸皮厚啊,竟然使用==比较浮点数?

    老读者都知道了,我在九朝古都洛阳的一家小作坊式的公司工作,身兼数职,谈业务、敲代码的同时带两个新人,其中一个就是大家熟知的小王,经常犯错,被我写到文章里。

    沉默王二
  • Flash AS3 性能优化

    http://help.adobe.com/zh_CN/as3/mobile/index.html

    py3study
  • 【经验分享】Hydra(爆破神器)使用方法

    这个也是backtrack下面很受欢迎的一个工具 参数详解: -R 根据上一次进度继续破解 -S 使用SSL协议连接 -s 指定端口 -l 指定用户名 -L 指...

    Angel_Kitty
  • Go语言 | 哪些大公司在用go语言?

    Go大概09年面世以来,已经8年了,也算是8年抗战。在这8年中,已经有很多公司开始使用Go语言开发自己的服务,甚至完全转向Go开发,也诞生了很多基于Go的服务和...

    飞雪无情
  • 万能实体类(PageDate)

    猿码优创

扫码关注云+社区

领取腾讯云代金券