jQuery动画与ajax

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

当DOM加载完成时，执行其中的代码。
与原生JavaScript中的load事件需要在页面所有内容加载完成后才执行不同，ready只要在DOM结构加载完成后，就可以执行。

$(document).ready(function(){
});
可简写为：
$(function(){
})

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

$node.html()：选取节点的文本内容和标签。
$node.text()：选取节点的文本内容。

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

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

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

目标参数将被修改，并且通过$.extend()返回。然而，如果我们想保留原对象，我们可以通过传递一个空对象作为目标对象：
var object = $.extend({}, object1, object2);
在默认情况下，通过$.extend()合并操作不是递归的；
如果第一个对象的属性本身是一个对象或数组，那么它将完全用第二个对象相同的key重写一个属性。如果将deep设置成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 );
console.log(object1);           // 其中banana:{price:200}

$.extend(true, object1, object2 );    //banana: {price: 200, weight: 52}

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

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

5： jQuery 中 data 函数的作用

jQuery.data( element, key, value )
element:要存储数据的DOM对象
key:存储的数据名
value:新数据值
jQuery.data() 方法允许我们在DOM元素上附加任意类型的数据,避免了循环引用的内存泄漏风险。如果 DOM 元素是通过 jQuery 方法删除的或者当用户离开页面时，jQuery 同时也会移除添加在上面的数据。

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

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

$('#xxx').addClass('active');
$('#xxx').removeClass('active');

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

$('#xxx').hide();
$('#xxx').show();

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

$node.attr('id')
$node.attr('id','value')
$node.attr('src')
$node.attr('src','value')
$node.attr('title')
$node.attr('title','value')

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

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

在$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.height();              //读取高度
$node.width();               //读取宽度
$node.height('50px');     //设置高度
$node.width('50px');      //设置宽度

//包括内边距
$node.innerHeight();    //读取高度
$node.innerWidth();      //读取宽度
$node.innerHeight( '50px' );    //设置高度
$node.innerHeight( '50px' );    //设置高度

 //包括边框
$node.outerHeight();    //读取高度
$node.outerwidth();    //读取宽度
$node.outerHeight('50px');    //设置高度
$node.outerwidth('50px');    //设置宽度

//包括外边距
$node.outerHeight(true);    //读取高度
$node.outerwidth(true);    //读取宽度

获取窗口滚动条垂直滚动距离
$node.scrollTop()
获取$node 到根节点水平、垂直偏移距离
$node.offset()
修改$node 的样式，字体颜色设置红色，字体大小设置14px
$node.css({"color":"red","font-size":"14px"})
遍历节点，把每个节点里面的文本内容重复一遍

  $element.each(function(){
      var $this = $(this);
      $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.index()

7：用jQuery实现一下操作

code

当点击$btn 时，让 $btn 的背景色变为红色再变为蓝色

var $btn = $('.btn');
$btn.on('click',function(){
  $btn.css('background','blue');
  setTimeout(function(){
    $btn.css('background','red');
  },1000);
});

当窗口滚动时，获取垂直滚动距离

$(window).scroll(function(){
  $('div.scroll').html($(this).scrollTop());
});

当鼠标放置到$div 上，把$div 背景色改为红色，移出鼠标背景色变为白色

var $div = $('div.box');
$div.on('mouseenter',function(){
  $div.css('background','red');
});
$div.on('mouseleave',function(){
  $div.css('background','white');
});

当鼠标激活 input 输入框时让输入框边框变为蓝色，当输入框内容改变时把输入框里的文字小写变为大写，当输入框失去焦点时去掉边框蓝色，控制台展示输入框里的文字

var $ipt = $('.ipt');
$ipt.on('focus',function(){
  $ipt.addClass('border');
}).on('keyup',function(){
  $ipt.val($ipt.val().toUpperCase());
}).on('blur',function(){
  $ipt.removeClass('border');
  console.log($ipt.val());
});

当选择 select 后，获取用户选择的内容

var $slt = $('#slt');
$slt.on('change',function(){
  console.log($slt.val());
});

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