Learn jQuery: A Simple Guide

How jQuery Simplifies JavaScript

jQuery is a tool that makes it easier to work with JavaScript by offering simple methods for selecting and changing parts of a web page. This means you can add interactivity and make changes to your website using fewer lines of code.

                                
// In regular JavaScript
const menu = document.getElementById('menu');
const closeMenuButton = document.getElementById('close-menu-button');
closeMenuButton.addEventListener('click', () => {
    menu.style.display = 'none';
});
// With jQuery
$('#close-menu-button').on('click', () => {
  $('#menu').hide();
});
                              

Making Sure jQuery Runs at the Right Time

JavaScript code needs to run only after the web page has fully loaded. Using jQuery’s `$(document).ready()` function ensures that your code runs only after the page is ready, avoiding errors and unexpected behavior.

                                
$(document).ready(function() {
  alert('The page is fully loaded!');
});
                              

Naming jQuery Variables

In jQuery, variables that store jQuery objects usually start with a `$` symbol. This helps to easily identify which variables are related to jQuery.

                                
// A variable for a jQuery object
const $myButton = $('#my-button');
                              

Adding jQuery to Your Website

To use jQuery, include it in your HTML file by adding a script tag. You can use a link to a jQuery file hosted online.

Making Elements Slide Up and Down

The `.slideToggle()` method makes an element slide up or down, switching between showing and hiding. It’s a simple way to create smooth animations.

                                
// Clicking '#menu-button' will make '#menu' slide up or down.
$('#menu-button').on('click', () => {
  $('#menu').slideToggle();
});
                              

Making Elements Fade In

The `.fadeIn()` method makes an element gradually appear. It’s useful for smoothly revealing hidden content.

                                
// Clicking '#menu-button' will make '#menu' fade in.
$('#menu-button').on('click', () => {
  $('#menu').fadeIn();
});
                              

Making Elements Fade Out

The `.fadeOut()` method makes an element gradually disappear. This is handy for smoothly hiding content.

                                
// Clicking '#menu-button' will make '#menu' fade out.
$('#menu-button').on('click', () => {
  $('#menu').fadeOut();
});
                              

Instantly Showing Elements

The `.show()` method instantly makes an element visible. This is useful when you need to reveal something without any animation.

                                
// Clicking '#show-menu-button' will instantly show '#menu'.
$('#show-menu-button').on('click', () => {
  $('#menu').show();
});
                              

Switching Between Show and Hide

The `.toggle()` method alternates between showing and hiding an element each time it is triggered. It’s a quick way to toggle visibility.

                                
// Clicking '#menu-button' will toggle '#menu' between visible and hidden.
$('#menu-button').on('click', () => {
  $('#menu').toggle();
});
                              

Fading Elements in and Out

The `.fadeToggle()` method alternates between fading an element in and out. It’s useful for smooth transitions between visible and hidden states.

                                
// Clicking '#menu-button' will fade '#menu' in or out.
$('#menu-button').on('click', () => {
  $('#menu').fadeToggle();
});
                              

Sliding Elements Up

The `.slideUp()` method makes an element gradually slide up and disappear. It’s a smooth way to hide elements with a sliding motion.

                                
// Clicking '#menu-button' will slide '#menu' up and hide it.
$('#menu-button').on('click', () => {
  $('#menu').slideUp(500);
});
                              

Instantly Hiding Elements

The `.hide()` method instantly hides an element. It’s useful for quickly removing elements from view without animation.

                                
// Clicking '#hide-menu-button' will instantly hide '#menu'.
$('#hide-menu-button').on('click', () => {
  $('#menu').hide();
});
                              

Sliding Elements Down

The `.slideDown()` method makes an element gradually slide down and appear. It’s a smooth way to show elements with a sliding effect.

                                
// Clicking '#menu-button' will make '#menu' slide down and appear.
$('#menu-button').on('click', () => {
  $('#menu').slideDown();
});
                              

Adding Event Listeners with jQuery

