A book for jQuery developers who have surpassed the introductory concepts

jQuery Enlightenment was written to express, in short-order, the concepts essential to intermediate and advanced jQuery development. Its purpose is to instill in you, the reader, practices that jQuery developers take as common knowledge. Each chapter contains concepts essential to becoming a seasoned jQuery developer.

This book is intended for three types of readers. The first is someone who has read introductory books on jQuery and is looking for the next logical step. The second type of reader is a JavaScript developer, already versed in another library, now trying to quickly learn jQuery. The third reader is myself, the author. I crafted this book to be used as my own personal reference point for jQuery concepts. This is exactly the type of book I wish every JavaScript library had available.

Cody Lindley

Cody Lindley is a front-end/JavaScript developer and recovering Flash developer. He has an extensive background working professionally (16+ years) with HTML, CSS, JavaScript, and client-side performance techniques as it pertains to web development. If he is not wielding client-side code he is likely toying with interface/interaction design or front-end application architecture. When not sitting in front of a computer, it's a sure bet he is hanging out with his wife & three boys in Meridian, Idaho. In his spare time Cody is working towards being a "One Dollar Apologist" and enjoys defending the evidence for a classical Christian world-view with reason and empathy.

  • Preface
    • jQuery semantics
    • How the book is structured
    • More code, less words
    • Why Oh Why did I use alert() for code examples?
    • Color coding
    • Completely grok jQuery text() before reading this book
    • What is JS Bin and why do code examples use it?
  • Chapter 1 - Core jQuery
    • Base concept behind jQuery
    • The concept, behind the concept, behind jQuery
    • How to check the current jQuery version
    • jQuery requires HTML run in standards mode or almost standards mode
    • Include all CSS files before including jQuery
    • Using a hosted version of jQuery
    • Executing code when the DOM is ready, but before window.onload
    • Executing jQuery code when the browser window is completely loaded
    • Execute jQuery code when DOM is parsed, without using ready()
    • Use the $ alias without fear of conflicts
    • Grokking jQuery chaining
    • Breaking the chain with destructive methods
    • Using destructive jQuery methods and exiting destruction using end()
    • The jQuery function is multifaceted
    • Grokking when the keyword this refers to DOM elements
    • Extract elements from a wrapper set use them directly without jQuery
    • Checking to see if the wrapper set is empty
    • Creating an alias by renaming the jQuery object itself
    • Using .each() when implicit iteration is not enough
    • Elements in jQuery wrapper set returned in document order
    • Determining context used by the jQuery function
    • Create an entire DOM structure, including DOM events, in a single chain
  • Chapter 2 - Selecting
    • Custom jQuery filters can select elements, when used alone
    • Grokking the :hidden and :visible filter
    • Using the is() method to return a boolean value
    • You can pass jQuery more than one selector expression
    • Determining anything is selected by checking wrapper set .length
    • Create your own custom filters for selecting elements
    • Differences between filtering by numeric order vs. DOM relationships
    • Selecting elements by id when the value contains meta-characters
    • Stacking selector filters
    • Nesting selector filters
    • Grokking the :nth-child() filter
    • Selecting elements by searching attribute values using regular expressions
    • Difference between selecting direct children vs. all desendants
    • Selecting direct child elements when a context is already set
  • Chapter 3 - Traversing
    • Difference between find() and filter() methods
    • Passing filter() a function instead of an expression
    • Traversing up the DOM
    • Traversing methods accept CSS expressions as optional arguments
  • Chapter 4 - Manipulation
    • Creating, operating, and adding HTML on the fly
    • Grokking the index() method
    • Grokking the text() method
    • Update or remove characters using a regular expression
    • Grokking the .contents() method
    • Using remove() does not remove elements from wrapper set
  • Chapter 5 - HTML Forms
    • Disable/enable form elements
    • How to determine if a form element is disabled or enabled
    • Check/uncheck a single checkbox or radio button
    • Check/uncheck multiple checkboxs or radio inputs
    • Determining if a checkbox or radio button is checked or unchecked
    • How to determine if a form element is hidden
    • Setting/getting the value of an input element
    • Setting/getting the selected option of a select element
    • Setting/getting the selected options of a multi-select element
    • Setting/getting text contained within a textarea
    • Setting/getting the value attribute of a button element
    • Editing select elements
    • Selecting form elements by their type
    • Selecting all form elements
  • Chapter 6 - Events
    • Not limited to a single ready() event
    • Attaching/removing events using bind() and unbind()
    • Programmatically invoke a specific handler via short event methods
    • jQuery normalizes the event object
    • Grokking event namespacing
    • Grokking event delegation
    • Applying event handlers to DOM elements regardless of DOM updates using live()
    • Adding a function to several event handlers
    • Cancel default browser behavior with preventDefault()
    • Cancel event propagation with stopPropagation()
    • Cancel default browser behavior and event propagation via return false
    • Create custom events and trigger them via trigger()
    • Cloning events as well as DOM elements
    • Using Firebug to reveal/inspect events attached to DOM elements
    • Getting X and Y coordinates of the mouse in the viewport
    • Getting X and Y coordinates of the mouse relative to another element
  • Chapter 7 - jQuery and the web browser
    • Disable right-click contextual menu
    • Scrolling the browser window
  • Chapter 8 - Plugins
    • Use the $ alias when constructing a plugin
    • New plugins attach to jQuery.fn object to become jQuery methods
    • Inside a plugin, this is a reference to the current jQuery object
    • each() is used to iterate over the jQuery object and provide a reference to each element in the object using the this keyword
    • Typically a plugin returns the jQuery object so jQuery methods or other plugins can still be chained after using a plugin
    • Default plugin options
    • Custom plugin options
    • Overwrite default options without altering original plugin code
    • Create elements on the fly, invoke plugins programmatically
    • Providing callbacks and passing context
  • Chapter 9 - Performance best practices
    • Use the latest and greatest version of jQuery
    • Passing the jQuery function a context can improve query performance
    • Grokking selector performance
    • Cache sets of selected elements that are used more than once
    • Keep DOM changes to a minimum
    • Optimize by passing jQuery methods a key/value object
    • Optimize by passing multiple selectors to the jQuery function
    • Optimize by leveraging chaining
    • Use the native for loop when dealing with big loops
    • Apply visual changes via ID and Class vs. manipulating style properties
  • Chapter 10 - Effects
    • Disable all jQuery effect methods
    • Grokking the stop() animation method
    • Determine if an element is animating using :animated
    • Using show(), hide(), and toggle(), without animation
    • Grokking sequential and non-sequential animations
    • Animate() is the base low-level abstraction
    • Grokking the jQuery fading methods
  • Chapter 11- AJAX
    • The jQuery ajax() function is the lowest-level abstraction
    • jQuery supports cross-domain JSONP
    • Stop a browser from caching XHR requests
  • Chaper 12 - Miscellaneous concepts
    • Storing data on DOM elements
    • Adding new functions to the jQuery namespace
    • Computing an element's attribute value
    • Should I use CSS properties or JavaScript references?
    • Accessing an iframe's content
    • Leverage a jQuery plugin for Flash embedding
    • Pre-loading images
    • Pre-loading assets using XHR
    • Add a class to as a CSS hook for JavaScript enabled browsers