JQuery笔记10

事件 1

1.加载

页面加载有两种方式表示

1. $(document).ready();
2. $(); 这种比较常用
   图片加载用load()函数

<script>
  $(document).ready(function(){
    $("#id1").html("页面加载成功");
   
  });
  $(function(){
    $("#img").load(function(){
      $("#id2").html("图片加载成功");
    });
  });
 
</script>

2.点击

1. click() 表示单击
2. dblclick() 表示双击
   注: 空白键和回车键也可以造成click事件，但是只有双击鼠标才能造成dblclick事件

<script>
  $(function(){
      $("#b").click(function(){
          $("#message").html("单击按钮");
      });
      $("#b").dblclick(function(){
          $("#message").html("双击按钮");
      });
  });
</script>
   
<div id="message"></div>
 
<button id="b">测试单击和双击</button>

3.焦点

1. focus() 获取焦点
2. blur() 失去焦点

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

4.改变

change()内容改变
注： 对于文本框，只有当该文本失去焦点的时候，才会触发change事件。

5.绑定事件

以上所有的事件处理，都可以通过on() 绑定事件来处理

$("selector").on("event",function);

<script>
  $(function(){
      $("#b").on("click",function(){
          $("#message").html("单击按钮");
      });
      $("#b").on("dblclick",function(){
          $("#message").html("双击按钮");
      });
 
  });
</script>