題目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(handler)
$(handler)

我們經(jīng)常這么使用

 $(function(){
     console.log('ready');
 });

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

html([string])

這是一個(gè)讀寫兩用的方法，用于獲取/修改元素的innerHTML

• 當(dāng)沒有傳遞參數(shù)的時(shí)候，返回元素的innerHTML
• 當(dāng)傳遞了一個(gè)string參數(shù)的時(shí)候，修改元素的innerHTML為參數(shù)值

看個(gè)例子

$('div').html()
$('div').html('123')

后續(xù)這種讀寫兩用的方法很多，原理都類似

• 如果結(jié)果是多個(gè)進(jìn)行賦值操作的時(shí)候會(huì)給每個(gè)結(jié)果都賦值
• 如果結(jié)果多個(gè)，獲取值的時(shí)候，返回結(jié)果集中的第一個(gè)對(duì)象的相應(yīng)值

text()

和html方法類似，操作的是DOM的innerText值

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

jQuery.extend([deep,] target [, object1 ] [, objectN ] )

• 當(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í)是很有用的

• 如果想保留原對(duì)象，我們可以通過(guò)傳遞一個(gè)空對(duì)象作為目標(biāo)對(duì)象：

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

• 在默認(rèn)情況下，通過(guò)$.extend()合并操作不是遞歸的;
• deep：默認(rèn)false，如果為true，合并成為遞歸（又叫做深拷貝）

如果第一個(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)用是什么？

• jQuery鏈?zhǔn)秸{(diào)用：在對(duì)象上一次性調(diào)動(dòng)多個(gè)方法

    $(this).addClass("active").siblings().removeClass("active")

• 因?yàn)榇蟛糠謱?duì)象方法的最后是return this，所以有了鏈?zhǔn)秸{(diào)用，簡(jiǎn)易代碼。

題目5： jQuery 中 data 函數(shù)的作用

• 作用：data方法允許在DOM元素上綁定任意類型的數(shù)據(jù)，避免了循環(huán)引用的內(nèi)存泄漏風(fēng)險(xiǎn)。
• 語(yǔ)法：

   $(“selector”).data(key, value)。

題目6：

寫出以下功能對(duì)應(yīng)的 jQuery 方法：
   1. 給元素 $node 添加 class active，給元素 $noed 刪除 class active
       $node.addClass('active');
       $node.removeClass('active')  

   2. 展示元素$node, 隱藏元素$node
      $node.show();
      $node.hide();         
   
   3. 獲取元素$node 的 屬性: id、src、title， 修改以上屬性
      $node.attr('id');//獲取id
      $node.attr('id','nav');//修改id
      $node.attr('src');//獲取src
      $node.attr('src','./wed.png');//修改src
      $node.attr('title');//獲取title
      $node.attr('title','picture');//修改title    
               
   4. 給$node 添加自定義屬性data-src
      $node.attr('data-src', ' ');

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

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

   7.  刪除$node
       $node.remove()

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

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

   10. 獲取、設(shè)置$node 的寬度、高度(分別不包括內(nèi)邊距、包括內(nèi)邊距、包括邊框、包括外邊距)
       //無(wú)參數(shù)獲取寬度、高度，有參數(shù)設(shè)置寬度、高度
       $ct.width();                // width
       $ct.height();               // height
       $ct.innerWidth();       // width+ padding
       $ct.innerHeight();      // height+ padding
       $ct.outerWidth();        // width+ padding + border
       $ct.outerHeight();       // height + padding + border
       $ct.outWidth(true);     // width ＋ padding + border + margin
       $ct.outHeight(true);    // height + padding + border + margin

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

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

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

   14. 遍歷節(jié)點(diǎn)，把每個(gè)節(jié)點(diǎn)里面的文本內(nèi)容重復(fù)一遍
       $.each(function(){
            console.log($(this).text());
       })

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

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

   17.  對(duì)于$node，向上找到 class 為'.ct'的父親，在從該父親找到'.panel'的孩子
        $node.parents('.ct').find('.pandl');

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

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

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

1. 當(dāng)點(diǎn)擊$btn 時(shí)，讓 $btn 的背景色變?yōu)榧t色再變?yōu)樗{(lán)色
2. 當(dāng)窗口滾動(dòng)時(shí)，獲取垂直滾動(dòng)距離
3. 當(dāng)鼠標(biāo)放置到$div 上，把$div 背景色改為紅色，移出鼠標(biāo)背景色變?yōu)榘咨?/li>
4. 當(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)展示輸入框里的文字
5. 當(dāng)選擇 select 后，獲取用戶選擇的內(nèi)容
   task15-7

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

效果預(yù)覽

demo