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
