Prev Next

jQuery Syntax

jQuery syntax is designed to make it easier to perform common tasks in JavaScript. At its core, jQuery uses a simple syntax pattern:

$(selector).action(parameters);

The $ symbol is a shorthand for jQuery, the selector identifies the HTML elements to interact with, and action() is the method that performs the desired operation on those elements.

Basic Syntax

The basic syntax of jQuery follows this structure:

$("#elementId").hide();
  • Selector: Identifies the HTML elements you want to manipulate (e.g., #id, .class, element).
  • Action: Specifies the method to perform (e.g., hide(), show(), click()).
  • Parameters: Optional arguments that define additional functionality (e.g., duration for animations).

Example: Basic jQuery Syntax


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Syntax Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h1 id="header">Welcome to jQuery</h1>
    <button id="hideButton">Hide Header</button>
    <button id="showButton" style="display:none;">Show Header</button>

    <script>
        $(document).ready(function() {
            $("#hideButton").click(function() {
                $("#header").hide();
                $("#hideButton").hide();
                $("#showButton").show();
            });
            $("#showButton").click(function() {
                $("#header").show();
                $("#hideButton").show();
                $("#showButton").hide();
            });
        });
    </script>
</body>
</html>

Explanation: This example demonstrates the basic jQuery syntax. The $(selector).action() pattern is used to hide and show the header and buttons. Clicking "Hide Header" hides the <h1> element and the button itself, while showing the "Show Header" button. Clicking "Show Header" reverses this process.

Key Takeaways

  • Simple Syntax: The $(selector).action() pattern is intuitive and powerful.
  • Selectors: Use selectors to target specific HTML elements for manipulation.
  • Actions: jQuery provides a wide range of methods (e.g., hide(), show(), css(), attr()) to interact with elements.
  • Chaining: You can chain multiple actions together for more concise code.
Prev Next