Open In App

jQuery one() Method

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

The jQuery one() method is an inbuilt method that attaches one or more event handlers for the selected element. This also attaches a function to run when the event occurs. This method is named one because whatever event handler attaches to this method will run only once.

Syntax:

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

Parameter: This method accepts three parameters as mentioned above and described below:

  • event: It is a required parameter. It is used to specify one or more events to attach to the elements. If multiple events given then use space to separate them.
  • data: It is an optional parameter. It is used to specify additional data to pass along to the function.
  • function: It is a required parameter. It is used to specify the function to run when the event occurs.

Return Value: This method returns the selected element with the specified event handler. 

Example 1: This example illustrates the use of one() method.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <script src=
    </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>


Output:

Example 2: In this example, we will change the color of the paragraph by using one() method.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <script src=
    </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>


Output:



Last Updated : 07 Jul, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads