<script src="http://127.0.0.1/study/jquery.min.js"></script>
 
<script>
  $(function(){
      $("#b").click(function(){
          $("#message").html("单击按钮");
      });
      $("#b").dblclick(function(){
          $("#message").html("双击按钮");
      });
  });
</script>
  
<div id="message"></div>

<button id="b">测试单击和双击</button>

<script src="http://127.0.0.1/study/jquery.min.js"></script>
  
<script>
var order = 0;
var clearTimer=null;
$(function(){
  $("#i").keydown(function(e){
     var selector = "keydown";
 
     show(selector,e,$(this).val());
  });
 
  $("#i").keypress(function(e){
     var selector = "keypress";
     show(selector,e,$(this).val());
  });
 
  $("#i").keyup(function(e){
     var selector = "keyup";
     show(selector,e,$(this).val());
  });
   
});
 
function show(selector,e,inputvalue){
     clearTimeout(clearTimer);
     action(selector);
     key(selector,e);
     value(selector,inputvalue);
     clearTimer= setTimeout(clear,4000);
}
 
function action(selector){
    $("#"+selector+"Action").css("background-color","green");
    $("#"+selector+"Action").html("顺序: " + (++order ) );
}
 
function value(selector,value){
    $("#"+selector+"Value").html(value);
}
 
function key(selector,e){
    $("#"+selector+"Key").html(e.which);
}

function clear(){
  order = 0;
  $("tr#action div").css("background-color","red");
  $("tr div").html("");
}
 
</script>
<style>
tr#action div{
  border: 1px solid black;
  height:50px;
  background-color:red;
}

tr#value div,tr#key div{
 
  height:50px;
  background-color:#d1d1d1;
}
 
td{
 width:25%;
}
</style>
输入框：<input id="i"> 
<table width="100%">
<tr>
  <td></td>
  <td>keydown</td>
  <td>keypress</td>
  <td>keyup</td>
</tr>
<tr id="action">
  <td>行为</td>
  <td><div id="keydownAction"></div></td>
  <td><div id="keypressAction"></div></td>
  <td><div id="keyupAction"></div></td>
</tr>
 
<tr id="key">
  <td>按键</td>
  <td><div id="keydownKey"></div></td>
  <td><div id="keypressKey"></div></td>
  <td><div id="keyupKey"></div></td>
</tr>
 
<tr id="value">
  <td>取值</td>
  <td><div id="keydownValue"></div></td>
  <td><div id="keypressValue"></div></td>
  <td><div id="keyupValue"></div></td>
</tr>
 
</table>

<script src="http://127.0.0.1/study/jquery.min.js"></script>

<script>
$(function(){
$("#downup").mousedown(function(){
   $(this).html("鼠标按下");
});
$("#downup").mouseup(function(){
   $(this).html("鼠标弹起");
});
var moveNumber  =0;
var enterNumber  =0;
var leaveNumber  =0;
var overNumber  =0;
var outNumber  =0;

var enterNumber1  =0;
var overNumber1  =0;

var leaveNumber1  =0;
var outNumber1  =0;

$("#move").mousemove(function(){
  $("#move span.number" ).html(++moveNumber);
});
$("#enter").mouseenter(function(){
  $("#enter span.number" ).html(++enterNumber);
});
$("#leave").mouseleave(function(){
  $("#leave span.number" ).html(++leaveNumber);
});
$("#over").mouseover(function(){
  $("#over span.number" ).html(++overNumber);
});
$("#out").mouseout(function(){
  $("#out span.number" ).html(++outNumber);
});

$("#enter1").mouseenter(function(){
  $("#enter1 span.number" ).html(++enterNumber1);
});
$("#over1").mouseover(function(){
  $("#over1 span.number" ).html(++overNumber1);
});

$("#leave1").mouseleave(function(){
  $("#leave1 span.number" ).html(++leaveNumber1);
});

$("#out1").mouseout(function(){
  $("#out1 span.number" ).html(++outNumber1);
});

});

</script>  

<style>
div{
  background-color:pink;
  margin:20px;
  padding:10px;
}

.subDiv{
  background-color:green;
  margin:10px;
}

.parentDiv{
  background-color:pink;
  height:80px;
}

