jQuery click() 事件方法

jQuery 事件click()方法用于快速将点击处理程序附加到选定的元素。当click()方法在元素上调用时，它要么触发点击事件，要么（如果提供了函数）将该函数附加到点击事件发生时执行。

语法

以下是 jQuery 事件click()方法的语法：

$(selector).click(function)

参数

此方法接受一个可选参数“function”，如下所述：

function (可选) - 一个可选参数，指定点击事件发生时要运行的函数。

返回值

此方法将点击处理程序附加到选定的元素，但不返回值。

示例 1

以下程序演示了 jQuery 事件click()方法的用法：

<html>
    <head>
        <script type = "text/javascript" src = "https://tutorialspoint.com/jquery/jquery-3.6.0.js">
      </script>
    </head>
<body>
    <p>Click on the below button to see a pop-up alert message.</p>
    <button>Click me!</button>
    <script>
        $('button').click(function(){
            alert("You clicked on button");
        });
    </script>
</body>
</html>

输出

执行上述程序后，浏览器屏幕上将显示一个按钮。如果用户点击该按钮，将触发一个弹出警报：

示例 2

在以下示例中，我们使用 jQuery click()方法将点击处理程序附加到指定的 div 元素。当用户点击“div”元素时，浏览器屏幕上将显示一个弹出警报消息：

<html>
    <head>
        <script type = "text/javascript" src = "https://tutorialspoint.com/jquery/jquery-3.6.0.js">
      </script>
    </head>
<body>
    <div>Click on me!</div>
    <span></span>
    <script>
        $('div').click(function(){
            alert("You clicked on div element.");
        });
    </script>
</body>
</html>

输出

在上述程序中，当用户点击显示的消息时，浏览器屏幕上将出现一个弹出警报：

示例 3

在下面的示例中，我们使用 jQuery click()方法将点击处理程序附加到button元素。当点击按钮时，一条消息将出现在它旁边：

<html>
    <head>
        <script type = "text/javascript" src = "https://tutorialspoint.com/jquery/jquery-3.6.0.js">
      </script>
    </head>
<body>
    <p>Click on the below button to print some message</p>
    <button>Click me!</button>
    <span></span>
    <script>
        $('button').click(function(){
            document.querySelector('span').innerHTML = "Welcome to TutorialsPoint....!";
        });
    </script>
</body>
</html>

输出

点击按钮前：

点击按钮后：

jquery_ref_events.htm

打印页面