The `.on()` method in jQuery allows you to attach event listeners to elements, such as clicks or key presses, and define what should happen when those events occur.

                                
// Handle a click event
$('#menu-button').on('click', () => {
  $('#menu').show();
});
// Handle a keyup event
$('#textbox').on('keyup', () => {
  $('#menu').show();
});
// Handle a scroll event
$('#menu-button').on('scroll', () => {
  $('#menu').show();
});
                              

Using Event Objects

When an event occurs, jQuery provides an event object to the event handler. This object contains useful information about the event, like the type of event and the element that triggered it.

                                
// Hides '#menu' when it is clicked.
$('#menu').on('click', event => {
  $(event.currentTarget).hide();
});
                              

Getting the Triggered Element

The `event.currentTarget` property in jQuery refers to the specific element that triggered the event, even if multiple elements share the same event listener.

                                
// Hides the specific '.blue-button' that was clicked.
$('.blue-button').on('click', event => {
  $(event.currentTarget).hide();
});
                              

Chaining Event Listeners

You can chain multiple `.on()` methods together to handle different events on the same element. This allows for handling multiple interactions in a concise manner.

                                
// Handling mouseenter and mouseleave events on '#menu-button'.
$('#menu-button').on('mouseenter', () => {
  $('#menu').show();
}).on('mouseleave', () => {
  $('#menu').hide();
});
                              

Adding Events with `.on()`

The `.on()` method attaches event handlers to elements. It requires two parameters: the type of event (like 'click') and the function to execute when the event occurs.

                                
// Clicking '#login' shows '#login-form'.
$('#login').on('click', () => {
  $('#login-form').show();
});
                              

Animating CSS Properties

The `.animate()` method allows you to create animations by changing CSS properties over time.

                                
// Hovering over '.tile' animates its text color and background color.
$('.tile').on('mouseenter', () => {
  $('.tile-text').animate({
    color: '#FFFFFF',
    backgroundColor: '#000000'
  }, 300); // Animation lasts 300 milliseconds
});
                              

Changing CSS with `.css()`

The `.css()` method sets or changes CSS properties for selected elements. It can be used to modify styles directly.

                                
// Changing the font size of '.tile-text'.
$('.tile-text').css('font-size', '20px');
                              

Setting Inline Styles with jQuery

Inline styles can be set using jQuery’s `.css()` method, which directly affects an element's style attributes.

                                
// Change the background color of '#menu'.
$('#menu').css('background-color', 'red');
                              

Getting CSS Values

You can use `.css()` to retrieve the current value of a CSS property. This is useful for checking and manipulating styles based on current values.

                                
// Getting the current color of '.tile-text'.
const color = $('.tile-text').css('color');
console.log(color);
                              

Selecting Elements by ID

Use the `#` symbol followed by the ID name to select a specific element by its ID. This is a quick way to target a single element.

                                
// Selecting an element with ID 'menu'.
$('#menu').show();
                              

Selecting Elements by Class

Use the `.` symbol followed by the class name to select elements with a specific class. This targets multiple elements that share the same class.

                                
// Selecting all elements with the class 'tile'.
$('.tile').hide();
                              

Selecting Elements by Tag

Use the tag name directly to select all elements of a specific type. This is useful for targeting elements like `

` or `

                                
// Selecting all paragraph elements.
$('p').css('color', 'blue');
                              

Finding Child Elements

Use the `.find()` method to select child elements within a parent element. This helps narrow down the scope of selection to specific parts of the DOM.

                                
// Finding child elements with class 'tile-text' inside '#menu'.
$('#menu').find('.tile-text').show();
                              

Finding Parent Elements

The `.parent()` method allows you to select the parent element of a specified child. This is useful for traversing up the DOM hierarchy.

                                
// Selecting the parent of '#tile'.
$('#tile').parent().css('background-color', 'yellow');
                              

Selecting Descendants

Use the space between selectors to select descendant elements. This targets elements nested within a specific parent.

                                
// Selecting '.tile-text' inside '#menu'.
$('#menu .tile-text').hide();
                              

Selecting Sibling Elements

Use the `+` symbol to select the next sibling element or `~` to select all following siblings. This is useful for targeting elements at the same level in the DOM.

                                
// Selecting the next sibling of '#current' with class 'next-sibling'.
$('#current').next('.next-sibling').show();