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

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

$(document).ready(handler)
$(handler)

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

• $node.html()
  這是一個讀寫兩用的方法, 用于獲取/修改元素的innerHTML,包含html標簽和文本內(nèi)容;
  • 當沒有傳遞參數(shù)的時候, 返回元素的innerHTML
  • 當傳遞了一個string參數(shù)的時候, 修改元素的innerHTML為參數(shù)值

$('div').html()  
$('div').html('123')  
//如果結(jié)果是多個進行賦值操作的時候會給每個結(jié)果都賦值
//如果結(jié)果是多個獲取值得時候, 返回結(jié)果集中的第一個對象的相應(yīng)值

• $node.text()
  和html方法類似, 操作的是DOM的innerText值,不包含html標簽, 只包含文本內(nèi)容

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

jQuery.extend([deep], target, object1[, objectN..])(把兩個或更多的對象合并到第一個當中)

• deep: 可選Boolean類型, 指是否深度合并對象, 默認為false(可以明確指定為true, 但不能明確指定為false), 如果該值為true, 且多個對象的某個同名屬性也都是對象, 則該"屬性對象"的屬性也將進行合并;
  target: Object類型, 目標對象, 其他對象的成員屬性將被賦值到該對象上;
  Object1: 可選Object, 第一個被合并的對象
  ObjectN: 可選, 第N個被合并的對象
• 如果參數(shù)為null或undefined, 則該參數(shù)將被忽略
• 如果只為$.extend()指定了一個參數(shù), 則意味著參數(shù)target被省略. 此時, target就是jQuery本身; 通過這種方式, 我們可以為全局對象jQuery添加新的函數(shù)
• 如果多個對象具有相同的屬性, 后者會覆蓋前者的屬性值

jQuery.fn.extend()把對象掛載到j(luò)Query的prototype屬性, 來擴展一個新的jQuery實例方法

簡單來說: $.extend() 是用來擴展jQuery靜態(tài)方法; $.fn.extend()是用來擴展jQuery實例方法

$.extend({
  sayName: function(){
    console.log("My name is jQuery");
  }
}); 
$.sayName(); //擴展靜態(tài)方法

$.fn.extend({
  check: function() {
    return this.each(function() {
        this.checked = true;
    });
  }
});
$("input[type='checkbox']").check(); //擴展實例方法:所有的checkbox都會被選擇
// 擴展的靜態(tài)方法, 直接使用$調(diào)用; 擴展的實例方法, 要用$()調(diào)用

題目4： jQuery 的鏈式調(diào)用是什么？

• 鏈式調(diào)用就是分步驟的對jQuery對象使用方法后繼續(xù)調(diào)用方法, 而不用再次選擇jQuery對象

$("#Test").addClass('style').find("div").eq(0).fadeOut(200);

• 原理: 實際上鏈式操作僅僅是通過對象上的方法最后return this 把對象再返回回來, 對象當然可以繼續(xù)調(diào)用方法
• 優(yōu)點:
  • 鏈式操作能夠讓代碼變得簡潔, 排版清晰, 代碼優(yōu)雅
  • 鏈式操作最值得稱贊的還是其解決了異步編程模型的執(zhí)行流程不清晰的問題. jQuery中$(document).ready就非常好的闡釋了這一理念, DOMContentLoaded是一個事件, 在DOM并未加載前, jQuery的大部分操作都不會奏效. 但jQuery的設(shè)計者并沒有把他當成事件一樣來處理, 而是轉(zhuǎn)成一種"選其對象, 對其操作"的思路. $選擇了document對象. ready是其方法進行操作. 這樣子流程問題就非常清晰了, 在鏈條約后位置 的方法就約后執(zhí)行

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

data()函數(shù)用于在當前jQuery對象所匹配的所有元素上存取數(shù)據(jù); 通過data()函數(shù)存取的數(shù)據(jù)都是臨時數(shù)據(jù), 一旦頁面刷新, 之前存放的數(shù)據(jù)都將不復存在; 該函數(shù)屬于jQuery對象(實例); 如果需要移除通過data()函數(shù)存放的數(shù)據(jù), 請使用removeData()函數(shù)

data函數(shù)有以下兩種用法:

• 用法一:

jQueryObject.data([key [, value]])

以指定的鍵名key存取數(shù)據(jù); 如果指定了value參數(shù), 則表示以鍵名key存放值為value的數(shù)據(jù); 如果沒有指定value參數(shù), 則表示讀取之前以鍵名key存放的數(shù)據(jù); 如果沒有指定任何參數(shù), 則以對象形式返回之前存儲的所有數(shù)據(jù)

• 用法二:

jQueryObject.data(Object)

以對象形式同時傳入多個key-value形式的數(shù)據(jù), 對象的每個屬性就是鍵名key, 屬性值就是value

注意: data()函數(shù)的所有"存儲數(shù)據(jù)"操作針對當前jQuery對象所匹配的每一個元素; 所有"讀取數(shù)據(jù)操作只針對第一個匹配的元素"

返回值

• data()函數(shù)的返回值是任意類型, 返回值的類型取決于當前data()函數(shù)執(zhí)行的是"存儲數(shù)據(jù)"操作(返回當前jQuery對象本身)還是"讀取數(shù)據(jù)"操作(返回讀取到的數(shù)據(jù))
• 如果當前jQuery對象匹配多個元素, 讀取數(shù)據(jù)時, data()函數(shù)只以其中第一個匹配的元素為準
• 如果執(zhí)行data(key)函數(shù)時找不到相應(yīng)的數(shù)據(jù), 則放回undefined; 如果執(zhí)行data()函數(shù)找不到相應(yīng)的數(shù)據(jù), 則返回一個空的對象(沒有任何屬性)

題目6：寫出以下功能對應(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');
$node.attr.('src');
$node.attr.('title'); //獲得

$node.attr.('id', 'newpp');
$node.attr.('src', 'newsrc');
$node.attr.('title', 'newtitle'); //修改

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

$node.attr('data-src', 'src')

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

$ct.prepend($node)

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

$ct.append($node)

刪除$node

$node.remove()

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

$ct.empty()

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

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

獲取、設(shè)置$node 的寬度、高度(分別不包括內(nèi)邊距、包括內(nèi)邊距、包括邊框、包括外邊距)

//不包括內(nèi)邊距
$node.width();//獲取寬度
$node.height();//獲取高度
$node.width('value');//設(shè)置寬度
$node.height('value');//設(shè)置高度
//包括內(nèi)邊距
$node.innerWidth();//獲取包括內(nèi)邊距的寬度
$node.innerHeight();//獲取包括內(nèi)邊距的高度
$node.innerWidth('value');//設(shè)置包括內(nèi)邊距的寬度
$node.innerHeight('value');//設(shè)置包括內(nèi)邊距的高度
//包括邊框
$node.outerWidth();//獲取包括邊框?qū)挾?$node.outerHeight();//獲取包括邊框高度
$node.outerWidth('value');//設(shè)置包括邊框?qū)挾?$node.outerHeight('value');//設(shè)置包括邊框高度
//包括外邊距
$node.outerWidth(true);//獲取包括外邊距寬度
$node.outerHeight(true);//獲取包括外邊距高度

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

$(window).scrollTop()

獲取$node 到根節(jié)點水平、垂直偏移距離

$node.offset().left
$node.offset().top

修改$node 的樣式，字體顏色設(shè)置紅色，字體大小設(shè)置14px

$node.css({
 'color': 'red',
 'font-size': '14px';
});

遍歷節(jié)點，把每個節(jié)點里面的文本內(nèi)容重復一遍

$node.each(function(){
  var $str = $(this).text();
  $(this).text($str + $str);
})

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

$ct.find('.item')

獲取$ct 里面的所有孩子

$ct.children()

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

$node.parents('.ct').find('.panel')

獲取選擇元素的數(shù)量

$Node.length();

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

$node.index()

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

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

題目8：

用 jQuery ajax 實現(xiàn)如下效果。`當點擊加載更多會加載數(shù)據(jù)展示到頁面效果預覽500
地址