Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

jQuery Basic

jQuery Ajax Events

jQuery Ajax Methods

jQuery Keyboard Events

jQuery Keyboard Methods

jQuery Form Events

jQuery Form Methods

jQuery Mouse Event

jQuery Mouse Methods

jQuery Event Object

jQuery Fading

jQuery Document Loading

jQuery Traversing

jQuery Utilities

jQuery Property

jQuery HTML

jQuery CSS

jQuery Miscellaneous

jQuery jQuery() Method

Posted in jQuery Tutorial
Updated on May 20, 2024
By Mari Selvan
👁️ 17 - Views
⏳ 4 mins
💬 1 Comment
jQuery jQuery() Method

Photo Credit to CodeToFun

🙋 Introduction

The jQuery() method, also commonly referred to as $(), is the core function in jQuery that enables you to select and manipulate HTML elements, handle events, and create animations. Mastering this method is fundamental to leveraging the power of jQuery for building dynamic and interactive web pages.

This guide provides an in-depth look at the jQuery() method with practical examples to illustrate its various applications.

🧠 Understanding jQuery() Method

The jQuery() method is a versatile function that accepts a wide range of arguments, such as CSS selectors, HTML strings, DOM elements, and even functions. This flexibility allows it to perform different tasks depending on the input provided.

💡 Syntax

The syntax for the jQuery() method is straightforward:

syntax.js
Copied
Copy To Clipboard
$(selector, [context])

Parameters:

  • selector: A string containing a CSS selector, HTML string, DOM element, or jQuery object.
  • context (optional): Specifies a DOM element to use as the context for the selection.

📝 Example

  1. Selecting Elements:

    The most common use of the jQuery() method is to select HTML elements using CSS selectors.

    index.html
    Copied
    Copy To Clipboard
    <p id="intro">Hello, world!</p>
    <p class="greeting">Hi there!</p>
    example.js
    Copied
    Copy To Clipboard
    // Selects the element with id "intro"
    var intro = $("#intro");
    
    // Selects all elements with class "greeting"
    var greetings = $(".greeting");
  2. Manipulating the DOM:

    Once elements are selected, you can manipulate them. For example, changing the text of a paragraph:

    index.html
    Copied
    Copy To Clipboard
    <p id="intro">Hello, world!</p>
    example.js
    Copied
    Copy To Clipboard
    $("#intro").text("Welcome to jQuery!");

    This will change the paragraph's text to Welcome to jQuery!.

  3. Handling Events:

    The jQuery() method simplifies event handling. For instance, attaching a click event to a button:

    index.html
    Copied
    Copy To Clipboard
    <button id="clickMe">Click me</button>
    example.js
    Copied
    Copy To Clipboard
    $("#clickMe").click(function() {
      alert("Button was clicked!");
    });

    When the button is clicked, an alert will be displayed.

  4. Creating New Elements:

    You can create new HTML elements using the jQuery() method by passing an HTML string.

    example.js
    Copied
    Copy To Clipboard
    var newDiv = $("<div>", { "class": "container", "text": "New Content" });
    $("body").append(newDiv);

    This creates a new div with the class container and appends it to the body with the text "New Content".

  5. Document Ready Function:

    The jQuery() method can also be used to ensure that the DOM is fully loaded before executing JavaScript code.

    example.js
    Copied
    Copy To Clipboard
    $(document).ready(function() {
      console.log("DOM is fully loaded");
    });

    This ensures that the code inside the function runs only after the DOM is ready.

  6. Chaining Methods:

    jQuery allows you to chain methods for more concise and readable code.

    example.js
    Copied
    Copy To Clipboard
    $("#intro").css("color", "blue").text("Welcome to jQuery!").fadeIn();

    This changes the text color, updates the text, and fades in the element.

  7. Selecting Multiple Elements:

    You can select multiple elements by separating selectors with commas.

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

    This applies bold styling to both paragraphs.

🎉 Conclusion

The jQuery() method is the cornerstone of jQuery, offering a powerful and flexible way to select and manipulate HTML elements, handle events, and create dynamic web content. By mastering this method, you can significantly enhance your ability to create responsive and interactive web pages.

Whether you are selecting elements, handling events, or manipulating the DOM, the jQuery() method is an indispensable tool in your web development toolkit.

👨‍💻 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