定位功能（Geolocation）是HTML5的新特性，因此只有在支持HTML5的现代浏览器上运行，特别是手持设备如iphone，地理定位更加精确。首先我们要检测用户设备浏览器是否支持地理定位，如果支持则获取地理信息。注意这个特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的，所以在访问该应用时会提示是否允许地理定位，当然选择允许即可。
给你一个JQ的三级联动：<!doctype html>
<html>
<head>
<title></title>
<meta charset = "utf-8"/>
</head>
<style>
</style>
<body>
<select id="one">
<option value="">请选择省份</option>
</select>
<select id="two">
<option value="">请选择城市</option>
</select>
<select id="three">
<option value="">请选择区域</option>
</select>
<script type="text/javascript" src="js/jquery-1.12.0.js"></script>
<script type="text/javascript">
/*
1.搭建框架
2.给省份和城市绑定change事件
*/
$(function(){
var province = [
{"name" : "广东省" ,
"city" : [
{
"name" : "广州市" ,
"area" : ["越秀区","荔湾区","海珠区","天河区,白云区"]
},
{
"name" : "深圳市" ,
"area" : ["福田区","罗湖区","南山区","宝安区","龙岗区"]
}
]
},
{"name" : "浙江省" ,
"city" : [
{
"name" : "杭州市" ,
"area" : ["上城区","下城区","江干区","西湖区"]
},
{
"name" : "丽水" ,
"area" : ["莲都区","松阳县","遂昌县","云和县"]
}
]
},
{"name" : "江西省" ,
"city" : [
{
"name" : "南昌市" ,
"area" : ["东湖区","西湖区","青云谱区","湾里区"]
},
{
"name" : "九江市" ,
"area" : ["浔阳区","庐山区","瑞昌市","九江县"]
},
{
"name" : "赣州市" ,
"area" : ["章贡区","南康区","上犹县","赣县"]
}
]
},
]
// 二级联动
$("#two").change(function(){
var one_index = $("#one option:selected").index()
var two_index = $("#two option:selected").index()
var three = $("#three")
three.empty().append("<option>请选择区域</option>")
if(two_index > 0){
var area = province[one_index-1].city[two_index-1].area
for(var i = 0 i < area.length i++){
three.append("<option>"+area[i]+"</option>")
}
}
})
// 一级联动
$("#one").change(function(){
var one_index = $("#one option:selected").index()
var two = $("#two")
console.log(one_index)
two.empty().append("<option>请选择城市</option>")
$("#three").empty().append("<option>请选择区域</option>")//清除
if(one_index > 0){
var city = province[one_index-1].city
console.log(province[one_index-1].city)
for(var i = 0 i < city.length i++){
two.append("<option>"+city[i].name+"</option>")
}
}
})
init()
function init(){
for(var i = 0 i < province.length i++){
$("#one").append("<option>"+province[i].name+"</option>")
}
}
})
</script>
</body>
</html>
前端入门学习门槛比较低，所以很多人认为HTML、CSS、JavaScript是很简单就掌握的东西，以为在网上看点乱七八糟的教程，随便看看书，用HTML、CSS做个网页布局就可以入门了。如果真是这样，那基本每个人只要花点时间，随便学一下，就可以入行前端了，就可以称为前端开发工程师了，那还得了。
现在很多人就是这样，想着软件开发行业可以拿高薪，想快速入门做开发，这种想法其实没有错。但是只看一点点基础，随便学点东西，只会一点点皮毛就不再深入拓展，这样的技术水平，就算数量再多，市场对专业的前端开发需求依然是只增不减，不会有任何影响的。
仅以北京为例：
就这两年来看，移动互联网在持续发展，前端开发技术也是在不断进步的，前端应用市场越来越广泛了，前端现在正在走向工程化发展，无论是大小公司企业，对前端开发的需求都是越来越大的了，也越来越专业了。
技术无论怎么发展，整体市场是不会饱和的，饱和的也只会是低端饱和，高端始终缺人。在未来，全栈型前端开发工程师才是企业真正争夺的香饽饽。而被淘汰的不是前端开发，而是淘汰技术落后和技术不精的开发者。
那么前端开发工程师的未来路在何方？
随着前端开发技术发展，移动端应用、小程序、H5游戏出现。前端开发应用场景不断拓展。走向更专业和工程化的发展。
在以后，互联网的大量工作将会需要前端开发来完成：
播放器/游戏：H5代替Flash，如Web Audio、Web Video、Canvas
日常办公软件（复杂应用，并且慢慢从桌面程序演化为Web）：Office、Email、文档管理、产品设计、项目管理、代码编辑器
大数据/AI配套软件（复杂应用，并且慢慢从桌面程序演化为Web）：需要大量的后台系统来做数据分析/机器学习
容器/小程序：支付宝/微信/钉钉容器，各种行业功能小程序（拥有大量原生APP功能的APP成为互联网新趋势）
产品信息展示类网站（炫酷应用）：各种智能设备官网、大企业官网
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）