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