[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: Jeremy1: 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: 20Jimmy: 30

4. 字典聲明時賦值

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

輸出結果：
Jeremy: 20Jimmy: 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.
我喜歡吃甜食。

分類: Jquery

好文要頂 關注我 收藏該文  

一枝花算不算浪漫