WebDevGrad: JavaScript

What is jQuery?

jQuery is a fast, small, and feature-rich JavaScript library that simplifies things like HTML document traversal and manipulation, event handling, animation, and Ajax interactions for rapid web development. With jQuery, you can achieve many common tasks in web development with fewer lines of code and better cross-browser compatibility, making it a popular tool among developers. At its core, jQuery provides a simple and consistent API that makes it easier to work with JavaScript across different browsers. It enables developers to write less code and do more with less effort. The main features of jQuery include:

DOM Manipulation: Easily select and modify elements, including content and attributes.
Event Handling: Simplifies event handling, such as clicks, mouse movements, and keyboard actions.
Animations and Effects: Provides a wide range of built-in methods for animations like fading, sliding, and custom effects.
AJAX Support: Simplifies making asynchronous requests to servers without reloading the page.
Cross-Browser Compatibility: Ensures your code works across all major browsers, reducing the need to write browser-specific code.

Although vanilla JavaScript can accomplish the same tasks, jQuery offers several benefits that have made it a popular choice for developers:

Simplicity: jQuery's syntax is concise and easy to understand, making it quick to learn and implement.
Cross-Browser Compatibility: jQuery takes care of the complexities of cross-browser compatibility, which can be time-consuming and error-prone with vanilla JavaScript.
Wide Range of Plugins: jQuery has a vast ecosystem of plugins that extend its functionality, allowing developers to add features quickly.
Community Support: Being one of the most widely used JavaScript libraries, jQuery has a large community that provides tutorials, documentation, and support.

Despite newer JavaScript frameworks like React, Vue, and Angular gaining traction in recent years, jQuery still remains relevant, especially for simple websites, legacy projects, or when you need a fast and straightforward solution.

Setting up jQuery

You can download JQuery from here and then do one of the following:

Link the JQuery file in your HTML with<script src="path/to/jquery.min.js"></script>
Install with npm in your terminal with npm instal jquery
Link to the CDN in your head element with <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

With the second option, you will need to import jQuery at the top of your JavaScript files:

import $ from 'jquery';

It is important to remember that it is considered bad practice to run jQuery code before the HTML page is fully loaded. Running jQuery code before the DOM is ready can lead to errors or unexpected behavior because the elements you're trying to interact with might not be available yet. To ensure that your jQuery code runs after the document has loaded, use the following structure:

        
$(document).ready(function() {
  // Your jQuery code goes here
});

This ensures that the code inside the $(document).ready() function will only execute after the DOM is fully loaded, preventing issues where jQuery tries to interact with elements that haven't been rendered yet.

Element Selection

Syntax	What it selects
`$`	The shorthand for jQuery, so jQuery("a") works equally well.
`$("a")`	All anchor elements.
`$(":header")`	All headers.
`$("a:first")`	The first anchor tag.
`$("a:last")`	The last anchor tag.
`$(".className")`	Use dot notation to select a class,
`$("#id")`	Use the hash to select an ID.
`$("p>a")`	Select all anchor links that are direct children of a paragraph.
`$(var).parent()`	The parent element.
`$(var).children()`	All children 1 level down.
`$(var).children("p")`	Returns only children that are paragraph elements.
`$(var).next()`	The next sibling element.
`$(var).prev()`	The previous element.
`$(var).siblings()`	All siblings.
`$("p").filter(".intro")`	Only paragraph elements that have the class of intro.

Editing Elements

Syntax	What it does
`$(var).css("backgroundColor")`	Queries a style property.
`$(var).css("backgroundColor", "red")`	Changes a property style in-line.
`$(var).html()`	Gets the HTML of the variable.
`$(var).html("<h1>Hi!</h1>")`	Replaces the HTML of a variable.
`$(var).text("new text")`	Add new text to a variable.
`$(var).append(var2)`	Append something to the bottom of a variable.
`$(var).remove()`	Remove a variable.
`$(var).empty()`	Deletes contents of a variable.
`$(var).addClass("className")`	Adds a class, this is the better way of changing CSS.
`$(var).removeClass("className")`	Remove a class.
`$(var).toggleClass("className")`	Toggles a class on and off.
Events - Own Page
`$(var).on("click", function() {})`	On click event.
`.mouseenter` and `.onmouseleave`	Mouse hover events.
Transitions - Own page
`.hide()` and `.show()`	Hides and shows elements. The durations can be fast, medium, slow or number of ms.
`.toggle()`	Works like an on/off button.
`.slideDown()`, `.slideUp()`, `.slideToggle()`	Slide reveal.
`.fadeIn()`, `.fadeOut()`, `.fadeToggle()`	Fade reveals.
`.fadeTo()`	Makes an element transparent. It takes 2 parameters; the speed in ms and opacity (0=hidden).
Method Chaining - Own Page
`$(var).addClass("1").removeClass("2")`	You can chain methods and events like this.
This - Own Page
`$('p').click(function() {$(this).slideToggle('slow');});`	You can use the keyword this so you do not need to keep repeating the variable.