看程序学jquery8-事件

示例 1 : 加载

<script src="http://how2j.cn/study/jquery.min.js"></script>
 
<script>
  $(document).ready(function(){
    $("#message1").html("页面加载成功");
   
  });
  $(function(){
    $("#img").load(function(){
      $("#message2").html("图片加载成功");
    });
  });
 
</script>
  
<div id="message1"></div>
<div id="message2"></div>
 
<img id="img" src="http://how2j.cn/example.gif">
试一下

示例 2 : 点击

<script src="http://how2j.cn/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>
试一下

示例 3 : 键盘

<script src="http://how2j.cn/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>

示例 4 : 鼠标

<script src="http://how2j.cn/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>
试一下

示例 5 : 焦点

<script src="http://how2j.cn/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" >

示例 6 : 改变

<script src="http://how2j.cn/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事件" >

示例 7 : 提交

<script src="http://how2j.cn/study/jquery.min.js"></script>
  
<form id="form" action="http://how2j.cn/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>

示例 8 : 绑定事件

<script src="http://how2j.cn/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>

示例 9 : 触发事件

<script src="http://how2j.cn/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>