jQuery Basics

jQuery is the most popular JavaScript Library. Using a library allows you to quickly write code that is compatible across a range of browsers.

It should be noted that recently browsers and JavaScript have evolved to make it possible to do a lot of the things jQuery is good at without jQuery. You may see posts and other writing recommending what is referred to as “vanilla” JavaScript. Check out the You Might not Need jQuery site to see a comparison. Learning vanilla JS is great, will help you do other things with JS and save your users downloading the jQuery library.

However, it does involve writing more, and more complex code, and is a bit longer to learn at first. So we’re using jQuery as an entry point in this class. If you want a lighter weight (smaller filesize) version try the Zepto library.

To learn JavaScript more fully, try a combination of sites like Wes Bos’s Beginner JavaScript, LinkedIn Learning JavaScript courses, YouTube videos and Stack Overflow for questions. Learning to use these types of resources together will help throughout your career.

About this Post

This page outlines jQuery code to write in a .js file. For more info on getting the jQuery library set up and ready to go see this jQuery Setup post.

Comments

Typing two slashes // tells JavaScript to ignore what comes after it on the line. This lets you add comments to your code to help document what it does. You’ll see those below.

// this is a comment and is ignored by JS

When Your Code Runs

There are two basic times when code runs:

1. Immediately (or at least as soon as the html file loads).
2. When the user does something.

Immediately

To run the code as soon as the document is ready, just put it inside the document ready function. Here is an example where all elements with the .accordion-item class are hidden on page load.

$(document).ready(function() {
  // do stuff immediately when DOM is ready
  $('.accordion-item').hide();
});

When the User Does Something

When the user does something in the browser it’s called an event.To respond to the user doing something, like clicking a button, we use what is called an event handler. An event handler is a function(). In the example below we’re responding to the user clicking an element with the .accordion-header class.

.click()

$(document).ready(function() {
  // run when they click the 
/ //.accordion-header element
  $('.accordion-header').click(function() {
    // write code here for what happens on click
    return false;
});

Note, that when responding to clicks, the return false is there to prevent the page from reloading and scrolling back to the top.

There are other event handlers:

• mouse event handlers
• keyboard event handlers
• form event handlers
• browser events (like scrolling and resizing)

and more.

Updating the DOM

There are a few ways you can update the dom.

Add/Remove/Toggle Class

This is a common way to add interactivity. You can also take advantage of CSS styling, transition and animation. addClass() and removeClass() do what you expect.

.addClass()

.removeClass()

$('.myElement').addClass('active');

$('.myElement').removeClass('active');

.toggleClass()

Toggle class adds the class if it is not there and removes it if it is there.

$('.myElement').toggleClass('active');

Show/Hide/Toggle Element

These three functions allow you to show and hide elements without removing them from the page.

.hide()

$('.myElement').hide();

.show()

$('.myElement').show();

.toggle()

$('.myElement').toggle();

Like above toggle hides if it’s showing and shows if it’s hidden.

You can add a number of milliseconds (1000 = 1 second) to change how long the show and hide take.

$('.myElement').show(400);
$('.myElement').hide(400);
$('.myElement').toggle(400);

Add/Remove Element

These functions allow you to dynamically add new elements to the page or remove existing elements. You can add the elements based on the user clicking, automatically or from data.

.add()

$('.myElement').add("p");

.remove()

$('.myElement').remove();

There are more, these are just some of the basics.

Resources

jQuery Documentation. This is the official documentation for jQuery.

50 Common jQuery functions. This is more than you’ll need at first, but gives short explanations of what 50 of the most common functions do.

Advanced jQuery

jQuery can also be used to do things like:

• Animation
• Complex UI elements
• read and write data (AJAX)

Those are not covered in this post.