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 neveropen !!!</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 neveropen !!!</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:
