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

$(document).ready()方法：為防止文檔在完全加載（就緒）之前運行Jquery代碼。若在文檔未完全加載前就運行函數(shù)，操作可能失敗。必須在文檔加載完后執(zhí)行操作，可使用ready事件，作用相當(dāng)于把js寫到body末尾。

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

window.onload：必須等網(wǎng)頁中所有的元素全部加載完畢，才能執(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 的作用和用法? **

$.extend()將多個對象合并到一起，可以傳入多個參數(shù)。$.extend([deep,] target,…)[deep,]為布爾值默認情況不是深拷貝，可設(shè)置true為深拷貝。

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

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

當(dāng)jQuery的方法的返回值仍為當(dāng)前對象時可以繼續(xù)調(diào)用該對象的方法，這樣就形成一種鏈?zhǔn)秸{(diào)用。

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

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

第一種用法：
.data(key,value)：在匹配元素上存儲任意相關(guān)數(shù)據(jù)

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

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

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

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

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

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

**題目6： **

寫出以下功能對應(yīng)的 jQuery 方法：
1、給元素 $node 添加 class active，給元素 $noed 刪除 class active

$node.addClass('active');//添加
$node.removeClass('active');//刪除

2、展示元素$node, 隱藏元素$node

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

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

$node.attr('id');//獲取
$node.attr('id’,'值'); //修改
$node.attr('src');//獲取
$node.attr('src’,'值');//修改
$node.attr('title');//獲取
$node.attr('title’,'值');//修改

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

$node.data("src",str)

5、在$ct 內(nèi)部最開頭添加元素$node

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

6、在$ct 內(nèi)部最末尾添加元素$node

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

7、刪除$node

$(node).remove();

8、把$ct里內(nèi)容清空

$node.empty();

**9、在$ct 里設(shè)置 html <div class="btn"></div> **

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

10、獲取、設(shè)置$node 的寬度、高度(分別不包括內(nèi)邊距、包括內(nèi)邊距、包括邊框、包括外邊距)

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

11、獲取窗口滾動條垂直滾動距離

$(window).scrollTop()

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

$node.offset()

13、修改$node 的樣式，字體顏色設(shè)置紅色，字體大小設(shè)置14px

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

14、遍歷節(jié)點，把每個節(jié)點里面的文本內(nèi)容重復(fù)一遍

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

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

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

16、獲取$ct 里面的所有孩子

$(".ct").children()

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

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

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

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

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

$node.index();

**題目7： **

用jQuery實現(xiàn)以下操作
1、當(dāng)點擊$btn 時，讓 $btn 的背景色變?yōu)榧t色再變?yōu)樗{色

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

2、當(dāng)窗口滾動時，獲取垂直滾動距離

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

3、當(dāng)鼠標(biāo)放置到$div 上，把$div 背景色改為紅色，移出鼠標(biāo)背景色變?yōu)榘咨?/strong>

$(".btn").on("mouseover",function(){
    $(this).css("background-color","red");
});
$(".btn").on("mouseout",function(){
    $(this).css("background-color","");
});

4、當(dāng)鼠標(biāo)激活 input 輸入框時讓輸入框邊框變?yōu)樗{色，當(dāng)輸入框內(nèi)容改變時把輸入框里的文字小寫變?yōu)榇髮懀?dāng)輸入框失去焦點時去掉邊框藍色，控制臺展示輸入框里的文字

$("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());
    }
});

5、當(dāng)選擇 select 后，獲取用戶選擇的內(nèi)容

$("#div5 .good").on("change",function(){
        //console.log($(this).val());
        $("#div5 span").text($(".good option:selected").text());
    });

代碼

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

代碼
本地mock成功

2.png

收藏
收藏
前端筆記
核心指南
JSON在線編輯器
jquery手冊 jq.ajax