jQuery动画与ajax

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

$(document).ready()方法：为防止文档在完全加载之前运行Jquery代码,若在文档未完全加载前就运行函数,操作可能失败.必须在文档加载完后执行操作,可使用ready事件,作用相当于把js写到body末尾.

$(document).ready(function(){
});

//可简写为:
$(function(){
})

window.onload：必须等网页中所有的元素全部加载完毕，才能执行不能同时写多个，否则后面覆盖前面.
ready和onload的区别是：前者只包括文档元素的加载，后者是所有资源的加载.

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

$node.html()，返回所选择元素内的html内容，包含html标签和文本内容
$node.text()，返回所选择元素内的文本内容，不包含html标签，只包含文本内容

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

$.extend()将多个对象合并到一起，可以传入多个参数。$.extend([deep,] target [, object1 ] [, objectN ] )为布尔值默认情况不是深拷贝，可设置true为深拷贝

当我们提供两个或多个对象给$.extend(), 对象的所有属性都添加到目标对象
（target参数）
如果只有一个参数提供给$.extend(), 这意味着目标参数被省略。在这种情况下，jQuery对象本身被默认为目标对象，可以在jQuery的命名空间下添加新的功能
如果想保留原对象，可以传递一个空对象作为目标对象：
var object = $.extend({}, object1, object2);
deep：默认false，如果为true，合并成为递归（又叫做深拷贝）

//定义一个对象
var obj={
    name: 'linpeng',
    age: 23,
    sex: 'male'
};
//定义一个新对象
var obj1={
    name: 'lanhaobin',
    age: 22
};
//extend方法接受多个参数,并且第一个对象被覆盖
$.extend(obj,obj1,{
    name: 'jierngu',
    age: 5,
    like: 'eat'
});
console.log(obj);
//object{
   //name: 'jierngu',
   //age: 5,
   //sex: 'male'
   //like: 'eat',
}

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

链式调用：使用jQuery方法时，对象方法返回的是对象本身，
         可以调用对此对象的其他jQuery方法，实现连续调用多个方法.
//例如
$(this).siblings().removeClass('active');

5： jQuery 中 data 函数的作用

作用：实际上是对js对象或DOM对象的额外属性做一个集中管理，来避免内存泄漏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery中 data 函数</title>
</head>
<body>
<div id="k-box"></div>
<div id="v-box"></div>
<script src="../js/jquery-1.11.1.min.js"></script>
<script>
    console.log($("#k-box").data("bkk")); //undefined
    $("#k-box").data("bkk","word"); //设置bkk为word
    console.log($("#k-box").data("bkk")); //word
    $("#k-box").removeData("bkk"); //移除bkk设置的值
    console.log($("#k-box").data("bkk")); //undefined

    $("#v-box").data("test",{first:0,last:28}); //给存储名为test的对象存储内容{first:0,last:28}
    console.log($("#v-box").data("test").first); //0
    console.log($("#v-box").data("test").last); //28
    console.log($("#v-box").data("test")); //{first: 0, last: 28}
    $("#v-box").removeData("test"); //移除test设置的内容
    console.log($("#v-box").data("test")); //undefined
</script>
</body>
</html>

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('id’,'值'); //修改
$node.attr('src');//获取
$node.attr('src’,'值');//修改
$node.attr('title');//获取
$node.attr('title’,'值');//修改

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

$node.data('src','str')

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

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

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

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

删除$node

$(node).remove();

把$ct里内容清空

$node.empty();

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

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

$node.width();//不包括内边距宽度,仅包括内容
$node.height();//不包括内边距高度,仅包括内容
$node.innerWidth();//包括内容和内边距宽度
$node.innerHeight();//包括内容和内边距高度
$node.outerWidth();//包括内容,内边距,边框宽度
$node.outerHeight();//包括内容,内边距,边框高度
$node.outerHeight(true);//包括内容,内边距,边框,外边距高度
$node.outerWidth(true);//包括内容,内边距,边框,外边距宽度

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

$(window).scrollTop()

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

$node.offset()

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

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

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

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

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

$(".ct").find(".item")

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

$(".ct").children()

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

$node.parents(".ct").find(".panel")

- 获取选择元素的数量

$node.length;
$node.size();

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

$node.index();


####7：用jQuery实现以下操作
- 当点击$btn 时，让 $btn 的背景色变为红色再变为蓝色
- 当窗口滚动时，获取垂直滚动距离
- 当鼠标放置到$div 上，把$div 背景色改为红色，移出鼠标背景色变为白色
- 当鼠标激活 input 输入框时让输入框边框变为蓝色，当输入框内容改变时把输入框里的文字小写变为大写，当输入框失去焦点时去掉边框蓝色，控制台展示输入框里的文字
- 当选择 select 后，获取用户选择的内容
[代码](https://github.com/LINPENGISTHEONE/jQuery-practice/blob/master/jQuery%E7%AE%80%E5%8D%95%E7%9A%84%E4%BA%8B%E4%BB%B6%E5%A4%84%E7%90%86.html)
[预览](https://linpengistheone.github.io/jQuery-practice/jQuery%E7%AE%80%E5%8D%95%E7%9A%84%E4%BA%8B%E4%BB%B6%E5%A4%84%E7%90%86.html)

####8：用 jQuery ajax 实现如下效果。当点击加载更多会加载数据展示到页面
[代码](https://github.com/LINPENGISTHEONE/jQuery-practice/tree/master/jQuery-ajax%E5%8A%A0%E8%BD%BD%E6%9B%B4%E5%A4%9A)

![1.png](http://upload-images.jianshu.io/upload_images/4866329-5a600140a43ac117.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

![2.png](http://upload-images.jianshu.io/upload_images/4866329-fbf07d10d685affe.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


####9：实现一个天气预报页面，前端展示自由发挥，数据接口: http://api.jirengu.com/weather.php
[预览](https://linpengistheone.github.io/jQuery-practice/weather.html)