Skip to content
Related Articles

Related Articles

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.

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:

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :