題目1： jQuery 中， $(document).ready()是什么意思？
當(dāng)DOM準(zhǔn)備就緒時(shí)，指定一個(gè)函數(shù)來(lái)執(zhí)行。即在頁(yè)面上元素加載完成之后再執(zhí)行。
如果執(zhí)行的代碼需要在元素被加載之后才能使用時(shí)，（例如，取得圖片的大小需要在圖片被加載完后才能知道），就需要將這樣的代碼放到 load 事件中。
題目2： $node.html()和$node.text()的區(qū)別?
就像.innerHTML和innerText的區(qū)別一樣。
$node.html()傳遞的是整個(gè)標(biāo)簽，$node.text()傳遞的是標(biāo)簽內(nèi)的文本內(nèi)容。
題目3： $.extend 的作用和用法?
jQuery.extend([deep,] target [, object1 ] [, objectN ] )
[deep]：是否深拷貝
target：目標(biāo)對(duì)象
[object]：傳遞對(duì)象，可以有很多個(gè)，但是后面的相同參數(shù)會(huì)覆蓋前面的。
如果第一個(gè)對(duì)象的屬性本身是一個(gè)對(duì)象或數(shù)組，那么它將完全用第二個(gè)對(duì)象相同的key重寫一個(gè)屬性。這些值不會(huì)被合并。如果將 true作為該函數(shù)的第一個(gè)參數(shù)，那么會(huì)在對(duì)象上進(jìn)行遞歸的合并。
題目4： jQuery 的鏈?zhǔn)秸{(diào)用是什么？
$title.addClass('hover').siblings('.hover').removeClass('hover')
題目5： jQuery 中 data 函數(shù)的作用
在匹配元素上存儲(chǔ)任意相關(guān)數(shù)據(jù) 或 返回匹配的元素集合中的第一個(gè)元素的給定名稱的數(shù)據(jù)存儲(chǔ)的值。
我們可以在一個(gè)元素上設(shè)置不同的值，之后獲取這些值：
$("body").data("bar", "foobar");
alert( $("body").data("bar")); //foobar
題目6：
寫出以下功能對(duì)應(yīng)的 jQuery 方法：
- 給元素 $node 添加 class active，給元素 $noed 刪除 class active
添加 $node.addClass('active')
刪除 $node.removeClass('active')
- 展示元素$node, 隱藏元素$node
展示 $node.show()
隱藏 $node.hide()
- 獲取元素$node 的 屬性: id、src、title， 修改以上屬性
獲取
$node.attr('id')
$node.attr('src')
$node.attr('title')
修改
$node.attr({
id: "abc",
src: "aaa",
title:"aaa"
});
- 給$node 添加自定義屬性data-src
$node.data("src",xxx)
- 在$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)邊距,僅包括內(nèi)容
$node.width()
$node.height()
包括內(nèi)容和內(nèi)邊距
$node.innerWidth()
$node.innerHeight()
包括內(nèi)容,內(nèi)邊距,邊框
$node.outerWidth()
$node.outerHeight()
包括內(nèi)容,內(nèi)邊距,邊框,外邊距
$node.outerHeight(true)
$node.outerWidth(true)
- 獲取窗口滾動(dòng)條垂直滾動(dòng)距離
$(window).scrollTop()
- 獲取$node 到根節(jié)點(diǎn)水平、垂直偏移距離
$node.offset()
- 修改$node 的樣式，字體顏色設(shè)置紅色，字體大小設(shè)置14px
$node.css({
"color": "red",
"font-size": "14px"
});
- 遍歷節(jié)點(diǎn)，把每個(gè)節(jié)點(diǎn)里面的文本內(nèi)容重復(fù)一遍
$node.each(function(){
console.log($(this).text())
})
- 從$ct 里查找 class 為 .item的子元素
$( "ct" ).index( '.item' )
- 獲取$ct 里面的所有孩子
$ct.children()
- 對(duì)于$node，向上找到 class 為'.ct'的父親，在從該父親找到'.panel'的孩子
$node.parents('.ct').find('.panel')
- 獲取選擇元素的數(shù)量
$node.length
- 獲取當(dāng)前元素在兄弟中的排行
$node.index()
題目7：
用jQuery實(shí)現(xiàn)以下操作：
- 當(dāng)點(diǎn)擊$btn 時(shí)，讓 $btn 的背景色變?yōu)榧t色再變?yōu)樗{(lán)色
demo - 當(dāng)窗口滾動(dòng)時(shí)，獲取垂直滾動(dòng)距離
$(window).on('scroll', function(){
console.log($(window).scrollTop())
})
當(dāng)鼠標(biāo)放置到$div 上，把$div 背景色改為紅色，移出鼠標(biāo)背景色變?yōu)榘咨?br> demo
當(dāng)鼠標(biāo)激活 input 輸入框時(shí)讓輸入框邊框變?yōu)樗{(lán)色，當(dāng)輸入框內(nèi)容改變時(shí)把輸入框里的文字小寫變?yōu)榇髮?，?dāng)輸入框失去焦點(diǎn)時(shí)去掉邊框藍(lán)色，控制臺(tái)展示輸入框里的文字
demo當(dāng)選擇 select 后，獲取用戶選擇的內(nèi)容
demo
