Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

jQuery | first() with Examples

  • Difficulty Level : Basic
  • Last Updated : 13 Feb, 2019

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.

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

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>
  
<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 chose by selecting “id” or “class” of the selected element.
Code #2:




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