JQuery之事件操作

来源:互联网 发布:东阳市农村淘宝分布 编辑:程序博客网 时间:2024/05/18 00:48

本文讲一些基本事件操作,包括按钮的单机和双击、文本框获取焦点和失去焦点、鼠标进入和移出div标签。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><script src="//cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><script type="text/javascript">    $(document).ready(function() {        //alert("文档加载完毕!");        $("#zs").click(function() {            $("#p1").html("<font color=red>单机</font>");        });        $("#zs").dblclick(function() {            $("#p1").html("<font color=red>双击</font>");        });        $("#t1").focus(function() {            $("#t1").val("获得焦点");        });        //失去焦点        $("#t1").blur(function() {            $("#t1").val("");        });        $("#d1").mouseover(function() {            $("#d1").html("鼠标移入");        });        //鼠标移出        $("#d1").mouseout(function() {            $("#d1").html("");        });    });</script></head><body>    <input type="button" id="zs" value="zhangsan" />    <p id="p1"></p>    <input type="text" id="t1" />    <hr />    <div id="d1" style="border: 1px solid red; width: 100px; height: 120px">    </div></body></html>
0 0