jQuery Basics

Understanding jQuery

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, and animation much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

Here's how you can start working with jQuery in your web projects:

Adding jQuery to Your Site

First, you need to include jQuery in your website. You can download it or include it directly from a CDN (Content Delivery Network):

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

Document Ready Event

To ensure that your code only runs after the HTML document is ready to be manipulated, use the jQuery document ready event:

$(document).ready(function() {
        console.log('The document is ready!');
    });

Selecting Elements

jQuery simplifies the process of selecting DOM elements. Here`s how you select all <p> elements and apply a function:

$('p').click(function() {
        alert('Paragraph clicked!');
    });

Animating Elements

jQuery makes it easy to animate elements in your web page. Here's an example of fading out a div:

$('#myDiv').fadeOut('slow');

AJAX with jQuery

jQuery provides powerful tools for performing AJAX calls, allowing you to load data asynchronously without refreshing the page:

$.ajax({
        url: 'example.json',
        success: function(data) {
            console.log('Data loaded: ', data);
        }
    });

jQuery's simplicity and power have made it one of the most popular JavaScript libraries in use today. Understanding how to use jQuery effectively can significantly enhance your ability to quickly develop and deploy interactive web pages.

Try it Yourself

Click the buttons to interact with the text below: