Intro

So jQuery was created as a sort of shorthand for JavaScript. It simplifies the coding and makes it easier to read. Let's start by explaining that all jQuery statements begin with $ (dollar sign).

In JavaScript, in order to "import" an HTML element in for processing, most of the time we're going to use querySelector or querySelectorAll. We could use getElementById or getElementByClass, but querySelector is more useful and universal. For example, if we're trying to import an <>h1> element, with querySelector we could call:

• document.querySelector('h1'); - returns the first <h1> element
• document.querySelectorAll('h1'); - returns all of the <h1> elements

But with jQuery, we would call:

• $('h1'); // this would return all of the <h1> elements

Once you have your element selected in JavaScript, you can the utilize all of the jQuery methods listed here. For example, say we wanted to change the text color of our <h1>. We could use the css method, like so:

• $("h1") . css("color", "blue"); - this would change the text color to blue

Now we can be more specific in our element selection. We can use ID's, Classes, and any other form of selection that querySelector uses:

• $(".important"); // select's all items with the class = important
• $("#temp"); // select's the item with an ID of temp
• $("div p"); // select's all of the <p> elements that reside in a <div> element

Now, jQuery will return ALL matching elements when looking for a match. To single out one, or more, (but not all) of the elements to match, you can use the methods such as first, last, first-of-type, nth-child, and so on. There are many ways to find elements and the jQuery methods are listed here.

Manipulating Styles

Manipulating styles with jQuery is achieved by using the CSS method. Info on the CSS Methods can be found here. The basic syntax is:

• $(selector) . css(property, value);
  • - selector: the HTML element you have selected for manipulation
  • - property: the css property you wish to utilize
  • - value: the css property you wish to change

Now, if you just define the property:

• $(selector).css(property);

• console.log($("h1") . css("color"));
• or,
• console.log($("h1") . css("font-size"));

And if you want to change a value, just add a new property. For example, change our <h1> text color to red, just use:

• console.log($("h1") . css("color", "red"));

Adding/Removing Styles

Now normally, you don't want to be setting and changing styles in JavaScript, either by Js code, or jQuery code. Remember, HTML for basic structure, CSS for styling, and JavaScript for functionality.

What we mean is that normally you would create your styling in CSS and then add or remove that defined style in JavaScript. Now we've already seen how to do this with vanilla JavaScript, and jQuery makes it even easier.

Let's define our class in CSS, we'll call it h1Style, and it will look a little like this:

• .h1Style {
  • font-size: 10rem;
  • color: red;
• }

• $("h1") . addClass("h1Style");

• $("h1") . removeClass("h1Style");

Multiple Styles

You can also manipulate multiple styles in one call. If we want to add or remove more than one class, we would do it like so:

• $("h1") . addClass("style1 style2 style3"); // or removeClass

Has a Class

We can also check to see if an element has a class assigned to it by using hasClass, like so:

• $("h1") . hasClass("className");