jQuery one() Method
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 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 parameter as mentioned above and described below:
- event: It is 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 optional parameter. It is used to specify additional data to pass along to the function.
- function: It is 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:
Please Login to comment...