jQuery动画与ajax

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

$(document).ready()是当文档中的DOM节点加载完成后，在加载外部图片和资源前，执行ready()里面的操作。可以简写成

$(function(){

})

window.onload是整个页面加载完成（包括图片、CSS、脚本等）后，执行onload()中的操作。

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

$node.html()，返回所选择元素内的html内容，包含html标签和文本内容
$node.text()，返回所选择元素内的文本内容，不包含html标签，只包含文本内容
括号内带参数，则为设置内容

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

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

//定义一个对象
var obj={
    name:'Clark',
    age:27,
    sex:'male'
    };
//定义一个新对象
var newObj={
    name:'xuyangjie',
    age:21
};
//extend方法接受多个参数,在属性相同的情况下，会把第一个对象的属性覆盖
$.extend(obj,newObj,{
    name:'lili',
    age:25,
    hobby:"sleep"
});
console.log(obj);
object{
   name:"lili"
   age:25,
   sex:"male"
   hobby:"sleep"
}

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

当jQuery的方法的返回值仍为当前对象时可以继续调用该对象的方法，这样就形成一种链式调用。

$(#ct).css('color','blue').show(400).hide();

5. jQuery 中 data 函数的作用

第一种用法：
.data(key,value)：在匹配元素上存储任意相关数据

$("div").data("people",{age:30,sex:"男"});
console.log( $("div").data("people").sex    );  //男

第二种用法：
.data(key):返回匹配元素集合中的第一个元素给定成名的数据存储的值，通过.data(name,value)或HTML 5 data-*属性（着重）的设置。

<div data-role="page" data-last-value="43" data-hidden="true" ></div>

下面通过data()函数获取里面的值

$("div").data("role") // "page";
$("div").data("lastValue")//43;

上代码的第二条语句正确是表述了该元素的data-last-value属性。 如果没有传递key参数的数据存储， jQuery将在元素的属性中搜索， 将驼峰式字符串转化为中横线字符串，然后在结果前面加上data-。 所以，该字符串lastValue将被转换为data-last-value。

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

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

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

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

$node.show();
$node.hide();

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

$node.attr("id");
$node.attr("src");
$node.attr("title");
$node.attr("id","node");
$node.attr("src","jquery-3.1.1.js");
$node.attr("id","jquery");

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

$node.data("src",str)

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

$cr.prepend($node)

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

$cr.append($node)

7.删除$node

$node.remove()

8.把$ct里内容清空

$.ct.empty()

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

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

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

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

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

$(window).scrollTop()

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

$node.offset()

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

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

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

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

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

$ct.find(".item");

16.获取$ct 里面的所有孩子

$ct.children()

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

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

18.获取选择元素的数量

$('li').length

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

$(this).index()

7.用jQuery实现以下操作

1. 当点击$btn 时，让 $btn 的背景色变为红色再变为蓝色
2. 当窗口滚动时，获取垂直滚动距离
3. 当鼠标放置到$div 上，把$div 背景色改为红色，移出鼠标背景色变为白色
4. 当鼠标激活 input 输入框时让输入框边框变为蓝色，当输入框内容改变时把输入
5. 框里的文字小写变为大写，当输入框失去焦点时去掉边框蓝色，控制台展示输入框里的文字
6. 当选择 select 后，获取用户选择的内容
   demo

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

服务端数据mock成功
代码地址

9.实现一个天气预报页面，前端展示自由发挥，数据接口: http://api.jirengu.com/weather.php

天气预报
天气预报