jQuery动画与ajax

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

为了防止文档在完全加载（就绪）之前运行jQuery代码，如果在文档没有加载之前就运行函数，可能操作失败。必须在文档加载完成后再执行操作，可使用ready事件，作用相当于把js写到body的末尾。

$(document).ready(function() {
   //your code here
})

$().ready(function() {
   $("p").hide();
})

$(function() {
  $('#btn').on('click', function() {
      $('p').show();
   })
})

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

• $node.text()
  text() 设置或返回所选元素的文本内容。
• $node.html()
  html() 设置或返回所选元素的内容（包括 HTML 标记）。

三、$.extend 的作用和用法?

jQuery.extend([deep,] target [, object1 ] [, objectN ] )

• 两个或者多个参数
  当提供两个或者多个对象给$.extend(),相当于文件的拷贝。

var obj = {};
var obj1 = {
   name: 'christina',
   sex: 'male'
};
var obj2 = {
  name: 'cttin',
  age: 18
}
$.extend(obj, obj1, obj2)  // 把obj1和obj2拷贝到obj，同名的将会被obj2覆盖

• 一个参数
  如果只提供一个参数，则以为着目标参数被省略。在这种情况下，jQuery对象本身被默认为目标对象。
• $.extend(src)
  将src合并到jQuery的全局对象中。

 $.extend({
  hello:function(){alert('hello');}
  });

• $.fn.extend(src)
  该方法将src合并到jQuery的实例对象中。

 $.fn.extend({
  hello:function(){alert('hello');}
 });

• 第一个参数[deep,]代表是否进行深拷贝。

var result=$.extend( true, {},
    { name: "John", location: {city: "Boston",county:"USA"} },  
    { last: "Resig", location: {state: "MA",county:"China"} } );

深拷贝

var result=$.extend( false, {},  
    { name: "John", location:{city: "Boston",county:"USA"} },  
    { last: "Resig", location: {state: "MA",county:"China"} }  
); 

浅拷贝

四、 jQuery 的链式调用是什么？

使用jQuery方法时对象方法返回的是对象本身，可以继续调用此对象的其他方法，实现连续调用多个方法。

$('#btn').on('click', function() {
    $('.main').fadeIn('slow').animate({height: '100px'}, 500);
})

五、jQuery 中 data 函数的作用

jQuery.data()允许我们在DOM元素上附加任意类型的数据，避免了循环引用的内存泄漏风险。

• jQuery.data(element, key, value)
  存储任意数据到指定的元素,返回设置的值。
• jQuery.data( element, key )
  返回用jQuery.data(element, name, value)储存在元素上的相应名字的数据，或者元素上完整的数据存储。
• $().data(key)、$().data()
  从jQuery对象上读数据。

六、写出以下功能对应的 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');
$node.attr('src');
$node.attr('title');
// 修改
$node.attr('id', 'wrap');
$node.attr('src', 'https://github.com');
$node.attr('title', 'welcome');

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

$node.attr('data-src', wrap);

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

$ct.prepend($node);

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

$ct.append($node);

• 删除$node

$node.remove()

• 把$ct里内容清空

$ct.empty();

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

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

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

$node.width(); // content
$node.height(); // content
$node.innerWidth(); // content+padding
$node.innerHeight(); // content+padding
$node.outWidth(); // content+padding+border
$node.outHeight(); // content+padding+border
$node.outWidth(true); // content+padding+border+margin
$node.outHeight(true); // content+padding+border+margin

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

$(window).scrollTop();

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

$node.offset();

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

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

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

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

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

$ct.find('.item');

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

$ct.children();

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

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

• 获取选择元素的数量

$node.length;

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

$(this).index();

七、用jQuery实现以下操作：

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

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

这个之前已经写过，参见代码二