題目1：jQuery 中步氏， $(document).ready()是什么意思查辩？
當(dāng)DOM準(zhǔn)備就緒時骏全，指定一個函數(shù)來執(zhí)行益咬。原生JavaScript的load事件逮诲，會在所有的東西（比如圖片加載完）才會執(zhí)行函數(shù)，但在大多數(shù)情況下幽告，只要DOM結(jié)構(gòu)完全加載后梅鹦，就可以運行腳本。
題目2： $node.html()和$node.text()的區(qū)別?
.html()獲取集合中第一個匹配元素的HTML內(nèi)容 或 設(shè)置每一個匹配元素的html內(nèi)容冗锁。設(shè)置匹配元素html內(nèi)容方法對 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里內(nèi)容會被重寫；
<div class="container">
<p>This a new content</p>
</div>
.text()得到匹配元素集合中每個元素的文本內(nèi)容結(jié)合冻河，包括他們的后代箍邮，或設(shè)置匹配元素集合中每個元素的文本內(nèi)容為指定的文本內(nèi)容，.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') 會變?yōu)?<div class="box1">Box4</div>
題目3： $.extend 的作用和用法?
當(dāng)我們提供兩個或多個對象給$.extend()，對象的所有屬性都添加到目標(biāo)對象（target參數(shù)）擂错。
$.extend({a:1},{a:2,b:3},{b:4,c:5})
//輸出 {a:2,b:4,c:5}
如果只有一個參數(shù)提供給$.extend()味滞，這意味著目標(biāo)參數(shù)被省略。在這種情況下钮呀，jQuery對象本身被默認(rèn)為目標(biāo)對象剑鞍。這樣，我們可以在jQuery的命名空間下添加新的功能爽醋。這對于插件開發(fā)者希望向 jQuery 中添加新函數(shù)時是很有用的
$.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.…
目標(biāo)對象（第一個參數(shù)）將被修改蚁署，并且將通過$.extend()返回。然而蚂四，如果我們想保留原對象光戈，我們可以通過傳遞一個空對象作為目標(biāo)對象：
$.extend({},{a:1},{a:2,b:3},{b:4,c:5})
在默認(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
};
//$.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 的鏈?zhǔn)秸{(diào)用是什么送讲？
簡單說就是可以連續(xù)的使用 jQuery 方法的過程叫做 鏈?zhǔn)秸{(diào)用奸笤，因為jquery對象的方法的返回值大多還是jquery對象，所以可以不斷的調(diào)用各種方法哼鬓。例子：
//$("選擇器")
// .方法1(回調(diào)函數(shù)1)
// .方法2(回調(diào)函數(shù)2)
// ……
// .方法N(回調(diào)函數(shù)N);
$('.container')
.find('.pannels')
.eq(2)
.text('good')
題目5： jQuery 中 data 函數(shù)的作用
在匹配元素上存儲任意相關(guān)數(shù)據(jù) 或 返回匹配的元素集合中的第一個元素的給定名稱的數(shù)據(jù)存儲的值监右。.data() 方法允許我們在DOM元素上綁定任意類型的數(shù)據(jù),避免了循環(huán)引用的內(nèi)存泄漏風(fēng)險。
.data( key, value )
key
類型: String
一個字符串异希，用戶存儲數(shù)據(jù)的名稱
value
類型: Object
新的數(shù)據(jù)值健盒；它可以是任意的Javascript數(shù)據(jù)類型，包括Array 或者 Object
$("container").data("boxSize", {width:20,height:20,length:40});
$("container").data('boxSize') //輸出{width:20,height:20,length:40}
題目6：寫出以下功能對應(yīng)的 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 內(nèi)部最開頭添加元素$node
$ct.prepend($node)
$node.prependto($ct) - 在$ct 內(nèi)部最末尾添加元素$node
$ct.append($node)
$node.appendto($ct) - 刪除$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)邊距授药、包括邊框士嚎、包括外邊距)
$node.height();//不包括內(nèi)邊距高度,僅包括內(nèi)容
$node.innerHeight();//包括內(nèi)容和內(nèi)邊距高度
$node.outerHeight();//包括內(nèi)容,內(nèi)邊距,邊框高度
$node.outerHeight(true);//包括內(nèi)容,內(nèi)邊距,邊框,外邊距寬度
寬度用法同上
- 獲取窗口滾動條垂直滾動距離
$(window).scrollTop() - 獲取$node 到根節(jié)點水平、垂直偏移距離
$node.offset() - 修改$node 的樣式悔叽，字體顏色設(shè)置紅色莱衩，字體大小設(shè)置14px
$node.css('color':'red').css('font-size','14px')`
或者
$node.css({
color:'red',
font-size:'14px'
})
- 遍歷節(jié)點，把每個節(jié)點里面的文本內(nèi)容重復(fù)一遍
$('.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') - 獲取選擇元素的數(shù)量
$node.length(size()已棄用) - 獲取當(dāng)前元素在兄弟中的排行
$node.index()
題目7：用jQuery實現(xiàn)以下操作
當(dāng)點擊$btn 時，讓 $btn 的背景色變?yōu)榧t色再變?yōu)樗{(lán)色
當(dāng)窗口滾動時九火，獲取垂直滾動距離
當(dāng)鼠標(biāo)放置到$div 上赚窃，把$div 背景色改為紅色，移出鼠標(biāo)背景色變?yōu)榘咨?br>
當(dāng)鼠標(biāo)激活 input 輸入框時讓輸入框邊框變?yōu)樗{(lán)色岔激，當(dāng)輸入框內(nèi)容改變時把輸入框里的文字小寫變?yōu)榇髮懤占?dāng)輸入框失去焦點時去掉邊框藍(lán)色，控制臺展示輸入框里的文字
當(dāng)選擇 select 后虑鼎，獲取用戶選擇的內(nèi)容
