問答
1.jQuery中，$(document).ready()是什么意思？和window.onload 的區(qū)別？ 還有其他什么寫法或者替代方法？
$(document).ready()意思是等待頁面中的DOM元素加載完畢后執(zhí)行代碼。
與window.onload的區(qū)別：
執(zhí)行的時機：
window.onload必須等待網頁中的所有的內容加載完畢后（包括圖片）才能執(zhí)行。
$(document).ready()只需要在頁面中所有的DOM結構繪制完畢后就執(zhí)行，可能與DOM元素關聯的東西并沒有加載完。編寫的個數：
window.onload只能編寫一個。如果編寫多個只會執(zhí)行最后一個window.onload代碼。
$(document).ready()能同時編寫多個，根據編寫順序依次執(zhí)行。簡寫方式：
$(document).ready()可以簡寫成：
$(function(){//code})
當$()不帶參數時，默認參數就是document，因此還可以簡寫成：
$().ready(function(){//code})
2.$node.html()和$node.text()的區(qū)別?
$node.html():
當html()沒有設置參數時，返回匹配元素集合中第一個匹配元素的HTML內容。
當html()設置了HTML字符串時（即.hmlt(htmlString)），覆蓋匹配元素集合中每個匹配元素的內容。$node.text():
當text()沒有設置參數時，返回匹配元素集合中每個元素的合并文本（刪除HTML標記），包括它們的后代。
當text()設置了文本時（即.text(text)），覆蓋匹配元素集合中每個匹配元素的內容（特殊的字符會被編碼）。
舉例：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="box1">我是用來測試html()方法的<em>文檔1</em></div>
<div class="box1">我是用來測試html()方法的<em>文檔2</em></div>
<div class="box2">我是用來測試html()方法的<em>文檔3</em></div>
<div class="box2">我是用來測試html()方法的<em>文檔5</em></div>
<div class="box3">我是用來測試text()方法的<em>文檔6</em></div>
<div class="box3">我是用來測試text()方法的<em>文檔7</em></div>
<script src="jquery-3.1.1.js"></script>
<script>
console.log($(".box1").html());//只返回了第一個匹配的元素
$(".box2").html("<strong>我發(fā)生改變了</strong>")//所有匹配的元素內容都發(fā)生了改變，而且hmlt標記有效。
console.log($(".box3").text());//所有匹配的元素都返回了，而且html標記刪除了
$(".box3").text("<strong>我也發(fā)生改變了</strong>")//所有匹配的元素內容發(fā)生了改變，但是html標記都被編碼了。
</script>
</body>
</html>
3.$.extend 的作用和用法?
- 作用：將兩個或更多對象的內容合并到第一個對象
- 用法：
1.jQuery.extend( target [, object1 ] [, objectN ] )
當我們提供兩個或多個對象給$.extend()時，對象的所有屬性都添加到目標對象（target參數）。
如果目標對象（target參數）的某個屬性在附加對象（ [, object1 ] [, objectN ] ）中沒有，那么這個屬性會在合并后保留。反之，如果附加對象中的某個屬性在目標對象中沒有，這個屬性在合并后也會保留。
如果目標對象的某個屬性在附加對象中有，那么這個屬性的值會被附加對象的值覆蓋。
舉例：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<script src="jquery-3.1.1.js"></script>
</head>
<body>
<div id="log"></div>
<script>
var object1 = {
name : "Ben",
age : 20,
body:{heigh:178,weight:60}//body的值會被覆蓋
};
var object2 = {
body: {weight:70},
sex:"man"
};
$.extend( object1, object2 );
$( "#log" ).append( JSON.stringify( object1 ) );
</script>
</body>
</html>
2.jQuery.extend(true，target [, object1 ] [, objectN ] )
這個用法多了一個參數true，它會使合并成為遞歸，也就是深拷貝。
與上面的用法不同處在于如果目標對象的某個屬性在附加對象中有，那么這個屬性的值會發(fā)生合并。
舉例：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<script src="jquery-3.1.1.js"></script>
</head>
<body>
<div id="log"></div>
<script>
var object1 = {
name : "Ben",
age : 20,
body:{heigh:178,weight:60}//body的值會發(fā)生合并
};
var object2 = {
body: {weight:70},
sex:"man"
};
$.extend(true, object1, object2 );
$( "#log" ).append( JSON.stringify( object1 ) );
</script>
</body>
</html>
3 .jQuery.extend({}， [, object1 ] [, objectN ] )
目標對象為{}，這種用法是合并多個對象，但是不改變這些對象。這是常用的插件開發(fā)模式。
舉例：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<script src="jquery-3.1.1.js"></script>
</head>
<body>
<div id="log"></div>
<script>
var object1 = {
name : "Ben",
age : 20,
body:{heigh:178,weight:60}
};
var object2 = {
body: {
weight:70
},
sex:"man"
};
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>
4.JQuery 的鏈式調用是什么？
jQuery的鏈式調用就是指對一個對象連續(xù)的使用jQuery方法，例如：
$(this).removerClass("mouseout").addClass("mouseover").next().show()
這么做的好處是讓代碼更加簡潔易讀，減少重復性代碼，提高性能。
其中的原理是執(zhí)行完一個方法后就返回對象本身（return this），然后對象繼續(xù)執(zhí)行后面的方法。
5.JQuery ajax 中緩存怎樣控制?
jQuery ajax方法中是利用cache參數來控制緩存。
設置為true將緩存頁面（默認為ture， dataType為"script"和"jsonp"時默認為false。），如果設置為false，瀏覽器將不會緩存頁面。
其工作原理是在GET請求參數中附加“={timestamp}”時間戳，使請求的鏈接每次都不同。
6.jquery 中 data 函數的作用？
用法：
1.data(key ,value),在匹配元素上存儲任意相關數據。
舉例：
$("body").data("foo",52);
$("body").data("bar",{myType:"test",count:40});
$("body").data({baz:[1,2,3]});
console.log($("body").data("foo"));
console.log($("body").data());
2.
.data(key)，返回匹配的元素集合中的第一個元素的給定名稱的數據存儲的值。舉例：
console.log($("body").data("foo"));//如果指定元素上沒有設置任何值，將返回undefined。
$("body").data("bar","foobar");
console.log($("body").data("bar"));
代碼：
代碼1地址
代碼1預覽
代碼2地址
代碼2預覽
代碼3地址
代碼3預覽
代碼3本地預覽效果：
本文版權歸本人和饑人谷所有，轉載請注明來源。
