題目1： jQuery 中， $(document).ready()是什么意思？
所有包括在$(document).ready()里面的元素或事件都將會(huì)在DOM完成加載之后立即加載，并且在頁(yè)面內(nèi)容加載之前。
1.執(zhí)行時(shí)間
window.onload必須等到頁(yè)面內(nèi)包括圖片的所有元素加載完畢后才能執(zhí)行
$(document).ready()是DOM結(jié)構(gòu)繪制完畢后就執(zhí)行，不必等到加載完畢
2.編寫個(gè)數(shù)
window.onload不能同時(shí)編寫多個(gè)，如果有多個(gè)window.onload方法，只會(huì)執(zhí)行一個(gè)（除非通過對(duì)onload事件進(jìn)行卸載重新添加事件的方式添加多個(gè)需要執(zhí)行的方法）
$(document).ready()可以同時(shí)編寫多個(gè)，并且都可以得到執(zhí)行

題目2： $node.html()和$node.text()的區(qū)別?
$node.html()，返回所選擇元素內(nèi)的html內(nèi)容，包含html標(biāo)簽和文本內(nèi)容
$node.text()，返回所選擇元素內(nèi)的文本內(nèi)容，不包含html標(biāo)簽，只包含文本內(nèi)容

題目3： $.extend 的作用和用法?
語(yǔ)法:
jQuery.extend( [ deep ], target , object1 [, objectN... ] )
deep：可選/Boolean類型，指是否深度合并對(duì)象，默認(rèn)為false。如果該值為true，且多個(gè)對(duì)象的某個(gè)同名屬性也都是對(duì)象，則該"屬性對(duì)象"的屬性也將進(jìn)行合并。
target： Object類型，目標(biāo)對(duì)象，其他對(duì)象的成員屬性將被復(fù)制到該對(duì)象上。
object1： 可選/Object類型，第一個(gè)被合并的對(duì)象。
objectN： 可選/Object類型，第N個(gè)被合并的對(duì)象。

• 參數(shù)deep的默認(rèn)值為false，你可以為該參數(shù)明確指定true值，但不能明確指定false值。簡(jiǎn)而言之，第一個(gè)參數(shù)不能為false值。
• 如果參數(shù)為null或undefined，則該參數(shù)將被忽略。
• 如果只為$.extend()指定了一個(gè)參數(shù)，則意味著參數(shù)target被省略。此時(shí)，target就是jQuery對(duì)象本身。通過這種方式，我們可以為全局對(duì)象jQuery添加新的函數(shù)。
• 如果多個(gè)對(duì)象具有相同的屬性，則后者會(huì)覆蓋前者的屬性值。

jQuery.extend(): Merge the contents of two or more objects together into the first object.(把兩個(gè)或者更多的對(duì)象合并到第一個(gè)當(dāng)中)
jQuery.fn.extend():Merge the contents of an object onto the jQuery prototype to provide new jQuery instance methods.(把對(duì)象掛載到j(luò)Query的prototype屬性，來擴(kuò)展一個(gè)新的jQuery實(shí)例方法)

簡(jiǎn)單來說：$.extend(),是用來擴(kuò)展jQuery靜態(tài)方法；$.fn.extend()是用來擴(kuò)展jQuery實(shí)例方法。

    //擴(kuò)展靜態(tài)方法：
    $.extend({
        sayName:function (){
            console.log("My name is jQuery");   
        }
    });

    $.sayName(); //"My name is jQuery"

    //擴(kuò)展實(shí)例方法：
    $.fn.extend({
        check: function() {
            return this.each(function() {
                this.checked = true;
            });
        }
    });

    $( "input[type='checkbox']" ).check(); //所有的checkbox都會(huì)被選擇
//擴(kuò)展的靜態(tài)方法，直接使用$調(diào)用；擴(kuò)展的實(shí)例方法，要用$()調(diào)用。

題目4： jQuery 的鏈?zhǔn)秸{(diào)用是什么？
鏈?zhǔn)讲僮骶褪欠植襟E地對(duì)jQuery對(duì)象實(shí)現(xiàn)各種操作

$("#Test").addClass('style').find("div").eq(0).fadeOut(200);

上面的例子就是鏈?zhǔn)讲僮鳎谝恍写a里，先為id為Test的對(duì)象添加"style"這個(gè)樣式，再找尋其下的第一個(gè)div標(biāo)簽，并使其淡出。

