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

• HTML中DOM加载完毕后，执行参数里的handler函数,可以按照顺序多次触发。
• onload的本质是当页面里的所有资源（内部，外部）加载完毕后再触发回调，而且只会加载一次。

在一般的开发中，推荐使用ready，因为考虑到如果页面中有大量外部资源需要加载的时候，不必等待资源加载完毕时就能够给DOM节点绑定事件，从而使得页面的交互功能不因加载资源而阻塞。如果交互依赖于外部资源，那么就只能使用load。

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

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

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

• $node.html()，返回所选择元素内的html内容，包含html标签和文本内容
• $node.text()，返回所选择元素内的文本内容，不包含html标签，只包含文本内容

$.extend 的作用和用法?

$.extend方法用于将多个对象合并进第一个对象。

var o1 = {p1:'a',p2:'b'};
var o2 = {p1:'c'};

$.extend(o1,o2);
o1.p1 // "c"

$.extend的另一种用法是生成一个新对象，用来继承原有对象。这时，它的第一个参数应该是一个空对象。

var o1 = {p1:'a',p2:'b'};
var o2 = {p1:'c'};

var o = $.extend({},o1,o2);
o
// Object {p1: "c", p2: "b"}

默认情况下，extend方法生成的对象是“浅拷贝”，也就是说，如果某个属性是对象或数组，那么只会生成指向这个对象或数组的指针，而不会复制值。如果想要“深拷贝”，可以在extend方法的第一个参数传入布尔值true。

var o1 = {p1:['a','b']};

var o2 = $.extend({},o1);
var o3 = $.extend(true,{},o1);

o1.p1[0]='c';

o2.p1 // ["c", "b"]
o3.p1 // ["a", "b"] 

jQuery 的链式调用是什么？

每一步的jQuery操作，返回的都是一个jQuery对象，所以不同操作可以连在一起。

jQuery 中 data 函数的作用

类似于html5中的data-属性，用来方便用户给标签绑定数据，jquery的data函数用于在当前jquery对象所匹配的所有元素上存取数据，data()函数存取的数据都是临时数据，一旦页面刷新，之前存放的数据都将不复存在。如果需要移除用removeData()方法。用法：可以传入两个参数，分别是key和value，或者传入一个object。需要注意是当读取数据时只以第一个匹配元素为准。

---

写出以下功能对应的 jQuery 方法：

• 给元素 $node 添加 class active，给元素 $noed 删除 class active

$node.addClass('active');//添加
$node.removeClass('active');//删除

• 展示元素$node, 隐藏元素$node

$node.hide([duration ] [,easing ] [,complete ])
$node.show( [duration ] [, easing ] [, complete ] )
$node.toggle( [duration ] [, easing ] [, complete ] )

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

$node.attr(attributeName)
$node.attr(attributeName,value) 

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

$node.attr(‘data-src’,value) 

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

$node.prepend(content[,content])
$node.prependTo(target)

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

$node.append(content[,content])
$node.appendTo(target)

• 删除$node

$node.remove([selector])
$node.detach()

• 把$ct里内容清空

$node.empty()

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

$node.html([string])

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

获取高度/宽度：.height()/.width()
获取高度/宽度包括内边距：innerHeight()/innerWidth()
获取高度/宽度包括内边距+边框:outerHeight()/outerWidth()
获取高度/宽度包括内边距+边框+外边距:outerHeight(true)/outerWdith(true)

• 获取窗口滚动条垂直滚动距离

$node..scrollTop();

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

$node.offset()

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

$node.css(propertyName,value)

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

$node.clone( [withDataAndEvents ] )

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

.find([selector])

• 获取$ct 里面的所有孩子

$ct.children()

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

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

• 获取选择元素的数量

$node.length;
$node.size();

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

$node.index();

---

用jQuery实现以下操作

• 当点击$btn 时，让 $btn 的背景色变为红色再变为蓝色
• 当窗口滚动时，获取垂直滚动距离
• 当鼠标放置到$div 上，把$div 背景色改为红色，移出鼠标背景色变为白色
• 当鼠标激活 input 输入框时让输入框边框变为蓝色，当输入框内容改变时把输入框里的文字小写变为大写，- - 当输入框失去焦点时去掉边框蓝色，控制台展示输入框里的文字
• 当选择 select 后，获取用户选择的内容
  DEMO

加载