分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 前端开发

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

发布时间:2023-09-06 01:41责任编辑:顾先生关键词: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: Jeremyvalue: !!!!

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>"); 输出结果:ChineseMath


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学习系列三 ]3-JQuery学习二-字典操作

原文地址:https://www.cnblogs.com/du-0210/p/8427222.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved