jQuery中的事件

最新推荐文章于 2023-01-07 11:07:03 发布

池鱼i_

最新推荐文章于 2023-01-07 11:07:03 发布

阅读量401

点赞数 7

分类专栏： java基础文章标签： jquery

本文链接：https://blog.csdn.net/best_p1/article/details/117985454

版权

java基础专栏收录该内容

4 篇文章 0 订阅

订阅专栏

键盘事件//

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
       <script>
           $(function(){
               $("[type=password]").keydown(function(){
                   $("#show").append("keydown");
               }).keyup(function(){
                   $("#show").append("keyup");
               }).keypress(function(){
                   $("#show").append("keypress");
               });

               $(document).keydown(function(event){
                   if(event.keyCode=="13"){
                       alert("确认要提交嘛？");
                   }
               });
           });
       </script>
   </head>
   <body>
       用户名<input type="text" name="userName" /><br/>
       密码<input type="password" name="pwd" /><br/>
       <input type="submit" value="提交"/>
       <span id="show"></span>
   </body>
</html>

///失焦事件和获取焦点

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style type="text/css">
           .content{
               background-color:red;
           }
       </style>
       <script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
       <script>
           $(function(){
               $("[type=password]").focus(function(){
                   $(this).addClass("content");
               });
               $("[type=password]").blur(function(){
                   $(this).removeClass();
               });
           });
       </script>
   </head>
   <body>
       用户名<input type="text" name="userName" /><br/>
       密码<input type="password" name="pwd" /><br/>
       <input type="submit" value="提交"/>
   </body>
</html>

//鼠标事件 mouseover mouseout bind

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
       <script>
           $(function(){
//               $("[type=button]").bind("click",function(){
//                   $("p").css("background","aqua");
//               });

               $("[type=button]").bind({
                   mouseover:function(){
                       $("p").css("display","none");
                   },
                   mouseout:function(){
                       $("p").css("display","block");
                   }
               });
           });
       </script>
   </head>
   <body>
       <p>fhiwehgiowhgiowhgiowhgiwehgiwrg</p>
       <h3>igfjrwigiregreg</h3>
       <p>hyjojho6jhop54jhjojwefgioeqwhfiouwq</p>
       <input value="点我" type="button"></input>
   </body>
</html>

池鱼i_

关注

7
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
6
评论
jQuery中的事件

jQuery事件是对JavaScript事件的封装，常用事件分类如下：基础事件鼠标事件键盘事件表单事件复合事件是多个事件的组合鼠标光标悬停鼠标连续点击鼠标事件是当用户在文档上移动或单击鼠标时而产生的事件，常用鼠标事件有：...
复制链接

扫一扫