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

• ready(handler)
  當(dāng)DOM準(zhǔn)備就緒時(shí), 指定一個(gè)函數(shù)來執(zhí)行; 雖然js提供了load事件, 當(dāng)頁面呈現(xiàn)時(shí)用來執(zhí)行這個(gè)事件, 直到所有東西, 如圖像已被完全接收前, 此事件不會被觸發(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事件中
• 下面兩種語法等價(jià):

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

data()函數(shù)用于在當(dāng)前jQuery對象所匹配的所有元素上存取數(shù)據(jù); 通過data()函數(shù)存取的數(shù)據(jù)都是臨時(shí)數(shù)據(jù), 一旦頁面刷新, 之前存放的數(shù)據(jù)都將不復(fù)存在; 該函數(shù)屬于jQuery對象(實(shí)例); 如果需要移除通過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)

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

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

返回值

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

題目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);//獲取包括外邊距高度

獲取窗口滾動(dòng)條垂直滾動(dòng)距離

$(window).scrollTop()

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

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

修改$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 $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();

獲取當(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)榘咨?br> 地址
• 當(dāng)鼠標(biāo)激活 input 輸入框時(shí)讓輸入框邊框變?yōu)樗{(lán)色，當(dāng)輸入框內(nèi)容改變時(shí)把輸入框里的文字小寫變?yōu)榇髮懀?dāng)輸入框失去焦點(diǎn)時(shí)去掉邊框藍(lán)色，控制臺展示輸入框里的文字
  地址
• 當(dāng)選擇 select 后，獲取用戶選擇的內(nèi)容
  地址

題目8：

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