題目1：jQuery 中， $(document).ready()是什么意思？

1. $(document).ready()表示頁面的dom元素已經加載完畢，這是為了防止在頁面加載元素加載完之前對dom元素進行操作。原生js中我們可以使用window.onload來達到這個效果，不過兩者還是有區別，onload是所有元素、圖片、外部資源都加載完，而$(document).ready()只需要元素加載完成。所以onload比$().ready()要慢

題目2：$node.html()和$node.text()的區別?

1. $node.html()返回node中的html內容，$node.text()返回node中的文本內容。
2. 當包含參數的時候，html(str)為替換html內容為參數值，text(str)為替換文本內容為參數值。

題目3：$.each，$.extend 的作用和用法?

1. $.each：
   $.each()函數和$(selector).each()是不一樣的，$(selector).each()是專門遍歷一個jQuery對象的，$.each()函數可用于迭代任何集合，無論是“名/值”對象（JavaScript對象）或數組。在迭代數組的情況下，回調函數每次傳遞一個數組索引和相應的數組值作為參數。該方法返回其第一個參數，就是迭代的對象。

//$.each()
var str=$.each([52, 97],function(index,value){
  console.log(index+":"+value);
});
var  obj=$.each({"a":10,"b":"jon"},function(index,value){
  console.log(index+":"+value);
});
//$(selector).each()
<ul class="list">
  <li>1</li><li>2</li>
</ul>
$("ul.list li").each(function(){
  var num=$(this).text()*2;
  $(this).text(num);
});

2. $.extend：
   當我們提供兩個或多個對象給$.extend()，對象的所有屬性都添加到目標對象（第一個參數）。
   只有一個參數提供給$.extend()，意味著目標參數被省略。jQuery對象被默認為目標對象。這時可以在jQuery的命名空間下添加新的功能。對于插件開發者希望向 jQuery 中添加新函數時是很有用的。
   在默認情況下，通過$.extend()合并，如果第一個對象的屬性本身是一個對象或數組，那么它將完全用第二個對象相同的key重寫一個屬性。然而，如果將 true 作為該函數的第一個參數，那么會在對象上進行遞歸的合并。

//默認情況下合并是重寫一個屬性
var object1 = {
  apple: 0,  banana: { weight: 52, price: 100 },  cherry: 97
};
var object2 = {
  banana: { price: 200 },  durian: 100
};
$.extend( object1, object2 );    //object1={apple: 0,  banana: { price: 200 }, cherry: 97,durian: 100}，banaba被替換了，而不是合并
//第一個參數為true時
var object1 = {
  apple: 0,  banana: { weight: 52, price: 100 },  cherry: 97
};
var object2 = {
  banana: { price: 200 },  durian: 100
};
$.extend( true, object1, object2 );    //object1={apple: 0,  banana: { weight:52,price: 200 },  cherry: 97,durian: 100}，banaba被合并
//不改變第一個參數，生成新對象
var defaults = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
var settings = $.extend( {}, defaults, options );   //settings={validate: true, limit: 5, name: "bar"}

題目4：jQuery 的鏈式調用是什么？

jQuery鏈式調用：在對象上一次性調動多個方法
$(this).addClass("active").siblings().removeClass("active");
$('#ct').css('color','blue').show(400).hide();
因為大部分對象方法的最后是return this，所以有了鏈式調用，簡易代碼。

題目5：jQuery 中 data 函數的作用

.data() 方法允許我們在DOM元素上綁定任意類型的數據,避免了循環引用的內存泄漏風險。

//我們可以在一個元素上設置不同的值，之后獲取這些值：
$("body").data("foo", 52); 
$("body").data("bar", { myType: "test", count: 40 });
$("body").data({ baz: [ 1, 2, 3 ] });
$("body").data();   //{ foo: 52, bar: { myType: "test", count: 40 }, baz: [ 1, 2, 3 ] }
//獲取值，若無則返回undefined
alert( $("body").data("hint")); //undefined
alert( $("body").data("foo")); //52
//刪除值
$("body").removeData("foo");
console.log($("body").data("foo"));    //undefined

  <div>
  The values stored were<span></span>and<span></span>
</div>
<script>var div = $("div")[0];
   $("div").data("test", { first: 16, last: "pizza!" });
   $("span:first").text($("div").data("test").first);    //第一個span里面加16
   $("span:last").text($("div").data("test").last);    //第二個span里面加pizza!
</script>
//從jQuery 1.4.3起，HTML 5 data- 屬性將自動被引用到jQuery的數據對象中。
<div data-role="page" data-last-value="43" data-hidden="true"></div>
$("div").data("role")==="page"
$("div").data("lastValue")===43
$("div").data("hidden")===true

題目6：寫出以下功能對應的 jQuery 方法：

1. 增刪class
   給元素 $node 添加 class active,給元素 $noed 刪除 class active

$("node").addClass("active");  $("node").removeClass("active");

2. 顯示/隱藏
   展示元素$node, 隱藏元素$node

$(node).show();  $("node").hide();    //2個參數，1.動畫運行時間;2.完成時執行的函數；

3. 獲取/修改屬性
   獲取元素$node 的 屬性: id、src、title， 修改以上屬性

