一、jQuery 中， $(document).ready()是什么意思？
我們知道，在原生 JS 中，有個事件是onload，而window.onload()就是讓里邊的 JS 等到頁面所有元素和資源加載結(jié)束后再執(zhí)行。假設(shè)資源過大，如圖片資源等， JS 需要等待的時間就很長。而 jQuery 的$(document).ready()事件能實現(xiàn)類似效果，但僅僅是元素（DOM）就緒后就立馬執(zhí)行，無需等待資源的加載。這是一個比window.onload()更高效的辦法，而且與之相比， jQuery 的還能多次調(diào)用，效果會順序執(zhí)行，而原生的onload()要實現(xiàn)改效果需要另外自行處理，因為事件是會被覆蓋的。另外，$(function(){})是$(document).ready()的縮寫。
二、$node.html() 和 $node.text() 的區(qū)別?
- html()
該方法用于獲取和設(shè)置選中節(jié)點的 HTML 結(jié)構(gòu)。當(dāng)是獲取 HTML 時，只返回第一個匹配到的節(jié)點的結(jié)構(gòu)。 - text()
該方法用于獲取和設(shè)置選中節(jié)點的純文本內(nèi)容。當(dāng)獲取時，返回所有匹配到的元素的所有純文本拼接起來的字符串。設(shè)置的時候，相當(dāng)于設(shè)置純文本，就算放入 HTML 結(jié)構(gòu)也會被轉(zhuǎn)化為文本。a
實際上就是 DOM 節(jié)點與文本；第一個元素和所有文本的區(qū)別。
三、$.extend 的作用和用法?
當(dāng)我們提供兩個或多個對象給$.extend()，對象的所有屬性都添加到目標(biāo)對象（target參數(shù)）。和 ES6 的新語法
Object.assign()類似。如果只有一個參數(shù)提供給$.extend()，這意味著目標(biāo)參數(shù)被省略。在這種情況下，jQuery對象本身被默認(rèn)為目標(biāo)對象。這樣，我們可以在jQuery的命名空間下添加新的功能。這對于插件開發(fā)者希望向 jQuery 中添加新函數(shù)時是很有用的。
使用的話，直接調(diào)用即可，需要注意的是，同名的key會被覆蓋。
var obj = $.extend({}, {a: 1})
四、 jQuery 的鏈?zhǔn)秸{(diào)用是什么？
鏈?zhǔn)秸{(diào)用類似如下：
$(DOM).animate().animate()...stop()
這樣寫，函數(shù)會順序執(zhí)行，與使用回調(diào)相比，更加簡潔明了。原理是 jQuery 的函數(shù)執(zhí)行返回都是一個 jQuery 對象，可直接調(diào)用 jQuery 方法。
五、 jQuery 中 data 函數(shù)的作用。
該方法可以用來獲取或者設(shè)置 html 的自定義 data-* 屬性，使用方法是$(DOM).data(key, [value])，加上value就是設(shè)置，不加就是獲取。需要注意的是，如果動態(tài)設(shè)置的話，只是臨時數(shù)據(jù)，頁面刷新是會被重置的。
六、寫出以下功能對應(yīng)的 jQuery 方法：
- 給元素 $node 添加 class active，給元素 $noed 刪除 class active
$node.addClass('active class2 ...')
$node.removeClass('active class2 ...')
- 展示元素$node, 隱藏元素$node
$node.show()
$node.hide()
- 獲取元素$node 的 屬性: id、src、title， 修改以上屬性
$node.attr('id') //獲取
$node.attr('id', 'aaa') //設(shè)置
$noode.attr(key, [value])
- 給$node 添加自定義屬性data-src
$node.data('src', 'value')
- 在$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)邊距、包括邊框、包括外邊距)
//獲取寬度（不包括內(nèi)邊距、邊框、外邊距）
$node.width();
//設(shè)置
$node.width(val);
//獲取寬度（包括內(nèi)邊距）
$node.innerWidth();
//獲取寬度（包括內(nèi)邊距和邊框）
$node.outerWidth();
//獲取寬度（包括內(nèi)邊距、邊框和外邊距）
$node.outerWidth(true);
//獲取高度（不包括內(nèi)邊距、邊框、外邊距）
$node.height();
//設(shè)置
$node.height(val);
//獲取高度（包括內(nèi)邊距）
$node.innerHeight();
//獲取高度（包括內(nèi)邊距和邊框）
$node.outerHeight();
//獲取高度（包括內(nèi)邊距、邊框和外邊距）
$node.outerHeight(true);
- 獲取窗口滾動條垂直滾動距離
$(window).scrollTop([val])
``
* 獲取$node 到根節(jié)點水平、垂直偏移距離
```js
$node.offset()
``
* 修改$node 的樣式，字體顏色設(shè)置紅色，字體大小設(shè)置14px
```js
$node.css({
'color': 'red',
'font-size': '14px'
})
``
* 遍歷節(jié)點，把每個節(jié)點里面的文本內(nèi)容重復(fù)一遍
```js
$node.each(function(index , node){
var text = $(node).text()
$(node).text(text + text)
});
- 從$ct 里查找 class 為 .item的子元素
$ct.find(".item");
- 獲取$ct 里面的所有孩子
$ct.children();
- 對于$node，向上找到 class 為'.ct'的父親，在從該父親找到'.panel'的孩子
$node.parents('.ct').children('.panel');
- 獲取選擇元素的數(shù)量
$node.length
- 獲取當(dāng)前元素在兄弟中的排行
$node.index()
七、用 jQuery 實現(xiàn)以下操作
- 當(dāng)點擊$btn 時，讓 $btn 的背景色變?yōu)榧t色再變?yōu)樗{(lán)色
$btn.on('click', function(){
$(this).animate({
'background-color': 'red'
}, 500).animate({
'background-color': 'blue'
}, 500)
})
- 當(dāng)窗口滾動時，獲取垂直滾動距離
$(window).on("scroll", function(){
var scrollTop = $(window).scrollTop();
})
- 當(dāng)鼠標(biāo)放置到$div 上，把$div 背景色改為紅色，移出鼠標(biāo)背景色變?yōu)榘咨?/li>
$div.on('mouseover', function(){
$(this).css('background-color': 'red')
})
$div.on('mouseout', 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.on('focus', function(){
$(this).css('border-color': 'blue')
})
$input.on('input', function(){
var val = $(this).val()
$(this).val(val.toUpperCase())
})
$input.on('blur', function(){
$(this).css('border-color': '#333')
console.log('當(dāng)前輸入是：' + $(this).val)
})
- 當(dāng)選擇 select 后，獲取用戶選擇的內(nèi)容
$select.on('change', function(){
console.log($(this).val())
})
