Learning jQuery


When jQuery was new (back around 2006–10), it was mighty hard to use JavaScript to rewrite the DOM and get it working consistently in every browser. The jQuery library solved a ton of problems because, under the hood, it had JavaScript functions that took into account almost every bad browser thing that could ruin your day. By using jQuery objects and methods, you could rest easy and be confident that your interactive things would work as intended for just about everybody.

JavaScript has been improved since then, and ES6 JavaScript is far better than all the versions before. Browsers are better now too. Some people question whether we need jQuery at all anymore.

Well, 89.62 percent of the top 10,000 U.S. websites (“top” meaning most traffic) use jQuery today, according to BuiltWith. So you just can’t ignore it.

jQuery Resources

jQuery Cheat Sheet

To specify something, anything, in your HTML:

  • $('.blue') — everything that has a class of “blue”
  • $('#chocolate') — anything with the id “chocolate”
  • $('h2') — every h2 element

When you’ve specified something that way, you’ve created a jQuery object, which automatically has a ton of possible methods, as well as properties.

To apply a jQuery method, such as .hide(), to a jQuery object, such as $('.blue'):

$('.blue').hide();

That hides everything with a class of “blue.” Look up the methods using one of the resources linked above.

Event handlers — you’ll learn about these in any jQuery tutorial. Events are actions initiated by the user, such as scrolling, clicking, and moving the mouse. jQuery can be used to detect an event and then react to it.

Usually you will use event handlers (also called event listeners) together with methods.

Effects are a particular set of jQuery methods that show, hide, or move objects. Show/hide, fadeIn/fadeOut, and slideDown/slideUp are the effects that everyone learns first. They are basic jQuery! Combined with a button and an event handler, effects are used to build accordion menus and other UI elements.

jQuery Plugins

Often there is a jQuery plugin that has already been written and tested to solve a hard problem, such as how to handle scrolling events or how to make a “lightbox”–style slideshow. These useful plugins give us another reason to love jQuery.

A word of warning: Most jQuery plugins are not simple for a beginner. You have to spend time reading the documentation and learning how to use the plugin correctly.

jQuery examples

If you want to see demonstrations of what jQuery can do — with just a few lines of code! — view these examples. These are complete files, not jsFiddles. You can copy and use any of this code. This is a GitHub repo with several nifty example pages.

In addition, here are some of my fiddles with brief jQuery examples:

Don’t forget — the perfect place to look up a jQuery function is the official jQuery site.

Extra Credit Points for Codecademy

On the Course Schedule, I have listed certain Codecademy modules that I want you to complete for JavaScript and jQuery. I am willing to give you extra credit points for completing these modules.

Here’s how it will work: For each module for which you earn a checkmark as shown below, I will add 1 point to your final total of weekly assignment points. (Did you get a 0 or low score for an assignment? Here’s your chance to make it up!) You have an opportunity to get 12 checkmarks for JavaScript and 5 checkmarks for jQuery. Note: You must be logged in with a username I have in my chart, or else you will not get the points. I will not accept checkmarks unless they appear on my chart.

Deadline for checkmarks for JavaScript: 11:59 p.m. on Saturday, Nov. 7.

Deadline for checkmarks for jQuery: 11:59 p.m. on Saturday, Nov. 21.

Checkmarks that appear later will not count.

Codecademy Pupil Tracker

You can’t see this chart — it’s for teachers only. But you CAN see that you have successfully completed a module if you are signed in at Codecademy and you look here for JavaScript or here for jQuery. Only 100% earns a checkmark!