jQuery3

作者: 追逐_e6cf | 来源:发表于2018-10-08 20:41 被阅读0次

    一、事件代理/事件委托
    es5的事件委托

    var lis = document.getElementsByTagName("li");
    for(var i=0; i<lis.length; i++){
      lis[i].addEventListener("click", function(){
        alert(1);
      })
    }
    var $box = $(".box");
    $(".box").on("click", "li", function(){
      alert(1);
    });
    //find()方法是获取到当前元素的后代元素
    //相当于用CSS样式中的 .box li{}
    var $boxLi = $(".box").find("li");
    $boxLi.on("click", function(){
      alert("123");
    });
    

    二、trigger
    触发事件:主动触发事件

    $(window).on("load", function(){
      $("audio").trigger("play");
    })
    //默认事件
    $(".box").on("click", function(){
      console.log(123);
    }).trigger("click");
    //自定义事件
    $(".box").on("myclick", function(){
      console.log(123);
    }).trigger("myclick");
    

    三、动画
    hide(time, callback)/show(time, callback) 隐藏与显示

    $(".box").hide(1000, function(){
      console.log("我已经消失了");
      $(".box").show(1000, function(){
      
      })
    });
    

    toggle反向进行显示/隐藏属性

    $(".box").hide(1000, function(){
      console.log("我已经消失了");
      $(".box").toggle(1000);
    });
    $(".box").toggle(1000, function(){
      console.log("我已经消失了");
      $(".box").toggle(1000);
    });
    

    fadeIn/fadeOut淡入淡出

    $(".box").fadeOut(300, function(){
      $(".box").fadeIn(1000);
    });
    

    animate({}, time):动画

    $(".box").animate({
      marginTop:500,
      marginLeft:500
    }, 1000);
    

    四、ajax
    jQuery底层已经封装好了,只需要直接调用即可

    $.ajax({
      //类型、GET,POST
      type:"GET",
    
      //发送/请求的服务器的地址以及数据
      url:"abc.php",
    
      //async:异步 sync:同步
      async:true,
    
      //数据类型:html,预期服务器返回的数据类型
      dataType:html,
    
      //请求数据成功的情况:
      success:function(data){
        $("#box").append(data);  //把请求成功的内容进行处理
      },
    
      //请求数据失败的情况:
      error:function(){
        alert("gg");
      }
    });
    

    相关文章

      网友评论

          本文标题:jQuery3

          本文链接:https://www.haomeiwen.com/subject/csnjaftx.html