一道前端面试题：躲猫猫
来公司面试的时候，遇到一个这样的题目：
鼠标划过下面那行的时候显示：亲~ 躲猫猫开始咯，先用css技能哦！题目要求找出页面隐藏的信息，利用信息中的邮箱给面试官发一封邮件。
看到题的时候确实是不知道从哪下手，进公司以后leader给安排的任务一直与之相关，难怪要出这种题了。今天的任务之一是把这道题做出来，并将找到的信息单独在一个页面上显示出来，虽然做出来了，不过不太清楚是否我所用的方法是靠谱的，若有错误，望指正！
首先打开浏览器调试窗，打开页面js文件，
若是只要找到邮箱的话，上述已经可以达到效果，即在console中直接运行原页面中的ajax函数就可以了，得到上图中的url，然后直接可以访问数据。
jQuery17208457360160179241_1404196258347({
"users":[{
"id":"001",
"name":"解码前",
"age":"28",
"nickname":"解码前",
"position":"解码前",
"email":"admin@163.com"
}]
});若是要所有的数据，那么还需要额外的处理，因为取到的数据经过jquery的编码，需要解码后才能正常显示。找到了请求数据的URL，然后用简单的ajax的封装函数$.get()函数进行获取信息，最终如下代码所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
#userInfo{width:500px;margin:0 auto;}
.infos{font-size: 16px;font-family: "微软雅黑";line-height: 30px;}
</style>
<script src="js/jquery-1.11.1.js" type="text/javascript" ></script>
</head>
<body>
<div id="userInfo">
<h2>信息</h2>
<div class="infos"></div>
<div class="infos2">
</div>
</div>
<script>
$.ajax({
url:"http://mining.com.cn/index",
dataType:"jsonp",
jsonp:"callback",
type:"get",
success:function(a){
var users = a.users[0];
$(".infos").html("<span style='color:#f00;'>id:</span>"+ decodeURIComponent(users.id)+"<br/>"+"<span style='color:#f00;'>name:</span>"+decodeURIComponent(users.name)+"<br/>"+"<span style='color:#f00;'>age:</span>"+decodeURIComponent(users.age)+"<br/>"+"<span style='color:#f00;'>nickname:</span>"+decodeURIComponent(users.nickname)+"<br/>"+"<span style='color:#f00;'>position:</span>"+decodeURIComponent(users.position)+"<br/>"+"<span style='color:#f00;'>email:</span>"+decodeURIComponent(users.email)+"<br/>");
$(".infos2")
}
})
</script>
</body>
</html>
