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

當(dāng)DOM準(zhǔn)備就緒時(shí)，指定一個(gè)函數(shù)來(lái)執(zhí)行。
雖然JavaScript提供了load事件，當(dāng)頁(yè)面呈現(xiàn)時(shí)用來(lái)執(zhí)行這個(gè)事件，直到所有的東西，如圖像已被完全接收前，此事件不會(huì)被觸發(fā)。
在大多數(shù)情況下，只要DOM結(jié)構(gòu)已完全加載時(shí)，腳本就可以運(yùn)行。傳遞處理函數(shù)給.ready()方法，能保證DOM準(zhǔn)備好后就執(zhí)行這個(gè)函數(shù)，因此，這里是進(jìn)行所有其它事件綁定及運(yùn)行其它 jQuery 代碼的最佳地方。
如果執(zhí)行的代碼需要在元素被加載之后才能使用時(shí)，（例如，取得圖片的大小需要在圖片被加載完后才能知道），就需要將這樣的代碼放到 load 事件中。
下面語(yǔ)法全部是等價(jià)的：

$(document).ready(function)
$().ready(function)
$(function)

2. $node.html()和$node.text()的區(qū)別?

$node.html()用于獲取和修改元素的innerHTML值，包括標(biāo)簽。
$node.text()用于獲取和修改元素的innerText值，即文本值，不包括標(biāo)簽。

3. $.extend 的作用和用法?

作用：

• 將兩個(gè)或更多對(duì)象的內(nèi)容合并到第一個(gè)對(duì)象。
• 當(dāng)我們提供兩個(gè)或多個(gè)對(duì)象給$.extend()，對(duì)象的所有屬性都添加到目標(biāo)對(duì)象（target參數(shù)）。
• 如果只有一個(gè)參數(shù)提供給$.extend()，這意味著目標(biāo)參數(shù)被省略。在這種情況下，jQuery對(duì)象本身被默認(rèn)為目標(biāo)對(duì)象。這樣，我們可以在jQuery的命名空間下添加新的功能。這對(duì)于插件開發(fā)者希望向 jQuery 中添加新函數(shù)時(shí)是很有用的

目標(biāo)對(duì)象（第一個(gè)參數(shù)）將被修改，并且將通過(guò)$.extend()返回。然而，如果我們想保留原對(duì)象，我們可以通過(guò)傳遞一個(gè)空對(duì)象作為目標(biāo)對(duì)象：

var object = $.extend({}, object1, object2);

在默認(rèn)情況下，通過(guò)$.extend()合并操作不是遞歸的;
如果第一個(gè)對(duì)象的屬性本身是一個(gè)對(duì)象或數(shù)組，那么它將完全用第二個(gè)對(duì)象相同的key重寫一個(gè)屬性。這些值不會(huì)被合并。如果將 true作為該函數(shù)的第一個(gè)參數(shù)，那么會(huì)在對(duì)象上進(jìn)行遞歸的合并。

var object1 = {
  apple: 0,
  banana: { weight: 52, price: 100 },
  cherry: 97
};
var object2 = {
  banana: { price: 200 },
  durian: 100
};
// Merge object2 into object1
$.extend( object1, object2 );

4. jQuery 的鏈?zhǔn)秸{(diào)用是什么？

鏈?zhǔn)讲僮骶褪欠植襟E地對(duì)jQuery對(duì)象實(shí)現(xiàn)各種操作。

$("#test").css('color','red').show(200).removeClass('style');

