jQuery动画与ajax

jQuery动画与ajax

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

• jQuery的load事件对应JS的onload事件，jQuery的ready事件对应JS的DOMContentLoaded事件，分别表示页面所有资源加载完成和页面DOM结构解析完成
• 当DOM准备就绪时会发生ready事件，并执行ready內的函数。
  由于该事件在文档就绪后就发生，所以正确做法是将所有其他jQuery事件和函数置于该事件中
• ready() 函数规定当 ready 事件发生时执行的代码，ready() 函数仅能用于当前文档，因此无需选择器

$(document).ready(function)
$().ready(function)
$(function)   //三种语法是等价的

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

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

$.extend 的作用和用法

• 当我们提供两个或多个对象给$.extend()，对象的所有属性都添加到目标对象（第一个参数）并返回，重复的属性会覆盖，如果没有{}将赋值到第一个对象

用法：
var object=$.extend({},object1,object2);

var obj1 = {
  name : 'John',
  age : 12,
  sex : 'man',
  class: {Chinese : 'classV',English : 'classII'}
}
var obj2 = {
  name : 'King',
  age : 22,
  sex : 'man',
  career: 'doctor', 
  class : {History : 'class1'}
}

var newObj = $.extend({},obj1,obj2)
console.log(newObj)
//{age:22,career:"doctor",class:{History: "class1"},name:"King",sex:"man"}

• 当一个参数为true时，将会进行递归的深拷贝合并

用法为:
var object=$.extend(true,{},object1,object2);

更改上边的例子，变为：
var newObj = $.extend(true,{},obj1,obj2)
console.log(newObj)
//{age:22,career:"doctor",class:{Chinese: "classV", English: "classII", History: "class1"},name:"King",sex:"man"}

jQuery 的链式调用是什么

• jQuery链式调用：在对象上一次性调动多个方法

例如：
$(this).addClass("active").siblings().removeClass("active");

因为大部分对象方法的最后是return this，所以有了链式调用，简易代码

jQuery 中 data 函数的作用

• 在匹配元素上存储任意的数据：

.data( key, [value] )
.data( obj )

• 返回匹配的元素集合中第一个元素给定名称的 数据上存储的数据：

.data()
.data( key )

• 作用：
  允许我们在DOM元素上绑定任意类型的数据，避免了循环引用可能产生的内存泄漏

$('body').data('name', 'dot')
$('body').data('hobby', { fav: 'eat', love: 'food' })
$('body').data({ arr: [1, 2, 3, 4, 5] })

$('body').data('name')//dot
$('body').data()//{ name: "dot",hooby: { fav: "eat", love: "food" },arr: [1,2,3,4,5] }

写出以下功能对应的 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('src')
$node.attr('title')
//修改属性
$node.attr('id','value')
$node.attr('src','value')
$node.attr('title','value')

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

$node.prop('data-src','value')

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

$ct.prepend($node)
$node.prependTo($ct)

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

$ct.append($node)
$node.appendTo($ct)

• 删除$node

$node.remove()

• 把$ct里内容清空

$ct.empty()

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

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

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

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

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

$(window).scrollTop()

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

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

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

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

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

$node.each(function () {
    $(this).text($(this).text() + $(this).text())
})

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

$ct.find('.item')

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

$ct.children()

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

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

• 获取选择元素的数量

$node.length

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

$node.index()

用jQuery实现以下操作

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

$("#btn").click(function(){
    $(this).css("background-color","red")
    setTimeout(function(){
      $("#btn").css("background-color","blue")
    },500)
  })

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

$(document).scroll(function(){
    console.log($(this).scrollTop()+'px')
  })

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

$('.div').on("mouseenter",function(){
    $(this).css("background","red");
});
$('.div').on("mouseleave",function(){
    $(this).css("background","#fff");
});
或：
$(".div").on("mouseover",function(){
    $(this).css("background-color","red");
});
$(".div").on("mouseout",function(){
    $(this).css("background-color","");
});

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

$('#ipt').on("focus",function(){
   $(this).css("outline-color","blue");
});
$('#ipt').on('keyup',function(){
    $(this).val($(this).val().toLocaleUpperCase());
});
$('#ipt').on('blur',function(){
     $(this).css("outline-color","none");
     if($(this).val()!=""){
         console.log($(this).val());
     }
});

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

$('#sel').on('change',function(){
    //或者console.log($(this).val());
    console.log($(this).find('option:selected').val());
});

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

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      text-align: center;
    }
    ul {
      list-style: none;
      padding: 0;
    }
    li {
      border: 1px solid;
      height: 30px;
      line-height: 30px;
      margin: 10px;
      cursor: pointer;
    }
    li:hover {
      background: green;
    }
  </style>
</head>
<body>
<ul></ul>
<button>加载更多</button>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
    let idx = 0, len = 3;
    $('button').on('click', function () {
        $.ajax({
            url: 'news',
            method: 'get',
            dataType: 'JSON',
            data: {
                length: len,
                index: idx
            }
        }).done(function (data) {
            idx += 3;
            appendHtml(data);
        }).fail(function () {
            alert('fail');
        })
    });
    let appendHtml = function (data) {
        for(let i in data){
            $('<li>' + data[i] + '</li>').appendTo('ul');
        }
    }
</script>

后端代码

/*
接口：'/loadMore'
方式：'get'
数据类型： 'json'
长度： 3
*/
app.get('/news', function (req, res) {
    var pos = req.query.index;
    var len = req.query.length;
    var data = [];
    for(var i=0; i<len; i++)
        data.push('新闻'+(parseInt(pos)+i));
    res.send(data);
});