Open In App

jQuery first() Method

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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

 



Last Updated : 04 Jul, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads