jQuery动画与ajax

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

在$(document).ready()函数内的所有代码都将在DOM加载完毕后，页面全部内容（包括图片等）完全加载完毕前执行。
$(document).ready()表示页面的dom元素已经加载完毕，这是为了防止在页面加载元素加载完之前对dom元素进行操作。原生js中我们可以使用window.onload来达到这个效果，不过两者还是有区别，onload是所有元素、图片、外部资源都加载完，而$(document).ready()只需要元素加载完成。所以onload比$().ready()要慢。

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

$node.html()：取得第一个匹配元素的html内容。
$node.html(val)：设置每一个匹配元素的html内容。
$node.text()：取得所有匹配元素的文本内容。
$node.text(val)：设置所有匹配元素的文本内容。
html()包含匹配元素的HMTL内容，而text()只合并文本内容。

$.extend 的作用和用法?

extend的主要作用就是合并对象，对对象进行扩展操作。基本语法如下：
jQuery.extend([deep,] target [, object1 ][, objectN ] )

var obj1 = {
    name: 'he',
    age: 22
};
var obj2 = {
    name: 'mamba',
    sex: '男'
};
$.extend(obj1, obj2);    // {name: "mamba", age: 22, sex: "男"}
obj1;    // {name: "mamba", age: 22, sex: "男"}
obj2;    // {name: "mamba", sex: "男"}

上面的代码意思是将 obj2 对象合并到 obj1 对象中，但这种方法会改变 obj1 对象的结构。

var obj1 = {
    name: 'he',
    age: 22
};
var obj2 = {
    name: 'mamba',
    sex: '男'
};
$.extend({}, obj1, obj2);    // {name: "mamba", age: 22, sex: "男"}
obj1;    // {name: "he", age: 22}
obj2;    // {name: "mamba", sex: "男"}

用这种方法，相当于把obj1和obj2合并后的结果赋值给一个新建的对象。不会改变obj1的对象结构。

该方法还有一个类型为 boolean 的 [deep] 传参，当其为 true 时，将 object1 , objectN 深度复制后合并到 target 中。

var obj = {
    name: 'he',
    age: 22,
    number: [1, 2, 3]
};
var obj1 = $.extend({}, obj);
var obj2 = $.extend(true, {}, obj);
obj.number[0] = 4;
console.log(obj1.number[0]);    // 4
console.log(obj2.number[0]);    // 1

obj2是经过obj深拷贝后的结果，所以obj2内的对象不再因obj的改变而改变。

jQuery 的链式调用是什么？

链式调用就是分步骤地对jQuery对象实现各种操作。
它的原理在于每一步的jQuery操作，返回的都是一个jQuery对象，所以不同操作可以连在一起。优点在于：
1.代码更精简。链式调用能大大精简代码量，多项操作一行代码一气呵成；
2.优化性能。使用链式调用，所有操作代码共享一个jQuery对象，省去了逐步查询DOM元素的性能损耗。

jQuery 中 data 函数的作用

.data( key, value )或.data( obj )在匹配元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。
.data() 方法允许我们在DOM元素上绑定任意类型的数据,避免了循环引用的内存泄漏风险。如果 DOM 元素是通过 jQuery 方法删除的或者当用户离开页面时，jQuery 同时也会移除添加在上面的数据。我们可以在一个元素上设置不同的值，并获取这些值：
HTML 5 data- 属性将自动被引用到jQuery的数据对象中。

<div class="box" data-max="30" data-min="10"></div>

$('.box').data('value', [10, 20, 30]);
$('.box').data('friend', {'age': 30, 'sex': 'male'});
$('.box').data({name: 'mamba', hobby: 'travel'});
$('.box').data('friend');    // {age: 30, sex: "male"}
$('.box').data('name');    //    "mamba"
// HTML 5 data- 属性 将自动被引用到jQuery的数据对象中
$('.box').data('min');    // 10
$('.box').data('max');    // 30
$('.box').data('max', 50);    
$('.box').data('max');    // 50
$('.box').attr('data-max');    // "30"，可见.data()只能对其访问

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

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

$node.addClass('active');
$node.removeClass('active');

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

$node.show(time,allback)
$node.hide(time,callback)

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

//获取属性，一个参数
$node.attr('id');
$node.attr('src');
$node.attr('title');
//修改属性，两个参数或一个对象
$node.attr('id', 'xxx');
$node.attr({
    src: 'xxx',
    title: 'xxx'
});

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

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

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

$ct.prepend($node);
$node.prependTo($ct);

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

$ct.append($node);
$node.appendTo($ct);

删除$node

$node.remove()    //$node上面的属性、事件之类的删除之后不保存
$node.detach()    //$node上面的属性、事件之类的删除之后保存

把$ct里内容清空

$ct.empty()

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

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

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

$node.width();    // content width
$node.height();    // content htight
$node.innerWidth();    // padding width
$node.innerHeight();    // padding height
$node.outerWidth();    // border width
$node.outerHeight();    // border height
$node.outerWidth(true);    // margin width
$node.outerHeight(true);    // margin height

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

$(window).scrollTop();

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

$node.offset();    // {top: 3149, left: 38}

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

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

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

<ul id="items">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<script>
    $('#items li').each(function () {
        var text = $(this).text();
        $(this).text(text + text);
    });
</script>

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

$ct.find('.item');

获取$ct 里面的所有孩子

$ct.children();

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

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

获取选择元素的数量

$node.length
$node.size()

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

$node.index();

1
1
1
11
1
1
1
1
11