Jquery事件

{事件}

1、ready 在DOM加载完成时运行的代码

    //定义a()和b()二个方法
    function a(){
        alert("JS方式");
    }
    function b(){
        alert("JQUERY方式");
    }

1)使用JS方式加载a()和b()二个方法

    window.onload = function(){
        a();
    }
    window.onload = function(){
        b();
    }

2)使用jQuery方式加载a()和b()二个方法

    $(document).ready(function(){
        a();
    }); 
    $(document).ready(function(){
        b();
    }); 

3)使用jQuery最简方式加载a()和b()二个方法

    $(function(){
        a();
    });
    $(function(){
        b();
    });

4)将js方式的onload与jquery方式的ready对比，看哪个执行快

    window.onload = function(){
        alert("传统");
    }
    $(function(){
        alert("现代");
    });

2、change

1）当select标签触发onchange事件,显示选中option的value和innerHTML属性的值

    $("#city").change( function(){ 
        var $option = $("#city option:selected");
        var value = $option.val();
        var text = $option.text();
        alert(value+":"+text);
    } );

3、focus 获取光标焦点事件

• html

  <input type="text" value="加载页面时获取光标并选中所有文字" size="50"/>
  

1）加载页面时获取光标并选中所有文字

    $(function(){
        //光标定位文本框
        $(":text").focus();
        //选中文本框的所有文本
        $(":text").select();
    }); 

4、keyup 按键弹起

1）当按键弹起时，显示所按键的unicode码

    $(function(){
        //IE浏览器会自动创建event这个事件对象，那么程序员可以根据需要来使用该event对象
        $(document).keyup(function(){
            //获取按钮的unicode编码
            var code = event.keyCode; 
            alert(code);
        });
    });

5、mousemove 鼠标移动

• html
• 
  X=
  
  
  Y=

1）显示鼠标移动时的X和Y座标

    $(function(){
        $(document).mousemove(function(){
            var x = event.clientX;
            var y = event.clientY;
            $("#xID").val(x);
            $("#yID").val(y);
        });     
    });

6、mouseover mouseout 鼠标移进、移出事件

• html

  <table border="2" align="center" width="80%" id="tableID">
      <tr>
          <td>张三</td>
          <td>男</td>
          <td>22</td>
      </tr>
      <tr>
          <td>李四</td>
          <td>男</td>
          <td>24</td>
      </tr>
      <tr>
          <td>王五</td>
          <td>男</td>
          <td>26</td>
      </tr>
      <tr>
          <td>周六</td>
          <td>男</td>
          <td>28</td>
      </tr>
  </table>
  
  <hr/>
  
  <img height="120px" src="../images/zgl.jpg" style="position:absolute;left:30%;border-style:dashed;border-color:white"/>
  <img height="120px" src="../images/lb.jpg" style="position:absolute;left:60%;border-style:dashed;border-color:white"/>
  

1）鼠标移到某行上，某行背景变色

    $("table tr").mouseover(function(){
        $(this).css("background-color","inactivecaption");
    }); 

2）鼠标移出某行，某行还原

    $("table tr").mouseout(function(){
        $(this).css("background-color","white");
    });

3）鼠标移到某图片上，为图片加边框

    $("img").mouseover(function(){
        $(this).css("border-color","red");
    });

4）鼠标移出图片，图片还原

    $("img").mouseout(function(){
        $(this).css("border-color","white");
    });

7、submit 当表单提交前检测

• html

  <form action="06_mouseover_mouseout.html" method="post">
      用户名：<input type="text"/>
      <input type="submit" value="表单提交"/>
  </form>
  

1）当表单提交前检测

    $("form").submit(function(){
        var flag = false;
        //获取文本框的中内容
        var name = $(":text").val();
        //去二边的空格
        name = $.trim(name);
        //如果没有填内容
        if(name.length == 0){
            alert("用户名必填");
            //将光标定位于文本框中
            $(":text").focus();
            //清空文本框中的内容
            $(":text").val("");
        }

        return flag;
    });

2）浏览器加载web页面时触发

    $(function(){
        //将光标定位于文本框中
        $(":text").focus();
    });