jQuery常用事件处理

Myth丶恋晨 2024-02-17 17:09 40阅读 0赞

如下所示事件：

![Center][]

![Center 1][]

**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>

[Center]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/a7a9dd7d27cf46259064eb5b8d74a6f8.png
[Center 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/853e5a0c39c94aff903495f51319b847.png

发表评论取消回复

表情：

评论列表（有 0 条评论，40人围观）

还没有评论，来说两句吧...

相关阅读

相关 jQuery常用事件处理

如下所示事件： ![Center][] ![Center 1][] 1）鼠标悬停或离开事件 <script type="text/javascri

Myth丶恋晨/ 2024年02月17日 17:09/ 0 赞/ 41 阅读

相关 jQuery事件处理

以前注册事件用的是这种注册的方法 $('div').click(function() { $(this).css('back

﹏ヽ暗。殇╰゛Y/ 2023年07月09日 15:25/ 0 赞/ 11 阅读

相关 jQuery事件处理

1.绑定点击监听的两种方法：例： $(".out").click(function(){ console.log("绑定click监听")

ゝ一纸荒年。/ 2022年12月02日 15:02/ 0 赞/ 168 阅读

相关【js】jQuery常用事件和委托事件

1.JQuery大概有以下几个常用事件 <table> <thead> <tr> <th>事件</th> <th>说明</th> </tr

曾经终败给现在/ 2022年11月27日 00:39/ 0 赞/ 236 阅读

相关 jquery常用事件

1. 点击事件：$（“button”）.clik（function（）\{ \}）； 2. 删除事件：$（“元素”）.remove（）；

谁借莪１个温暖的怀抱￠/ 2022年06月07日 11:19/ 0 赞/ 203 阅读

相关 jquery常用组件处理方法

一、select: 1、从后台获取数据填充下拉框： <select class="addressselect" id="addressselect"></selec

淩亂°似流年/ 2022年05月15日 05:47/ 0 赞/ 217 阅读

相关 jQuery 事件处理 on()

说到jQuery的事件处理，不得不提jQuery中一个全能事件方法 $(select).on() 。在给元素添加事件中，貌似它无所不能。用过jQuery的你肯定用过该方法。

Myth丶恋晨/ 2022年05月14日 13:24/ 0 赞/ 227 阅读

相关 jQuery事件绑定与常用事件

jQuery事件与js类似，只是在名称上将前面的on去掉了，例如jQuery的click、mousedown、keypress事件。jQuery绑定事件有2种方法，下面用最基本

妖狐艹你老母/ 2021年12月20日 10:07/ 0 赞/ 366 阅读

相关 jQuery基础--事件处理

[jQuery基础--事件处理][jQuery_--] 2. jQuery事件机制 > JavaScript中已经学习过了事件，但是jQuery对JavaScript事

末蓝、/ 2021年10月19日 02:54/ 0 赞/ 346 阅读

相关 jQuery事件处理（六）

1、通过一步步调试的的方法观察了一下存放到`cache`中的事件及其处理程序的数据格式： { 　　events : { // 根据事件类型存放添加到该元素

た入场券/ 2021年06月26日 16:06/ 0 赞/ 384 阅读