Churning Theoretical knowledge into Practical Skills

To fully understand jQuery and its applications in modern web programming, it´s important to take a moment and look back at where jQuery came from, what needs it was built to fill, and what programming in JavaScript was like before jQuery came around.

Choosing jQuery over JavaScript

JavaScript has a reputation for being rather unwieldy in web applications. A lack of consistent browser support, difficult debugging, and an intimidating syntax can make learning JavaScript feel impossible. To be fair, all the things that make JavaScript seem difficult are part of what make it so powerful, but that doesn´t make it any more inviting to a novice web developer looking to add JavaScript to his arsenal.

Understanding JavaScript Libraries

The steep learning curve associated with JavaScript has been a sore spot for developers for years, and as frustrations grew, several ambitious developers started building JavaScript libraries, also referred to as JavaScript frameworks. These libraries aimed to simplify the use of JavaScript to make it more accessible to both new and existing developers by creating easy-to-use control functions that remove some of the heavy lifting from everyday JavaScript tasks. Libraries are especially useful in the realm of Asynchronous JavaScript and XML (AJAX) due to the complexity of performing the same tasks using straight JavaScript.

JavaScript libraries aim to provide a simpler syntax for common tasks, which translates to a faster workflow for developers and a less intimidating learning curve for beginners. They also eliminate some of the headache involved in coding cross-browser JavaScript by doing all the compatibility checks for you within their built-in methods, which is a huge time-saver when coding.

Understanding the Benefits of jQuery

• Every JavaScript framework has its own benefits; jQuery is no exception, providing the following benefits:
• Small file size (approximately 23KB as of version 1.4)
• Extremely simple syntax
• Chainable methods
• Easy plug-in architecture for extending the framework
• A huge online community
• Great documentation at http://api.jquery.com
• Optional extensions of jQuery for added functionality, such as jQueryUI

Course Content

1. Overview of jQuery

• What is jQuery?
• jQuery Downloading and installing
• Creating a simple jQuery-enabled page
• Overview of jQuery´s features

2. jQuery - Retrieving Page Content

• jQuery - Overview of selectors and filters
• jQuery - Using basic jQuery selectors
• jQuery - Using basic jQuery filters
• jQuery - Using jQuery attribute filters
• jQuery - Child, visibility, and content filters
• jQuery - Form selectors and filters
• jQuery - Traversing documents
• jQuery - Understanding jQuery statement chaining
• jQuery - Practical example 1: Annotating page links

3. Manipulating Page Content

• jQuery - Creating, getting, and setting content
• jQuery - Manipulating attributes
• jQuery - Inserting content
• jQuery - Wrapping, replacing, and removing content
• jQuery - Working with CSS
• jQuery - Practical example 2: Automatic TOC generator

4. Working with Events

• jQuery - Understanding the jQuery event handling features
• jQuery - Binding and unbinding events
• jQuery - Convenient event helper methods
• jQuery - Using the jQuery event object
• jQuery - Using miscellaneous event features
• jQuery - Practical example 3: Table striping and highlighting

5. jQuery Animations and Effects

• jQuery - Hiding and showing elements
• jQuery - Fading elements in and out
• jQuery - Sliding elements
• jQuery - Creating custom animations
• jQuery - Practical example 4: Image rotator

6. Using the jQuery UI Plug-In

• jQuery - Introduction to jQuery UI
• jQuery - Exploring the jQuery UI widgets
• jQuery - Exploring the jQuery UI effects
• jQuery - Using the jQuery UI ThemeRoller
• jQuery - Downloading and installing jQuery UI

7. Putting It All Together

• jQuery - Overview of the sample web site
• jQuery - Using the accordion widget
• jQuery - Creating an image rotator
• jQuery - Building hover tooltips
• jQuery - Making an image selector
• jQuery - Using the Resizable effect