Q&A：
1. Jquery 中， $(document).ready()是什么意思？和window.onload 的区别？ 还有其他什么写法或者替代方法？
- $(document).ready(handler)是当DOM结构描绘完成即执行相应的函数；
- $(window).on("load", handler)是当页面全部加载完毕执行相应的函数（页面内容、图像、资源等全部加载）。
-
区别：
- 执行时间：
window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。 - 编写个数不同：
window.onload不能同时编写多个，如果有多个window.onload方法，只会执行最后一个，$(document).ready()可以同时编写多个，并且都可以得到执行。 - 简化写法：
window.onload没有简化写法，而$(document).ready()有简化写法为：$(handler)。
- 执行时间：
- 依赖性：
如果要执行的事件依赖于页面资源（如需要图片尺寸等），那么就使用window.onload，如果不依赖，那使用两种均可，并且习惯偏向使用$(document).ready()。
2. $node.html()和$node.text()的区别?
- $node.html()是获取元素html内容；
- $node.text()是获取元素的文本内容；
- demo：
<body>
<p class="p1">这是一段<b>加粗</b>内容</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作用：一个对象，如果附加的对象被传递给这个方法将那么它将接收新的属性，如果它是唯一的参数将扩展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扩展方法原型
- $.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>
不改变原始对象
- 深层拷贝（递归），$.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>
深层拷贝
- 只传递一个参数，即将参数合并到全局变量或实例中去：
<script>
$.extend({
hello: function() {
alert('hello');
}
});
</script>
4. JQuery 的链式调用是什么？
- 概念：jQuery中链式调用就是在对象上一次性调动多个方法；
$(‘#id’).show().hide().show().hide().show().hide();
- 优点：节约代码，易于维护；返回的都是同一对象，提高代码效率。
5. JQuery ajax 中缓存怎样控制?
- 缓存：当向服务器请求数据时，get类型会产生缓存，而post不会产生缓存；如果下次请求相同的话，浏览器会从本地缓存读取数据而不会从服务器获取数据，这将可能导致数据不同步造成差异。
-
解决方法：
- 更改ajax默认参数：
cache (默认: true, dataType为"script"和"jsonp"时默认为false)，如果设置为 false ，浏览器将不缓存此页面。
注意: 设置cache为 false将在 HEAD和GET请求中正常工作。它的工作原理是在GET请求参数中附加"_={timestamp}"（译者注：时间戳）。该参数不是其他请求所必须的，除了在IE8中，当一个POST请求一个已经用GET请求过的URL。 - 使用时间戳：
在每次请求的后面手动添加时间戳，这样由于请求不同，也就不会读取本地缓存。
- 更改ajax默认参数：
6. jquery 中 data 函数的作用
- 概念：data方法允许在DOM元素上绑定任意类型的数据，避免了循环引用的内存泄漏风险。
- 语法：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
本文归饥人谷和本人所有，如需转载请注明出处，谢谢
