JQuery动画与Ajax

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

在文档流还没加载完成时就开始运行JS的话，可能会导致一些错误的发生，以至于不能达到所需要的效果，使用$(document).ready()可以使得JS在整个文档流全部加载完成后在运行。

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

$node.html的目标是HTML文本，如整个页面body中的div、h1、a等标签及其中所包含的文本节点，如<h2>$node.html()和$node.text()的区别?</h2>。使用.html()可以获取或者设置目标对象的HTML内容。
而$node.text()的目标是一个标签（元素）内的文本节点，如 “ $node.html()和$node.text()的区别?”。使用.text()可以获取目标对象(包括它们的后代)的文本内容，也可是设置匹配元素集合中每个元素的文本内容。

$.extend 的作用和用法?

将两个或更多对象合并在一起。用法如下：
第一个对象中的某个属性在后面对象中同样有的时候，属性的值将会覆盖；若后面对象中存在第一个对象没有的属性时，将在第一个对象中添加该属性及其对应的值。

var obj1 = {a:1}
var obj2 ={b:2,c:3}
var obj3 ={c:5,d:6}
$.extend(obj1,obj2)      //obj1=={a:1,b:2,c:3}
$.extend(obj2,obj3)      //obj2=={b:2,c:5,d:6}
$.extend(obj1,obj2,obj3)      //obj1=={a:1,b:2,c:5,d:6}
var obj4 = $.extend({},obj1,obj2,obj3)      //obj4=={a:1,b:2,c:5,d:6}

jQuery 的链式调用是什么？

在使用JQuery时，可以连续使用各种方法，如：

$('.show-boxs').eq(2).css('background-color','yellow').on('click',function(){
    console.log('点了')
})

上面通过一行代码找到了第三个带有.show-box的class属性的元素，并且将该元素的背景颜色改为黄色，同时绑定一个事件监听，当该元素受到点击时，在控制台打印出“点了”。
这样的做法称之为链式调用。使得JQuery对象能做到链式调用是因为JQuery对象中大多都有一个.__proto__属性，该属性中存放着各种JQuery的方法，使得JQuery对象可以做到链式调用。

jQuery 中 data 函数的作用

.data()在匹配元素上存储任意相关数据。
如：

$("div").data("message", {name:'OY',age:20});

.data()也可以返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。

$(".name").text($("div").data("message").first);    //'OY'
$(".age").text($("div").data("message").last);      //'20'

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

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

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

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

$('.node').show()
$('.node').hide()

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

$('.node').attr('id','newId')//可以一个个改
$('.node').attr({id:'newId',src:'http://jirengu.com',title:'前往饥人谷'})//也可以像这样将要修改的属性放在一个对象中。

注意修改class属性时，必须带""

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

$('.node').attr('data-src','http://a.jirengu.com')

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

$ct.prepend($node)
//or
$node.prependTo($ct)

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

$ct.append($node)
//or
$node.appendTo($ct)

删除$node

$node.remove()//删除$node,以及$node中的一切，包括绑定的事件和相关的JQuery数据


- 把$ct中的内容清除
 - ```
$ct.empty()//清除$ct中的所有子元素（包括文本节点），
//并且绑定的事件和相关JQuery数据也会被删除

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

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

- 获取、设置$node 的宽度、高度(分别不包括内边距、包括内边距、包括边框、包括外边距)
 - ```
$node.height()//获得的是元素容器高度，不包括内外边距以及边框
$(window).height()//可以获取当前浏览器的高度
$node.innerHeight()//获得当前元素包括内边距的高度（不包括边框）
$node.outerHeight()//获得当前元素包括内边距以及边框的高度
$node.outerHeight(true)//获得当前元素包括内外边距以及边框的高度
$node.width()//获得的是元素容器宽度，不包括内外边距以及边框
$(window).width()//可以获取当前浏览器的宽度
$node.innerWidth()//获得当前元素包括内边距的宽度（不包括边框）
$node.outerWidth()//获得当前元素包括内边距以及边框的宽度
$node.outerWidth(true)//获得当前元素包括内外边距以及边框的宽度

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

$(window).scrollTop()


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

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

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


- 遍历节点，把每个节点里面的文本内容重复一遍
 -  ```
$node.each(function(){
$(this).text($(this).text()+$(this).text())
})

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

$ct.find('.item')


- 获取$ct 里面的所有孩子
 -  ```
$ct.children()

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

$node.parent('.ct').find('.panel')


- 获取选择元素的数量
 -  ```
$node.length
$node.size()

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

$node.index()




##用jQuery实现以下操作
- 当点击$btn 时，让 $btn 的背景色变为红色再变为蓝色
- 当窗口滚动时，获取垂直滚动距离
- 当鼠标放置到$div 上，把$div 背景色改为红色，移出鼠标背景色变为白色
- 当鼠标激活 input 输入框时让输入框边框变为蓝色，当输入框内容改变时- 把输入框里的文字小写变为大写，当输入框失去焦点时去掉边框蓝色，控制台展示输入框里的文字
- 当选择 select 后，获取用户选择的内容
[效果与代码](http://js.jirengu.com/mamat/1/edit?output)