1. jQuery 中， $(document).ready()是什么意思？
當(dāng)DOM準(zhǔn)備就緒時(shí)茎芭，指定一個函數(shù)來執(zhí)行。
雖然JavaScript提供了load事件誓沸，當(dāng)頁面呈現(xiàn)時(shí)用來執(zhí)行這個事件梅桩，直到所有的東西，如圖像已被完全接收前蔽介，此事件不會被觸發(fā)摘投。
在大多數(shù)情況下煮寡，只要DOM結(jié)構(gòu)已完全加載時(shí)虹蓄，腳本就可以運(yùn)行吩翻。傳遞處理函數(shù)給.ready()方法塔嬉，能保證DOM準(zhǔn)備好后就執(zhí)行這個函數(shù)奸鬓，因此蒂秘，這里是進(jìn)行所有其它事件綁定及運(yùn)行其它 jQuery 代碼的最佳地方魔策。
如果執(zhí)行的代碼需要在元素被加載之后才能使用時(shí)碎税，（例如润努，取得圖片的大小需要在圖片被加載完后才能知道）情连，就需要將這樣的代碼放到 load 事件中貌矿。
下面語法全部是等價(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 的作用和用法?
作用：
- 將兩個或更多對象的內(nèi)容合并到第一個對象。
- 當(dāng)我們提供兩個或多個對象給$.extend()克握，對象的所有屬性都添加到目標(biāo)對象（target參數(shù)）蕾管。
- 如果只有一個參數(shù)提供給$.extend()，這意味著目標(biāo)參數(shù)被省略菩暗。在這種情況下掰曾，jQuery對象本身被默認(rèn)為目標(biāo)對象。這樣停团，我們可以在jQuery的命名空間下添加新的功能旷坦。這對于插件開發(fā)者希望向 jQuery 中添加新函數(shù)時(shí)是很有用的
目標(biāo)對象（第一個參數(shù)）將被修改，并且將通過$.extend()返回佑稠。然而塞蹭，如果我們想保留原對象，我們可以通過傳遞一個空對象作為目標(biāo)對象：
var object = $.extend({}, object1, object2);
在默認(rèn)情況下讶坯，通過$.extend()合并操作不是遞歸的;
如果第一個對象的屬性本身是一個對象或數(shù)組番电，那么它將完全用第二個對象相同的key重寫一個屬性。這些值不會被合并辆琅。如果將 true作為該函數(shù)的第一個參數(shù)漱办，那么會在對象上進(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地對jQuery對象實(shí)現(xiàn)各種操作娩井。
$("#test").css('color','red').show(200).removeClass('style');
上面的例子就是鏈?zhǔn)讲僮鳎谝恍写a里似袁，對id為test的對象進(jìn)行了三項(xiàng)操作：先設(shè)置其字體顏色為紅色洞辣，再顯示對象，最后移除對象的“style”這個樣式昙衅。
不使用鏈?zhǔn)秸{(diào)用扬霜，則寫成：
$("#test").css('color','red');
$("#test").show(200);
$("#test").removeClass('style');
可見，鏈?zhǔn)秸{(diào)用可以簡化代碼而涉。
5. jQuery 中 data 函數(shù)的作用
data() 方法向被選元素附加數(shù)據(jù)著瓶，或者從被選元素獲取數(shù)據(jù)。通過data()函數(shù)存取的數(shù)據(jù)都是臨時(shí)數(shù)據(jù)啼县，一旦頁面刷新材原，之前存放的數(shù)據(jù)都將不復(fù)存在。該函數(shù)屬于jQuery對象(實(shí)例)季眷。如果需要移除通過data()函數(shù)存放的數(shù)據(jù)余蟹，請使用 removeData() 函數(shù)。
- 獲取附加的data的值
$(selector).data(name)
參數(shù)說明
name：可選子刮。規(guī)定要取回的數(shù)據(jù)的名稱威酒。
如果沒有規(guī)定名稱，則該方法將以對象的形式從元素中返回所有存儲的數(shù)據(jù)。 - 用name和value為對象附加數(shù)據(jù)
$(selector).data(name,value)
參數(shù)說明
selector：為需要附加或者獲取數(shù)據(jù)的對象兼搏。
name：參數(shù)為數(shù)據(jù)的名稱卵慰。
value：參數(shù)為數(shù)據(jù)的值。 - 使用對象向元素附加數(shù)據(jù)
$(selector).data(object)
使用帶有名稱/值對的對象向被選元素添加數(shù)據(jù)佛呻∩雅螅可以直接傳入另一個對象作為參數(shù)。這種情況下吓著，對象的屬性名稱和屬性值將被視為多個鍵值對鲤嫡，從中提取的屬性名稱和屬性值都會被復(fù)制到目標(biāo)對象的緩存中。
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','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); //包括外邊距 獲取窗口滾動條垂直滾動距離
$(window).scrollTop()獲取$node 到根節(jié)點(diǎn)水平谚殊、垂直偏移距離
$node.offset();修改$node 的樣式丧鸯，字體顏色設(shè)置紅色，字體大小設(shè)置14px
$node.css({
'color': 'red',
'font-size': '14px'
});遍歷節(jié)點(diǎn)嫩絮，把每個節(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();對于$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)窗口滾動時(shí)蜂怎，獲取垂直滾動距離
- 當(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)色撰洗，控制臺展示輸入框里的文字
- 當(dāng)選擇 select 后，獲取用戶選擇的內(nèi)容
代碼地址
8. 用 jQuery ajax 實(shí)現(xiàn)如下效果腐芍。當(dāng)點(diǎn)擊加載更多會加載數(shù)據(jù)展示到頁面 效果預(yù)覽
代碼地址(本地測試可行)
