jquery
  1. jquery-html-css-introduction
PreviousNext

Introduction to JQuery for HTML/CSS

JQuery is a fast, small, and feature-rich JavaScript library that makes it easier to manipulate HTML and CSS elements on a webpage. It is a popular choice for developers who want to add interactivity and dynamic features to their websites.

Syntax

JQuery utilizes a simplified syntax that is easy to understand and use. To select an HTML element and perform an action on it, the syntax is:

$(selector).action();

Here, selector is used to select the HTML element(s) and action() is used to perform the desired action on the element(s).

Use

JQuery is used to make dynamic and interactive changes to HTML/CSS elements on a webpage. It is used to perform animations, handle events (like click and hover), and perform AJAX requests, among other things. It simplifies the process of manipulating HTML and CSS elements, making it much easier for developers to create engaging webpages.

Example

Here is an example of using JQuery to show and hide an HTML element on button click:

HTML:

<button id="myButton">Toggle Text</button>
<p id="myText">Hello, this is some text to hide/show.</p>

JQuery:

$(document).ready(function(){
    $("#myButton").click(function(){
        $("#myText").toggle();
    });
});


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery AJAX POST Example</title>
    <!-- Include jQuery library -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

   <button id="myButton">Toggle Text</button>
<p id="myText">Hello, this is some text to hide/show.</p>

    <script>
      $(document).ready(function(){
    $("#myButton").click(function(){
        $("#myText").toggle();
    });
});
    </script>
</body>
</html>
Try Playground

In this example, we use the toggle() function to show or hide the myText element on button click. It is a simple and effective way to add interactivity to a webpage.

Summary

JQuery is a powerful JavaScript library that makes it easy to manipulate HTML and CSS elements on a webpage. With its simplified syntax, it offers a simpler and more efficient way to add dynamic functionality to a website. It is a popular choice for developers who want to create engaging and interactive webpages.

Serializehtml()
Published on: