Jquery绑定事件及动画效果
绑定事件
bind(type, data, fuc)
one(type, data, fuc) //只执行一次
常见事件类型
名称 | 含义 |
blur | 失去焦点 |
focus | 获得焦点 |
load | 加载 |
resize | 重置大小 |
scroll | 滚动 |
unload | 卸载 |
click | 点击 |
dblclick | 双击 |
mousedown | 鼠标按下 |
mouseup | 鼠标弹起 |
mousemove | 鼠标移动 |
mouseover | 鼠标悬停 |
mouseout | 鼠标移走 |
mouseenter | 鼠标移入 |
mouseleave | 鼠标离开 |
change | 内容改变 |
select | 选中 |
submit | 提交 |
keydown | 有键按下 |
keypress | 有键按下 |
keyup | 有键弹起 |
error | 有错误 |
判断是否显示
if($("#id").is(":visible")){
// 显示中,执行此处代码
}else{
// 未显示,执行此处代码
}
简化绑定事件
$(this).mouseover(function(){
//代码
})
Hover事件
hover(enter,leave)
光标移入,触发第一个事件,光标移走,触发第二个事件
$("#id").hover(function(){
//光标移入
},function(){
//光标移出
})
toggle事件
$("#id").toggle(function(){
//第一次点击
},function(){
//第二次点击
})
$(this).toggle(); //表示显示隐藏之间的切换
$(this).slideToggle(); //切换显示
$(this).fadeTo(1000,0.5); //1000ms淡化到0.5透明度
阻止事件的冒泡event.stopPropagation()
$('#content').bind("click", function(event)){
$('#msg').html() + "<p>xxx</p>";
event.stopPropagation(); // 阻止事件冒泡,即上层组件不再触发这里的点击事件
});
阻止默认事件的发生event.preventDefault()
$('#content').bind("click", function(event)){
$('#msg').html() + "<p>xxx</p>";
event.preventDefault(); // 阻止默认行为,这里是指阻止默认的表单提交
});
补充:可以通过return false;阻止默认事件。
获取事件针对的对象event.target
获取光标所在页面的位置event.pageX() / event.pageY()
获取鼠标按键类型event.which() 1左键2中键3右键
移除所有的绑定事件
$("#id").unbind("click")
或
$("#id").unbind();
移除指定的事件
$("#id").unbind("click",funName);
模拟触发事件
$("#id").trigger("click");
或
$("#id").click();
元素的显示隐藏
$("#id").show();
$("#id").hide();
$("#id").show("slow"); //600ms$("#id").show("normal"); //400ms
$("#id").show("fast"); //200ms
$("#id").hide("slow"); //600ms
$("#id").hide("normal"); //400ms
$("#id").hide("fast");//200ms
$("#id").show(1000);//1000ms
元素的淡入淡出
$("#id").fadeIn();
$("#id").fadeOut();
元素延展出现或隐藏
$("#id").slideDown(); //显示
$("#id").slideUp(); //隐藏
自定义动画
animate(param,speed, callback);
$(this).animate({"left":"500px"},3000); //三秒内,位置改变到指定地方
$(this).animate({"left":"+=500px"},3000); //三秒内,位置改变500px
$(this).animate({"left":"-=500px"},3000); //三秒内,位置改变500px
本文地址:https://blog.csdn.net/Day_and_Night_2017/article/details/85799522
上一篇: 元宵应该冷冻还是冷藏比较好
下一篇: B2B网站后台管理系统侧导航