本教程版权归小圆和饥人谷所有，转载须说明来源

问答

1. Jquery 中， $(document).ready()是什么意思？和window.onload 的区别？ 还有其他什么写法或者替代方法？

$(document).ready()：当 DOM（文档对象模型） 已经加载，并且页面（包括图像）已经完全呈现时，会发生 ready 事件。由于该事件在文档就绪后发生，因此把所有其他的 jQuery 事件和函数置于该事件中是非常好的做法。
区别：
$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。可以同时编写多个，并且都可以得到执行。有简写方法。
window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。不能同时编写多个，如果有多个window.onload方法，只会执行一个 。没有简写方法。
其他写法：
以下均为$(document).ready()的简写方法。

$().ready(function(){
        //do something...
})

$(function(){
        //do something...
})

2. $node.html()和$node.text()的区别?

$node.html():取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。
$node.text():取得所有匹配元素的内容。结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效。

3. $.extend 的作用和用法?

$.extend用一个或多个其他对象来扩展一个对象，返回被扩展的对象。
用法：

$.extend(dest,src1,src2,src3...);

它的含义是将src1,src2,src3...合并到dest中,返回值为合并后的dest,由此可以看出该方法合并后，是修改了dest的结构的。如果想要得到合并的结果却又不想修改dest的结构，可以如下使用：

var newSrc=$.extend({},src1,src2,src3...)//也就是将"{}"作为dest参数。

这样就可以将src1,src2,src3...进行合并，然后将合并结果返回给newSrc了。
3、

$.extend(boolean,dest,src1,src2,src3...)

第一个参数boolean代表是否进行深度拷贝，其余参数和前面介绍的一致

4. JQuery 的链式调用是什么？

链式调用就是分步骤地对jQuery对象实现各种操作。它的原理在于每一步的jQuery操作，返回的都是一个jQuery对象，所以不同操作可以连在一起。例如：

$("#Test").css('color','red').show(200).removeClass('style');

上面的例子就是链式操作，在一行代码里，对id为Test的对象进行了三项操作：先设置其字体颜色为红色，再显示对象，最后移除对象的“style”这个样式。

5. JQuery ajax 中缓存怎样控制?

如果没有进行额外设置的话，如果请求的地址和参数及参数的值完全一样，就会发生jquery ajax使用缓存的情况。

jquery ajax禁用缓存的解决方案：

1. 在请求的url后面加上一个随机参数（***.do?random=Math.random）这不失为一个好方法，缺点就是在所有的jquery ajax请求的地方都要加上这个随机参数，新项目还行，老项目的话，这是个巨大的工作量。
2. 给jquery ajax请求设置禁用缓存的全局设置我们都知道在jquery ajax的的方法中有个cache参数，如果设置为false，那么就不进行缓存。用ajaxSetup() 方法，该方法可以为所有的ajax请求统一设置默认参数。那么可以设置如下代码：

$(function(){ $.ajaxSetup ({ 
       cache: false //关闭AJAX缓存 
      });
});

6. jquery 中 data 函数的作用

data()函数就是向元素中附加数据，然后在需要的时候取出数据

• 第一种写法，传递参数key(string)，value(除undefined的任意数据类型)

$('body').data('name','hunger')//在body上绑定key为name value为xianyu的值
$('body').data('name') //取出值 得到hunger

• 2 .第二种写法,传递一个对象

$('body').data({
      name:'hunger',
      age:2
})
$('body').data().age //取出值 得到2

• 第三种写法,传递三个参数，第一个参数为绑定的对象，第二个参数为key，第三个对象为的value

$.data('body','name','hunger') 
$.data('body','name')//得到name的值 为hunger

代码

1. 写出以下功能对应的 Jq 方法：
2. 给元素 $node 添加 class active，给元素 $noed 删除 class active

$node.addClass('active');
$node.removeClass('active');

2. 展示元素$node, 隐藏元素$node

$node.show();
$node,hide();

3. 获取元素$node 的 属性: id、src、title， 修改以上属性

$node.attr('id');//获取id
$node.attr('src');//获取src
$node.attr('title');//获取title
$node.attr('id','value');//修改id
$node.attr('src','value');//修改src
$node.attr('title','value');//修改title

4. 给$node 添加自定义属性data-src

$node.attr('data-src','value');

5. 在$ct 内部最开头添加元素$node

$ct.pretent($node);

6. 在$ct 内部最末尾添加元素$node

$ct.append($node);

7. 删除$node

$node.remove();

8. 把$ct里内容清空

$ct.empty();

9. 在$ct 里设置 html <div class="btn"></div>

$ct.html('<div class="btn"></div>');

10. 获取、设置$node 的宽度、高度(分别不包括内边距、包括内边距、包括边框、包括外边距)

//不包括内边距
$node.width();//获取宽度
$node.height();//获取高度
$node.width('value');//设置宽度
$node.height('value');//设置高度
//包括内边距
$node.innerWidth();//获取包括内边距的宽度
$node.innerHeight();//获取包括内边距的高度
$node.innerWidth('value');//设置包括内边距的宽度
$node.innerHeight('value');//设置包括内边距的高度
//包括边框
$node.outerWidth();//获取包括边框宽度
$node.outerHeight();//获取包括边框高度
$node.outerWidth('value');//设置包括边框宽度
$node.outerHeight('value');//设置包括边框高度
//包括外边距
$node.outerWidth(true);//获取包括外边距宽度
$node.outerHeight(true);//获取包括外边距高度

11. 获取窗口滚动条垂直滚动距离

$node.scollTop();

12. 获取$node 到根节点水平、垂直偏移距离

$node.offset();//返回到根节点的top和left值

13. 修改$node 的样式，字体颜色设置红色，字体大小设置14px

$node.css({
          'color': 'red',
          'font-size': '14px';
});

14. 遍历节点，把每个节点里面的文本内容重复一遍

$node.each(function(idx,val){
        console.log($(this).text(););
});

15. 从$ct 里查找 class 为 .item的子元素

$ct.find('.item');

16. 获取$ct 里面的所有孩子

$ct.children();

17. 对于$node，向上找到 class 为’.ct’的父亲，在从该父亲找到.panel的孩子

$node.parents('.ct').find('.panel');

18. 获取选择元素的数量

$node.length;

19. 获取当前元素在兄弟中的排行

$node.index();