进阶15：jQuery动画与ajax

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

当DOM准备就绪时，指定一个函数来执行。与JavaScript提供了window.onload事件的区别：

The ready event occurs after the HTML document has been loaded, while the onload event occurs later, when all content (e.g. images) also has been loaded.

The onload event is a standard event in the DOM, while the ready event is specific to jQuery. The purpose of the ready event is that it should occur as early as possible after the document has loaded, so that code that adds functionality to the elements in the page doesn't have to wait for all content to load.

简单来说 window.onload是当页面呈现时用来执行这个事件，直到所有的东西，如图像已被完全接收前，此事件不会被触发
$(document).ready()只要DOM结构已完全加载时，脚本就可以运行。传递处理函数给.ready()方法，能保证DOM准备好后就执行这个函数

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

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

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

语法：jQuery.extend([deep,] target [, object1 ] [, objectN ] )

1. 当我们提供两个或多个对象给$.extend()，对象的所有属性都添加到目标对象（target参数）。
2. 如果只有一个参数提供给$.extend()，这意味着目标参数被省略。在这种情况下，jQuery对象本身被默认为目标对象。这样，我们可以在jQuery的命名空间下添加新的功能。这对于插件开发者希望向 jQuery 中添加新函数时是很有用的

目标对象（第一个参数）将被修改，并且将通过$.extend()返回。然而，如果我们想保留原对象，我们可以通过传递一个空对象作为目标对象：
var object = $.extend({}, object1, object2);
在默认情况下，通过$.extend()合并操作不是递归的;

如果第一个对象的属性本身是一个对象或数组，那么它将完全用第二个对象相同的key重写一个属性。这些值不会被合并。如果将 true作为该函数的第一个参数，那么会在对象上进行递归的合并。

var object1 = {
  apple: 0,
  banana: { weight: 52, price: 100 },
  cherry: 97
};
var object2 = {
  banana: { price: 200 },
  durian: 100
};

// Merge object2 into object1
$.extend( object1, object2 );

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

链式调用：使用jQuery方法时，对象方法返回的是对象本身，可以调用对此对象的其他jQuery方法，实现连续调用多个方法

例：$(this).siblings().removeClass('active');
原理（伪代码）：

window.onload = function(){
        // jQuery构造器
        var jQuery = function(selector, context) {
            return new jQuery.fn.init(selector, context);
        }
        jQuery.fn = jQuery.prototype = {
            constructor: jQuery,
            //给所有元素设置颜色
            setColor: function(color) {
                for (var i = 0; i < this.length; i++) {
                    this[i].style.color = color
                }
                return this;
            },
            //返回第一个元素
            first: function() {
                return this[0]
            }
        }
        var init = jQuery.fn.init = function(selector, context) {
            var elem = document.querySelectorAll(selector)
            for (var i = 0; i < elem.length; i++) {
                this[i] = elem[i]
            }
            this.length   = elem.length;
            this.context  = document;
            this.selector = selector;
            return this;
        }
        init.prototype = jQuery.fn;
        var $div = jQuery('div')
        $div.setColor('red').first()
    }

题目5：jQuery 中 data 函数的作用

用法：jQuery.data( element, key, value )
jQuery.data() 方法允许我们在DOM元素上附加任意类型的数据,避免了循环引用的内存泄漏风险。如果 DOM 元素是通过 jQuery 方法删除的或者当用户离开页面时，jQuery 同时也会移除添加在上面的数据。
例：

image.png

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

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

$node.addClass('active')
$node.removeClass('active')
$node.toggleClass('active')

• 展示元素$node, 隐藏元素$node

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

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

$node.attr('id')
$node.attr('src')
$node.attr('title')

$node.attr('id','some')
$node.attr('src','some')
$node.attr('title','some')

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

$node.attr('data-src','some')

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

$ct.prepend($node)

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

$ct.append($node)

• 删除$node

$node.remove()

• 把$ct里内容清空

