JQuery常用事件

扶醉桌前 提交于 2020-01-07 16:20:08

1.click
2.blur 失去焦点
3.focus 得到焦点
4.change 值发生改变
5.ready 页面加载完成 onload
$(document).ready(function(){});//完整写法
$(document(){});//简写

在事件中获取事件源的方式
1.如果元素动态绑定事件,this为事件源
2.非动态绑定 event.target||event.srcElement
3.绑定事件时传递this 事件中用变量接收,此变量就是事件源

事件模拟
//延时执行
setTimeout(function(){
//模拟按钮的点击事件
$(“input”).trigger(“click”);
},3000);

事件的合并
1.切换显示和不显示 toggle();
2.hover(fn1,fn2);相当于 onmouseover + onmouseout
//给div添加hover事件
$(“div”).hover(function(){
alert(“进来了”);
},function(){
alert(“出去了”);
});

动画

1.显示
function fn1(){//显示
$(“img”).show(3000);
}
2.隐藏
function fn2(){//隐藏
//第一个参数为动画时间,第二个参数为回调函数(可省略)
$(“img”).eq(0).hide(3000,function(){
$(“img”).show(3000);
});
}
3.上滑
function fn3(){//上滑
$(“img”).eq(1).slideUp(2000);
}
4.下滑
function fn4(){//下滑
$(“img”).eq(1).slideDown(2000);
}
5.淡入
function fn5(){//淡入
$(“img”).eq(2).fadeIn(1000);
}
6.淡出
function fn6(){//淡出
$(“img”).eq(2).fadeOut(1000);
}
7.自定义 通过修改样式(大小 位置) 以动画的形式改变样式
function fn7(){//自定义
$(“img”).animate({“left”:“250px”},2000)
.animate({“top”:“250px”},2000)
.animate({“left”:“0px”},2000)
.animate({“top”:“0px”},2000)
.animate({“width”:“300px”,“height”:“250px”},2000)
.animate({“width”:“200px”,“height”:“150px”},2000);
}

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!