jQuery first() Method

Last Updated : 04 Jul, 2023

The first() is an inbuilt function in jQuery which is used to select the first element from the specified elements.
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.
jQuery code to show the working of this function:
Code #1:

html

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

Here, you can also choose by selecting “id” or “class” of the selected element.
Code #2:

html

<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> 