An Introduction to jQuery: Projects

I designed and now teach this class for Software Training for Students on campus. Here’s a virtual version of the class!

What is jQuery?

Straight from jQuery.com: jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

Why use a Javascript Library?

  • Libraries make writing Javascript much easier.
  • Everybody uses a library now- It’s part of the evolution of web technology
  • Cross-browser compatibility
  • Modularity - does not break existing javascript

Alright then.. well why jQuery?

  • Easy to extend
  • Thriving developer community
  • Small (Core + UI = 254kb – without gzip)
  • Absolutely elegant

Topics

Today I will focus on learning jQuery by example. We will cover:

  • Selectors
  • Chaining
  • Events
  • Creating a slideshow with plugins
  • Drag and Drop Shopping Cart
  • AJAX

To follow along – Go to the demo page:

Selectors

Selectors lie at the core of every jQuery call. They are used to grab elements on the page. We need to grab an element before we tell it what to do. Selectors are very simple to use in jQuery. If you know how to select an element in CSS (#header {…}), then you know how to select something in jQuery. Here’s how the syntax looks:$('selector')Much more to come!