jQuery first() Method
The jQuery first() method selects and returns the first element from a set of matched elements. It’s commonly used to manipulate or retrieve the first element within a group, ensuring that operations only apply to the first match.
Syntax:
$(selector).first()Here selector is the main class of all the elements.
Parameters: It does not accept any parameter.
Return value: It returns the first element out of the selected elements.
Example: In this example, the first() method is used to select the first <div> element on the page. It applies a light green background color specifically to that first selected <div>.
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("div").first().css("background-color",
"lightgreen");
});
</script>
</head>
<body>
<h1>Welcome to GeeksforGeeks !!!</h1>
<div style="border: 1px solid green;">
<p>This is the first statement.</p>
</div>
<br>
<div style="border: 1px solid green;">
<p>This is the second statement.</p>
</div>
<br>
<div style="border: 1px solid green;">
<p>This is the third statement.</p>
</div>
<br>
</body>
</html>
In the above code, the background-color of the first “div” element get changed.
Output:
Example: In this example we use jQuery’s first() method to target the first <div> with the class “main” and changes its background color to light green when the page finishes loading.
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$(".main").first().css("background-color",
"lightgreen");
});
</script>
</head>
<body>
<h1>Welcome to GeeksforGeeks !!!</h1>
<div style="border: 1px solid green;">
<p>This is the first statement.</p>
</div>
<br>
<div class="main" style="border: 1px solid green;">
<p>This is second statement.</p>
</div>
<br>
<div class="main" style="border: 1px solid green;">
<p>This is the third statement.</p>
</div>
<br>
</body>
</html>
In the above code the elements with first “main” class get highlighted.
Output:
