JQ——事件(鼠标、按键)

1、鼠标事件

(1)鼠标单击:click

DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>鼠标单击事件title>
        <script type="text/javascript" src="../js/jquery-1.8.3.js" >script>
        <script>
            $(function(){
                $("#button").click(function(){
                alert("按键被单击了!");
                });
            });
        script>
    head>
    <body>
        <button id="button">请点击!button>
    body>
html>

JQ——事件(鼠标、按键)_第1张图片

 

 (2)鼠标双击事件:dblclick

DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>鼠标单击事件title>
        <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
        script>
        <script>
            $(function(){
                $("button").dblclick(function(){
                alert("鼠标双击了!!");
                });
            });
        script>
    head>
    <body>
       <button>请双击,以触发事件!button>
    body>
html>

JQ——事件(鼠标、按键)_第2张图片

(3)mouseenter鼠标移动到相应元素上的时候触发,mouseleave鼠标不在相应的元素上的时候触发:

DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>鼠标单击事件title>
        <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
        script>
        <script>
            $(function(){
                $("p").mouseenter(function(){
                alert("鼠标移动到了段落上!");
                });
                
                $("p").mouseleave(function(){
                alert("鼠标从段落上移开了!");
                });
            });
        script>
    head>
    <body>
       <p>Just go. Just go. I just keep going until it feels right to me.p>
    body>
html>

JQ——事件(鼠标、按键)_第3张图片

 

 

(4)hover():鼠标悬停在元素上的时候触发

DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>鼠标悬停事件title>
        <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
        script>
        <script>
          $(function(){
            $("p").hover(function(){
            $("p").css("background-color","red");
            },function(){
            $("p").css("background-color","yellow");
          });
        });
        script>
    head>
    <body>
     <p>Just go. Just go. I just keep going until it feels right to me.p>
    body>
html>

JQ——事件(鼠标、按键)_第4张图片

 

 

2、键盘事件

(1)keypress():按键被按下

DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>鼠标悬停事件title>
        <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
        script>
        <script>
          $(function(){
               $("input").keypress(function(){
            alert("有按键按下了!");
          });
        });
        script>
    head>
    <body>
       <input type="text">
    body>
html>

JQ——事件(鼠标、按键)_第5张图片

 

 (2)keyup():按键抬起触发

DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>按键事件title>
        <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
        script>
        <script>
          $(function(){
               $("input").keyup(function(){
            alert("按键抬起了");
          });
        });
        script>
    head>
    <body>
       <input type="text">
    body>
html>

JQ——事件(鼠标、按键)_第6张图片

 

 按下按键没有警告框,只有按键抬起的时候对话框才会出现。

(3)keydown():按键按下有效

DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>按键事件title>
        <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
        script>
        <script>
          $(function(){
               $("input").keydown(function(){
            alert("按键按下了!");
          });
        });
        script>
    head>
    <body>
       <input type="text">
    body>
html>

JQ——事件(鼠标、按键)_第7张图片

 

 与keypress不同,keydown是一个过程,只有在按键按下的过程中才会有对话框出现,按键抬起对话框立即消失。

你可能感兴趣的:(JQ——事件(鼠标、按键))