Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

jQuery :first Selector

Posted in jQuery Tutorial
Updated on May 19, 2024
By Mari Selvan
👁️ 42 - Views
⏳ 4 mins
💬 1 Comment
jQuery :first Selector

Photo Credit to CodeToFun

🙋 Introduction

In jQuery, selectors are powerful tools that allow developers to target specific elements in the DOM (Document Object Model) efficiently. One such selector is :first, which enables you to select the first element within a set of matched elements. Understanding how to utilize the :first selector can streamline your jQuery code and enhance your ability to manipulate web page elements.

This guide will explore the functionality of the jQuery :first selector with illustrative examples to aid comprehension.

🧠 Understanding :first Selector

The :first selector in jQuery targets the first element within a set of matched elements. It is particularly useful when you want to manipulate or apply actions specifically to the first element in a selection.

💡 Syntax

The syntax for the :first selector is straightforward:

syntax.js
Copied
Copy To Clipboard
$(":first")

📝 Example

  1. Selecting the First Element:

    Suppose you have a list of paragraphs and you want to select the first one. You can use the :first selector as follows:

    index.html
    Copied
    Copy To Clipboard
    <p>First paragraph</p>
    <p>Second paragraph</p>
    <p>Third paragraph</p>
    example.js
    Copied
    Copy To Clipboard
    $("p:first").css("font-weight", "bold");

    This will make the text of the first paragraph bold.

  2. Applying Different Styles to the First Element:

    You can apply different CSS styles to the first element using the :first selector. For example:

    index.html
    Copied
    Copy To Clipboard
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>
    example.js
    Copied
    Copy To Clipboard
    $(".box:first").css("background-color", "lightblue");

    This will set the background color of the first .box element to light blue.

  3. Handling Events on the First Element:

    You can also bind events to the first element using the :first selector. Here's an example where we alert a message when the first button is clicked:

    index.html
    Copied
    Copy To Clipboard
    <button>Button 1</button>
    <button>Button 2</button>
    <button>Button 3</button>
    example.js
    Copied
    Copy To Clipboard
    $("button:first").click(function() {
        alert("First button clicked!");
    });
  4. Manipulating Content of the First Element:

    You can manipulate the content of the first element using jQuery methods. For instance, changing the text of the first paragraph:

    example.js
    Copied
    Copy To Clipboard
    $("p:first").text("New text for the first paragraph");

🎉 Conclusion

The jQuery :first selector provides a convenient way to target and manipulate the first element within a set of matched elements. Whether you need to style, handle events, or manipulate content specifically for the first element, this selector offers a straightforward solution.

By incorporating the :first selector into your jQuery toolkit, you can enhance the interactivity and dynamism of your web pages efficiently.

👨‍💻 Join our Community:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Author

author
👋 Hey, I'm Mari Selvan

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.

Buy me a coffee to make codetofun.com free for everyone.

Buy me a Coffee

Share Your Findings to All

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
We make use of cookies to improve our user experience. By using this website, you agree with our Cookies Policy
AgreeCookie Policy