jquery的动画与AJAX

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

包含在$(document).ready()中的代码只有在页面文档对象模型（DOM）准备好执行JavaScript代码时才会运行。

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

jQuery.html（）将字符串转为HTML，jQuery.text（）将内容转为文本。
例子：

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div id="div1"></div>
  <div id="div2"></div>
  <script>
    $('#div1').html('<a href="example.html">Link</a><b>hello</b>');
    $('#div2').text('<a href="example.html">Link</a><b>hello</b>');
  </script>
</body>
</html>

jsbin

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

将两个或多个对象的内容合并到第一个对象中。
语法：

jQuery.extend( [deep ], target, object1 [, objectN ] )//版本1.1.4

参数：

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

最简单的实现：

var a = {a:1,b:2};
var b = {c:3,d:4};
$.extend(a,b); //a会变成 {a:1,b:2,c:3,d:4}

如果要合并进去的数组与目标数组有重复，那么会有这样的操作

var a = {a:1,b:2};
var b = {b:3,c:4};
$.extend(a,b);//a会变成 {a:1,b:3,d:4}

上面的两种方法都会改变目标数组a，那么想不改变原数组，可以如下

var a = {a:1,b:2};
var b = {b:3,c:4};
var c = $.extend({},a,b)//将第一个参数目标数组设为空数组，最后赋值给c，c的结果会是 {a:1,b:3,d:4}

那么有深拷贝的需求，就可以如下

var object1 = {
  apple: 0,
  banana: {weight: 52, price: 100},
  cherry: 97
};
var object2 = {
  banana: {price: 200},
  durian: 100
};
//不进行深拷贝设置
$.extend( object1, object2);
/*
{
  apple: 0,
  banana: {
    price: 200
  },
  cherry: 97,
  durian: 100
}
其中 object2中的banana对象就直接覆盖了object1中的banana对象，并没有展开进行合并
*/
//设置深拷贝
$.extend(true, object1, object2);
/*
{
  apple: 0,
  banana:  {
    price: 200,
    weight: 52
  },
  cherry: 97,
  durian: 100
}
*/

深拷贝的注意：不支持第一个参数传递 false 。

如果对象的内容里包含数组的话,数组里的内容并不会进行合并，而是视为一个整体，对目标数组进行覆盖：

var object1 = {
  apple: 0,
  banana: {weight: 52, price: 100,a:[232,222]},
  cherry: [2,3,4]
};
var object2 = {
  banana: {price: 200,a:[1,2]},
  cherry:[1,2,3],
  durian: 100
};
 
$.extend(true,object1, object2);

/*
 {
  apple: 0,
  banana: {
    a: [1, 2],
    price: 200,
    weight: 52
  },
  cherry: [1, 2, 3],
  durian: 100
}
*/

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

它允许我们在同一个元素上一个接一个地运行多个jQuery命令。
示例：

$("#p1").css("color", "red").slideUp(2000).slideDown(2000);

5. jQuery 中 data 函数的作用

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

.data( key, value )
.data( obj )

参数:
key
类型: String
一个字符串，用户存储数据的名称。（译者注：存储的数据名）
value
类型: Object
新的数据值；它可以是任意的Javascript数据类型，包括Array 或者 Object。
obj
类型: Object
一个用于更新数据的键/值对

最基础的给一个元素设置不同的值，之后获取这些值

//存储数值
$('body').data('foo',52);
$('body').data('bar',{myType:'test',count:40});
$('body').data({baz:[1,2,3]});
//获取数值
$('body').data('foo');//52
$('body').data();//{ foo: 52, bar: { myType: "test", count: 40 }, baz: [ 1, 2, 3 ] }

从jQuery 1.4.3起， HTML 5 data- 属性将自动被引用到jQuery的数据对象中。
举个例子, 给定下面的HTML:

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

下面所有的 jQuery 代码都能运行。

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

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');
$node.attr('src');
$node.attr('title');
//修改
$node.attr('id','aa');
$node.attr('src','http://xxxx');
$node.attr('title','bbb');

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

$node.data('src','http://xxxx');

在$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.innerHeight()
$node.innerWidth()
//包括边框
$node.outerHeight()
$node.outerWidth()
//包括外边距
$node.outerHeight(true)
$node.outerWidth(true)

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

$(document).scrollTop();

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

$node.offset()

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

$node.css({
  color:'red',
  fontSize:'14px'
})

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

$('li').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')

获取选择元素的数量

$('div').length

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

$("div").click(function () {
  var index = $("div").index(this);
});

7.用jQuery实现以下操作

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

$btn = $('#button');
$btn.on('click',function(){
  $btn.css('background','blue')  
});

实现

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

$(document).on('scroll',function(){
   var n = $(document).scrollTop();
   console.log(n);
});

实现

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

var $div = $('div');
$div.on('mouseover',function(){
  $(this).css('background','red');
});
$div.on('mouseleave',function(){
  $(this).css('background','#fff');
});

实现

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

var $input = $('input');
$input.on('focusin',function(){
  $(this).css('border','1px solid blue');
});
$input.on('focusout',function(){
  $(this).css('border','');
  console.log($(this).val());
})
$input.on('keydown change',function(){
  var value = $(this).val().toUpperCase();
  $(this).val(value);
})

实现

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

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

实现