05jquery事件

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() 不用管