jQuery常用事件处理

 如下所示事件：

 1）鼠标悬停或离开事件

<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript">
 $(function(){
	 
	 //鼠标悬停上变化的颜色
	 $("li").mouseover(function(){
		 
		  $(this).addClass("bg");
		 
		});
		
		
	 //鼠标离开上变化的颜色
	 $("li").mouseout(function(){
		 //从所有匹配的元素中删除全部或者指定的类。
		  $(this).removeClass("bg");
		 
		});
	 
	 
   });
</script>

2)键盘按下或释放事件

<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript">
  $(function(){
	 //当键盘或按钮被按下时，发生 keydown 事件。
      // $("#keys").keydown(function(event){
//		   //event.keyCode
//		   $("body").append("你按下的是：["+event.which+"]<p/>")
//		   
//		 });

//keydown着重的是按下了哪个键(按下任何键都可触发keydown)。对于诸如Ctrl、Alt、Shift、Delete、Esc等修饰性和非打印键，请监听keydown事件。
// 只允许按下的字母键生效 (使用某些输入法可能会绕过该限制)
 $("#keys").keydown({start:65,end:90},function(event){
		   //
		   var keys =event.data;
		   
		   if(event.which>=keys.start && event.which<=keys.end){
			
			 $("body").append("你按下的是：["+event.keyCode+"]<p/> "); 
			 return true;
			   
		   }else{
			   $("body").append("只能是A-Z");
			   return false;
		   }
		 });
		 
	// keypress事件的event.which属性返回的是按键所输入的字符的Unicode值。  // keydown事件的event.which属性返回的是所按下的键盘按键的映射代码值。
	 /*$(window).keypress(function(event){

		  $("body").append("你按下的是：["+ String.fromCharCode(event.which)+"]<p/> ");
		 
	});*/

	   // { A:65, Z:90, a:97, z:122 }
	   var validateChar={"A":"A".charCodeAt(0),"Z":"Z".charCodeAt(0),"a":"a".charCodeAt(0),"z":"z".charCodeAt(0)};
	   /// 只允许输入大小写字母，不允许输入其他字符(使用某些输入法可能会绕过该限制，从而输入中文或其它字符)
	 $("#chars").keypress(validateChar,function(event){

			 var ch= event.data;
			 
		  if(event.which>=ch.A && event.which<=ch.Z ||(event.which>=ch.a && event.which<=ch.z )){
			
			 $("body").append("你按下的是：["+event.keyCode+"]<p/> "); 
			 return true;
			   
		   }else{
			   $("body").append("只能是A-Z,a-z");
			   return false;
		   }
		 
	});
	
	
	 //keyup事件会在按下键盘按键并释放时触发。
	 /* $(window).keyup(function(event){
		  $("body").append("你按下的是：["+event.keyCode+"]<p/> "); 
		  
	  });*/
	  
	  var template = "你按了count个按键!";

// 只允许按下的字母键生效 (使用某些输入法可能会绕过该限制)
	$("#ups").keyup( template, function(event){
    var $me = $(this);
    var count = $me.data("count") || 0;
    $me.data("count", ++count);
    $("#counter").html( event.data.replace("count", count) );
} );

  });
</script>

3)获得焦点或失去焦点事件

#login fieldset p input.btn{
	background: url("./images/login.gif") no-repeat;
	width: 98px;
	height: 32px;
	margin-left: 60px;
	color: #ffffff;
}
/*背景颜色 */
#login fieldset p input.input_focus{
	background-color: #BEE7FC;
}
/*边框颜色*/
#login fieldset p input.input_focus_border{
	border:1px solid blue;	
}
</style>
<script type="text/javascript" src="jquery-1.8.3.js"></script>


<script type="text/javascript">
  $(document).ready(function(){
	  
	  $("[name='member']").focus(function(){
		
		 $(this).addClass("input_focus");  
	  });
	  
	   $("[name='member']").blur(function(){
		
		 $(this).removeClass("input_focus");  
	  });
	  
	  
	  //属性的包含  获得焦点
	   $("[name*='o']").focus(function(){
		
		 $(this).addClass("input_focus_border");  
	   });
	   
	   
	     //失去焦点
	   $("[name*='o']").blur(function(){
		
		 $(this).removeClass("input_focus_border");  
	  });
	  
	});

</script>

4)绑定或取消绑定事件

<script type="text/javascript" src="jquery-1.8.3.js"></script>

<script type="text/javascript">

   $(function(){

    /* $("#button").click(function(){ 
		 $("p").css("background", "cyan");
	  });
	  */
	  
	  $("#button").bind("click", function(){ 
		 $("p").css("background", "yellow");
	  });
	  
	  
	  
	   $("#button1").bind({
		   
		   mouseover:function(){
			   
			    $("ul").css("background", "red");
			 },
		     mouseout:function(){
			   
			    $("ul").css("background", "blue");
			 }

		   });
	  
	  
	   $("#button1").unbind();
	
	});

</script>

5)鼠标光标悬停事件hover

<script type="text/javascript" src="jquery-1.8.3.js"></script>

<script type="text/javascript">

   $(function(){
	   $("#myaccound").hover(
	   
	       //over
	       function(){
		    $("#menu_1").css("display", "block");
		   
		   }, 
		   
		   //out
		   function(){
		    $("#menu_1").css("display", "none");
		   
		     }
		   
		   );
   });
	   
</script>	   

6)鼠标连续单击事件toggle

<script type="text/javascript">
$(document).ready(function () {
		 $("body").toggle(
			function () {
				$(this).show();
				$(this).css("background-color", "red");
				 
			},
			function () {
				$(this).css("background-color", "green"); 
			},
			function () {
				$(this).css("background-color", "blue"); 
			}
     );
});
 
</script>

7) 鼠标切换事件toggle

<script type="text/javascript" src="jquery-1.8.3.js"></script>

<script type="text/javascript">

   $(function(){
	   $("#button").bind("click",function(){
	   	$("li:gt(5):not(:last)").toggle("slow");
	   });
   });
  </script> 

8)动画效果显示或隐藏

<script type="text/javascript">

   $(function(){
	   $("#del").bind("click",function(){
	   	    $("#pop").show("slow");
	   });
	   
	   
	    $("#button2").bind("click",function(){
	     	$("#pop").hide("fast");
	   });
   });
  </script> 

9)动画效果淡入或淡出

<script type="text/javascript">
   $(function(){
	   $("[name='fadein_btn']").click(function(){ 
		    $("img").fadeIn("fast");
		 });
		 
		 
		 $("[name='fadeout_btn']").click(function(){ 
		    $("img").fadeOut();
		 });
	   
   });
</script>  
   

10)改变元素的高度效果

<script type="text/javascript">
 
  $(function(){
	   $("h2").click(function(){
		$(".txt").slideUp("slow");
		$(".txt").slideDown("slow");
		
       });
	});   

</script>