上面的例子就是鏈?zhǔn)讲僮鳎谝恍写a里，對(duì)id為test的對(duì)象進(jìn)行了三項(xiàng)操作：先設(shè)置其字體顏色為紅色，再顯示對(duì)象，最后移除對(duì)象的“style”這個(gè)樣式。
不使用鏈?zhǔn)秸{(diào)用，則寫成：

$("#test").css('color','red');
$("#test").show(200);
$("#test").removeClass('style');

可見，鏈?zhǔn)秸{(diào)用可以簡(jiǎn)化代碼。

5. jQuery 中 data 函數(shù)的作用

data() 方法向被選元素附加數(shù)據(jù)，或者從被選元素獲取數(shù)據(jù)。通過(guò)data()函數(shù)存取的數(shù)據(jù)都是臨時(shí)數(shù)據(jù)，一旦頁(yè)面刷新，之前存放的數(shù)據(jù)都將不復(fù)存在。該函數(shù)屬于jQuery對(duì)象(實(shí)例)。如果需要移除通過(guò)data()函數(shù)存放的數(shù)據(jù)，請(qǐng)使用 removeData() 函數(shù)。

• 獲取附加的data的值
  $(selector).data(name)
  參數(shù)說(shuō)明
  name：可選。規(guī)定要取回的數(shù)據(jù)的名稱。
  如果沒(méi)有規(guī)定名稱，則該方法將以對(duì)象的形式從元素中返回所有存儲(chǔ)的數(shù)據(jù)。
• 用name和value為對(duì)象附加數(shù)據(jù)
  $(selector).data(name,value)
  參數(shù)說(shuō)明
  selector：為需要附加或者獲取數(shù)據(jù)的對(duì)象。
  name：參數(shù)為數(shù)據(jù)的名稱。
  value：參數(shù)為數(shù)據(jù)的值。
• 使用對(duì)象向元素附加數(shù)據(jù)
  $(selector).data(object)
  使用帶有名稱/值對(duì)的對(duì)象向被選元素添加數(shù)據(jù)。可以直接傳入另一個(gè)對(duì)象作為參數(shù)。這種情況下，對(duì)象的屬性名稱和屬性值將被視為多個(gè)鍵值對(duì)，從中提取的屬性名稱和屬性值都會(huì)被復(fù)制到目標(biāo)對(duì)象的緩存中。

6. 寫出以下功能對(duì)應(yīng)的 jQuery 方法：

• 給元素 $node 添加 class active，給元素 $noed 刪除 class active
  $node.addClass('active');
  $node.removeClass('active');

• 展示元素$node, 隱藏元素$node
  $node.show();
  $node.hide();

• 獲取元素$node 的 屬性: id、src、title， 修改以上屬性
  $node.attr('id','id123');
  $node.attr('src','http://jirengu.com');
  $node.attr('title','this is jirengu');

• 給$node 添加自定義屬性data-src
  $node.attr('data-src','http://baidu.com');

• 在$ct 內(nèi)部最開頭添加元素$node
  $ct.prepend($node);

• 在$ct 內(nèi)部最末尾添加元素$node
  $ct.append($node);

• 刪除$node
  $node.remove(); //刪除事件綁定
  $node.detach(); //保留事件綁定

• 把$ct里內(nèi)容清空
  $ct.empty();

• 在$ct 里設(shè)置 html <div class="btn"></div>
  $ct.html('<div class="btn"></div>')

• 獲取、設(shè)置$node 的寬度、高度(分別不包括內(nèi)邊距、包括內(nèi)邊距、包括邊框、包括外邊距)
  $node.width(value); //不包括內(nèi)邊距
  $node.height(value); //不包括內(nèi)邊距

  $node.innerWidth(value); //包括內(nèi)邊距
  $node.innerHeight(value); //包括內(nèi)邊距
  
  $node.outerWidth(false); //包括邊框
  $node.outerHeight(false); //包括邊框
  
  $node.outerWidth(true); //包括外邊距
  $node.outerHeight(true); //包括外邊距
  

• 獲取窗口滾動(dòng)條垂直滾動(dòng)距離
  $(window).scrollTop()

• 獲取$node 到根節(jié)點(diǎn)水平、垂直偏移距離
  $node.offset();

• 修改$node 的樣式，字體顏色設(shè)置紅色，字體大小設(shè)置14px
  $node.css({
  'color': 'red',
  'font-size': '14px'
  });

• 遍歷節(jié)點(diǎn)，把每個(gè)節(jié)點(diǎn)里面的文本內(nèi)容重復(fù)一遍
  $node.each(function(){
  var text = $(this).text();
  console.log($(this).text(text + text)); //不能用DOM的this
  });

• 從$ct 里查找 class 為 .item的子元素
  $ct.find('.item');

• 獲取$ct 里面的所有孩子
  $ct.children();

• 對(duì)于$node，向上找到 class 為'.ct'的父親，再?gòu)脑摳赣H找到'.panel'的孩子
  $node.parents(.ct).find(.panel);

• 獲取選擇元素的數(shù)量
  $node.length;

• 獲取當(dāng)前元素在兄弟中的排行
  $node.index();

7. 用jQuery實(shí)現(xiàn)以下操作

• 當(dāng)點(diǎn)擊$btn 時(shí)，讓 $btn 的背景色變?yōu)榧t色再變?yōu)樗{(lán)色
• 當(dāng)窗口滾動(dòng)時(shí)，獲取垂直滾動(dòng)距離
• 當(dāng)鼠標(biāo)放置到$div 上，把$div 背景色改為紅色，移出鼠標(biāo)背景色變?yōu)榘咨?/li>
• 當(dāng)鼠標(biāo)激活 input 輸入框時(shí)讓輸入框邊框變?yōu)樗{(lán)色，當(dāng)輸入框內(nèi)容改變時(shí)把輸入框里的文字小寫變?yōu)榇髮懀?dāng)輸入框失去焦點(diǎn)時(shí)去掉邊框藍(lán)色，控制臺(tái)展示輸入框里的文字
• 當(dāng)選擇 select 后，獲取用戶選擇的內(nèi)容
  代碼地址

8. 用 jQuery ajax 實(shí)現(xiàn)如下效果。當(dāng)點(diǎn)擊加載更多會(huì)加載數(shù)據(jù)展示到頁(yè)面 效果預(yù)覽

代碼地址(本地測(cè)試可行)