1.$(document).ready() 方法 可以简写成$(function(){});
1.这个函数中的代码只会在我们的页面加载时候运行一次，确保执行js之前页面所有的dom已经准备就绪
2.点击"Get Message"按钮，将class为message 的元素的文本改为：“Here is the message”
<script>
$(document).ready(function() {
$("#getMessage").on("click", function(){
// Only change code below this line.
$(".message").html("Here is the message");
// Only change code above this line.
});
});
</script>
<div class="container-fluid">
<div class = "row text-center">
<h2>Cat Photo Finder</h2>
</div>
<div class = "row text-center">
<div class = "col-xs-12 well message">
The message will go here
</div>
</div>
<div class = "row text-center">
<div class = "col-xs-12">
<button id = "getMessage" class = "btn btn-primary">
Get Message
</button>
</div>
</div>
</div>
2.Ajax网络请求
1.你的Ajax函数将把文字"The message will go here"替换成此从FreeCodeCam的猫图API中获得的原始JSON数据。
<script>
$(document).ready(function() {
$("#getMessage").on("click", function(){
// Only change code below this line.
$.getJSON("/json/cats.json", function(json) {
$(".message").html(JSON.stringify(json));
});
// Only change code above this line.
});
});
</script>
2.将获取到的数据渲染到页面上
<script>
$(document).ready(function() {
$("#getMessage").on("click", function() {
$.getJSON("/json/cats.json", function(json) {
var html = "";
// Only change code below this line.
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>";
});
console.log(html);
// Only change code above this line.
$(".message").html(html);
});
});
});
</script>
3.理解jquery的$.extend()、$.fn和$.fn.extend()
虽然 javascript没有明确的类的概念，但是可以构建类似类的定义。
jQuery便是一个封装得非常好的类，比如，$("#btn1") 会生成一个 jQuery类的实例，理解这一点很重要。
$.extend() = jquery.extention 为jQuery类添加类方法，可以理解为添加静态方法。如
jQuery.extend({
min: function(a, b) { return a < b ? a : b; },
max: function(a, b) { return a > b ? a : b; }
});
jQuery.min(2,3); // 2
jQuery.max(4,5); // 5
$.fn是指jQuery的命名空间，fn上的成员(方法function及属性property)，会对jQuery实例每一个有效。
查看jQuery代码，就不难发现。
jQuery.fn = jQuery.prototype = {
init: function( selector, context ) {//....
};
jQuery.fn.extend(object)对jQuery.prototype进得扩展，就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数
$.fn.extend({
alertWhileClick:function() {
$(this).click(function(){
alert($(this).val());
});
}
});
$("#input1").alertWhileClick(); // 页面上为：
