jQuery的常用事件

2019-01-28 本文已影响0人 wangfanghua

一名android开发的jQuery：事件

在jQuery中，大多数的DOM事件都有一个方法，挺好的，相对于原生js来说让android开发者入手变得非常的快捷。
效果图：

TIM图片20190128162029.png

点击事件(click)

这个和android中的OnCilck差不多。

我们先写一个Button按钮

<div style="margin: 25px">
    <button class="btn btn-outline-primary" >点击事件</button>
</div>

然后我们开始写事件

$(document).ready(function(){
    //点击事件
    $(".btn-outline-primary").click(function () {
        alert("点击事件提示")
    });
});

当我们点击Button的时候我们会弹出一个提示框。

双击事件(dblclick)

 //双击事件
$(".btn-outline-primary").dblclick(function () {
    alert("双击点击事件")
});

鼠标移入事件(mouseenter)

 //鼠标放入事件
$(".btn-outline-primary").mouseenter(function () {
    alert("双击移入事件")
});

鼠标移出事件(mouseleave)

 //鼠标移出事件
$(".btn-outline-primary").mouseenter(function () {
    alert("移出事件")
});

焦点获取事件和失去焦点事件focus()和blur()

<div style="margin: 25px;width: 200px;">
<input type="text" class="form-control" id="name" placeholder="请输入">
</div>

常用的一个功能就是给用户输入信息的视觉反馈

当点击输入框时，颜色变为深色，完成后变回原来的样式

//当获取焦点的事件 
$(".form-control").focus(function () {
    $(this).css({
        "background-color":"#999999"
    });
});
//当失去焦点
$(".form-control").blur(function () {
    $(this).css({
        "background-color":"#ffffff"
    });
})

一些常用的点击事件分享。

附上代码，直接跑。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
    <script>
        $(document).ready(function () {
            //点击事件
            $(".btn-outline-primary").click(function () {
                alert("点击事件提示")
            });
            //双击事件
            $(".btn-outline-primary").dblclick(function () {
                alert("双击点击事件")
            });
            //鼠标放入事件
            $(".btn-outline-primary").mouseenter(function () {
                alert("鼠标放入事件");
            });
            //鼠标移出事件
            $(".btn-outline-primary").mouseleave(function () {
                alert("鼠标移出事件")
            });
            /*
            * 这是四种常用的事事件
            * 当然还有mousedown()，mouseup()，hover()，focus()，blur()
            * */
            //当获取焦点的事件
            $(".form-control").focus(function () {
                $(this).css({
                    "background-color":"#999999"
                });
            });
            //当失去焦点
            $(".form-control").blur(function () {
                $(this).css({
                    "background-color":"#ffffff"
                });
            })
        });
    </script>
    <title>jQuery的事件Demo</title>
</head>
<body>
    <div style="margin: 25px">
        <button class="btn btn-outline-primary" >点击事件</button>
    </div>
    <div style="margin: 25px;width: 200px;">
        <input type="text" class="form-control" id="name" placeholder="请输入名称">
    </div>
</body>
</html>