jquery
  1. jquery-introduction
PreviousNext

Introduction to JQuery

jQuery is a popular JavaScript library that allows you to simplify and streamline your JavaScript code. It makes working with HTML documents, animations, and AJAX much easier and user-friendly.

Syntax

The basic syntax of jQuery is to select an element and perform an action on it. Here is a simple example of this syntax:

$(document).ready(function() {
    $("p").click(function() {
        $(this).hide();
    });
});

In this example, we are selecting all p elements and adding a click event listener to them. When a p element is clicked, jQuery hides it.

Use

jQuery is primarily used to enhance the functionality of HTML/CSS web pages and web applications. It offers a range of powerful and user-friendly functions that can simplify complex tasks, such as DOM manipulation, event handling, and AJAX requests.

Example

Here is an example of using jQuery to create an image slideshow:

<html>
    <head>
        <title>My Image Slideshow</title>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <script>
            $(function() {
                var i = 0;
                var images = ['image1.jpg', 'image2.jpg', 'image3.jpg'];

                $("#slideshow").css("background-image", "url(images/" + images[i] + ")");

                setInterval(function() {
                    i++;
                    if (i === images.length) {
                        i = 0;
                    }
                    $("#slideshow").fadeOut("slow", function() {
                        $(this).css("background-image", "url(images/" + images[i] + ")");
                        $(this).fadeIn("slow");
                    });
                }, 5000);
            });
        </script>
    </head>
    <body>
        <div id="slideshow"></div>
    </body>
</html>
Try Playground

In this example, we are using jQuery to create an image slideshow that cycles through a series of images every five seconds. We use the jQuery fadeIn() and fadeOut() functions to create a smooth animation effect when the images change.

Summary

jQuery is a powerful JavaScript library that provides a range of useful functions and tools for working with HTML documents, animations, and AJAX requests. It simplifies complex tasks and can make your JavaScript code more streamlined, efficient, and user-friendly. Try it out for your next web project!

jQuerySyntax
Published on: