jQuery动画与ajax

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

$(document).ready()方法：为防止DOM解析完成之前运行Jquery代码，若在DOM解析完成前就运行函数，操作可能失败。必须在DOM解析完成完后执行操作，可使用ready事件，作用相当于把js写到body末尾。
$(document).ready()写法：

• $(document).redy(function(){})
• $(function(){})
  以上两种写法是等价的

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

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

题目3： $.extend 的作用和用法?

作用：将两个或更多对象的内容合并到第一个对象。
用法：jQuery.extend( [deep ], target, object1 [, objectN ] )

• deep
  类型: Boolean
  默认情况下是false，如果是true，合并成为递归（又叫做深拷贝）。
• target
  类型: Object
  对象扩展。这将接收新的属性。
• object1
  类型: Object
  一个对象，它包含额外的属性合并到第一个参数。
• objectN
  类型: Object
  包含额外的属性合并到第一个参数

一个简单的例子：

/*定义一个对象*/
var obj={
    name:'jrg',
    age:27,
    sex:'woman'
};
/*定义一个新对象*/
var newObj={
    name:'wjt',
    age:20
};
/* $.extend()接受多个参数,并且第一个对象被覆盖 */
$.extend(obj,newObj,{
    name:'maomao',
    age:25,
    like:'eat'
});
console.log(obj);
/*object{
  age:25,
  like:"eat",
  name:"maomao",
  sex:"woman"
*/
}

题目4： jQuery 的链式调用是什么？

jQuery链式调用：在对象上一次性调动多个方法，例如：
$(this).addClass("active").siblings().removeClass("active");
因为大部分对象方法的最后是return this，所以有了链式调用，简易代码。

题目5： jQuery 中 data 函数的作用
.data() 方法允许我们在DOM元素上绑定任意类型的数据,避免了循环引用的内存泄漏风险。

    console.log($("#k-box").data("bkk")); //undefined
    $("#k-box").data("bkk","word"); //设置bkk为word
    console.log($("#k-box").data("bkk")); //word
    $("#k-box").removeData("bkk"); //移除bkk设置的值
    console.log($("#k-box").data("bkk")); //undefined

    $("#v-box").data("test",{first:0,last:28}); //给存储名为test的对象存储内容{first:0,last:28}
    console.log($("#v-box").data("test").first); //0
    console.log($("#v-box").data("test").last); //28
    console.log($("#v-box").data("test")); //{first: 0, last: 28}
    $("#v-box").removeData("test"); //移除test设置的内容
    console.log($("#v-box").data("test")); //undefined

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

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

• 展示元素$node, 隐藏元素$node
  $node.show();//展示元素$node
$node.hide();//隐藏元素$node

• 获取元素$node 的 属性: id、src、title， 修改以上属性
  $node.attr('id');//获取元素$node 的 属性 id
$node.attr('id','修改id值');//修改元素$node 的 id 值
$node.attr('src');//获取元素$node 的 属性 src
$node.attr('src','修改src值');//修改元素$node 的 src 值
$node.attr('title');//获取元素$node 的 属性 title
$node.attr('title','修改title值');//修改元素$node 的 title 值

• 给$node 添加自定义属性data-src
  $node.data('data-src','自定义属性值');

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

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

• 删除$node
  $node.remove();

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

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

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

  $node.innerWidth();//获取$node 的宽度（包括内边距）
$node.innerHeight();//获取$node 的高度（包括内边距）
$node.innerWidth('10px');//设置$node 的宽度（包括内边距）
$node.innerHeight('10px');//设置$node 的高度（包括内边距）

  $node.outerWidth();//获取$node 的宽度（包括边框）
$node.outerHeight();//获取$node 的高度（包括边框）
$node.outerWidth('10px');//设置$node 的宽度（包括边框）
$node.outerHeight('10px');//设置$node 的高度（包括边框）

  $node.outerWidth(true);//获取$node 的宽度（包括边框）
$node.outerHeight(true);//获取$node 的高度（包括边框）
$node.outerWidth('10px',true);//设置$node 的宽度（包括外边距）
$node.outerHeight('10px',true);//设置$node 的高度（包括外边距）

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

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

• 修改$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.parents('.ct').find('.panel');
• 获取选择元素的数量
  $node.length;
• 获取当前元素在兄弟中的排行
  $node.index();

题目7：用jQuery实现以下操作

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

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

代码链接

效果截图1 效果截图2