JQuery click()用法及代码示例

jQuery click()是一个内置方法，用于启动单击事件或附加一个在单击事件发生时运行的函数。

用法:

$(selector).click(function);

参数：

它接受一个可选参数“function”，用于在单击事件发生时运行。

jQuery 示例展示 click() 方法的用法原理：

示例 1：在下面的代码中，没有函数传递给此方法。

HTML


<!DOCTYPE html>
<html>
<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <!-- jQuery code to show the working of this method -->
    <script>
        $(document).ready(function () {
            $("p").click();
        });
    </script>
    <style>
        p {
            display: block;
            width: 300px;
            padding: 20px;
            font-size: 30px;
            border: 2px solid green;
        }
    </style>
</head>
<body>
    <!-- click on this method -->
    <p onclick="alert('paragraph was clicked')">
        This is a paragraph.
    </p>
</body>
</html>

输出：

示例 2：在下面的代码中，函数被传递给此方法。

HTML


<!DOCTYPE html>
<html>
<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script>
        // jQuery code to show the working of this method
        $(document).ready(function () {
            $("p").click(function () {
                $(this).fadeOut();
            });
        });
    </script>
    <style>
        p {
            display: block;
            width: 370px;
            padding: 25px;
            font-size: 25px;
            border: 2px solid green;
        }
    </style>
</head>
<body>
    <!-- click on this paragraph and 
        the paragraph will disappear -->
    <p>Click inside this block and
        whole block will disappear !!!
    </p>
</body>
</html>

输出：

相关用法

注：本文由纯净天空筛选整理自kundankumarjha大神的英文原创作品 jQuery click() Method。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。