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