題目1： jQuery 中娃殖， $(document).ready()是什么意思定庵？
當(dāng)DOM準備就緒時，指定一個函數(shù)來執(zhí)行锣光。
雖然JavaScript提供了load事件笆怠，當(dāng)頁面呈現(xiàn)時用來執(zhí)行這個事件，直到所有的東西誊爹，如圖像已被完全接收前蹬刷，此事件不會被觸發(fā)。
在大多數(shù)情況下频丘，只要DOM結(jié)構(gòu)已完全加載時办成，腳本就可以運行。傳遞處理函數(shù)給.ready()方法搂漠，能保證DOM準備好后就執(zhí)行這個函數(shù)迂卢，因此，這里是進行所有其它事件綁定及運行其它 jQuery 代碼的最佳地方桐汤。
如果執(zhí)行的代碼需要在元素被加載之后才能使用時冷守，（例如，取得圖片的大小需要在圖片被加載完后才能知道）惊科，就需要將這樣的代碼放到 load 事件中拍摇。
下面兩種語法全部是等價的：
$(document).ready(handler)
$(handler)
我們經(jīng)常這么使用
$(function(){
console.log('ready');
});
題目2： $node.html()和$node.text()的區(qū)別?
html([string])
這是一個讀寫兩用的方法，用于獲取/修改元素的innerHTML
- 當(dāng)沒有傳遞參數(shù)的時候馆截，返回元素的innerHTML
- 當(dāng)傳遞了一個string參數(shù)的時候充活，修改元素的innerHTML為參數(shù)值
看個例子
$('div').html()
$('div').html('123')
后續(xù)這種讀寫兩用的方法很多，原理都類似
- 如果結(jié)果是多個進行賦值操作的時候會給每個結(jié)果都賦值
- 如果結(jié)果多個蜡娶，獲取值的時候混卵，返回結(jié)果集中的第一個對象的相應(yīng)值
text()
和html方法類似，操作的是DOM的innerText值
題目3： $.extend 的作用和用法?
jQuery.extend([deep,] target [, object1 ] [, objectN ] )
當(dāng)我們提供兩個或多個對象給$.extend()窖张，對象的所有屬性都添加到目標對象（target參數(shù)）幕随。
如果只有一個參數(shù)提供給$.extend()，這意味著目標參數(shù)被省略宿接。在這種情況下赘淮，jQuery對象本身被默認為目標對象。這樣睦霎，我們可以在jQuery的命名空間下添加新的功能梢卸。這對于插件開發(fā)者希望向 jQuery 中添加新函數(shù)時是很有用的
如果想保留原對象，我們可以通過傳遞一個空對象作為目標對象：
var object = $.extend({}, object1, object2);
- 在默認情況下副女，通過$.extend()合并操作不是遞歸的;
- deep：默認false蛤高，如果為true，合并成為遞歸（又叫做深拷貝）
如果第一個對象的屬性本身是一個對象或數(shù)組，那么它將完全用第二個對象相同的key重寫一個屬性戴陡。這些值不會被合并塞绿。如果將 true作為該函數(shù)的第一個參數(shù)，那么會在對象上進行遞歸的合并恤批。
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 的鏈式調(diào)用是什么位隶？
- jQuery鏈式調(diào)用：在對象上一次性調(diào)動多個方法
$(this).addClass("active").siblings().removeClass("active")
- 因為大部分對象方法的最后是return this，所以有了鏈式調(diào)用开皿，簡易代碼。
題目5： jQuery 中 data 函數(shù)的作用
- 作用：data方法允許在DOM元素上綁定任意類型的數(shù)據(jù)篮昧，避免了循環(huán)引用的內(nèi)存泄漏風(fēng)險赋荆。
- 語法：
$(“selector”).data(key, value)。
題目6：
寫出以下功能對應(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)邊距幽污、包括邊框、包括外邊距)
//無參數(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. 獲取窗口滾動條垂直滾動距離
$(window).scrollTop();
12. 獲取$node 到根節(jié)點水平扁位、垂直偏移距離
$node.offset();
13. 修改$node 的樣式准潭，字體顏色設(shè)置紅色，字體大小設(shè)置14px
$node.css({'color':'red','font-size':'14px'});
14. 遍歷節(jié)點域仇，把每個節(jié)點里面的文本內(nèi)容重復(fù)一遍
$.each(function(){
console.log($(this).text());
})
15. 從$ct 里查找 class 為 .item的子元素
$ct.find('.item');
16. 獲取$ct 里面的所有孩子
$ct.children();
17. 對于$node刑然，向上找到 class 為'.ct'的父親，在從該父親找到'.panel'的孩子
$node.parents('.ct').find('.pandl');
18. 獲取選擇元素的數(shù)量
$node.length;
19. 獲取當(dāng)前元素在兄弟中的排行
$(this).index();
題目7：用jQuery實現(xiàn)以下操作
- 當(dāng)點擊$btn 時暇务，讓 $btn 的背景色變?yōu)榧t色再變?yōu)樗{色
- 當(dāng)窗口滾動時泼掠，獲取垂直滾動距離
- 當(dāng)鼠標放置到$div 上，把$div 背景色改為紅色垦细，移出鼠標背景色變?yōu)榘咨?/li>
- 當(dāng)鼠標激活 input 輸入框時讓輸入框邊框變?yōu)樗{色武鲁，當(dāng)輸入框內(nèi)容改變時把輸入框里的文字小寫變?yōu)榇髮懀?dāng)輸入框失去焦點時去掉邊框藍色蝠检，控制臺展示輸入框里的文字
- 當(dāng)選擇 select 后沐鼠，獲取用戶選擇的內(nèi)容
task15-7
