jQuery first() method

As its name implies, the first() method returns the first element of the selected elements. If we need to get the last element, we can use the last() method.

Syntax

This method doesn't accept any argument. The selector in the above syntax is mandatory to be specified.

Let's see some of the illustrations to understand how to use the first() method.

Example1

In this example, we are using the first() method to get the first paragraph element from the set of elements. We are using the p as the selector, so the method will return the first paragraph element.

<html>

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<script>
$(document).ready(function() {
$("button").click(function(){
$("p").first().css("background-color", "lightblue");
});
});
</script>
</head>

<body id = "main">

<h2> It is an example of using the first() method. </h2>
<div style = "border: 1px solid blue;">
div element
</div>
<p style = "border: 1px solid blue;">
This is a paragraph
</p>
<p style = "border: 1px solid blue;">
Second paragraph element
</p>

<h3 style = "border: 1px solid blue;">
Heading h3
</h3>
<p style = "border: 1px solid blue;">
Another paragraph element
</p>

<p> Click the following button to get the first paragraph element. </p>
<button> Click me </button>
</body>

</html>

Test it Now

Output

After the execution of the above code, the output will be -

After clicking the given button, the output will be -

Example2

In this example, we are using the first() method to get the first span element from the set of elements.

<html>

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<script>
$(document).ready(function() {
$("button").click(function(){
$("div span").first().css("background-color", "lightblue");
});
});
</script>
<style>
div {
border: 1px solid blue;
}
</style>
</head>

<body id = "main">

<h2> It is an example of using the first() method. </h2>
<div>
<span> span1 </span>
</div>
</br>
<div>
<span> span2 </span>
</div>
</br>
<div>
<span> span3 </span>
</div>
</br>
<div>
<span> span4 </span>
</div>
<p> Click the following button to get the first span element. </p>
<button> Click me </button>
</body>

</html>

Test it Now

Output

After the execution of the above code, the output will be -