通过jQuery来绑定点击事件。
函数 $(document).ready()这个函数中的代码只会在我们的页面加载时候运行一次，确保执行js之前页面所有的dom已经筹备就绪。
在$(document).ready()函数中增加一个click事件。代码如下：
$("#getMessage").on("click", function(){
});
2.
当你需要按照处事器返回的数据来动态转变页面的时候，应用措施接口(API)就派上用场了。
记住，，API——应用措施接口(Application Programming Interface)是计算机之间彼此交流相同的工具。
许多网站的应用措施接口(API)都是通过一种称为JSON格局的数据来传输的，JSON 是 JavaScript Object Notation的简写。
其实如果你曾经创建过JS东西的话，你就已经使用了这种数据格局，JSON是一种非常简洁的数据格局。
它凡是表示为了两种形式，一种为单个东西，一种为多个东西
单个东西类似于：
{name:‘盖伦‘,advantage:‘单挑无敌‘}
多个东西类似于：
[{name:‘盖伦‘,advantage:‘单挑无敌‘},{name:‘诺克‘,advantage:‘上单霸主‘}]
每个东西属性和属性值的组合就是我们经常听到的"键值对(key-value pairs)"。
让我们从之前的猫图API拿取数据吧。
你应该在你的点击事件中插手如下的代码：
$.getJSON("/json/cats.json", function(json) {$(".message").html(JSON.stringify(json));
});
显示功效：[{"id":0,"imageLink":"/images/funny-cat.jpg","codeNames":["Juggernaut","Mrs. Wallace","Buttercup"]},{"id":1,"imageLink":"/images/grumpy-cat.jpg","codeNames":["Oscar","Scrooge","Tyrion"]},{"id":2,"imageLink":"/images/mischievous-cat.jpg","codeNames":["The Doctor","Loki","Joker"]}]
3.
已经从JSON API中获得了数据，此刻把它们展现到我们的HTML页面中吧。
这里，我们使用.forEach()函数来循环遍历JSON数据写到htmll变量中。
首先我们界说一个HTML变量，
var html = ""; 。
然后，我们使用.forEach()函数来循环遍历JSON数据写到html变量中，最后把html变量显示到我们的页面中。
整个过程的代码如下：
json.forEach(function(val) {var keys = Object.keys(val);
html += "<div class = ‘cat‘>";
keys.forEach(function(key) {
html += "<b>" + key + "</b>: " + val[key] + "<br>";
});
html += "</div><br>";
});
显示功效：
id:0
imageLink:/images/funny-cat.jpg
codeNames:Juggernaut,Mrs. Wallace,Buttercup
id:1
imageLink:/images/grumpy-cat.jpg
codeNames:Oscar,Scrooge,Tyrion
id:2
imageLink:/images/mischievous-cat.jpg
codeNames:The Doctor,Loki,Joker
4.
从上节课获得的JSON数组中，每个东西都包罗了一个以imageLink为键(key)，以猫的图片的url为值(value)的键值对。
当我们在遍历这些东西时，我们用imageLink的属性来显示img元素的图片。
代码如下：
html += "<img src = ‘" + val.imageLink + "‘>";
5.
如果我们不想把所有从JSON API中得到的图片都展现出来，我们可以在遍历之前做一次过滤。
我们把此中 "id" 键的值为1的图片过滤失。
代码如下:
json = json.filter(function(val) {return (val.id !== 1);
});
6.
我们还可以通过浏览器navigator获得我们当前地址的位置geolocation。
位置的信息包孕经度longitude和纬度latitude。
你将会看到一个是否允许获取当前位置的提示。不管你选择允许或者禁止，只要代码正确，这关就能过了。
如果你选择允许，你将会看到右侧手机输出的文字为你当前地址位置的经纬度。
代码如下：
if (navigator.geolocation) {navigator.geolocation.getCurrentPosition(function(position) {
$("#data").html("latitude: " + position.coords.latitude + "<br>longitude: " + position.coords.longitude);
});
}
JSON APIs and Ajax