Q&A：
1. Jquery 中， $(document).ready()是什么意思？和window.onload 的區(qū)別？ 還有其他什么寫法或者替代方法讥珍？
- $(document).ready(handler)是當(dāng)DOM結(jié)構(gòu)描繪完成即執(zhí)行相應(yīng)的函數(shù)；
- $(window).on("load", handler)是當(dāng)頁(yè)面全部加載完畢執(zhí)行相應(yīng)的函數(shù)（頁(yè)面內(nèi)容饭耳、圖像串述、資源等全部加載）执解。
-
區(qū)別：
- 執(zhí)行時(shí)間：
window.onload必須等到頁(yè)面內(nèi)包括圖片的所有元素加載完畢后才能執(zhí)行寞肖。$(document).ready()是DOM結(jié)構(gòu)繪制完畢后就執(zhí)行纲酗，不必等到加載完畢。 - 編寫個(gè)數(shù)不同：
window.onload不能同時(shí)編寫多個(gè)新蟆，如果有多個(gè)window.onload方法觅赊，只會(huì)執(zhí)行最后一個(gè)，$(document).ready()可以同時(shí)編寫多個(gè)琼稻，并且都可以得到執(zhí)行吮螺。 - 簡(jiǎn)化寫法：
window.onload沒(méi)有簡(jiǎn)化寫法，而$(document).ready()有簡(jiǎn)化寫法為：$(handler)帕翻。
- 執(zhí)行時(shí)間：
- 依賴性：
如果要執(zhí)行的事件依賴于頁(yè)面資源（如需要圖片尺寸等）鸠补，那么就使用window.onload，如果不依賴嘀掸，那使用兩種均可紫岩，并且習(xí)慣偏向使用$(document).ready()。
2. $node.html()和$node.text()的區(qū)別?
- $node.html()是獲取元素html內(nèi)容睬塌；
- $node.text()是獲取元素的文本內(nèi)容泉蝌；
- demo：
<body>
<p class="p1">這是一段<b>加粗</b>內(nèi)容</p>
<div class="res1"></div>
<div class="res2"></div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$('.res1').text($('.p1').html());
$('.res2').text($('.p1').text());
</script>
</body>
html&text
3. $.extend 的作用和用法?
- $.extend作用：一個(gè)對(duì)象，如果附加的對(duì)象被傳遞給這個(gè)方法將那么它將接收新的屬性揩晴，如果它是唯一的參數(shù)將擴(kuò)展jQuery的命名空間勋陪。
- $.extend用法：
- $.extend(dest, obj1, objn)：
<body>
<div class="log"></div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
var obj1 = {
name: 'zhao',
age: '24'
};
var obj2 = {
age: '16',
sex: 'male'
};
$.extend(obj1, obj2);
$('.log').append(JSON.stringify(obj1));
</script>
</body>
$.extend擴(kuò)展方法原型
- $.extend({}, obj1, objn)：
<body>
<div class="log"></div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
var obj1 = {
name: 'zhao',
age: '24'
};
var obj2 = {
age: '16',
sex: 'male'
};
var res = $.extend({}, obj1, obj2);
$('.log').append('<div>' + JSON.stringify(obj1) + '</div>');
$('.log').append('<div>' + JSON.stringify(obj2) + '</div>');
$('.log').append('<div>' + JSON.stringify(res) + '</div>');
</script>
</body>
不改變?cè)紝?duì)象
- 深層拷貝（遞歸），$.extend(deep, dest, obj1, obj2)：
<body>
<div class="log"></div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
var obj1 = {
name: {
firstName: 'liqun',
lastName: 'zhao'
},
age: '24'
};
var obj2 = {
name: {
lastName: 'kevin',
fullName: 'kevinzhao'
},
age: '16',
sex: 'male'
};
var res = $.extend(true, {}, obj1, obj2);
$('.log').append('<div>' + JSON.stringify(obj1) + '</div>');
$('.log').append('<div>' + JSON.stringify(obj2) + '</div>');
$('.log').append('<div>' + JSON.stringify(res) + '</div>');
</script>
</body>
深層拷貝
- 只傳遞一個(gè)參數(shù)硫兰，即將參數(shù)合并到全局變量或?qū)嵗腥ィ?/li>
<script>
$.extend({
hello: function() {
alert('hello');
}
});
</script>
4. JQuery 的鏈?zhǔn)秸{(diào)用是什么诅愚？
- 概念：jQuery中鏈?zhǔn)秸{(diào)用就是在對(duì)象上一次性調(diào)動(dòng)多個(gè)方法；
$(‘#id’).show().hide().show().hide().show().hide();
- 優(yōu)點(diǎn)：節(jié)約代碼劫映，易于維護(hù)呻粹；返回的都是同一對(duì)象，提高代碼效率苏研。
5. JQuery ajax 中緩存怎樣控制?
- 緩存：當(dāng)向服務(wù)器請(qǐng)求數(shù)據(jù)時(shí)等浊，get類型會(huì)產(chǎn)生緩存，而post不會(huì)產(chǎn)生緩存摹蘑；如果下次請(qǐng)求相同的話筹燕，瀏覽器會(huì)從本地緩存讀取數(shù)據(jù)而不會(huì)從服務(wù)器獲取數(shù)據(jù)，這將可能導(dǎo)致數(shù)據(jù)不同步造成差異衅鹿。
-
解決方法：
- 更改ajax默認(rèn)參數(shù)：
cache (默認(rèn): true, dataType為"script"和"jsonp"時(shí)默認(rèn)為false)撒踪，如果設(shè)置為 false ，瀏覽器將不緩存此頁(yè)面大渤。
注意: 設(shè)置cache為 false將在 HEAD和GET請(qǐng)求中正常工作制妄。它的工作原理是在GET請(qǐng)求參數(shù)中附加"_={timestamp}"（譯者注：時(shí)間戳）。該參數(shù)不是其他請(qǐng)求所必須的泵三，除了在IE8中耕捞，當(dāng)一個(gè)POST請(qǐng)求一個(gè)已經(jīng)用GET請(qǐng)求過(guò)的URL衔掸。 - 使用時(shí)間戳：
在每次請(qǐng)求的后面手動(dòng)添加時(shí)間戳，這樣由于請(qǐng)求不同俺抽，也就不會(huì)讀取本地緩存敞映。
- 更改ajax默認(rèn)參數(shù)：
6. jquery 中 data 函數(shù)的作用
- 概念：data方法允許在DOM元素上綁定任意類型的數(shù)據(jù)，避免了循環(huán)引用的內(nèi)存泄漏風(fēng)險(xiǎn)磷斧。
- 語(yǔ)法：selector.data(key, value);
- demo：
<body>
<div class="log"></div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$('body').data('zhao', {name: 'zhao', age: 24});
$('.log').append($('body').data('zhao').name);
$('.log').append('<br>' + $('body').data('zhao').age);
</script>
</body>
demo
本文歸饑人谷和本人所有振愿，如需轉(zhuǎn)載請(qǐng)注明出處，謝謝
