Jquery 中， $(document).ready()和window.onload 的区别
-
$(document).ready()是指当DOM加载完成可以被javascript去操作时就会执行ready括号中的函数。 - 和
window.onload的区别如下：
1.$(document).ready()是jquery中的方法，等DOM树就绪后就会执行；window.onload是原生js中的一个对象，不仅要等DOM树就绪还要图像、内部框架等，页面整个加载完呈现出来才会执行。
2.$(document).ready()像事件绑定的原理，可以设置多次，DOM加载完就执行所有预先设置的函数；window.onload因为是类似给window对象的onload属性赋值所以只能执行一个，后设置的将覆盖前面的。
3.$(document).ready()可以简写成$(func)；window.onload没有简写。 - 其他写法：
$(document).ready()可以简写成$(func)；替代方法的话没有，但是需要注意jquery中的另外一个$(window).load( )它会等图像、内部框架等，页面整个加载呈现完才执行而不仅仅是DOM。
$node.html() 和 $node.text() 的区别
- 和原生Js类似；
$node.html()是获取或设置node节点的html内容，输出时包含标签代码写入时标签代码也会正常生效； -
$node.text()是获取或设置node节点的文本内容，输出时是把内部所有文本做一个拼接后输出，输入时把节点内部整个清空放入输入值（注意标签代码会被转义为文本）。
$.extend 的作用和用法
-
$.extend的作用是将多个对象的值（与目标对象比较，把目标对象所没有的值添加到目标对象中）合并到目标对象中。 - 用法：
$.extend(true,target,obj1[,objn])，若不需要深拷贝请将第一个参数true去掉（注意不支持false！）。
注意数组或对象浅拷贝时target的值可能会被覆盖而不是添加，此时最好用深拷贝！
目标对象可以是一个空对象（例如想合并两个对象，把其中一个作为目标对象的话会被修改，我既想得到合并后的对象，也想保留这两个对象，这时可以用一个空对象去做target）
JQuery 的链式调用
- 链式调用：在jquery中，它的很多方法调用后的返回值依然是jequery对象，那么对于像对DOM进行操作的任务中我们就无需先取得元素赋值给新建变量，再针对这个新建变量进行操作；例如
$('#head')它是一个表达式，和被选中的id为head的这个元素是等价的，$('#head').find('.box')就表示先选中id为head的元素再在head元素下寻找class为box的元素，当然后面还可以接着给它绑定事件。 - 链式调用非常方便，真的是
write less do more！，而且思路也很清晰，让代码看起来更简洁易懂。
JQuery ajax 中缓存怎样控制
- 一般来说浏览器会将每次请求的内容缓存起来，这样的话下次是同样的请求就直接在本地调用无需再发请求，但有时候如果是版本更新或者不想让浏览器使用缓存时怎么办呢？
- 在
jquery.ajax(opts)中有一个参数是cache，我们把它设为false即可让浏览器不读取本地缓存，其原理是类似在请求中加时间戳，这样浏览器以为两次请求是不同的而不会去调用缓存，但时间戳并不影响数据的获取，我们得到的依然是我们想要的。
jquery 中 data 函数的作用
- 在jquery中data函数允许我们把一些数据绑定到DOM元素上，避免循环引用的内存泄露风险；例如
$('#head').data(name:'hello')是在id为head的这个元素上绑定了一个数据，其名为name，值为'hello'，下次这样引用$('#head').data(name)。
小练习
写出以下功能对应的 Jq 方法：
1.给元素 $node 添加 class active，给元素 $noed 删除 class active
$node.addClass('active');
$noed.removeClass('active');
2.展示元素$node, 隐藏元素$node
$node.show(); //展示
$node.hide()；//隐藏
3.获取元素$node 的 属性: id、src、title， 修改以上属性
$node.attr('id');
$node.attr('src');
$node.attr('title');
$node.attr({
id:' '，
src:' '，
title:' '，
});
4.给$node 添加自定义属性data-src
$node.attr('data-src':' ');
5.在$ct 内部最开头添加元素$node
$ct.prepend($node);
6.在$ct 内部最末尾添加元素$node
$ct.append($node);
7.删除$node
$node.remove();
8.把$ct里内容清空
$ct.text('');
$ct.empty();
9.在$ct 里设置 html <div class="btn"></div>
$ct.html('<div class="btn"></div>');
10.获取、设置$node 的宽度、高度(分别不包括内边距、包括内边距、包括边框、包括外边距)
$node.width(); //获得宽度 不包括内边距 仅内容大小
$node.width(30); //设置宽度
$node.height(); //获得高度
$node.height(30); //设置高度
$node.innerWidth(); //包含内边距用inner
$node.outerWidth(); //包含边框用outer
$node.outerWidth(true); //包含外边距用outer+true
11.获取窗口滚动条垂直滚动距离
$(document).scrollTop();
12.获取$node 到根节点水平、垂直偏移距离
$node.offset();
13.修改$node 的样式，字体颜色设置红色，字体大小设置14px
$node.css({
'color': 'red',
'font-size': '14px'
});
14.遍历节点，把每个节点里面的文本内容重复一遍
.each(function(index,element){
$(this).text($(this).text()+$(this).text());
});
15.从$ct 里查找 class 为 .item的子元素
$ct.find('.item');
16.获取$ct 里面的所有孩子
$ct.children();
17.对于$node，向上找到 class 为’.ct’的父亲，在从该父亲找到’.panel’的孩子
$node.parents('.ct').find('.panel')
18.获取选择元素的数量
.length;
19.获取当前元素在兄弟中的排行
.index()；