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。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。