本教程版权归小圆和饥人谷所有，转载须说明来源
问答
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禁用缓存的解决方案：
- 在请求的url后面加上一个随机参数（***.do?random=Math.random）这不失为一个好方法，缺点就是在所有的jquery ajax请求的地方都要加上这个随机参数，新项目还行，老项目的话，这是个巨大的工作量。
- 给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
代码
- 写出以下功能对应的 Jq 方法：
- 给元素 $node 添加 class
active，给元素 $noed 删除 classactive
$node.addClass('active');
$node.removeClass('active');
- 展示元素$node, 隐藏元素$node
$node.show();
$node,hide();
- 获取元素$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
- 给$node 添加自定义属性
data-src
$node.attr('data-src','value');
- 在$ct 内部最开头添加元素$node
$ct.pretent($node);
- 在$ct 内部最末尾添加元素$node
$ct.append($node);
- 删除$node
$node.remove();
- 把$ct里内容清空
$ct.empty();
- 在$ct 里设置 html
<div class="btn"></div>
$ct.html('<div class="btn"></div>');
- 获取、设置$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);//获取包括外边距高度
- 获取窗口滚动条垂直滚动距离
$node.scollTop();
- 获取$node 到根节点水平、垂直偏移距离
$node.offset();//返回到根节点的top和left值
- 修改$node 的样式，字体颜色设置红色，字体大小设置14px
$node.css({
'color': 'red',
'font-size': '14px';
});
- 遍历节点，把每个节点里面的文本内容重复一遍
$node.each(function(idx,val){
console.log($(this).text(););
});
- 从$ct 里查找 class 为
.item的子元素
$ct.find('.item');
- 获取$ct 里面的所有孩子
$ct.children();
- 对于$node，向上找到 class 为’.ct’的父亲，在从该父亲找到
.panel的孩子
$node.parents('.ct').find('.panel');
- 获取选择元素的数量
$node.length;
- 获取当前元素在兄弟中的排行
$node.index();
