Jquery 常用方法

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

$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()；

Jquery 中， $(document).ready()和window.onload 的区别