jQuery Intro

In your scripts file, you should always start with the following:

This makes sure your page is fully loaded before any further interaction takes place.

Selectors

Selectors are how you select what element on your page that you want to “interact” with (element referring to the part of you HTML, an image for example). This interaction might be a click, hover or something else. You can select elements in a number of ways, most commonly you’ll use the element based on its class or id.

Selecting by class

Selecting by id

There are a number of ways that you can select elements, refer to this link for some more examples: jQuery Selectors

Events

Once you’ve selected your element, the next thing to do is bind an event to it. An “event” is basically what user interaction do you want to respond to. The most common events are click and hover events. After you define the event you need to provide a function that will happen when that event occurs. which looks like this:

You can find more events here: jQuery Events

What happens next?

The body of the function (that is what occurs on the provided event) is completely up to you. This may range from a single line to show or hide something on the page, to a far more complex function spanning many many lines.

To simply hide something, you can do the following:

Some of the most basic built-in functionality in jQuery are:

There are also counterparts to each of these which will show it if it’s hidden and hide it if it’s showing:

Changing Classes

jQuery makes it easy to change the css classes on our elements in a number of ways.

We can add or add a class to an element like this:

And remove one like this:

There is also a toggle class function to remove a class if it is on the object and add it if it is: