題目1： jQuery 中， $(document).ready()是什么意思？
$(document).ready()方法：為防止文檔在完全加載之前運行Jquery代碼,若在文檔未完全加載前就運行函數,操作可能失敗.必須在文檔加載完后執行操作,可使用ready事件,作用相當于把js寫到body末尾.

$(document).ready(function(){
});
可簡寫為:
$(function(){
})

window.onload：必須等網頁中所有的元素全部加載完畢，才能執行
不能同時寫多個，否則后面覆蓋前面

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

$node.html()，返回所選擇元素內的html內容，包含html標簽和文本內容
$node.text()，返回所選擇元素內的文本內容，不包含html標簽，只包含文本內容

**題目3： $.extend 的作用和用法? **
$.extend()將多個對象合并到一起，可以傳入多個參數。$.extend([deep,] target,…)[deep,]為布爾值默認情況不是深拷貝，可設置true為深拷貝。

//定義一個對象
var obj={
    name:'lulu',
    age:27,
    sex:'woman'
    };
//定義一個新對象
var newObj={
    name:'xuxu',
    age:20
};
//extend方法接受多個參數,并且第一個對象被覆蓋
$.extend(obj,newObj,{
    name:'maomao',
    age:25,
    like:'eat'
});
console.log(obj);
//object{
//age:25,
//like:"eat",
//name:"maomao",
//sex:"woman"

題目4： jQuery 的鏈式調用是什么？
當jQuery的方法的返回值仍為當前對象時可以繼續調用該對象的方法，這樣就形成一種鏈式調用。

$(#ct).css('color','blue').show(400).hide();

題目5： jQuery 中 data 函數的作用
第一種用法：
.data(key,value)：在匹配元素上存儲任意相關數據

$("div").data("people",{age:16,sex:"男"});
console.log( $("div").data("people").age    );  //16

第二種用法：
.data(key):返回匹配元素集合中的第一個元素給定成名的數據存儲的值，通過.data(name,value)或HTML 5 data-*屬性（著重）的設置。

<div data-role="page" data-last-value="43" data-hidden="true" ></div>

下面通過data()函數獲取里面的值

$("div").data("role") === "page";
$("div").data("lastValue") === 43;

以上代碼的第二條語句正確是表述了該元素的data-last-value屬性。 如果沒有傳遞key參數的數據存儲， jQuery將在元素的屬性中搜索， 將駝峰式字符串轉化為中橫線字符串，然后在結果前面加上data-。 所以，該字符串lastValue將被轉換為data-last-value。

題目6：

• 寫出以下功能對應的 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('id’,'值'); //修改
$node.attr('src');//獲取
$node.attr('src’,'值');//修改
$node.attr('title');//獲取
$node.attr('title’,'值');//修改

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

$node.data("src",str)

• 在$ct 內部最開頭添加元素$node

$(".ct").prepend(node);

• 在$ct 內部最末尾添加元素$node

$(".ct").append(node);

• 刪除$node

$(node).remove();

• 把$ct里內容清空

$node.empty();

• 在$ct 里設置 html <div class="btn"></div>

$ct.html('<div class="btn"></div>')

• 取、設置$node 的寬度、高度(分別不包括內邊距、包括內邊距、包括邊框、包括外邊距)

$node.width();//不包括內邊距寬度,僅包括內容
$node.height();//不包括內邊距高度,僅包括內容
$node.innerWidth();//包括內容和內邊距寬度
$node.innerHeight();//包括內容和內邊距高度
$node.outerWidth();//包括內容,內邊距,邊框寬度
$node.outerHeight();//包括內容,內邊距,邊框高度
$node.outerHeight(true);//包括內容,內邊距,邊框,外邊距高度
$node.outerWidth(true);//包括內容,內邊距,邊框,外邊距寬度

• 獲取窗口滾動條垂直滾動距離

$(window).scrollTop()

• 獲取$node 到根節點水平、垂直偏移距離

$node.offset()

• 修改$node 的樣式，字體顏色設置紅色，字體大小設置14px

$node.css({"color":"red","font-size":"14px"})

• 遍歷節點，把每個節點里面的文本內容重復一遍

$node.each(function(){
    console.log($(this).text())
})

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

$(".ct").find(".item")

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

$(".ct").children()

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

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

• 獲取選擇元素的數量

$node.length;
$node.size();

• 獲取當前元素在兄弟中的排行

$node.index();

題目7：

• 用jQuery實現以下操作
• 當點擊$btn 時，讓 $btn 的背景色變為紅色再變為藍色

$("#div1 .btn").on("click",function(){
        $(this).css("background-color","red");
        setTimeout(function(){
            $("#div1 .btn").css("background-color","blue");
        },500);
    });

• 當窗口滾動時，獲取垂直滾動距離

$(document).on("scroll",function(){
        console.log($(this).scrollTop());
    });

• 當鼠標放置到$div 上，把$div 背景色改為紅色，移出鼠標背景色變為白色

$("div").on('mouseover',function(){
  $(this).css('background-color','red')
})
$("div").on('mouseout',function(){
  $(this).css('background-color','#fff')
})

• 當鼠標激活 input 輸入框時讓輸入框邊框變為藍色，當輸入框內容改變時把輸入框里的文字小寫變為大寫，當輸入框失去焦點時去掉邊框藍色，控制臺展示輸入框里的文字

$("input").on("focus",function(){
    $(this).css("border","1px solid blue");
});
$("input").on("change",function(){
    $(this).val($(this).val().toUpperCase());
});
$("input").on("blur",function(){
    $(this).css("border","");
    if($(this).val()!==""){
        console.log($(this).val());
    }
});

• 當選擇 select 后，獲取用戶選擇的內容

        <h3>5.當選擇 select 后，獲取用戶選擇的內容</h3>
        <select name="">
            <option value="1">美術</option>
            <option value="2">舞蹈</option>
            <option value="3">吉他</option>
            <option value="4">書法</option>
        </select>
        <p>用戶選擇的內容是:<span></span></p>
               
             $("select").on("change",function(){
                $("span").text($("select option:selected").text());
            });

題目8： 用 jQuery ajax 實現如下效果。`當點擊加載更多會加載數據展示到頁面
代碼地址