$ct.empty()

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

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

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

$node.width() //$.node.height()                     //c
$node.innerwidth() //$.node.innerheight()           //p+c
$node.outerwidth() //$.node.outerheight()           // b+p+c
$node.outerwidth(true) //$.node.outerheight(true)  //m+b+p+c

$node.width(20) //$.node.height(20)

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

$(window).scrollTop()

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

$.node.offset().left
$.node.offset().top

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

$node.css({
    'color':'red',
    'fontSize':'14px'
})

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

$node.each(function(i,ele){
    ele.text(ele.text()+ele.text())
})

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

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

$ct.children('.item')

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

$ct.children()

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

$.node.parent('.ct').children('.panel')

• 获取选择元素的数量

$('div').length;

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

$('div').index();

题目7：用jQuery实现以下操作

• 当点击$btn 时，让 $btn 的背景色变为红色再变为蓝色

$btn.click(function(){
    $(this).toggleClass(function(){
        if($(this).hasClass('.red')){
            $(this).addClass('.blue')
        }else{
            $(this).addClass('.red')    
        }
    })
})

• 当窗口滚动时，获取垂直滚动距离

$(window).scroll(function(e){
    return $(this).scrollTop()
})

• 当鼠标放置到$div 上，把$div 背景色改为红色，移出鼠标背景色变为白色

$div.on({
    'mouseenter'，function(){
        $(this).css('background','red')
    },
    'mouseleave'，function(){
        $(this).css('background','white')
    },
})

• 当鼠标激活 input 输入框时让输入框边框变为蓝色，当输入框内容改变时把输入框里的文字小写变为大写，当输入框失去焦点时去掉边框蓝色，控制台展示输入框里的文字

$input.on({
    'focusein':function(){
        $(this).css('borderColor','blue')
    },
    'focusein':function(){
        $(this).css('borderColor','blue')
    },
    'keypress':function(){
        $(this).val().toUpperCase()
    },
    'focuseout':function(){
        $(this).css('borderColor','')
        console.log($(this).val())
    }

})

• 当选择 select 后，获取用户选择的内容
  code

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

<ul class="list">
        <li>内容1</li>
        <li>内容2</li>
    </ul>
    <div class="btn">
        <button type="button" class="loadMore">加载更多</button>
    </div>

    <script src="https://code.jquery.com/jquery-1.9.1.js"></script>
    <script>
        $(function(){
            $('.list').on('mouseenter','li',function(){
                $(this).addClass('hover');
            });
            $('.list').on('mouseleave','li',function(){
                $(this).removeClass('hover');
            });

            var $page = 0;
            var $length = 5;
            var isLoading = false;

            function onSuccess(res){
                $('.loadMore').text('加载更多');
                for(var i=0;i<res.length;i++){
                    $('.list').append($('<li>'+res[i]+'</li>'));
                }
                $page+=1;
                isLoading = false;
            }

            function onError(){
                $('.loadMore').text('加载更多');
                alert('系统异常,请稍后再试');
            }

            $('.loadMore').on('click',function(){
                $(this).html('![](loading.gif)');
                if(isLoading){
                    return false;
                }
                isLoading =true;
                
                $.ajax({
                    url:'/loadMore?page='+$page+'&length='+$length,
                    success:function(data){
                        onSuccess(data);
                    },
                    error:function(){
                        onError();
                    }
                })
            })

        })
    </script>

router.get('/loadMore', function(req, res) {
  var page = parseInt(req.query.page);
  var length = parseInt(req.query.length);
  var len = (page+1)*length+3;
  var arr=[];
  for(var i=page*length+3;i<len;i++){
    arr.push('内容'+(i));
  }
  // res.send(arr);  
  setTimeout(function(){
    res.send(arr);
  },500);
})

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

1. 获取天气

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

2. 更多接口
   http://api.jirengu.com
   [图片上传失败...(image-bd3080-1514169939414)]