table{
 width:100%;
 border-collapse:collapse;
  table-layout:fixed;
}
td{
  border: 1.5px solid #d1d1d1;
  vertical-align:top;
  padding:20 0;
}

</style>
<table >
  <tr>
    <td width="100px">事件</td>
    <td>效果演示</td>
  </tr>
  <tr>
    <td>mousedown <br />
    mouseup<br /></td>
    <td>
	  <button id="downup" style="margin-left:20px">鼠标按下弹起测试</button>	</td>
  </tr>
  <tr>
    <td>mousemove<br />
      mouseenter<br />
	  mouseover<br />
	  mouseleave<br />
    mouseout</td>
    <td>
		<div id="move">mousemove 当鼠标进入元素，每移动一下都会被调用 次数<span class="number">0</span></div>
		<div id="enter">mouseenter 当鼠标进入元素，调用一下，在其中移动，不调用 次数<span class="number">0</span></div>
		<div id="over">mouseover 当鼠标进入元素，调用一下，在其中移动，不调用 次数<span class="number">0</span></div>
		<div id="leave">mouseleave 当鼠标离开元素，调用一下 次数<span class="number">0</span></div>
  <div id="out">mouseout 当鼠标离开元素，调用一下 <span class="number">0</span></div>  </tr>
  <tr>
    <td>mouseenter<br />
    mouseover</td>
    <td>
	
	<div id="enter1" class="parentDiv">
	mouseenter 经过其子元素不会被调用 次数<span class="number">0</span> 
	
	   <div class="subDiv">div中的子元素	   </div>
	</div>
	
		<div id="over1" class="parentDiv">
	mouseover  经过其子元素会被调用 次数<span class="number">0</span> 
	
	   <div class="subDiv">div中的子元素	   </div>
	</div>	</td>
  </tr>
  <tr>
    <td>mouseleave<br />
      mouseout    </td>
    <td>
	<div id="leave1" class="parentDiv">
	mouseleave 经过其子元素不会被调用 次数<span class="number">0</span> 
	
	   <div class="subDiv">div中的子元素	   </div>
	</div>
 	
	<div id="out1" class="parentDiv">

	mouseout 经过其子元素会被调用 次数<span class="number">0</span> 
	
	   <div class="subDiv">div中的子元素	   </div>
	</div>	</td>
  </tr>
</table>

<script src="http://127.0.0.1/study/jquery.min.js"></script>

<script>
$(function(){
 $("input").focus(function(){
 	$(this).val("获取了焦点");
 });
 
  $("input").blur(function(){
 	$(this).val("失去了焦点");
 });

});

</script>  

<style>

</style>

<input type="text" >

<input type="text" >

<script src="http://127.0.0.1/study/jquery.min.js"></script>

<script>
$(function(){
 $("#input1").change(function(){
 	var text = $(this).val();
	$("#message").html("input1的内容变为了"+text);
 });
 
});

</script>  

<style>

</style>

<div id="message"></div>

<input id="input1" type="text" >
<br>
<input size="50" id="input2"type="text" value="只有当input1失去焦点的时候，才会触发change事件" >

<script src="http://127.0.0.1/study/jquery.min.js"></script>
 
<form id="form" action="http://127.0.0.1/study/login.jsp">
账号 : <input name="name" type=""> <br>
密码: <input name="password" type=""><br>
<input type="submit" value="登陆">
 
</form>
  
<script>
$(function(){

   $("#form").submit(function(){
      alert("提交账号密码");
   });
});
 
</script>

<script src="http://127.0.0.1/study/jquery.min.js"></script>
  
<script>
  $(function(){
      $("#b").on("click",function(){
          $("#message").html("单击按钮");
      });
      $("#b").on("dblclick",function(){
          $("#message").html("双击按钮");
      });

  });
</script>
   
<div id="message"></div>
 
<button id="b">测试单击和双击</button>

<script src="http://127.0.0.1/study/jquery.min.js"></script>
  
<script>
  $(function(){
      $("#b").on("click",function(){
          $("#message").html("单击按钮");
      });
      $("#b").on("dblclick",function(){
          $("#message").html("双击按钮");
      });
     $("#b").trigger("dblclick");
  });
</script>
   
<div id="message"></div>
 
<button id="b">测试单击和双击</button>