jQuery动画与ajax

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

$(document).ready()方法：为防止文档在完全加载（就绪）之前运行Jquery代码。若在文档未完全加载前就运行函数，操作可能失败。必须在文档加载完后执行操作，可使用ready事件，作用相当于把js写到body末尾。
以下三个语法全部是等价的：

- $(document).ready(handler)
- $().ready(handler) (this is not recommended)
- $(handler)

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

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

$.extend 的作用和用法?

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

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

  // 定义一个对象
  var obj = {
    a: 1,
    b: 2,
    c: 3
  };
  // 定义一个新对象
  var newobj = {
    a: 4,
    c: 6
   };

 //extend方法接受多个参数,并且第一个对象被覆盖
 $.extend(obj,newobj)
 //extend方法想保留原对象，传递一个空对象作为目标对象
 $.extend({},obj,newobj)

jQuery 的链式调用是什么？

当jQuery的方法的返回值仍为当前对象时可以继续调用该对象的方法，这样就形成一种链式调用。

 例：  $('.ct').find(''.ct-btn).eq(index)addClass('active');

jQuery 中 data 函数的作用

在匹配元素上存储任意相关数据 或 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。

• .data(key, value)
  在匹配元素上存储任意相关数据.

  $("div").data("human",{age:20,sex:"男"});
  console.log( $("div").data("people").age    );  //20
  

• .data(key)
  返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。 通过.data(name, value)或HTML5 data-* 属性设置

  <div data-role="page" data-last-value="43" data-hidden="true" data-options='{"name":"John"}'></div>
  

下面通过data()函数获取里面的值

$("div").data("role") === "page";
$("div").data("lastValue") === 43;
$("div").data("hidden") === true;
$("div").data("options").name === "John";

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

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

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

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

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

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

  $(node).attr('id');       // 获取id
  $(node).attr('src');     // 获取src
  $(node).attr('title');    // 获取title
   ~~~~~~~~~~~~~~
  $(node).attr('id', 'class');            // 修改id
  $(node).attr('src', 'somesrc');      //修改scr  
  $(node).attr('title', 'sonetitle');      // 修改title
  

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

  $(node).data('src', 'somesrc');  
  

• 在$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).height();                  //不包括内边距高度,仅包括内容
  $(node).innerWidth();          //包括内容和内边距宽度
  $(node).innerHeight();         //包括内容和内边距高度
  $(node).outerWidth();            //包括内容,内边距,边框宽度  
  $(node).outerHeight();          //包括内容,内边距,边框高度
  $(node).outerHeight(true);      //包括内容,内边距,边框,外边距高度
  $(node).outerWidth(true);          //包括内容,内边距,边框,外边距宽度
  

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

  $(window).scrollTop();
  

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

  $(node).offset();
  

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

  $(node).css("border: 1px solid #ccc", font-size: 14px);
  

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

  $node.each(function(){
     console.log($(this).text());
  });
  

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

  $('.ct').find('item');
  

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

  $(ct).find();
  

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

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

• 获取选择元素的数量

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

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

  $node.index();