juery动画与 ajax 的知识点总结

1- jQuery 中， $(document).ready()的意思：

$(document).ready()表示页面的dom元素已经加载完毕，这是为了防止在页面加载元素加载完之前对dom元素进行操作，相当于document.onload()或者window.onload()方法。window.onload是所有元素、图片、外部资源都加载完执行，而$(document).ready()只需要DOM元素加载完成。所以onload比$().ready()要慢

//下面两种写法全部是等价的
$(document).ready(function(){});

$(function(){})

2- $node.html()和$node.text()的区别总结

$node.html()是获取节点html DOM树的方法，例如： $node.html(); //得到的是

我是文本

$node.text()是获取节点里的文本内容，例如：$node.html(); //得到的是：我是文本


            我是文本
        
        $('.test1').html() //我是文本
        $('.test1').text() //我是文本

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

$.extend() 是将两个或更多对象的内容合并到第一个对象。如果有相同属性的值，那么最终值会被最后一个对象的值覆盖，如果没有，则是添加。
第一个参数设置为true，为深拷贝；设置为false，是浅拷贝。不设置默认是浅拷贝
用法：

$.extend( target [, object1 ] [, objectN ] ) //将object1，...，objectN合并到target。还可以写成var target = $.extend(object1, objectN);
$.extend( [deep ], target, object1 [, objectN ] ) //deep 深拷贝，如果对象中有多层的嵌套数据，deep参数设置为true,则可以实现深拷贝

例子:
var obj = {}
var obj1 = {
    name:'obj1',
    age:'1',
    friends:[1,2,3]
}
var obj2 = {
    name:'obj2',
    sex:'male'
}
//1浅拷贝
$.extend(obj,obj1)
console.log(obj)  //name:'obj1',age:'1',friends:Array(3)
//深拷贝
$.extend(true,obj,obj1) 
//2
$.extend(obj,obj1,obj2) 
console.log(obj)   //name:'obj2',age:'1',friends:Array(3),sex:'male'
//3
var opts = $.extend({},obj1,obj2)
console.log(opts)   //原理同2,存在的替换，不存在的添加
//4
$.extend($.fn,obj2)
//5
$.fn.extend(obj2)

//.extend常见用法
function getPeople(obj){
    var defalut = {
        name:'hunger',
        age:'30',
        sex:'male'
    }
    //var opts = {}
    var opts = $.extend({},defalut,obj)
    console.log(opts)       
}

4- jQuery 的链式调用：

链式调用就是分步骤地对jQuery对象实现各种操作，例如

//对id为Test的对象进行了三项操作:字体颜色设置为红色;显示对象;移除"style"样式
$("#Test").css('color','red').show(200).removeClass('style');

链式调用的作用：
- 代码精简。链式调用能大大精简代码量，多项操作一行代码；
- 优化性能。使用链式操作，所有操作代码共享一个jQuery对象，省去了逐步查询DOM元素的性能损耗

5- jQuery 中 data 函数的作用：

在目标元素上存储或获取自定义数据。用于扩展元素上的数据。

//存储值
.data( key, value )
    .data( key, value ) //设置对应的key和value
    .data( obj )//可以直接设置一个object值
//获取值
.data( key ) 
    .data( key ) //获取对应key的值
    .data()//返回一个object，内容是所有存储在元素上的数据，格式是 key:value

通过data()函数存取的数据都是临时数据，一旦页面刷新，之前存放的数据都将不复存在。该函数属于jQuery对象(实例)。如果需要移除通过data()函数存放的数据，可以使用removeData()函数。

6小练习：

写出以下功能对应的 jQuery 方法：
- 给元素 $node 添加 class active，给元素 $noed 删除 class active
- 展示元素$node, 隐藏元素$node
- 获取元素$node 的属性: id、src、title，修改以上属性
- 给$node 添加自定义属性data-src
- 在$ct 内部最开头添加元素$node
- 在$ct 内部最末尾添加元素$node
- 删除$node
- 把$ct里内容清空
- 在$ct 里设置 html
- 获取、设置$node 的宽度、高度(分别不包括内边距、包括内边距、包括边框、包括外边距)
- 获取窗口滚动条垂直滚动距离
- 获取$node 到根节点水平、垂直偏移距离
- 修改$node 的样式，字体颜色设置红色，字体大小设置14px
- 遍历节点，把每个节点里面的文本内容重复一遍
- 从$ct 里查找 class 为 .item的子元素
- 获取$ct 里面的所有孩子
- 对于$node，向上找到 class 为'.ct'的父亲，在从该父亲找到'.panel'的孩子
- 获取选择元素的数量
- 获取当前元素在兄弟中的排行

