問答部分
一、jQuery中， $(document).ready()是什么意思？和window.onload 的區別？ 還有其他什么寫法或者替代方法？
- $(document).ready()~指當DOM準備就緒時，指定一個函數來執行
- window.onload~指當頁面全部加載完成（包括頁面內容、圖片、資源等）時執行相應的函數
- 兩者的區別：
- 執行時間不同：$(document).ready()只需要當DOM加載好即可；window.onload必須要等到頁面所有元素加載完后才能執行
- 編寫個數不同：$(document).ready()可以同時編寫多個，并根據編寫順序執行；window.onload只能編寫一個，如果編寫多個也只執行最后一個
- $(document).ready()的簡化寫法為：$(handler)；window.onload無簡寫方法
二、$node.html()和$node.text()的區別?
- .html()~獲取集合中第一個匹配元素的HTML內容
- .text()~獲取匹配元素集合中每個元素的合并文本，包括他們的后代
比如如下代碼：
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>jQuery</title>
</head>
<body>
<p>jirengu<span>hunger</span></p>
</body>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
<script>
$(function(){
console.log($("p").html());
console.log($("p").text());
});
</script>
</html>
結果如下圖：
問答2
三、$.extend 的作用和用法?
- 作用：將兩個或更多對象的內容合并到第一個對象
- 用法如下：
//目標對象為{}，這種用法是合并多個對象，但是不改變這些對象
jQuery.extend({},object1,object2);
//合并兩個對象
jQuery.extend(target[,object1][,object2]);
//deep為true時，合并成為遞歸（即深拷貝）
jQuery.extend([deep],target[,object1][,object2]);
具體如下示例：
- 1~
jQuery.extend(target[,object1][,object2]);
當提供兩個或多個對象給$.extend()，對象的所有屬性都添加到目標對象（target參數）；目標對象（第一個參數）將被修改，并且將通過$.extend()返回；如果只有一個目標參數提供給$.extend()，意味著目標參數被省略；如果目標對象（target參數）的某個參數在附加對象([,object1][,object2])中沒有，那么這個屬性會在合并 之后被保留；同理，如果附加對象中某個屬性在目標對象中沒有，這個屬性也會在合并之后被保留；如果目標對象的某個屬性在附加對象中存在，那么這個屬性的值會被附加對象的值所覆蓋。如下代碼
var defaults = {
name:"frank",
age:25,
height:176
};
var options = {
name:"hunger",
age:26,
weight:63,
sex:"male"
};
$.extend(defaults,options);
console.log(defaults);
結果如下圖：
.extend()用法1
- 2~
jQuery.extend({},target[,object1][,object2]);
合并defalults和options對象，并且不修改defaults對象；這是常用的插件開發模式，如下代碼
var defaults = {
name:"frank",
age:25,
height:176
};
var options = {
weight:63,
sex:"male"
};
var newObject = $.extend({},defaults,options);
console.log(defaults);
console.log(options);
console.log(newObject);
結果如下圖：
.extend()用法2
- 3~
jQuery.extend(true,target[,object1][,object2]);
當第一個參數為true時，合并會成為遞歸（即深拷貝），此時，如果目標對象中的某個屬性在附加對象中存在時，那么這個屬性的值將會合并，如下代碼
var defaults = {
name:"frank",
age:25,
body:{height:176,weight:63}
};
var options = {
name:"hunger",
sex:"male",
body:{height:180}
};
$.extend(true,defaults,options);
console.log(defaults);
結果如下圖：
.extend()用法3
四、JQuery 的鏈式調用是什么？
- JQuery 的鏈式調用是指對一個對象連續的使用jQuery方法（原理是：執行完一個方法后就返回對象本身（return this），然后對象繼續執行后面的方法），比如如下代碼
$("#ct").removeClass("hover").css("color","red").hide("slow");
以上代碼對id為ct的對象做了以下操作：移除了hover的class，設置了字體顏色，并隱藏；這樣做的好處是代碼簡潔易讀，減少了代碼的重復性，提高了性能
五、JQuery ajax 中緩存怎樣控制?
- JQuery ajax 中利用cache參數來控制緩存，默認的值為true（即緩存頁面）；如果設置為 false ，瀏覽器將不緩存此頁面
六、jquery 中 data 函數的作用？
- .data(key,value)~在匹配元素上存儲任意相關數據，如下代碼
$("body").data("foo", 52);
$("body").data("bar", { myType: "test", count: 40 });
$("body").data({ baz: [ 1, 2, 3 , 4 , 5 , 6 ] });
console.log($("body").data("foo"));
console.log($("body").data());
問答6
- .data(key)~返回匹配的元素集合中的第一個元素的給定名稱的數據存儲的值，如下代碼
$("body").data("foo");
$("body").data("bar", "foobar");
console.log($("body").data("foo"));//undefined,如果指定元素上
沒有設置任何值，那么將返回undefined
console.log($("body").data());//foobar
問答6
代碼部分
- 代碼三
- 代碼三github
- 代碼三本地預覽gif
代碼三
版權聲明：本教程版權歸鄧攀和饑人谷所有，轉載須說明來源！！！！
