JQuery one()用法及代码示例

jQueryone()method 是一种内置方法，为所选元素附加一个或多个事件处理程序。这还附加了一个在事件发生时运行的函数。此方法被命名为 one，因为附加到此方法的任何事件处理程序都只会运行一次。

用法:

$(selector).one(event, data, function)

参数：该方法接受如上所述和如下所述的三个参数：

event:这是必需的参数。它用于指定一个或多个附加到元素的事件。如果给出多个事件，则使用空格将它们分开。
data:它是一个可选参数。它用于指定要传递给函数的附加数据。
function:这是必需的参数。它用于指定事件发生时要运行的函数。

返回值：此方法返回具有指定事件处理程序的选定元素。

示例 1：此示例说明了one()方法的使用。

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").one("click", function () {
                $(this).animate({
                    fontSize: "+=14px"
                });
            });
        });
    </script>
    <style>
        .para {
            margin: auto;
            width: 80%;
            border: 3px solid green;
            padding: 10px;
            text-align: justify;
        }
        .gfg {
            font-size: 40px;
            color: green;
            font-weight: bold;
            text-align: center;
        }
        .geeks {
            font-size: 17px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="para">
        <div class="gfg">GeeksforGeeks</div>
        <div class="geeks">
            A computer science portal for geeks
        </div>
        <p>Prepare for the Recruitment drive of 
            product based companies like Microsoft, 
            Amazon, Adobe etc with a free online placement 
            preparation course. The course focuses on 
            various MCQ's & Coding question likely to be 
            asked in the interviews & make your upcoming 
            placement season efficient and successful.
        </p>
        <p>An extensive Online Test Series for GATE 2019 
            to boost the preparation for GATE 2019 aspirants. 
            Test series is designed considering the pattern 
            of previous years GATE papers and ensures to 
            resemble with the standard of GATE. This Test Series 
            will help the aspirants track and improve the 
            preparation through questions of various 
            difficulty levels.
        </p>
    </div>
</body>
</html>

输出：

示例 2：在此示例中，我们将使用one()方法更改段落的颜色。

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").one("click", function () {
                $(this).css("color", "red");
            });
        });
    </script>
    <style>
        .para {
            margin: auto;
            width: 80%;
            border: 3px solid green;
            padding: 10px;
            text-align: justify;
        }
        .gfg {
            font-size: 40px;
            color: green;
            font-weight: bold;
            text-align: center;
        }
        .geeks {
            font-size: 17px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="para">
        <div class="gfg">GeeksforGeeks</div>
        <div class="geeks">
            A computer science portal for geeks
        </div>
        <p>Prepare for the Recruitment drive of product
           based companies like Microsoft, Amazon, Adobe 
           etc with a free online placement preparation 
           course. The course focuses on various MCQ's 
           & Coding question likely to be asked in the 
           interviews & make your upcoming placement 
           season efficient and successful.
        </p>
        <p>An extensive Online Test Series for GATE 2019 
            to boost the preparation for GATE 2019 aspirants. 
            Test series is designed considering the pattern 
            of previous years GATE papers and ensures to resemble 
            with the standard of GATE.This Test Series will help 
            the aspirants track and improve the preparation 
            through questions of various difficulty levels.
        </p>
    </div>
</body>
</html>

输出：

相关用法

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