1： jQuery $(document).ready()與window.onload的區(qū)別？

Jquery中$(document).ready()的作用類似于傳統(tǒng)JavaScript中的window.onload方法，不過(guò)與window.onload方法還是有區(qū)別的。

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è)
• $(document).ready()可以同時(shí)編寫多個(gè)，并且都可以得到執(zhí)行

3.簡(jiǎn)化寫法

• window.onload沒(méi)有簡(jiǎn)化寫法
• $(document).ready(function(){})可以簡(jiǎn)寫成$(function(){})。當(dāng)$()不帶參數(shù)時(shí)，默認(rèn)參數(shù)就是document，因此還可以簡(jiǎn)寫成：$().ready(function(){});

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

• $node.html()獲取集合中第一個(gè)匹配元素的HTML內(nèi)容或設(shè)置每一個(gè)匹配元素的html內(nèi)容。
• $node.text()得到匹配元素集合中每個(gè)元素的文本內(nèi)容，包括他們的后代，或設(shè)置匹配元素集合中每個(gè)元素的文本內(nèi)容為指定的文本內(nèi)容。

<div class="ct">  
    hello 
    <p>world</p>
</div>
<script>
console.log( $('.ct').html());   
/* hello
    <p>world</p>*/
console.log( $('.ct').text()); 
/* hello
    world*/
</script>      

Paste_Image.png

3. $.extend 的作用和用法

作用：將兩個(gè)或更多對(duì)象的內(nèi)容合并到第一個(gè)對(duì)象。

用法：

//用法1
jQuery.extend( target [, object1 ] [, objectN ] ) ;
//用法2
jQuery.extend( [deep ], target, object1 [, objectN ] );

用法一參數(shù)說(shuō)明：

Paste_Image.png

Paste_Image.png

當(dāng)我們提供兩個(gè)或多個(gè)對(duì)象給$.extend()，對(duì)象的所有屬性都添加到目標(biāo)對(duì)象（target參數(shù)）。

如果只有一個(gè)參數(shù)提供給$.extend()，這意味著目標(biāo)參數(shù)被省略。在這種情況下，jQuery對(duì)象本身被默認(rèn)為目標(biāo)對(duì)象。這樣，我們可以在jQuery的命名空間下添加新的功能。這對(duì)于插件開(kāi)發(fā)者希望向 jQuery 中添加新函數(shù)時(shí)是很有用的。

注意，目標(biāo)對(duì)象（第一個(gè)參數(shù)）將被修改，并且將通過(guò)$.extend()返回。

<script>
    var a={name:'xuguojun'},b={name:'xuziqian',age:25},c={sex:'man'};
    //a被修改
    var object=$.extend(a,b,c);
    console.log(object);
    console.log(a);
</script> 

Paste_Image.png

如果我們想保留原對(duì)象，我們可以通過(guò)傳遞一個(gè)空對(duì)象作為目標(biāo)對(duì)象

var object = $.extend({}, object1, object2);

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

由于jQuery 對(duì)象上的方法最后會(huì)返回該對(duì)象，jQuery的鏈?zhǔn)秸{(diào)用就是可以在對(duì)象返回后再次調(diào)用該對(duì)象使用jQuery方法的一種操作。

舉例：

$('.ct').find('.ipt').text('HelloWorld').end().find('.prh').text('ChainCalls');

鏈?zhǔn)秸{(diào)用的好處：

• 節(jié)省代碼量，代碼看起來(lái)更優(yōu)雅；
• 返回的都是同一個(gè)對(duì)象，可以提高代碼的效率。
• 讓代碼流程更清晰。

5. jQuery AJAX中緩存怎樣控制

當(dāng)使用GET方法發(fā)送數(shù)據(jù)時(shí)，ajax的參數(shù)cache默認(rèn)設(shè)置為true，將緩存頁(yè)面；將cache設(shè)置為false，瀏覽器將不會(huì)緩存頁(yè)面，每當(dāng)發(fā)起ajax請(qǐng)求時(shí)，都會(huì)向后臺(tái)請(qǐng)求數(shù)據(jù)。
當(dāng)使用POST方法時(shí)，則每次都會(huì)被認(rèn)為是新的請(qǐng)求，不會(huì)緩存頁(yè)面。

6. jQuery 中 data 函數(shù)的作用

作用：在匹配元素上存儲(chǔ)任意相關(guān)數(shù)據(jù)， 或 返回匹配的元素集合中的第一個(gè)元素的給定名稱的數(shù)據(jù)存儲(chǔ)的值。該方法允許我們?cè)贒OM元素上綁定任意類型的數(shù)據(jù),避免了循環(huán)引用的內(nèi)存泄漏風(fēng)險(xiǎn)。

用法1：在匹配元素上存儲(chǔ)任意相關(guān)數(shù)據(jù)。

.data( key, value )
/*key，類型: String，一個(gè)字符串，用戶存儲(chǔ)數(shù)據(jù)的名稱。
value，數(shù)據(jù)值，它可以是任意的Javascript數(shù)據(jù)類型，除了undefined。*/
.data( obj )
//obj，類型: Object，一個(gè)用于更新數(shù)據(jù)的 鍵/值對(duì)。

demo：

$("body").data("age", 35);
$("body").data("say", { input: "name", xiaoming});
$("body").data({ arr: [0, 1, 2]}); 

console.log($("body").data("age")); // 35
console.log($("body").data()); 
// { age: 35, say: { input: "name", xiaoming}, arr: [0, 1, 2] }

用法2：返回匹配的元素集合中的第一個(gè)元素的給定名稱的數(shù)據(jù)存儲(chǔ)的值。

.data( key )
/* key，類型: String，存儲(chǔ)的數(shù)據(jù)名；如果那個(gè)元素上沒(méi)有設(shè)置任何值，那么將返回undefined。*/
.data()

demo:

<script>
$("body").data("age", 35);
$("body").data("say", { input: "name"});
$("body").data({ arr: [0, 1, 2]}); 

console.log($("body").data("age")); // 35
console.log($("body").data("say")); //{ input: "name"}
console.log($("body").data());//{ age: 35, say: { input: "name", }, arr: [0, 1, 2] }
</script>  

Paste_Image.png

7：用jQuery方法實(shí)現(xiàn)一些功能

1.給元素 $node 添加 class active，給元素 $noed 刪除 class active

$node.addClass("active");//為匹配元素添加class
$node.removeClass("active")為匹配元素刪除class

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

$node.hide();//隱藏匹配元素
$node.show();//展示匹配元素

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

$node.attr("id");//獲取匹配元素的id屬性值
$node.attr("id","tab");//修改匹配元素的id屬性值為tab
$node.attr("src");//獲取匹配元素的src屬性值
$node.attr("src","brush-seller.jpg");//修改匹配元素的src屬性值為brush-seller.jpg
$node.attr("title");//獲取匹配元素的title屬性值
$node.attr("title","follow your heart");//修改匹配元素的title屬性值為follow your heart
//還可以一次設(shè)置多個(gè)屬性值
$node.attr({
  id: 'tab',
  src: 'brush-seller.jpg',
  title:'follow your heart'
});

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

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

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

$ct.prepend($node)

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

$ct.append($node)

7.刪除$node

$ndoe.remove()

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

$ct.empty();//DOM中移除集合中匹配元素的所有子節(jié)點(diǎn)

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.獲取窗口滾動(dòng)條垂直滾動(dòng)距離

$(window).scrollTop()

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

$node.offset()

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

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

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

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

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

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

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

$(".ct").children()

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

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

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

$node.length;

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

$node.index();