1.Jquery 中， $(document).ready()是什么意思？和window.onload 的區別？ 還有其他什么寫法或者替代方法？
- 二者的區別如下圖：
task26-1.png
- 參考資料：鋒利的jquery-09頁
2.$node.html()和$node.text()的區別?
- Node(節點)是DOM層次結構中的任何類型的對象的通用名稱，Node有很多類型，如元素節點，屬性節點，文本節點，注釋節點等，通過NodeType區分，常見的有：
task26-2.png
Element繼承了Node類，也就是說Element是Node多種類型中的一種，即當NodeType為1時Node即為ElementNode，另外Element擴展了Node，Element擁有id、class、children等屬性。
- $node.html()是獲取元素的html內容
- $node.text()是獲取元素文本內容
demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script>
<title>JS Bin</title>
</head>
<body>
<p>這是一個 <b>加粗的 </b> 段落</p>
<script>
$(function(){
$("p").on('click',function(){
console.log($('p').html())
})
$("p").on('click',function(){
console.log($('p').text())
})
})
</script>
</body>
</html>
3.$.extend 的作用和用法?
- 作用：將兩個或更多對象的內容合并到第一個對象。
- 寫法：
jQuery.extend( target [, object1 ] [, objectN ] )
當我們提供兩個或多個對象給$.extend()時，對象的所有屬性都添加到目標對象（target參數）。如果目標對象（target參數）的某個屬性在附加對象（ [, object1 ] [, objectN ] ）中沒有，那么這個屬性會在合并后保留。反之，如果附加對象中的某個屬性在目標對象中沒有，這個屬性在合并后也會保留。如果目標對象的某個屬性在附加對象中有，那么這個屬性的值會被附加對象的值覆蓋 - 用法1：合并兩個對象，并修改第一個對象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script>
</head>
<body>
<div id="log"></div>
<div id="ct"></div>
<script>
var object1 = {
apple: 0,
banana: {weight: 52, price: 100},
cherry: 97
};
var object2 = {
banana: {price: 200},
durian: 100
};
$.extend(object1, object2);
$("#log").append(JSON.stringify(object1));
</script>
</body>
</html>
demo演示 - 采用遞歸方式合并兩個對象，并修改第一個對象。
jQuery.extend( [true], target, object1 [, objectN ] )如果將 true
作為該函數的第一個參數，那么會在對象上進行遞歸的合并,若設置了 deep參數，對象和數組也會被合并進來，但是對象包裹的原始類型，比如String, Boolean, 和 Number是不會被合并進來的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script>
</head>
<body>
<div id="log"></div>
<div id="ct"></div>
<script>
var object1 = {
apple: 0,
banana: {weight: 52, price: 100},
cherry: 97
};
var object2 = {
banana: {price: 200},
durian: 100
};
$.extend(true,object1, object2);
$("#log").append(JSON.stringify(object1));
</script>
</body>
</html>
demo演示 - 合并 defaults 和 options 對象，并且不修改 defaults 對象。這是常用的插件開發模式。
jQuery.extend({}， [, object1 ] [, objectN ] )
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div id="log"></div>
<div id="ct"></div>
<script>
var object1 = {
apple: 0,
banana: {weight: 52, price: 100},
cherry: 97
};
var object2 = {
banana: {price: 200},
durian: 100
};
var object3=$.extend({},object1,object2);
$("#log").append("<div>"+JSON.stringify(object1)+"</div>");
$("#log").append("<div>"+JSON.stringify(object2)+"</div>");
$("#log").append("<div>"+JSON.stringify(object3)+"</div>");
</script>
</body>
</html>
demo
4.JQuery 的鏈式調用是什么？
- 對發生在同一個jQuery對象上的一組動作了，可以直接連寫而無需重復獲取對象
$('div').removeClass('hover').addClass('focus'),silbings.show()- 這么做的好處是讓代碼更加簡潔易讀，減少重復性代碼，提高性能。其中的原理是執行完一個方法后就返回對象本身（return this），然后對象繼續執行后面的方法。
5.JQuery ajax 中緩存怎樣控制?
- jQuery ajax方法中是利用cache參數來控制緩存。
設置為true將緩存頁面（默認為ture， dataType為”script”和”jsonp”時默認為false。），如果設置為false，瀏覽器將不會緩存頁面。
$.ajax不緩存版本
$.ajax({
type:"GET"
url:'test.html',
cache:false,
dataType:"html",
success:function(msg){
alert(msg); }
});
6.jquery 中 data 函數的作用
- **描述: **在匹配元素上存儲任意相關數據.
-
.data( key, value )
$("body").data("foo", 52);
$("body").data("bar", { myType: "test", count: 40 });
$("body").data({ baz: [ 1, 2, 3 ] });
$("body").data("foo"); // 52
$("body").data(); // { foo: 52, bar: { myType: "test", count: 40 }, baz: [ 1, 2, 3 ] } -
描述:返回匹配的元素集合中的第一個元素的給定名稱的數據存儲的值。 通過.data(name, value)或HTML5 data-* 屬性設置:
.data( key )
alert($('body').data('foo'));
alert($('body').data());
alert( $("body").data("foo")); //undefined
$("body").data("bar", "foobar");
alert( $("body").data("bar")); //foobar
