Manning.jQuery.in.Action.2nd.Edition.Mar.2010.pdf

Table of Contents

1 Introducing jQuery

2 Selecting the elements to act upon

3 Bringing pages to life with jQuery

4 Events are where it happens

5 Energizing pages with animations and effects

6 jQuery utility functions

7 Extending jQuery with custom plug-ins

8 Talk to the server with Ajax

9 jQuery UI

10 Prominent, powerful, and practical plug-ins

Appendix: JavaScript you need to know, but might not

©Manning Publications Co. Please post comments or corrections to the Author Online forum:

http://www.manning-sandbox.com/forum.jspa?forumID=566

Download at Boykma.Com

Licensed to Alison Tyler <pedbro@gmail.com>

Introducing jQuery

This chapter covers

Why you should use jQuery

What Unobtrusive JavaScript means

The fundamental elements and concepts of jQuery

Using jQuery in conjunction with other JavaScript libraries

Sneered at as a “not-very-serious” language by many web developers for much of its lifetime, JavaScript

has regained its prestige in the past few years as a result of the renewed interest in Rich Internet

Applications and Ajax technologies. The language has been forced to grow up quickly as client-side

developers have tossed aside cut-and-paste JavaScript for the convenience of full-featured JavaScript

libraries that solve difficult cross-browser problems once and for all, and provide new and improved

patterns for web development.

A relative latecomer to this world of JavaScript libraries, jQuery has taken the web development

community by storm, quickly winning the support of major websites such as MSNBC, and well-regarded

open source projects including SourceForge, Trac, and Drupal. Microsoft has elected to distribute jQuery

with its Visual Studio tool, and Nokia uses jQuery on all its phones that include their Web Run-Time

component.

Those are not shabby credentials!

Compared with other toolkits that focus heavily on clever JavaScript techniques, 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 rapid development a reality.

In this book, we’re going to take an in-depth look at what jQuery has to offer us as page authors of

Rich Internet Applications. Let’s start by finding out exactly what jQuery brings to the page-development

party.

©Manning Publications Co. Please post comments or corrections to the Author Online forum:

http://www.manning-sandbox.com/forum.jspa?forumID=566

Download at Boykma.Com

Licensed to Alison Tyler <pedbro@gmail.com>

1.1 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 inspecting 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, anyone who has dealt

with radio groups in JavaScript can tell you that it’s a lesson in tedium to discover which radio element of

a radio group is currently checked and obtains its value attribute. The radio group needs to be located,

and the resulting array of radio elements must be inspected, one by one, to find out which element has its

checked attribute set. This element’s value attribute can then be obtained.

Contrast that with how it can be done using jQuery:

var checkedValue = $('[name=someRadioGroup]:checked').val();

Don’t worry if that looks a bit cryptic to you right now. In short order, you’ll understand how it works,

and you’ll be whipping out your own terse—but powerful—jQuery statements to make your pages come

alive. Let’s briefly examine how this code snippet works.

Figure 1.1 Determining which radio button is checked is easy to accomplish in one statement with jQuery!

We identify all elements that possess a name attribute with the value someRadioGroup (remember

that radio groups are formed by naming all its elements using the same name), then filter that set to only

those that are in “checked” state, and find the value of that element. (There will be only one such

element, as the browser will only allow a single element of the radio group to be checked at a time.)

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 locate and grab the elements that we need; in this case, the

checked element in the radio group. You’ll find the full source for this page in the downloadable source

code for this book in file chapter1/radio.group.html .

©Manning Publications Co. Please post comments or corrections to the Author Online forum:

http://www.manning-sandbox.com/forum.jspa?forumID=566

Download at Boykma.Com

Licensed to Alison Tyler <pedbro@gmail.com>

We’ll soon study how to easily create these selectors; but first, let’s examine how the inventors of

jQuery think JavaScript can be most effectively used on our pages.

1.2 Unobtrusive JavaScript

You may recall the bad old days before CSS when we were forced to mix stylistic markup with the

document structure markup in our HTML pages. Anyone who’s been authoring pages for any amount of

time surely does and, most likely, with less than fondness.

The addition of CSS to our web development toolkits allows us to separate stylistic information from

the document structure and gives travesties like the <font> tag the well-deserved boot. Not only does

the separation of style from structure make our documents easier to manage, it also gives us the

versatility to completely change the stylistic rendering of a page by simply swapping out different

stylesheets.

Few of us would voluntarily regress back to the days of applying style with HTML elements; yet markup

such as the following is still all too common:

<button

type="button"

onclick="document.getElementById('xyz').style.color='red';" >

Click Me

</button>

We can easily see that the style of this button element, including the font of its caption, is not applied via

the use of the <font> tag and other deprecated style-oriented markup, but is determined by whatever

CSS rules (not shown) are in effect on the page. But although this declaration doesn’t mix style markup

with structure, it does mix behavior with structure by including the JavaScript to be executed when the

button is clicked as part of the markup of the button element via the onclick attribute (which in this case

turns some Document Object Model [DOM] element named xyz red upon a click of the button).

For all the same reasons that it’s desirable to segregate style from structure within an HTML document,

it’s just as beneficial (if not more so) to separate the behavior from the structure.

This strategy is known as Unobtrusive JavaScript , which was pioneered by the inventors of jQuery and

is now embraced by every major JavaScript library, and helps page authors achieve this useful separation

on their pages. As the library that spearheaded the movement, so to speak, jQuery’s core is well

optimized for producing Unobtrusive JavaScript quite productively. Unobtrusive JavaScript, along with the

legions of the jQuery-savvy, considers any JavaScript expressions or statements embedded in the <body>

of HTML pages, either as attributes of HTML elements (such as onclick ) or in script blocks placed within

the body of the page, to be incorrect.

“But how would I instrument the button without the onclick attribute?” you might ask. Consider the

following change to the button element:

<button type="button" id="testButton">Click Me</button>

Much simpler! But now, you’ll note, the button doesn’t do anything. We can click it all day long, and no

behavior will result. Let’s fix that.

But rather than embedding the button’s behavior in its markup, we’ll move it to a script block in the

<head> section of the page, outside the scope of the document body, as follows:

http://www.manning-sandbox.com/forum.jspa?forumID=566

Download at Boykma.Com

Licensed to Alison Tyler <pedbro@gmail.com>

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika: