Skip to content
Related Articles

Related Articles

jQuery | first() with Examples

View Discussion
Improve Article
Save Article
  • Difficulty Level : Basic
  • Last Updated : 12 Jan, 2022

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: 
 

 


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!