The Lodge

Table of Contents For The Series

Learning jQuery From Scratch

#01: Welcome to the Learning jQuery Course

Welcome! The goal of this course is to take you, you beautiful front end developer you, from someone with very little or no jQuery or JavaScript knowledge and up you to someone who is quite comfortable working with and writing jQuery and JavaScript.

#02: File Setup / Linking Up jQuery

In this screencast I cover the absolute bare minimum setup for utilizing jQuery on a “real” website. We have an index.html file with the basic HTML5 structure stubbed out. jQuery is included as a <script></script> and then we perform a super simple jQuery task.

#03: Select and Do

One way to think of jQuery is the “Select and Do” library. jQuery is particularly good at selecting elements on the page (stuff in the DOM) and then doing something. Select and do. Select and do.

#04: jQuery Selectors are CSS3 Selectors

In CSS, you can select all <h1></h1> elements on the page with this:

#05: All About DOM Ready

We’ve talked a good bit about selectors. A jQuery selector like $(“h1″) will select all <h1></h1> elements on the page. But what about… when it doesn’t? Here’s an example of when that selector would fail:

#06: jQuery Selector Extensions

jQuery can select anything that CSS3 can select. But it doesn’t stop there! There are a number of additional selectors that jQuery offers (via the Sizzle selector engine) that are pretty darn useful sometimes. For instance, CSS has attribute selectors that allow you to select an element based on any arbitrary attribute the element might […]

#07: Do!

As we’ve talked about, jQuery can be thought of as a “select and do” library. We’ve talked about selecting quite a bit, so now let’s talk about some doings. Remember that pattern basically looks like this:

#08: preventDefault, stopPropagation, and return false

It came up very briefly in the last video: how do you stop the browser from jumping down when you click a hash link? That is the default browser behavior, and fortunately, with JavaScript, we can tell the browser not to do that.

#09: Getters and Setters

The concept of getters and setters in JavaScript is just one of those things you should understand. They are nice in jQuery because the API is so consistent that once you get it, you can pretty much just guess how it is going to work for various methods. At the most basic level…

#10: Explicit vs Implicit Iteration

Another concept video! This is “just one of those thing” you need to understand in jQuery. It is actually a bit unique to jQuery, in that other popular JavaScript libraries in the past have not done it this way.

#11: Animating with jQuery

If you first dabbled with jQuery many years ago, it might have been it’s ability to do animation. That was perhaps one of jQuery’s first big draws. These days, CSS can do animation as well with fairly decent browser support and it tends to be more performant, so it’s less relevant. However, if you need […]

#12: Callback Functions

Everybody’s favorite: concept video time! Callbacks are an important concept in JavaScript. They are functions that are called when an action has completed running. Then lend structure and timing to our code. Take for example the animation we used in the last video. Animations take time to run. What if you want to have something […]

#13: Intro To Events

Handling events is another one of those big reasons to use jQuery. There are some cross browser differences in how to do, which jQuery normalizes into one simple API, while enforcing some best practices. There is essentially one method you need to know: .on() – it works like this: $(“button”).on(“click”, function() { // do something […]

#14: Custom Events

Since we just talked about events, now is a good time to mention custom events. All the events that we’ve talked about so far are “real” events so to speak. Events that originate in the DOM based on real things that happen, like a click or key press. These events can be “triggered” artificially in […]

#15: Chaining

We’ve talked a number of times now about little touches in the jQuery API that are really quite nice. Everything is well considered and refined. Chaining definitely falls into that category. Once you start using it and understand it, it feels extremely natural, like there should be no other way. The main idea is that […]

#16: Intro To Ajax

Ajax ranks pretty high up there on the biggest reasons to use jQuery. Not only does jQuery fix the cross-browser issues, it makes the syntax very easy to use and understand. In this video we take a stab at explain what Ajax is at all. We look at a form element, which when submitted, does […]

#17: POSTing with Ajax

We talked about GET in the last video but didn’t give POST enough attention. So I thought we’d do that here. The big difference with POST is that you nearly always need to pass along data with the request. That data can take many forms, but it might just be an object you have around. […]

#18: Ajax and JSON

There is a good chance that out in the “real world”, the #1 thing you use Ajax for is sending and receiving JSON data. And for good reason. JSON doesn’t presume any visual structure like HTML does. It’s just raw data and you can do with it what you will, which is often put it […]

#19: It’s Just JavaScript

One thing I want to make absolutely clear in this series is that none of us should be anti vanilla JavaScript. “Vanilla” meaning “raw” or “native” JavaScript. JavaScript that runs in the browser without any frameworks or libraries or anything else. In fact, if this isn’t obvious, jQuery itself is written in vanilla JavaScript. It […]

#20: Data! data-*! .data()! .attr(data-*)!

Data. In the world of jQuery, it’s all about bits of information that are attached directly to elements (rather than, say, a variable with onus only to itself). There is a ton of ways to save bits of data on the “client side” (in the browser, rather than the server). There is variables of any […]

#21: Just Change Classes!

If you learn any major bit of front end architecture philosophy from this series, learn this one. Just change classes. In this screencast we start going down a major rabbit hole of JavaScript only to stop, catch ourselves, and use CSS instead. When you are changing something visually, that is the domain of CSS. Not […]

#22: The Need for Templating

Templating is an important part of working with JavaScript applications. It’s fairly common that data is available to you, but not in a format that is ready display on screen. That is commonly (but not always) data in the JSON format. That’s a great format for working with in JavaScript, but we still need to […]

#23: Templating with Handlebars

We left off in the last video with a bit of a tangled mess. All in one block of JavaScript we were mixing data retrieval, display and business logic, and templating. In this video we’re going to start breaking those things up to get us on our way to more organized, maintainable, and understandable code. […]

#24: Templating with Underscore

We covered templating with Handlebars in the last video. But Handlebars isn’t the only templating solution on the block. In this video we’ll use the templating available in Underscore. Why? Well one reason is that you might already be using Underscore on your project. It’s an extremely popular library because, like jQuery, it provides a […]

#25: Getting Organized!

We’ve done a pretty good job so far of getting organized. Getting our HTML broken out in a template was a big step. We’re longer muddying the waters so to speak. Our different bits of functionally in JavaScript are broken up into discreet sections, making things easier to understand and maintain. I know we’ve been […]

#26: Using a jQuery Plugin from the Wild

Everyone has seen a super cool jQuery plugin out there on the wild, wild internet right? Perhaps you only became interested in actually learning more about jQuery and JavaScript by finding a jQuery plugin and trying to use it on your own site. No shame of course. I’m sure that’s about how it happened for […]

#27: Building a Simple jQuery Plugin

Now that we’ve looked at using jQuery plugins, it is absolutely worth understanding how to build them as well. We already briefly touched on the fact that you can extend the native jQuery object if you want to. Just like: $.myFunction = function() { console.log(“I am a function on the jQuery object.”); }; // call […]

#28: Building a More Complex Plugin

Now that we understand the basics of plugin development, we can dig a little deeper. Because ultimately a plugin is a function, it provides us the scope we need to organize. Remember when we got our house in order when we were learning about templating? We can use some of those same concepts in a […]

#29: Getting Production Ready

We’re going to bring it back out to a normal text editor in this screencast, just as we started. In a “real world” situation, these things are true: You want to break up your JavaScript into as many small files as makes sense to you. Just like we broke up the JavaScript code into small […]

#30: Series Wrapup

You made it! Thanks so much for taking the course. I hope you’ve learned enough about jQuery and JavaScript that your confidence level in it has risen and you know there is nothing to be afraid of. Remember, the jQuery documentation is decent and, if nothing else, is a good reference for each of the […]

*May or may not contain any actual "CSS" or "Tricks".