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(); //得到的是 <p>我是文本</p>
$node.text()是获取节点里的文本内容，例如：$node.html(); //得到的是：我是文本

<div class="test1">
            <p>我是文本</p>
        </div>
        $('.test1').html() //<p>我是文本</p>
        $('.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 <div class="btn"></div>
- 获取、设置$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('<div class="btn"></div>')// 在$ct 里设置 html <div class="btn"></div>

//获取、设置$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方式

<div class="container">
        <div class="box">内容1</div>
        <div class="box">内容2</div>
    </div>
    <div class="getmore">
        <a id="more" href="#">加载</i>更多</a>
    </div>

    <script src="jquery-3.1.1.min.js"></script>
    <script>
    var $container = $(".container");
    var $more = $('#more');
    
    $more.on('click', function(){
        $more.html("<i class='iconfont icon-dengdai1'></i>");
        function getMoreNews() {
            $.ajax({ 
                // get 方式可以将参数直接加载URL的后面
                //url: '/getmore?newsCount=' +$container.children().length,
                url: '/getmore',
                method: 'GET',
                // data中存放的就是向服务器传递的参数，使用get方法，服务器通过 req.query.参数名 来获取参数
                data: {
                    newsCount: $container.children().length
                }
            }).done(function(news){
                for(var i =0; i< news.result.length; i++){
                    var html = '';
                    html += "<div class='box'>";
                    html += news.result[i];
                    html += "</div>";
                    $container.append($(html));
                }
                $more.text("加载更多");
            }).fail(function(jqHXR, textStatus){
                console.log(textStatus);
            })
        }
        setTimeout(getMoreNews, 1000);
    });
    </script>
服务器端

// 使用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方式

<div class="container">
        <div class="box">内容1</div>
        <div class="box">内容2</div>
    </div>
    <div class="getmore">
        <a id="more" href="#">加载</i>更多</a>
    </div>
    <script src="jquery-3.1.1.min.js"></script>
    <script>
  
    var $container = $(".container");
    var $more = $('#more');
    $more.on('click', function(){
        $more.html("<i class='iconfont icon-dengdai1'></i>");
        function getMoreNews() {
            $.ajax({
                url: '/getmore',
                method: 'POST',    //这里修改为POST
                data: {
                    newsCount: $container.children().length
                }
            }).done(function(news){
                for(var i =0; i< news.result.length; i++){
                    var html = '';
                    html += "<div class='box'>";
                    html += news.result[i];
                    html += "</div>";
                    $container.append($(html));
                }
                $more.text("加载更多");
            }).fail(function(jqHXR, textStatus){
                console.log(textStatus);
            })
        }
        setTimeout(getMoreNews, 1000);
    });
    </script>
服务器端

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 文档，
英文文档

最后编辑于：2018.03.13 22:10:25

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 194,390评论 5赞 459
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 81,821评论 2赞 371
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 141,632评论 0赞 319
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 52,170评论 1赞 263
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 61,033评论 4赞 355
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 46,098评论 1赞 272
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 36,511评论 3赞 381
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 35,204评论 0赞 253
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 39,479评论 1赞 290
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 34,572评论 2赞 309
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 36,341评论 1赞 326
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 32,213评论 3赞 312
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 37,576评论 3赞 298
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 28,893评论 0赞 17
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 30,171评论 1赞 250
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 41,486评论 2赞 341
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 40,676评论 2赞 335

juery动画 与 ajax 的知识点总结