1、jQuery 中， $(document).ready()是什么意思？

为防止文档在完全加载之前运行Jquery代码，若在文档未完全加载前就运行函数，操作可能失败。必须在文档加载完后执行操作，可使用ready事件，作用相当于把js写到body末尾。

//第一种写法
$(document).ready(function(){});
//第二种写法
$(function(){})

window.onload是所有元素、图片、外部资源都加载完执行，而$(document).ready()只需要DOM元素加载完成。

原生写法
document.addEventListener('DOMContentLoaded',function(){
     ......
})

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

$node.html()和$node.text()对应原生DOM中的innerHTML、innerText

• $node.html() 是获取或修改目标元素的HTML节点及相关节点的值

• $node.text() 只是获取或者修改文本节点内容

  
  

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

将两个或多个对象的所有属性，传递给target，目标对象（第一个参数）将被修改，并且将通过$.extend()返回，重复的属性及其值会被覆盖。
第一个参数设置为true，为深拷贝；设置为false，是浅拷贝。不设置默认是浅拷贝

var obj = {}
var obj1 = {
    name:'obj1',
    age:'1',
    friends:[1,2,3]
}
var obj2 = {
    name:'obj2',
    sex:'male'
}
//1浅拷贝
$.extend(obj,obj1)
console.log(obj)  //name:'obj1',age:'1',friends:Array(3)
//深拷贝
$.extend(true,obj,obj1) 
//2
$.extend(obj,obj1,obj2) 
console.log(obj)   //name:'obj2',age:'1',friends:Array(3),sex:'male'
//3
var opts = $.extend({},obj1,obj2)
console.log(opts)   //原理同2,存在的替换，不存在的添加
//4
$.extend($.fn,obj2)
//5
$.fn.extend(obj2)

//.extend常见用法
function getPeople(obj){
    var defalut = {
        name:'hunger',
        age:'30',
        sex:'male'
    }
    //var opts = {}
    var opts = $.extend({},defalut,obj)
    console.log(opts)       
} 

jQuery 的链式调用是什么？

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

上面的例子就是链式操作，在一行代码里，对id为Test的对象进行了三项操作

• 代码更精简。链式操作能大大精简代码量，多项操作一行代码一气呵成
• 优化性能。使用链式操作，所有操作代码共享一个jQuery对象，省去了逐步查询DOM元素的性能损耗。

jQuery 中 data 函数的作用？

在匹配元素上存储任意相关数据 或 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。
.data() 方法允许我们在DOM元素上绑定任意类型的数据，避免了循环引用的内存泄漏风险。

我们可以在一个元素上设置不同的值，之后获取这些值：

$("body").data("foo", 52);
$("body").data("bar", { myType: "test", count: 40 });
$("body").data({ baz: [ 1, 2, 3 ] }); 

$("body").data("foo");     //52
$("body").data();     //{ foo: 52, bar: { myType: "test", count: 40 }, baz: [ 1, 2, 3 ] }

通过data()函数存取的数据都是临时数据，一旦页面刷新，之前存放的数据都将不复存在。该函数属于jQuery对象(实例)。如果需要移除通过data()函数存放的数据，可以使用removeData()函数。

以下功能对应的 jQuery 方法：

$node.addClass('active')// 给元素 $node 添加 class active
$node.removeClass('active')// 给元素 $noed 删除 class active

$node.show()// 展示元素$node
$node.hide(5000)// 隐藏元素$node

// 获取元素$node 的 属性: id、src、title
$node.attr('id')
$node.attr('src')
$node.attr('title')
// 修改以上属性
$node.attr('id','xxx')
$node.attr('src','xxx')
$node.attr('title','xxx')
$node.attr('data-src','xxx')// 给$node 添加自定义属性data-src

// 在$ct 内部最开头添加元素$node
$ct.prepend('$node')
$node.prependTo('$ct')
// 在$ct 内部最末尾添加元素$node
$ct.append('$node')
$node.appendTo('$ct')

$node.remove()// 删除$node
$ct.empty()// 把$ct里内容清空
$ct.html('<div class="btn"></div>')// 在$ct 里设置 html <div class="btn"></div>

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

$(window).scrollTop()// 获取窗口滚动条垂直滚动距离

// 获取$node 到根节点水平、垂直偏移距离
$node.offset().left
$node.offset().top

// 修改$node 的样式，字体颜色设置红色，字体大小设置14px
$node.css({
    'color':'red',
    'font-size':'14px'
})
// 遍历节点，把每个节点里面的文本内容重复一遍
$node.each(function(){
    console.log($this.text())
})

$ct.find('.item')// 从$ct 里查找 class 为 .item的子元素
$ct.children()// 获取$ct 里面的所有孩子
$node.parent('.ct').children('.panel')// 对于$node，向上找到 class 为'.ct'的父亲，在从该父亲找到'.panel'的孩子

$node.length// 获取选择元素的数量
$node.index()// 获取当前元素在兄弟中的排行