This course is out of date and does not reflect our standards or industry best practices. We now recommend you take the Complete Intro to Web Development, v2 course.
Table of Contents
Part 1: jQuery & History of DOM Scripting
History of jQueryIntroduction to Karl and his contributions to the jQuery Project What is DOM Scripting and book recommendations. Karl explains how painful DOM Scripting was to do in the past which gave birth to jQuery (and other DOM Scripting libraries). He also gives us an example of feature testing.
Core Concepts of jQueryFind something, do something Why jQuery uses the $ character as its main function. Overview of the $() Function, passing a selector string into this main function creates an “array-like” collection of elements. What you can do with jQuery and what it does best.
Part 2: Developer Tools
Browser SupportIntroduction and the pain of testing in multiple browsers Use Modernizr for feature testing and polyfills (i.e. backfill canvas support with VML) Audience gives Karl a feature to research browser support with
Code SharingCode sharing tools like jsbin and jsfiddle can be useful for quickly mocking something up or getting help over IRC and forums TextMate can be enhanced with bundles and Karl demos a few he finds helpful. He also lists a few popular code editors for both Mac and PC.
Developer ToolsFirefox Firebug and Chrome Developer Tools Karl demos some of his favorite Chrome Dev. Tools tricks ($0, color format, keyboard shortcuts, save to css file, etc) Enabling Safari Developer Menu IE8+ (F12) Developer Tools and options for IE7 and lower *bonus info* Karl’s favorite compliment! :)
Functions and ArgumentsFunctions - naming them, returning values and assigning returns arguments object to allow for unlimited arguments to be passed to a function
Coding ExerciseExercise (using arguments and for loop). *Try coding the answer!* Live coding of answer using arguments, += and a for loop Audience throws a wrench into Karl’s answer by passing in a string number and Karl shows how to solve it using parseFloat. These basics should be familiar to you in jQuery-land
Named and Anonymous FunctionsReturning functions (multiplication example) Named vs. Anonymous functions List of uses for anonymous functions and code example using named function vs. anonymous in as a callback Audience asks, “Do elements have a .ready?” Karl says “no” but explains about load Using immediately invoked function expressions (aka IFFE pronounced “iffy”) for protecting variable scope Using anonymous functions as a callback
Part 4: jQuery Selectors and Traversal
Find somethingFinding with jQuery using CSS selectors and explanation of selectors like + and ~ Attribute selectors [attr...], custom form selectors and misc selectors
Traversal methods: Up, Sideways, and DownMoving up - parent and closest methods (with a note about usefulness of nextUntil) Moving sideways - siblings, next, prev Moving down - children, find
Traversal methods: FilteringFiltering - filter (with selector or function), not, slice (code demo), eq Context - second param in jQuery (Karl recommends just using find), add, andSelf, end Check - hasClass, is (returns boolean)
Demonstration of traversal methodsDemos of traversal with next, nextUntil (also Karl fixes his demo), nth-child, firstchild, last-child, last, eq. Audience asks if nth-child works in IE through jQuery. Karl answers “yes” and explains why
LoopingLooping - implicit iteration vs explicit iteration using each this refers to current element
jQuery Selecting TipsStore selectors in variable for later use (can prefix variables with $ to identify it as a jQuery collection) Use .length to check if something exists, but often times you don’t need to because jQuery operates on empty collections without throwing an error Avoid custom selectors (slow) and alternatives Selector methods like first, eq, and slice are better than pseudo selectors like :first
Part 5: Q & A