題目1： jQuery 中， $(document).ready()是什么意思？
當 DOM（文檔對象模型） 已經加載，并且頁面已經完全呈現時，會發生 ready 事件。
由于該事件在文檔就緒后發生，因此把所有其他的 jQuery 事件和函數置于該事件中是非常好的做法
題目2： $node.html()和$node.text()的區別?
$node.html():設置或返回匹配的元素集合中的 HTML 內容。
$node.text():設置或返回匹配元素的文本內容。
題目3： $.extend 的作用和用法?
將兩個或更多對象的內容合并到第一個對象。
eg:
//用法一
var a = {
apple: 0,
banana: { weight: 52, price: 100 },
cherry: 97
};
var b = {
banana: { price: 200 },
durian: 100
};
// Merge object2 into object1
$.extend( a, b);
//含義為將a,和b合并，并且改變$.extend( a, b)中第一個參數a。后面的參數如果和前面的參數存在相同的名稱，那么后面的會覆蓋前面的參數值，沒有則新增。
//如果不想改變a,可以新增一個參數，并用變量接著
var c = $.extend({}, a, b);
extend(boolean,dest,src1,src2,src3...);
var result=$.extend( true, {},
{ name: "John", location: {city: "Boston",county:"USA"} },
{ last: "Resig", location: {state: "MA",county:"China"} } );
//它會將src中的嵌套子對象也進行合并，結果為：{name:"John",last:"Resig",location:{city:"Boston",state:"MA",county:"China"}}
//如果為false則覆蓋，結果為：{name:"John",last:"Resig",location:{state:"MA",county:"China"}}
題目4： jQuery 的鏈式調用是什么？
$(元素).方法（）
.方法（）
.方法（）...
鏈式調用的好處：
1.節省代碼量，代碼看起來更優雅；
2.返回的都是同一個對象，可以提高代碼的效率。
回溯：end()有時你需要中間值而中斷鏈式調用，或者鏈式調用中某個方法返回的this改變了，那么者就需要回溯了。回溯幫你維持this的正確指向
end方法就是回溯到上一個dom合集。
題目5： jQuery 中 data 函數的作用
data（）方法將數據附加到選定元素或從中選取元素的數據。
//頁面部分
<button id="btn1">Attach data to div element</button><br>
<button id="btn2">Get data attached to div element</button>
//代碼部分
$(document).ready(function(){
$("#btn1").click(function(){
$("div").data("greeting", "Hello World");
});
$("#btn2").click(function(){
alert($("div").data("greeting"));
});
});
題目6：寫出以下功能對應的 jQuery 方法：
給元素 $node 添加 class active
$noed.addClass("active")
給元素 $noed 刪除 class active
$noed.removeClass("active")
展示元素$node,
$noed.show()
隱藏元素$node
$noed.hide()
獲取元素$node 的 屬性: id、src、title
var eid = $noed.attr("id");
var esrc = $noed.attr("src");
var etitle= $noed.attr("title");
修改以上屬性
$noed.attr("id",value);
$noed.attr("src",value);
$noed.attr("title",value);
給$node 添加自定義屬性data-src
$noed.attr("data-src",value);
在$ct 內部最開頭添加元素$node
$ct.prepend($node);
在$ct 內部最末尾添加元素$node
$ct.append($node);
刪除$node
$node.remove();
把$ct里內容清空
$node.empty();
在$ct 里設置 html <div class="btn"></div>
$ct.html('<div class="btn"></div>')
獲取、設置$node 的寬度、高度(分別不包括內邊距、包括內邊距、包括邊框、包括外邊距)
//獲取寬高不包括內邊距
$ct.height();
$ct.width();
//包括內邊距
$ct.innerHeight();
$ct.innerWidth();
//包括padding，border
$ct.outerHeight();
$ct.outerWidth();
//包括padding，border,margin
$ct.outerHeight(true);
$ct.outerWidth(true);
獲取窗口滾動條垂直滾動距離
$(window).scrollTop()
獲取$node 到根節點水平、垂直偏移距離
// 到根節點水平距離
$node .offset().left;
//到根節點垂直偏移距離
$node .offset().top;
修改$node 的樣式，字體顏色設置紅色，字體大小設置14px
$node.css({"color":"red","font-size":"14px"})
遍歷節點，把每個節點里面的文本內容重復一遍
$node.each(function(){
console.log($(this).text())
})
從$ct 里查找 class 為 .item的子元素
$ct.find(".item")
獲取$ct 里面的所有孩子
$ct.find();
對于$node，向上找到 class 為'.ct'的父親，在從該父親找到'.panel'的孩子
var $parents = $node.parents(".ct");
var $panel = $parents.find(".panel");
獲取選擇元素的數量
$ct.length;
獲取當前元素在兄弟中的排行
$ct.index();
題目7：
用jQuery實現以下操作當點擊$btn 時，讓 $btn 的背景色變為紅色再變為藍色
當窗口滾動時，獲取垂直滾動距離
當鼠標放置到$div 上，把$div 背景色改為紅色，移出鼠標背景色變為白色
當鼠標激活 input 輸入框時讓輸入框邊框變為藍色，當輸入框內容改變時把輸入框里的文字小寫變為大寫，當輸入框失去焦點時去掉邊框藍色，控制臺展示輸入框里的文字
當選擇 select 后，獲取用戶選擇的內容
代碼效果地址
題目8： 用 jQuery ajax 實現如下效果。
`當點擊加載更多會加載數據展示到頁面代碼效果地址
題目9(選做)： 實現一個天氣預報頁面，UI 如下圖所示(可自由發揮)。
數據接口:
獲取當前用戶所在城市接口：//jirenguapi.applinzi.com/city.php
服務端支持 CORS 跨域調用，前端可直接使用 ajax 獲取數據
獲取某城市對應的天氣接口：//jirenguapi.applinzi.com/weather.php?city=北京
服務端支持 CORS 跨域調用，前端可直接使用 ajax 獲取數據, 如果不傳遞參數默認獲取當前用戶所在城市的天氣
代碼效果地址