鏈?zhǔn)讲僮髂軌蜃尨a變得簡(jiǎn)潔，因?yàn)榭梢栽谝粭l語(yǔ)句中實(shí)現(xiàn)以往多條語(yǔ)句才能完成的任務(wù)。

題目5： jQuery 中 data 函數(shù)的作用
data() 方法向被選元素附加數(shù)據(jù)，或者從被選元素獲取數(shù)據(jù)。
通過data()函數(shù)存取的數(shù)據(jù)都是臨時(shí)數(shù)據(jù)，一旦頁(yè)面刷新，之前存放的數(shù)據(jù)都將不復(fù)存在。
該函數(shù)屬于jQuery對(duì)象(實(shí)例)。如果需要移除通過data()函數(shù)存放的數(shù)據(jù)，使用 removeData() 函數(shù)。
使用方式：
1、獲取附加的data的值
$(selector).data(name)
name：可選。規(guī)定要取回的數(shù)據(jù)的名稱。
如果沒有規(guī)定名稱，則該方法將以對(duì)象的形式從元素中返回所有存儲(chǔ)的數(shù)據(jù)。
2、用name和value為對(duì)象附加數(shù)據(jù)
$(selector).data(name,value)
selector：為需要附加或者獲取數(shù)據(jù)的對(duì)象。
name：參數(shù)為數(shù)據(jù)的名稱。
value：參數(shù)為數(shù)據(jù)的值。
3、使用對(duì)象向元素附加數(shù)據(jù)
使用帶有名稱/值對(duì)的對(duì)象向被選元素添加數(shù)據(jù)。
$(selector).data(object)
object：必需。規(guī)定包含名稱/值對(duì)的對(duì)象。

題目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', 'newid');
$node.attr('src', 'newsrc');
$node.attr('title', 'newtitle');

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

$node.attr('data-src',str)
$node.data("src",str)

在$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();//獲取寬度
$node.height();//獲取高度
$node.width('value');//設(shè)置寬度
$node.height('value');//設(shè)置高度
//包括內(nèi)邊距
$node.innerWidth();//獲取包括內(nèi)邊距的寬度
$node.innerHeight();//獲取包括內(nèi)邊距的高度
$node.innerWidth('value');//設(shè)置包括內(nèi)邊距的寬度
$node.innerHeight('value');//設(shè)置包括內(nèi)邊距的高度
//包括邊框
$node.outerWidth();//獲取包括邊框?qū)挾?$node.outerHeight();//獲取包括邊框高度
$node.outerWidth('value');//設(shè)置包括邊框?qū)挾?$node.outerHeight('value');//設(shè)置包括邊框高度
//包括外邊距
$node.outerWidth(true);//獲取包括外邊距寬度
$node.outerHeight(true);//獲取包括外邊距高度

獲取窗口滾動(dòng)條垂直滾動(dòng)距離

$(window).scrollTop()

獲取$node 到根節(jié)點(diǎn)水平、垂直偏移距離

$node.offset().left
$node.offset().top

修改$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").find(".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)以下操作
預(yù)覽地址
當(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)容

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>jQuery加載更多</title>

</head>

<body>
    <div class="layout">
        <ul class="ct">
            <li>內(nèi)容1</li>
            <li>內(nèi)容2</li>
        </ul>
        <a href="#" class="load-more">加載更多</a>
    </div>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
        crossorigin="anonymous"></script>
    <script>
        var $load = $('.load-more')
        var cur = 3
        $load.on('click', function (e) {
            e.preventDefault();

            $.ajax({
                url: '/loadMore',
                dataType: 'json',
                type: 'get',
                data: {
                    curIdx: cur,
                    len: 5
                },
                success: function (json) {
                    onSuccess(json)
                },
                error: function () {
                    onError()
                }
            })
        })

        function onSuccess(json) {
            cur += 5
            append(json)
        }

        function append(arr) {
            for (var i = 0; i < arr.length; i++) {
                $('.ct').append('<li>' + arr[i] + '</li>')
            }
        }

        $('.ct').on('mouseenter', 'li', function () {
            $(this).addClass('hover')
        })
        $('.ct').on('mouseleave', 'li', function () {
            $(this).removeClass('hover')
        })
    </script>
</body>

</html>

后臺(tái)：

app.get('/loadMore', function (req, res) {
  var cur = req.query.curIdx;
  var len = req.query.len;
  var arr = [];
  for (var i = 0; i < len; i++) {
    arr.push('內(nèi)容' + (parseInt(cur) + i));
  }
  res.send(arr);

})