jQuery动画与ajax

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

当DOM准备就绪时，指定一个函数来执行。
虽然JavaScript提供了load事件，当页面呈现时用来执行这个事件，直到所有的东西，如图像已被完全接收前，此事件不会被触发。
在大多数情况下，只要DOM结构已完全加载时，脚本就可以运行。传递处理函数给.ready()方法，能保证DOM准备好后就执行这个函数，因此，这里是进行所有其它事件绑定及运行其它 jQuery 代码的最佳地方。
如果执行的代码需要在元素被加载之后才能使用时，（例如，取得图片的大小需要在图片被加载完后才能知道），就需要将这样的代码放到 load 事件中。
下面语法全部是等价的：

$(document).ready(function)
$().ready(function)
$(function)

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

$node.html()用于获取和修改元素的innerHTML值，包括标签。
$node.text()用于获取和修改元素的innerText值，即文本值，不包括标签。

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

作用：

• 将两个或更多对象的内容合并到第一个对象。
• 当我们提供两个或多个对象给$.extend()，对象的所有属性都添加到目标对象（target参数）。
• 如果只有一个参数提供给$.extend()，这意味着目标参数被省略。在这种情况下，jQuery对象本身被默认为目标对象。这样，我们可以在jQuery的命名空间下添加新的功能。这对于插件开发者希望向 jQuery 中添加新函数时是很有用的

目标对象（第一个参数）将被修改，并且将通过$.extend()返回。然而，如果我们想保留原对象，我们可以通过传递一个空对象作为目标对象：

var object = $.extend({}, object1, object2);

在默认情况下，通过$.extend()合并操作不是递归的;
如果第一个对象的属性本身是一个对象或数组，那么它将完全用第二个对象相同的key重写一个属性。这些值不会被合并。如果将 true作为该函数的第一个参数，那么会在对象上进行递归的合并。

var object1 = {
  apple: 0,
  banana: { weight: 52, price: 100 },
  cherry: 97
};
var object2 = {
  banana: { price: 200 },
  durian: 100
};
// Merge object2 into object1
$.extend( object1, object2 );

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

链式操作就是分步骤地对jQuery对象实现各种操作。

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

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

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

可见，链式调用可以简化代码。

5. jQuery 中 data 函数的作用

data() 方法向被选元素附加数据，或者从被选元素获取数据。通过data()函数存取的数据都是临时数据，一旦页面刷新，之前存放的数据都将不复存在。该函数属于jQuery对象(实例)。如果需要移除通过data()函数存放的数据，请使用 removeData() 函数。

• 获取附加的data的值
  $(selector).data(name)
  参数说明
  name：可选。规定要取回的数据的名称。
  如果没有规定名称，则该方法将以对象的形式从元素中返回所有存储的数据。
• 用name和value为对象附加数据
  $(selector).data(name,value)
  参数说明
  selector：为需要附加或者获取数据的对象。
  name：参数为数据的名称。
  value：参数为数据的值。
• 使用对象向元素附加数据
  $(selector).data(object)
  使用带有名称/值对的对象向被选元素添加数据。可以直接传入另一个对象作为参数。这种情况下，对象的属性名称和属性值将被视为多个键值对，从中提取的属性名称和属性值都会被复制到目标对象的缓存中。

6. 写出以下功能对应的 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','id123');
  $node.attr('src','http://jirengu.com');
  $node.attr('title','this is jirengu');

• 给$node 添加自定义属性data-src
  $node.attr('data-src','http://baidu.com');

• 在$ct 内部最开头添加元素$node
  $ct.prepend($node);

• 在$ct 内部最末尾添加元素$node
  $ct.append($node);

• 删除$node
  $node.remove(); //删除事件绑定
  $node.detach(); //保留事件绑定

• 把$ct里内容清空
  $ct.empty();

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

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

  $node.innerWidth(value); //包括内边距
  $node.innerHeight(value); //包括内边距
  
  $node.outerWidth(false); //包括边框
  $node.outerHeight(false); //包括边框
  
  $node.outerWidth(true); //包括外边距
  $node.outerHeight(true); //包括外边距
  

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

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

• 修改$node 的样式，字体颜色设置红色，字体大小设置14px
  $node.css({
  'color': 'red',
  'font-size': '14px'
  });

• 遍历节点，把每个节点里面的文本内容重复一遍
  $node.each(function(){
  var text = $(this).text();
  console.log($(this).text(text + text)); //不能用DOM的this
  });

• 从$ct 里查找 class 为 .item的子元素
  $ct.find('.item');

• 获取$ct 里面的所有孩子
  $ct.children();

• 对于$node，向上找到 class 为'.ct'的父亲，再从该父亲找到'.panel'的孩子
  $node.parents(.ct).find(.panel);

• 获取选择元素的数量
  $node.length;

• 获取当前元素在兄弟中的排行
  $node.index();

7. 用jQuery实现以下操作

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

8. 用 jQuery ajax 实现如下效果。当点击加载更多会加载数据展示到页面 效果预览

代码地址(本地测试可行)