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);
});

推荐阅读更多精彩内容