jQuery3

一、事件代理/事件委托
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");
  }
});