一、问答题
1. Jquery 中， $(document).ready()是什么意思？和window.onload 的区别？ 还有其他什么写法或者替代方法？
- DOM结构绘制完毕后就执行，不必等到加载完毕。
- 区别：
- 执行时间
- window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
- $(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。
- 编写个数不同
- window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个
- $(document).ready()可以同时编写多个，并且都可以得到执行
- 简化写法
- window.onload没有简化写法
- $(document).ready(function(){})可以简写成$(function(){});
2. $node.html()和$node.text()的区别?
- 区别：
- $node.html():设置或返回所选元素的内容（包括HTML标记）；
- $node.text():设置或返回所选元素的文本内容；
3. $.extend 的作用和用法?
- $.extend用法：将两个或更多对象的内容合并到第一个对象。
- 合并多个对象
<span style="font-size:18px;">//用法: jQuery.extend(obj1,obj2,obj3,..)
var Css1={size: "10px",style: "oblique"}
var Css2={size: "12px",style: "oblique",weight: "bolder"}
$.jQuery.extend(Css1,Css2)
//结果:Css1的size属性被覆盖,而且继承了Css2的weight属性
// Css1 = {size: "12px",style: "oblique",weight: "bolder"}
</span>
- 深度嵌套对象。
<span style="font-size:18px;"> jQuery.extend(
{ name: “John”, location: { city: “Boston” } },
{ last: “Resig”, location: { state: “MA” } }
);
// 结果:
// => { name: “John”, last: “Resig”, location: { state: “MA” } }
// 新的更深入的 .extend()
jQuery.extend( true,
{ name: “John”, location: { city: “Boston” } },
{ last: “Resig”, location: { state: “MA” } }
);
// 结果
// => { name: “John”, last: “Resig”,
// location: { city: “Boston”, state: “MA” } }
</span>
- 可以给jQuery添加静态方法。
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript" src="jquery.2.0.3.js"></script>
<script type="text/javascript">
$.extend({
add:function(a,b){return a+b;},
minus:function(a,b){return a-b},
multiply:function(a,b){return a*b;},
divide:function(a,b){return Math.floor(a/b);}
});
var sum = $.add(3,5)+$.minus(3,5)+$.multiply(3,5)+$.divide(5,7);
console.log(sum);
</script>
</body>
</html></span>
- 关于深拷贝
<script type="text/javascript" src="jquery-1.5.2.js"></script>
<script>
obj1 = { a : 'a', b : 'b' };
obj2 = { x : { xxx : 'xxx', yyy : 'yyy' }, y : 'y' };
$.extend(true, obj1, obj2);
alert(obj1.x.xxx); // 得到"xxx"
obj2.x.xxx = 'zzz';
alert(obj2.x.xxx); // 得到"zzz"
alert(obj1.x.xxx); // 得带"xxx"
</script>
$.extend(true, obj1, obj2)表示以obj2中的属性扩展对象obj1，第一个参数设为true表示深复制。 虽然obj1中原来没有"x"属性，但经过扩展后，obj1不但具有了"x"属性，而且对obj2中的"x"属性的修改也不会影响到obj1中"x"属性的值，这就是所谓的“深复制”了。
---[关于JQ.extend()的深复制和浅复制](http://www.jb51.net/article/39288.htm)
###4. JQuery 的链式调用是什么？
- 通过 jQuery，可以把动作/方法链接在一起。
Chaining 允许我们在一条语句中运行多个 jQuery 方法（在相同的元素上）。
$(selector).slideUp(2000).slideDown(2000).css('background-color','yellow')
###5. JQuery ajax 中缓存怎样控制?
- jQuery的ajax方法存在一个cache属性；
默认值: true，dataType 为 script 和 jsonp 时默认为 false；
设置为 false 将不缓存此页面。
###6. jquery 中 data 函数的作用
- jQuery.data()方法允许我们在DOM元素上附加任意类型的数据,避免了循环引用的内存泄漏风险;
- jQuery.data( element, key, value )
- **描述: **存储任意数据到指定的元素,返回设置的值。
- ```jQuery.data()```方法允许我们在DOM元素上附加任意类型的数据,避免了循环引用的内存泄漏风险。如果 DOM 元素是通过 jQuery 方法删除的或者当用户离开页面时，jQuery 同时也会移除添加在上面的数据。我们可以在一个元素上设置不同的值，并获取这些值：
例子：
<!DOCTYPE html>
<html>
<head>
<style>
div { color:blue; }
span { color:red; }
</style>
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<div>
The values stored were
<span></span>
and
<span></span>
</div>
<script>var div = $("div")[0];
jQuery.data(div, "test", { first: 16, last: "pizza!" });
$("span:first").text(jQuery.data(div, "test").first);
$("span:last").text(jQuery.data(div, "test").last);</script>
</body>
</html>
[关于prop()和attr()](http://www.cnblogs.com/Showshare/p/different-between-attr-and-prop.html)
[data的用法](http://www.jb51.net/article/59070.htm)
##二、代码
## [预览](http://wayneluo.bceapp.com/%E4%BB%BB%E5%8A%A1%E4%BA%8C%E5%8D%81%E5%85%AD/task26.html###)
## [代码](https://github.com/jirengu-inc/jrg-renwu7/blob/master/members/%E7%BD%97%E4%BC%9F%E6%81%A9/%E4%BB%BB%E5%8A%A1%E4%BA%8C%E5%8D%81%E5%85%AD/task26.html)
##[最后一题完美版..](http://wayneluo.bceapp.com/jQuery-test/loadMore.html)
### 用了老师的加锁方法，只能加载一次就不能加载了。。还是用回变量锁。。
网友评论