LESSON 1
jQuery aims to change the way that web developers think about creating rich functionality in their pages. Rather than spending time juggling the complexities of advanced JavaScript, designers can leverage their existing knowledge of Cascading Style Sheets (CSS), Extensible Hypertext Markup Language (XHTML), and good old straightforward JavaScript to manipulate page elements directly, making more rapid development a reality.
Why jQuery?
If you’ve spent any time at all trying to add dynamic functionality to your pages, you’ve found that you’re constantly following a pattern of selecting an element or group of elements and operating upon those elements in some fashion. You could be hiding or revealing the elements, adding a CSS class to them, animating them, or modifying their attributes.
Using raw JavaScript can result in dozens of lines of code for each of these tasks. The creators of jQuery specifically created the library to make common tasks trivial.
For example, designers will use JavaScript to “zebra-stripe” tables — highlighting every other row in a table with a contrasting color—taking up to 10 lines of code or more.
Here’s how we accomplish it using jQuery:
&("table tr:nth-child(even)").addClass("striped");
We identify every even row (<tr> element) in all of the tables on the page and add the CSS class striped to each of those rows. By applying the desired background color to these rows via a CSS rule for class striped, a single line of JavaScript can improve the aesthetics of the entire page.
About jQuery
It’s one of the most popular JavaScript libraries around and was created by John Resig during his college days at the Rochester Institute of Technology. Its popularity has been helped by a number of high-profile sites using jQuery such as the BBC, Digg, Intel, MSNBC, and Technorati.
The core features of jQuery are:
- Gives developers a common set of functions for all browsers
- Supports Ajax with one of the best interfaces around
- Uses selectors which is an expression for identifying target elements on a page that allows us to easily identify and grab the elements we need
- Gives access to page elements without having to wait for all images to load in place of using the browser’s onload event, which delays anything you do until the page is fully loaded
- Let’s you create and delete HTML.
- Has a great selection of animation and visual effect
- Contains enhancements to basic JavaScript constructs such as iteration and array manipulation.
The real power in this jQuery statement comes from the selector, an expression for identifying target elements on a page that allows us to easily identify and grab the elements we need; in this case, every even <tr> element in all tables.
The jQuery library provides a general-purpose abstraction layer for common web scripting, and is therefore useful in almost every scripting situation. Its extensible nature means that we could never cover all possible uses and functions in a single book, as plugins are constantly being developed to add new abilities.
Downloading jQuery
jQuery is available in two versions: a packed version for use in production sites and an uncompressed version that is more readable (if you want to review the source).
Continued...
