Archive | Videos

RSS feed for this section

The Designers Learning jQuery screencast consists of quick, easy videos that introduce you to one jQuery concept. Learn jQuery in easily digestible bites!

Episode 3: Adding Content and Moving Content with jQuery

Adding and Moving Content with jQuery

In this video, we’ll take a look at all the different ways of adding content to a page using jQuery, whether we’re just adding some text, or if we’re adding new HTML elements to the page.

We’ll get started with a pretty simple HTML file – just a heading and a few paragraphs of text. To make that go by quickly, we take advantage of the Emmet package for Sublime Text.

Once the HTML document is ready to go, we’ll take a look at adding some text content to the page using a few different jQuery methods:

  • append()
  • prepend()
  • before()
  • after()

Once we learn how to use those, then we learn how to create new HTML elements with jQuery. Then we take a look at some jQuery methods for adding our newly created HTML elements to the page, using:

  • appendTo()
  • prependTo()
  • insertBefore()
  • insertAfter()

Next we learn a nicer way to create new HTML elements with jQuery, making the code more readable when we’re adding classes, id’s, text, and other attributes to the newly created elements.

Finally, we learn how to use these same methods to move existing content around the page so that it shows up in new spots. You can entirely re-arrange your HTML page by moving the content around, wherever you’d like.

Episode 2: jQuery Selectors

jQuery Selectors

Very often, the first thing you’ll do in jQuery is select the element or elements that you’d like to work with. jQuery selectors allow us to get specific and target just the right element(s).

jQuery borrows many of its selectors from CSS, so many of them will look pretty familiar to a designer who knows a bit of CSS. In this video, we’ll take a look at the most commonly used jQuery selectors. These include:

  • ID Selector
  • Class Selector
  • Tag or Element Selector
  • Universal Selector
  • Attribute Selector
  • Hierarchy Selector
  • Direct Descendent Selector
  • Visibility Selectors
  • Form Element Selectors

You’ll wrap your selectors in quotes – you can use either single or double quotes. I prefer to use single quotes since my fingers are lazy and it saves me from having to press the Shift key. That might sound silly, but when you’re typing hundreds of lines of JavaScript, it makes a big difference.

Now, this list of selectors is hardly exhaustive – there are dozens more types of jQuery selectors, but these are by far the most common and you’ll find that just knowing these will cover most cases where you need to select elements.

Join me again next week when we’ll cover adding content to your HTML pages with jQuery.

Episode 1: Installing jQuery

Installing jQuery

So you’d like to use jQuery in your project. Well, to get started, you’ll have to install jQuery to your project.

First up, we’ll go over the project structure we’ll be using throughout this podcast. The same project structure gets used for all the exercises throughout the jQuery for Designers book as well.

Then we have to decide which branch, or version, of jQuery we’ll use. We’ve got two choices – jQuery 1.x and jQuery 2.x. The difference between them is that the 2.x branch has dropped support for Internet Explorer 6, 7, and 8. If you’re working on a project where you need your site to work in one of these older versions of IE, then you’ll need to stick to the 1.x branch of jQuery. Otherwise, you can use the 2.x branch of jQuery.

Then we have to decide do we want the compressed, production version of jQuery? Or the uncompressed, development version. You’ll almost always want to use the compressed, production version. The uncompressed version is handy for learning – when you get far enough along with your JavaScript skills you can read through it to understand how the library works. It’s all nicely commented and well-organized.

Once we’ve got the right file downloaded, we’ll step through including jQuery in our project and getting it attached to our HTML page.

Then we’ll take a look at an alternative to downloading jQuery, which is using a CDN, or Content Delivery Network. We’ll take a look at some of the advantages and disadvantages of using a CDN-hosted copy of jQuery