The first thing you'll often do in a jQuery script is select the elements you'd like to work with. For example, if you're adding some effects to a navigation menu, you'll start by selecting the items in the navigation menu. The tools you use for this job are selectors—ways to select certain elements on the page you want to work with.

jQuery borrowed selectors from CSS all the way up through CSS3, and they work even in browsers that don't support CSS3 selectors just yet.

Even though CSS offers a pretty robust set of selectors, jQuery adds a few more of its own to make accessing just the elements you need easy.

If you already know how to do things with CSS, such as make all the first-level headings blue or make all the links green and underlined, you'll easily learn how to select the elements you'd like to modify with jQuery.

If you want to create new elements or modify existing elements with raw JavaScript, you better crack your knuckles and get ready to write lots and lots of code—and it won't make much sense either.

For example, if we wanted to append a paragraph to our page that says This page is powered by JavaScript, we need to first create the paragraph element, then assign the text that should be inside the paragraph to a variable as a string, and finally append the string to the newly created paragraph as a text node. And after all this, we'd still have to append the paragraph to the document. Phew! (Don't worry if you didn't understand all of that—it was just to illustrate how much work and code it requires to do something simple.)

With jQuery, adding a paragraph to the bottom of our page is as simple as the following line of code:

$('body').append('<p>This page is powered by jQuery.</p>');

That's right! You just append a bit of HTML directly to the body, and you're all set. I bet that without understanding JavaScript at all, you can read the line of code and grasp what it's doing. This code is appending a paragraph that reads This page is powered by jQuery. to the body of the HTML document.

You've got better things to do than sit and write lines and lines of code to add fade-in and fade-out effects. jQuery provides you with a few basic animations and the power to create your own custom animations right out of the box. Let's say, we wanted to make an image fade into the page; we will use the following code line for this:

$('img').fadeIn();

Yep, that's it! We use one little line of code in which I select the image and then tell it to fade in. Later in the chapter, you'll see exactly where this line of code will go in your HTML page.

As I said earlier, web developers often find themselves solving the same problems over and over again. You're most likely not the first person who wants to build a rotating image slideshow, an animated drop-down menu, or a news ticker.

jQuery has an impressively large library of scripts available freely—scripts to create tooltips, slideshows, news tickers, drop-down menus, date pickers, character counters, and on and on. You don't need to learn how to build all these things from scratch; you just have to learn how to harness the power of plugins. We'll be covering some of the most popular jQuery plugins in this book, and you'll be able to apply what you've learned to use any plugin in the jQuery plugin library.

jQuery is an open source project, which means that it's being collectively built by a team of super-smart JavaScript coders and is freely available for anyone to use. The success or failure of an open source project often depends on the community behind the project, and jQuery has a large and active community that supports it.

This means that jQuery itself is being constantly improved and updated. And on top of that, there are thousands of developers out there who are creating new plugins, adding features to existing plugins, and offering support and advice to newcomers. You'll find new tutorials, blog posts, and podcasts on a daily basis for just about anything you want to learn.