$("node").attr("id"); $("node").attr("src"); $("node").attr("title"); 
$("node").attr("id","value"); $("node").attr("src","value"); $("node").attr("title","value");

4. 添加自定義屬性
   給$node 添加自定義屬性data-src

$("node").data("src","value");

5. 開頭添加元素
   在$ct 內部最開頭添加元素$node

$("ct").prepend($("node"));

6. 末尾添加元素
   在$ct 內部最末尾添加元素$node

$("ct").append($("node"));

7. 刪除元素
   刪除$node

$("node").remove(); 
$("node1").remove($("node")); //刪除node1里的node

8. 清空元素里的內容
   把$ct里內容清空

$("ct").empty();

9. 設置html
   在$ct 里設置 html <div class="btn"></div>

$("ct").html("<div class='btn'></div>");

10. 獲取寬高
    獲取、設置$node 的寬度、高度(分別不包括內邊距、包括內邊距、包括邊框、包括外邊距)

$node.width();//不包括內邊距寬度,僅包括內容
$node.height();//不包括內邊距高度,僅包括內容
$node.innerWidth();//包括內容和內邊距寬度
$node.innerHeight();//包括內容和內邊距高度
$node.outerWidth();//包括內容,內邊距,邊框寬度
$node.outerHeight();//包括內容,內邊距,邊框高度
$node.outerHeight(true);//包括內容,內邊距,邊框,外邊距高度
$node.outerWidth(true);//包括內容,內邊距,邊框,外邊距寬度

11. 獲取滾動距離
    獲取窗口滾動條垂直滾動距離

$(window).scrollTop();

12. 獲取水平垂直偏移距離
    獲取$node 到根節點水平、垂直偏移距離

$node.offset();    //返回的對象包含top 和 left, 此方法只對可見元素有效

13. 修改元素樣式
    修改$node 的樣式，字體顏色設置紅色，字體大小設置14px

 $node.css({
    color: 'red',
    'font-size': '14px'                //中間有短線的必須用引號，因為js只支持下劃線
  });

14. 遍歷節點
    遍歷節點，把每個節點里面的文本內容重復一遍

$('#items li').each(function(){
    var text = $(this).text()
    $(this).text(text + text)
});

15. 查找元素
    從$ct 里查找 class 為 .item的子元素

$ct.find('.item');

16. 獲取元素
    獲取$ct 里面的所有孩子

$ct.children();

17. 獲取元素
    對于$node，向上找到 class 為'.ct'的父親，在從該父親找到'.panel'的孩子

$node.parents(".ct").find(".panel");

18. 獲取元素數量
    獲取選擇元素的數量

$node.length
$node.size() //自1.8版本廢棄，請使用.length代替

19. 獲取元素排行
    獲取當前元素在兄弟中的排行

$node.index();

題目7：用jQuery實現以下操作

1. 當點擊$btn 時，讓 $btn 的背景色變為紅色再變為藍色

$(".wrap").on("click",".btn",function(e){
  e.preventDefault();
  var $this=$(this);
  $(this).css("background-color","red");
  setTimeout(function(){
    $this.css("background-color","blue");
    console.log($this);
  },800);
});

2. 當窗口滾動時，獲取垂直滾動距離

$(window).on("scroll",function(){
  $(".getHeight").find("span").text($(window).scrollTop());
});

3. 當鼠標放置到$div 上，把$div 背景色改為紅色，移出鼠標背景色變為白色

$(".wrap").on("mouseenter",".line .b",function(){
  $(this).css("background-color","red");
});
$(".wrap").on("mouseleave",".line .b",function(){
  $(this).css("background-color","#fff");
});

4. 當鼠標激活 input 輸入框時讓輸入框邊框變為藍色

$(".wrap").on("focus",".line input[type=text]",function(){
  $(this).css("border-color","blue");
});

5. 當輸入框內容改變時把輸入框里的文字小寫變為大寫

$(".wrap").on("focusout",".line input[type=text]",function(){
  console.log($(this).val());
});

6. 當輸入框失去焦點時去掉邊框藍色，控制臺展示輸入框里的文字

$(".wrap").on("input",".line input[type=text]",function(){
  $(this).val($(this).val().toUpperCase());
});

7. 當選擇 select 后，獲取用戶選擇的內容

$(".wrap").on("change","select",function(){
  $(this).parent().find(".right").text($(this).find("option:selected").text());
});

代碼

題目8：用 jQuery ajax 實現如下效果。`當點擊加載更多會加載數據展示到頁面效果預覽304

代碼

題目9(選做)：** 實現一個天氣預報頁面，UI 如下圖所示(可自由發揮)。數據接口:

獲取當前用戶所在城市接口：//jirenguapi.applinzi.com/city.php
服務端支持 CORS 跨域調用，前端可直接使用 ajax 獲取數據

獲取某城市對應的天氣接口：//jirenguapi.applinzi.com/weather.php?city=北京
服務端支持 CORS 跨域調用，前端可直接使用 ajax 獲取數據, 如果不傳遞參數默認獲取當前用戶所在城市的天氣
代碼

(mission 15)