JQuery之事件操作

felixour

于 2016-08-02 16:45:33 发布

阅读量179

点赞数

分类专栏： jquery 文章标签： jquery

本文链接：https://blog.csdn.net/baidu_30129309/article/details/52095724

版权

jquery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文讲一些基本事件操作，包括按钮的单机和双击、文本框获取焦点和失去焦点、鼠标进入和移出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>