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.
<!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.
<!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: