題目1： jQuery 中， $(document).ready()是什么意思？

當(dāng)DOM加載完成后執(zhí)行方法.ready()中傳遞的函數(shù)。

題目2： $node.html()和$node.text()的區(qū)別?

• $node.html()獲取html部分包括元素的標(biāo)簽
  當(dāng).html()方法帶參數(shù)時(shí)，會(huì)修改html的內(nèi)容

//html代碼
<p>段落</p>
//jQuery代碼
$('p').html()//<p>段落</p>
$('p').html('<span>修改內(nèi)容</span>')
//html代碼
<span>修改內(nèi)容</span>

• $node.text()獲取html中的內(nèi)容，不包括元素的標(biāo)簽
  當(dāng).text()方法帶參數(shù)時(shí)，會(huì)修改html標(biāo)簽中的內(nèi)容

//html代碼
<p>段落</p>
//jQuery代碼
$('p').text()//修改內(nèi)容
$('p').text('修改內(nèi)容')
//html代碼
<p>修改內(nèi)容</p>

題目3： $.extend 的作用和用法?

• 作用：用一個(gè)或多個(gè)其他對(duì)象來(lái)擴(kuò)展一個(gè)對(duì)象，返回被擴(kuò)展的對(duì)象。
• 用法：

var a = { key: false, index: 5, name: "foo" };
var b = { key: true, name: "bar" };
$.extend(settings, options);
//結(jié)果
settings == { key: true, index: 5, name: "bar" }

題目4： jQuery 的鏈?zhǔn)秸{(diào)用是什么？

jQuery 的鏈?zhǔn)秸{(diào)用例子：

$node.addClass().removeClass().eq().find()

jQuery所有對(duì)象的方法返回的都是對(duì)象本身,所以在方法A后可以繼續(xù)調(diào)用方法B等同于jQuery直接調(diào)用方法B。

題目5： jQuery 中 data 函數(shù)的作用

data函數(shù)的作用是在元素上存放或讀取數(shù)據(jù),返回jQuery對(duì)象
語(yǔ)法：

data([key],[value])
//key:存儲(chǔ)的數(shù)據(jù)名
//value:將要存儲(chǔ)的任意數(shù)據(jù)
//當(dāng)參數(shù)只有一個(gè)key的時(shí)候，為讀取該jQuery對(duì)象對(duì)應(yīng)DOM中存儲(chǔ)的key對(duì)應(yīng)的值
//當(dāng)參數(shù)為兩個(gè)時(shí)，為像該jQuery對(duì)象對(duì)應(yīng)的DOM中存儲(chǔ)key-value鍵值對(duì)的數(shù)據(jù)。

//html代碼
<div></div>
//jQuery代碼
$("div").data("blah");  // undefined
$("div").data("blah", "hello");  // blah設(shè)置為hello
$("div").data("blah");  // hello
$("div").data("blah", 86);  // 設(shè)置為86
$("div").data("blah");  //  86
$("div").removeData("blah");  //移除blah
$("div").data("blah");  // undefined

題目6：寫出以下功能對(duì)應(yīng)的 jQuery 方法：

• 給元素 $node 添加 class active

$node.addClass('active')

• 給元素 $noed 刪除 class active

$node.removeClass('active')

• 展示元素$node, 隱藏元素$node

$node.show()//展示
$node.hide()//隱藏

• 獲取元素$node 的 屬性: id、src、title， 修改以上屬性

var $id = $node.attr('id')
$id.attr('id','xxx')
var $src = $node.attr('src')
$src.attr('src','xxx')
var $title = $node.attr('title')
$title.attr('title','xxx')

• 給$node 添加自定義屬性data-src

$node.attr('data-src','url')

• 在$ct 內(nèi)部最開(kāi)頭添加元素$node

$node.append($ct)

• 在$ct 內(nèi)部最末尾添加元素$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)邊距、包括邊框、包括外邊距)

//以下方法不帶參數(shù)時(shí)為獲取高、寬度，帶參數(shù)時(shí)為設(shè)置元素高、寬度，不改變內(nèi)邊距、邊框、外邊距
$node.width() - 返回元素的寬度（不包括內(nèi)邊距）
$node.height() - 返回元素的高度（不包括內(nèi)邊距）
$node.innerWidth() 方法返回元素的寬度（包括內(nèi)邊距）
$node.innerHeight() 方法返回元素的高度（包括內(nèi)邊距）            
$node.outerWidth() 方法返回元素的寬度（包括內(nèi)邊距和邊框）
$node.outerHeight() 方法返回元素的高度（包括內(nèi)邊距和邊框） 
//以下方法只能獲取高、寬度
$node.outerWidth(true) 方法返回元素的寬度（包括內(nèi)邊距、邊框和外邊距）
$node.outerHeight(true) 方法返回元素的高度（包括內(nèi)邊距、邊框和外邊距）

• 獲取窗口滾動(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ù)一遍

$( "li" ).each(function( index ) {
  console.log($(this).text() );
})

• 從$ct 里查找 class 為 .item的子元素

$ct.find('.item')

• 獲取$ct 里面的所有孩子

$ct.children()

• 對(duì)于$node，向上找到 class 為'.ct'的父親，在從該父親找到'.panel'的孩子

$node.parents('.ct').find('.panel')

• 獲取選擇元素的數(shù)量

$node.length

• 獲取當(dāng)前元素在兄弟中的排行

var index = $node.index()

題目7：

用jQuery實(shí)現(xiàn)以下操作當(dāng)點(diǎn)擊$btn 時(shí)，讓 $btn 的背景色變?yōu)榧t色再變?yōu)樗{(lán)色
當(dāng)窗口滾動(dòng)時(shí)，獲取垂直滾動(dòng)距離
當(dāng)鼠標(biāo)放置到$div 上，把$div 背景色改為紅色，移出鼠標(biāo)背景色變?yōu)榘咨?br> 當(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)展示輸入框里的文字
當(dāng)選擇 select 后，獲取用戶選擇的內(nèi)容

demo

題目8： 用 jQuery ajax 實(shí)現(xiàn)如下效果。`當(dāng)點(diǎn)擊加載更多會(huì)加載數(shù)據(jù)展示到頁(yè)面效果預(yù)覽317

demo

//后臺(tái)mock代碼
app.get('/loadMore', function (req, res) {
  var idx = req.query.index
  var len = req.query.length
  var ret = []
    for(var i = 0;i<len ; i++){
    ret.push("內(nèi)容"+(parseInt(idx)+i))
  }
  res.send(ret)