Archives For Introduction to jQuery

In this series of several posts, I introduce the fundamentals of using the fantastic jQuery framework. From adding jQuery to a page, to selecting document elements, to applying effects, and to adding Ajax, here’s what you need to know to add client-side splash to your Web pages.

Getting Started with jQuery

February 5, 2009
This entry is part 1 of 7 in the series Introduction to jQuery

For some time now I’ve been meaning to write about jQuery, an increasingly popular JavaScript framework. There are a number of JavaScript frameworks available, all with their own strengths and weaknesses, so I don’t want to suggest that jQuery is the best one, but it does have its advantages. In particular, I like:

  • that there’s only one file to include in a page
  • how simple DOM (Document Object Model) references are, as manipulating the DOM is such a large part of Rich Internet Applications
  • the unobtrusive JavaScript approach

If you’re not familiar with this last concept, it involves keeping the JavaScript together, in the page’s HEAD, separate from the HTML. Pretty much anytime you separate X from Y (data from presentation, HTML from PHP, CSS markup from HTML, etc.), it’s a good thing. At the very least, abiding by unobtrusive JavaScript makes editing JavaScript easier. (There’s more to unobtrusive JavaScript than just this but…)

In this first post on jQuery, I’ll just discuss how to prepare a page to use jQuery. Over the next few days, subsequent posts will demonstrate more complex applications of jQuery. Continue Reading…

Selecting Elements in jQuery

February 7, 2009
This entry is part 2 of 7 in the series Introduction to jQuery

In my first post on jQuery, I discuss how to include the jQuery library in your HTML page and how to have JavaScript executed after the document has loaded. In this next post, I’m going to talk about referencing Document Object Model (DOM) elements using selectors. As much of using JavaScript in an HTML page involves manipulating the DOM, this is an important concept to get down. Continue Reading…

Event Handling in jQuery

March 2, 2009
This entry is part 3 of 7 in the series Introduction to jQuery

In the first two posts on jQuery, I discuss its basic usage on a page and its selectors. That basic knowledge—from me or elsewhere—is required to continue reading here. In this post, I get into event handling in jQuery. Continue Reading…

This entry is part 4 of 7 in the series Introduction to jQuery

If you’ve been reading my jQuery series of posts sequentially, then you saw how to incorporate jQuery into an HTML page, learned how to select elements so that you can use or manipulate them, and hopefully grasped how to add event handlers. In this post, I go into the effects you can apply to add dynamic behavior to an HTML page. Note that I’m discussing just the out-of-the-box effects built into jQuery. A subsequent post will discuss some of the plug-ins that can be brought into a page. Continue Reading…

This entry is part 5 of 7 in the series Introduction to jQuery

If you’ve been reading my jQuery series of posts sequentially, then you saw how to incorporate jQuery into an HTML page, learned how to select elements so that you can use or manipulate them, grasped how to add event handlers, and saw some of the effects that can easily be applied. In this post, I discuss other ways you can manipulate document elements: by altering their CSS, changing their values and attributes, and by adding or removing elements. Although these techniques have an affect on the visual page, I’ve grouped them together here (separate from the effects post) as they’re all primarily about delivering content. Continue Reading…