題目1：jQuery 中， $(document).ready()是什么意思？
當DOM準備就緒時，指定一個函數來執行。原生JavaScript的load事件，會在所有的東西（比如圖片加載完）才會執行函數，但在大多數情況下，只要DOM結構完全加載后，就可以運行腳本。
題目2： $node.html()和$node.text()的區別?
.html()獲取集合中第一個匹配元素的HTML內容 或 設置每一個匹配元素的html內容。設置匹配元素html內容方法對 XML 文檔無效。
<div class="container">
<div class="box">Box1</div>
</div>
//$('.container').html() 輸出 <div class="box">Box1</div>
//$('container').html('<p>This a new content</p>') div里內容會被重寫；
<div class="container">
<p>This a new content</p>
</div>
.text()得到匹配元素集合中每個元素的文本內容結合，包括他們的后代，或設置匹配元素集合中每個元素的文本內容為指定的文本內容，.text() 在XML 和 HTML 文檔中都能使用
<div class="container">
<div class="box1">Box1</div>
<div class="box">Box2</div>
<div class="box">Box3</div>
</div>
//$('.container').text() 輸出 Box1、Box2、Box3
//$('.box1').text('box4') 會變為 <div class="box1">Box4</div>
題目3： $.extend 的作用和用法?
當我們提供兩個或多個對象給$.extend()，對象的所有屬性都添加到目標對象（target參數）。
$.extend({a:1},{a:2,b:3},{b:4,c:5})
//輸出 {a:2,b:4,c:5}
如果只有一個參數提供給$.extend()，這意味著目標參數被省略。在這種情況下，jQuery對象本身被默認為目標對象。這樣，我們可以在jQuery的命名空間下添加新的功能。這對于插件開發者希望向 jQuery 中添加新函數時是很有用的
$.extend({a:1})
function ( selector, context ) {
// The jQuery object is actually just the init constructor 'enhanced'
// Need init if jQuery is called (just allow error to be thrown if not included)
return new jQuery.…
目標對象（第一個參數）將被修改，并且將通過$.extend()返回。然而，如果我們想保留原對象，我們可以通過傳遞一個空對象作為目標對象：
$.extend({},{a:1},{a:2,b:3},{b:4,c:5})
在默認情況下，通過$.extend()合并操作不是遞歸的;如果第一個對象的屬性本身是一個對象或數組，那么它將完全用第二個對象相同的key重寫一個屬性。這些值不會被合并。如果將 true作為該函數的第一個參數，那么會在對象上進行遞歸的合并。
var object1 = {
apple: 0,
banana: { weight: 52, price: 100 },
cherry: 97
};
var object2 = {
banana: { price: 200 },
durian: 100
};
//$.extend( object1, object2 ) 輸出{apple: 0, banana: {price: 200}, cherry: 97, durian: 100}
//$.extend(true, object1, object2 ) 輸出{apple: 0, banana: {price: 200，weight: 52}, cherry: 97, durian: 100}
題目4： jQuery 的鏈式調用是什么？
簡單說就是可以連續的使用 jQuery 方法的過程叫做 鏈式調用，因為jquery對象的方法的返回值大多還是jquery對象，所以可以不斷的調用各種方法。例子：
//$("選擇器")
// .方法1(回調函數1)
// .方法2(回調函數2)
// ……
// .方法N(回調函數N);
$('.container')
.find('.pannels')
.eq(2)
.text('good')
題目5： jQuery 中 data 函數的作用
在匹配元素上存儲任意相關數據 或 返回匹配的元素集合中的第一個元素的給定名稱的數據存儲的值。.data() 方法允許我們在DOM元素上綁定任意類型的數據,避免了循環引用的內存泄漏風險。
.data( key, value )
key
類型: String
一個字符串，用戶存儲數據的名稱
value
類型: Object
新的數據值；它可以是任意的Javascript數據類型，包括Array 或者 Object
$("container").data("boxSize", {width:20,height:20,length:40});
$("container").data('boxSize') //輸出{width:20,height:20,length:40}
題目6：寫出以下功能對應的 jQuery 方法：
- 給元素 $node 添加 class active
$node.addClass('active') - 給元素 $node 刪除 class active
$node.removeClass('active') - 展示元素$node, 隱藏元素$node
$node.toggleClass('active') - 獲取元素$node 的 屬性: id、src、title， 修改以上屬性
$node.attr('id') $node.attr('id',val)
$node.attr('src') $node.attr('src',val)
$node.attr('title') $node.attr('title',val) - 給$node 添加自定義屬性data-src
$node.data('data-src',val) - 在$ct 內部最開頭添加元素$node
$ct.prepend($node)
$node.prependto($ct) - 在$ct 內部最末尾添加元素$node
$ct.append($node)
$node.appendto($ct) - 刪除$node
$node.remove() - 把$ct里內容清空
$ct.empty() - 在$ct 里設置 html <div class="btn"></div>
$ct.html('<div class="btn"></div>') - 獲取、設置$node 的寬度、高度(分別不包括內邊距、包括內邊距、包括邊框、包括外邊距)
$node.height();//不包括內邊距高度,僅包括內容
$node.innerHeight();//包括內容和內邊距高度
$node.outerHeight();//包括內容,內邊距,邊框高度
$node.outerHeight(true);//包括內容,內邊距,邊框,外邊距寬度
寬度用法同上
- 獲取窗口滾動條垂直滾動距離
$(window).scrollTop() - 獲取$node 到根節點水平、垂直偏移距離
$node.offset() - 修改$node 的樣式，字體顏色設置紅色，字體大小設置14px
$node.css('color':'red').css('font-size','14px')`
或者
$node.css({
color:'red',
font-size:'14px'
})
- 遍歷節點，把每個節點里面的文本內容重復一遍
$('.box>ul>li').each(function(){
var str = $(this).text()+$(this).text()
$(this).text(str)
})
- 從$ct 里查找 class 為 .item的子元素
$ct.find('.item') - 獲取$ct 里面的所有孩子
$ct.children() - 對于$node，向上找到 class 為'.ct'的父親，在從該父親找到'.panel'的孩子
$node.parent('.ct')
$node.parents('.ct').parents('.panel') - 獲取選擇元素的數量
$node.length(size()已棄用) - 獲取當前元素在兄弟中的排行
$node.index()
題目7：用jQuery實現以下操作
當點擊$btn 時，讓 $btn 的背景色變為紅色再變為藍色
當窗口滾動時，獲取垂直滾動距離
當鼠標放置到$div 上，把$div 背景色改為紅色，移出鼠標背景色變為白色
當鼠標激活 input 輸入框時讓輸入框邊框變為藍色，當輸入框內容改變時把輸入框里的文字小寫變為大寫，當輸入框失去焦點時去掉邊框藍色，控制臺展示輸入框里的文字
當選擇 select 后，獲取用戶選擇的內容
