題目1： jQuery 中蜈敢， $(document).ready()是什么意思潮秘？
.ready()指的是當(dāng)DOM準(zhǔn)備就緒樟结，指定一個函數(shù)來執(zhí)行养交。js原生的load事件，要等DOM和圖像完全加載才會觸發(fā)瓢宦。
使用.ready()方法能夠保證DOM準(zhǔn)備好之后碎连，就執(zhí)行這個函數(shù)，因此驮履，這里是綁定事件和運行jQuery代碼最好的地方鱼辙。
//下面兩種語法等價
$(document).ready(handler)
$(handler)
題目2： $node.html()和$node.text()的區(qū)別?
.html()獲取第一個匹配元素的HTML內(nèi)容，如果選擇器匹配多于一個的元素疲吸，那么只有第一個匹配元素的HTML內(nèi)容會被獲取座每。
.text()獲取所有元素的匹配內(nèi)容，結(jié)果是所有匹配元素包含的文本內(nèi)容組合起來的文本摘悴。
題目3： $.extend 的作用和用法?
jQuery.extend( [deep,] target [, object1 ] [, objectN ] )
提供兩個或多個對象峭梳，對象的所有屬性都添加到目標(biāo)對象。
如果只有一個參數(shù)提供給.extend()蹂喻，這意味著目標(biāo)參數(shù)被省略葱椭。在這種情況下，jQuery對象本身被默認(rèn)為目標(biāo)對像口四。這樣孵运，我們可以在jQuery的命名空間下添加新功能。這對于插件開發(fā)者希望向jQuery中添加新函數(shù)時是很有用的蔓彩。
目標(biāo)對象(第一個對象)將被修改治笨，并且通過$.extend()返回驳概。然而，如果我們想保留原對象旷赖，我們可以通過傳遞一個空對象作為目標(biāo)對象：
var object = $.extend({}, object1, object2);
如果第一個對象的屬性本身是一個對象或數(shù)組顺又，那么它將完全用第二個對象相同的key重寫一個屬性。
題目4： jQuery 的鏈?zhǔn)秸{(diào)用是什么等孵？
指多個方法可以鏈?zhǔn)秸{(diào)用稚照，如：
$('div').find('h3').eq(2).html('Hello');
鏈?zhǔn)秸{(diào)用可以節(jié)省代碼量，提高代碼的效率俯萌。
題目5： jQuery 中 data 函數(shù)的作用
data()函數(shù)用于在當(dāng)前jQuery對象所匹配的所有元素上存取數(shù)據(jù)果录。將數(shù)據(jù)綁定在一個DOM上
通過data()函數(shù)存取的數(shù)據(jù)都是臨時數(shù)據(jù)，一旦頁面刷新咐熙，之前存放的數(shù)據(jù)都將不復(fù)存在弱恒。
該函數(shù)屬于jQuery對象(實例)。如果需要移除通過data()函數(shù)存放的數(shù)據(jù)糖声，請使用removeData()函數(shù)斤彼。
題目6：
寫出以下功能對應(yīng)的 jQuery 方法：
-
給元素
$node添加class active，給元素$node刪除class active$node.addClass('active'); $node.removeClass('active'); -
展示元素
$node, 隱藏元素$node$node.hide(); $node.css("display","none"); -
獲取元素
$node的 屬性: id蘸泻、src琉苇、title， 修改以上屬性$node.attr({ id: 'test', src: 'http://test.com', title: 'test', }); -
給
$node添加自定義屬性data-src$node.attr('data-src', 'test') -
在
$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)邊距抡诞、包括邊框穷蛹、包括外邊距)//獲取計算寬度值,height同理 $node.width() $node.height() //獲取計算的內(nèi)部寬度，包括padding,不包括border昼汗， innerHeight同理 $node.innerWidth() $node.innerHeight() //獲取計算外部寬度肴熏，包括padding, border，和可選的margin顷窒，outerHeight同理 $node.outerWidth() $node.outerHeight() -
獲取窗口滾動條垂直滾動距離
$node..scrollTop() -
獲取
$node到根節(jié)點水平蛙吏、垂直偏移距離$node.offset().top; $node.offset().left; -
修改
$node的樣式，字體顏色設(shè)置紅色鞋吉，字體大小設(shè)置14px$node.css({ color: "red", fontSize: "14px" }); -
遍歷節(jié)點鸦做，把每個節(jié)點里面的文本內(nèi)容重復(fù)一遍
$node.each(function(){ $(this).text($(this).text() + $(this).text()) }) -
從
$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實現(xiàn)以下操作
-
當(dāng)點擊
$btn時泼诱，讓$btn的背景色變?yōu)榧t色再變?yōu)樗{(lán)色$btn.on('click', function(){ $this.css('background-color','red'); setTimeout(function(){ $btn.css('background-color', 'blue'); }, 200) }) -
當(dāng)窗口滾動時，獲取垂直滾動距離
$(window).scroll(function(){ console.log($(this).scrollTop()) }) -
當(dāng)鼠標(biāo)放置到
$div上赊锚，把$div背景色改為紅色治筒，移出鼠標(biāo)背景色變?yōu)榘咨?/p>$div.on('mouseenter', function(){ $(this).css('background-color', 'red'); }).on('mouseleave', function(){ $(this).css('background-color', 'white'); }) -
當(dāng)鼠標(biāo)激活 input 輸入框時讓輸入框邊框變?yōu)樗{(lán)色屉栓，當(dāng)輸入框內(nèi)容改變時把輸入框里的文字小寫變?yōu)榇髮懀?dāng)輸入框失去焦點時去掉邊框藍(lán)色耸袜，控制臺展示輸入框里的文字
$('input[type=text]').on('focus', function(){ $(this).css('border-color', 'blue') }).on('change', function(){ $(this).val($(this).val().toUpperCase()) }).on('blur', function(){ $(this).css('border-color', '') console.log($(this).val()) }) -
當(dāng)選擇 select 后系瓢，獲取用戶選擇的內(nèi)容
$select.val()
