jQuery for Web Designers

Learn how to use jQuery's core library and plugins to create richer, more usable sites—faster and more efficiently than with JavaScript alone.

Introduction

• Welcome
• What you should know
• How to use the exercise files
• Challenges

1. jQuery Introduction

• jQuery is a JavaScript library
• When to use jQuery
• Alternatives to jQuery
• Which version to use
• How to install jQuery
• Reference Materials

2. Essential Concepts

• Set up functions
• Select elements
• Shorter code with chaining
• Use classes
• Modify the DOM
• Challenge: Form feedback
• Solution: Form feedback

3. It's Easier in jQuery

• Event binding
• Read and set values
• Attributes and properties
• Challenge: Dynamic contact form
• Solution: Dynamic contact form

4. Integrate a Plugin

• Build a gallery with Colorbox
• Initialize the plugin
• Change gallery options
• Challenge: Convert to slideshow
• Solution: Convert to slideshow

5. Animation

• JavaScript or CSS for animation
• Simple animations
• Animate numeric properties
• Easing
• Enhance a shopping cart with animation
• Challenge: Improve the animation
• Solution: Improve the animation

Conclusion

• Next steps: Plugins
• Next Steps: jQuery
• Next Steps: JavaScript