首页 > 编程笔记 > JavaScript笔记 > jQuery事件

jQuery click事件详解

单击事件（click），我们在之前已经接触过非常多次了，例如点击某个按钮弹出一个提示框。这里要特别注意一点，单击事件不只是按钮才有，我们可以为任何元素添加单击事件。

举例：为 div 元素添加单击事件 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        div 
        {
            display: inline-block;
            width: 80px;
            height: 24px;
            line-height: 24px;
            font-family:"微软雅黑";
            font-size:15px;
            text-align: center;
            border-radius: 3px;
            background-color: deepskyblue;
            color: white;
            cursor: pointer;
        }
        div:hover {background-color: dodgerblue;}
    </style>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function() {
            $("div").click(function(){
                alert("开玩笑吗？")
            })
        })
    </script>
</head>
<body>
    <div>调试代码</div>
</body>
</html>
预览效果如图 1 所示。
为div添加点击事件
图 1：为 div 添加点击事件
 
这里我们使用 div 元素模拟出一个按钮，并且为它添加了单击事件。我们点击【调试代码】按钮之后，就会弹出提示框。之所以举这个例子，也是给小伙伴们说明一点：我们可以为任何元素添加单击事件。

在实际开发中，为了获得更好的用户体验，我们一般不会使用表单按钮，而更倾向于使用其他元素结合 CSS 模拟出来的按钮，因为表单按钮的外观实在不敢恭维。

举例：自动触发点击事件 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            $("#btn").click(function () {
                alert("欢迎来到新宝库！");
            }).click();
        })
    </script>
</head>
<body>
    <input id="btn" type="button" value="按钮">
</body>
</html>
预览效果如图 2 所示。
自动触发点击事件
图 2：自动触发点击事件

在这个例子中，我们使用 click() 方法自动触发鼠标点击事件。在实际开发中，自动触发事件这个小技巧非常有用，像我们常见的图片轮播效果中就用到了。

所有教程

优秀文章