05 jquery事件
文章目录
鼠标事件:
click(fun) 单击事件
mouseover(fun) 鼠标移入:移入到子元素中时,会触发父元素的移出,子元素的移入
mouseout(fun) 鼠标移出:移入到父元素中时,会触发子元素的移出,父元素的移入
mouseenter(fun) 鼠标移入(常用):移入到子元素或父元素中,不会触发
mouseleave(fun) 鼠标移出(常用):移入到子元素或父元素中,不会触发
键盘事件:
keydown(fun) 键盘按下时触发
keyup(fun) 键盘放开时触发
keypress(fun) 键盘输入了可见内容时触发
$(document).keydown(function(event){
if(event.keyCode == 13){
$(“form”).submit()
}
})
绑定和移除绑定:
不推荐使用:bind(“事件”, fun)
$(“”).bind(“事件名”, function(){…})
$(“”).bind({“事件名”:function(){…}, “事件名”: function(){},… })
不推荐使用:unbind([“事件”])
$("").unbind() 移除绑定的所有事件
$("").unbind("事件名") 移除绑定的指定事件
on()
$("").on("事件名", function(){...})
$("").on({"事件名":function(){...}, "事件名": function(){},... })
off()
$("").off() 移除绑定的所有事件
$("").off("事件名") 移除绑定的指定事件
当页面元素事先存在,使用on绑定事件和直接使用事件没有任何区别
但,当页面元素事先不存在,通过js动态创建时,直接使用事件无效,需要on绑定
绑定时,需要从父节点中绑定,父节点需是存在的节点
$(“父节点”).on(“事件”, “要绑定的子节点”, function(){})
其他常用事件:
blur() 失焦事件
focus() 聚焦事件
change() 内容改变事件
复合事件:(不推荐使用)
hover(fun, fun) 相当于mouseover与mouseout事件的组合,第一个fun中移入,第二个fun是移出
$(document).ready(function(){
$("li").hover(
function(){
$(this).children("div").show();//让相应二级内容显示
$(this).toggleClass("orange");
},
function(){
$(this).children("div").hide();//让相应二级内容隐藏
$(this).toggleClass("orange");
}
);
});
toggle(fun…)
动画效果:
隐藏显示:
show(time, [fun])
hide(time, [fun])
透明度:
fadeIn(time, [fun])
fadeOut(time, [fun])
高度:
slideDown(time, [fun])
slideUp(time, [fun])
自定义:animate() 不用管