$node.addClass('active')// 给元素 $node 添加 class active
$node.removeClass('active')// 给元素 $noed 删除 class active

$node.show()// 展示元素$node
$node.hide(5000)// 隐藏元素$node

// 获取元素$node 的 属性: id、src、title
$node.attr('id')
$node.attr('src')
$node.attr('title')
// 修改以上属性
$node.attr('id','xxx')
$node.attr('src','xxx')
$node.attr('title','xxx')
$node.attr('data-src','xxx')// 给$node 添加自定义属性data-src

// 在$ct 内部最开头添加元素$node
$ct.prepend('$node')
$node.prependTo('$ct')
// 在$ct 内部最末尾添加元素$node
$ct.append('$node')
$node.appendTo('$ct')

$node.remove()// 删除$node
$ct.empty()// 把$ct里内容清空
$ct.html('
')// 在$ct 里设置 html 

//获取、设置$node 的宽度、高度(分别不包括内边距、包括内边距、包括边框、包括外边距)
//高度
$node.height()//不包括内边距
$node.innerHeight()//包括内边距
$node.outerHeight()//包括边框
$node.outerHeight(true);//包括外边距
//宽度
$node.width()//不包括内边距
$node.innerWidth()//包括内边距
$node.outerWidth()//包括边框
$node.outerWidth(true);//包括外边距           

$(window).scrollTop()// 获取窗口滚动条垂直滚动距离

// 获取$node 到根节点水平、垂直偏移距离
$node.offset().left
$node.offset().top

// 修改$node 的样式，字体颜色设置红色，字体大小设置14px
$node.css({
    'color':'red',
    'font-size':'14px'
})
// 遍历节点，把每个节点里面的文本内容重复一遍
$node.each(function(){
    console.log($this.text())
})

$ct.find('.item')// 从$ct 里查找 class 为 .item的子元素
$ct.children()// 获取$ct 里面的所有孩子
$node.parent('.ct').children('.panel')// 对于$node，向上找到 class 为'.ct'的父亲，在从该父亲找到'.panel'的孩子

$node.length// 获取选择元素的数量
$node.index()// 获取当前元素在兄弟中的排行

jQuery功能实现方法

7小练习：

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

jQuery动画实现
范例参考1代码
范例参考2代码

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

get方式


        内容1
        内容2
    
    
        加载更多
    

    
    
服务器端

// 使用req.query.参数名 来获取参数
app.get('/getmore', function(req, res){
    var newsCount = Number(req.query.newsCount);
    var news = [];
    for(var i=1; i<=5; i++){
        console.log(i);
        news.push('内容'+ (i+newsCount));
    }
    res.send({
        result: news
    });
});

post方式


        内容1
        内容2
    
    
        加载更多
    
    
    
服务器端

app.post('/getmore', function(req, res){
    // 使用req.body.参数名 来获取参数
    var newsCount = Number(req.body.newsCount);
    var news = [];
    for(var i=1; i<=5; i++){
        console.log(i);
        news.push('内容'+ (i+newsCount));
    }
    res.send({
        result: news
    });
});

9- 实现一个天气预报页面，UI 如下图所示(仅供参考，可自由发挥)。数据接口:

获取天气
- 接口：http(s)://weixin.jirengu.com/weather
- 服务端支持 CORS 跨域调用，前端可直接使用 ajax 获取数据，返回数据以及使用方式参考 http://api.jirengu.com18
更多接口
- 参考 http://api.jirengu.com18

- 学习总结

动手+查文档是学习 jQuery 最有效的方法

jQuery 文档，
英文文档

juery动画 与 ajax 的知识点总结