Visual jQuery

THE MAN BEHIND THE MAGIC: WE INTERVIEW JQUERY’S JOHN RESIG





Visual jQuery

The Magazine Iss

u e1… 0 06

September 2









$ TUTORIAL

An Introduction

to the World of

jQuery—Starting

With the jQuery

Object Itself



$ JQUERY

Winning on

Philosophy:

Why jQuery’s

Approach Works









INSIDE jQuery Plugin Rundown

Visual jQuery

Magazine

From The Editor ........... 3 Meet Dave

Yehuda Katz on his web development Cardwell

history, his favorites, and of course, The creator of jQBrowser

and jQMinMax chats

jQuery: the library and magazine. with Visual jQuery

Magazine.



Winning on Philosophy .. 4 On Page 9



What the jQuery Philosophy is and

why it works so well. ISSUE 2

SNEAK PEEK



Behind The Magic .......... 6 Next month, we have an interview with Klaus

Hartl, the creator of the popular Tabs plugin,

The Man: An interview with John and a developer on Plazes.

Resig, father of jQuery Also, a tutorial on jQuery’s AJAX functional-

ity, a visual effects plugin roundup, another

article, and your letters. All on October 18.

Tutorial Series .............. 8

In our first tutorial, we explore the

jQuery object and what makes it We Want Your Letters

special. Please submit letters to the editor to

editor@visualjquery.com. WE will print

letters relating to articles in the Magazine

Plugin Roundup ........... 10 or of general interest to the jQuery

Three great plugins for developing community if space permits. We reserve

the right to reject any letter.

rich applications with jQuery

. . . From The Editor

As is traditional, I’d like my notable was the selectables plugin),

first editorial to welcome new and I followed the link home to

readers to the Visual jQuery jQuery.

Magazine.

Immediately, I took to the framework,

Around a year ago, after a fairly which seemed to think the way I

large amount of time doing was programming: by centering on

traditional web development, DOM Elements and tacking bits of

I found myself interested in functionality on top of them, jQuery

this newfangled concept called made Javascript fun again.

AJAX. I attended a workshop by

the luminary Thomas Fuchs, the jQuery was far ahead of the pack,

creator of Scriptaculous (based on the Prototype even then, with documentation, but I quickly dove

library), and while I was quite impressed by the in, trying to organize the jQuery documentation

capabilities of both Prototype and Scriptaculous, wiki, and eventually throwing up the first iteration of

something tugged at me. Visual jQuery, the slick visual representation of the

jQuery API. When jQuery 1.0 began to include the

After using them for a bit, and becoming somewhat documentation built-in, I retooled Visual jQuery to

proficient at using Prototype to build responsive, take advantage of that.

rich web applications, I realized that the learning

curve was far too steep. While I was able to do all I suspect many of this magazine’s readers took

sorts of powerful things, I found myself constantly parallel paths to finding jQuery. Still others, initially

reinventing the wheel for simple tasks. While AJAXy horrified at the prospect of learning Java, were no

Javascript has gotten the term “DOM Scripting,” I doubt pleasantly surprised at just how easy it is to

barely felt the influence of the DOM in my day-to-day learn jQuery. Hopefully this magazine will appeal to

Prototype development. both sorts. For the seasoned jQueryist, we bring you

advanced techniques, and a rundown of plugins

Thankfully, I came across Ruby on Rails shortly that will supercharge your next project.

thereafter, which does a darn good job of abstracting

out the entire concept of Javascript (and while the For the beginner, we’ll be featuring ground-up

now-popular RJS templates were not available yet, I tutorials on the framework, helping you to build your

still found Rails’ Prototype helpers to take the edge first project with a solid grasp of what you’re doing,

off). not just copying and pasting code snippets.



A few months later, I came across the Interface library With that, I leave you to the magazine. Good luck

in a post about the various cool effects (especially with jQuery!











Illustration By Jörn Zaefferer









W I N N I N G O N P H IL O S O P H Y

Why jQuery’s Approach Works

By Yehuda Katz like Prototype and Dojo, take a orientedness, its developers have

functional approach. Sure, they’re put a substantial amount of time

The approach jQuery takes fully capable of addressing DOM into developing object-oriented

isn’t just “cleaner code” or “chain- Elements, just like jQuery, other classes for different types of func-

ability.” Its fundamental philoso- frameworks make entirely differ- tionality. A class for forms, a class

phy, centering on collections of ent choices. for elements, a class for events. It

DOM Elements, puts it squarely Prototype, for one, fancies it- goes on and on.

where most Javascript developers self a true Object Oriented exten- It’s perfectly possible to write

program most. sion of Javascript’s paltry native clean, good-looking Prototype

By contrast, other frameworks, offerings. In pursuit of true object- code.







And Prototype can emulate Once you obtain a group of limited subset of XPath, and some

one of the best things about jQue- elements, the fun begins. Add nice custom expressions thrown

ry’s focus on DOM Element collec- .fadeIn(“slow”) and each of the el- in for good measure.

tions: its chainability. But jQuery ements will fade in—slowly. When I say CSS3, I mean

conceives of modern Javascript But we’re not done. Without it. jQuery supports the ~ selec-

development the way many major skipping a beat, add .addClass(“th tor, :not(expr), attributes via [@

players in the Javascript commu- isIsDamnFun”). Each element will attr=’whatever’].

nity are starting to see it: as DOM get the class “thisIsDamnFun.” It XPath support is a bit more

Scripting first and foremost. is, isn’t it? limited, but most of the good

For those of us whose Javas- And it can go on from there. stuff is here. The / and // opera-

cript programming focuses pri- Add .click(function() { alert(“Hello”) tors are available, as are parent

marily on page elements, and I }); to throw up an alert box when and preceding sibling axes. jQuery

suspect that’s most of us, jQuery any of the elements are clicked. supports :first, :last, and :eq(n), a

makes the work dead simple. Add .append(“Hello”) and the word slimmed down version of [posi-

hello will be appended to the end tion() = n].

jQuery Workflow of each of the matched elements. Finally, jQuery supports testing

Cool, huh? for contained elements via [tag-

Most jQuery methods start with Name]. And because the jQuery

the the collection of elements, us- jQuery Selectors parses operates on XHTML, it can

ing the handy support for CSS3, be easily co-opted for parsing raw

XPath, and a slew of custom ex- Now that you’ve seen the pow- XML from AJAX requests.

pressions (like :visible, which re- er of jQuery methods, how do we And of course, jQuery has the

turns only visible elements, and get the element collection in the full complement of AJAX methods

:checked, which returns only first place? Happily, we have CSS through $.ajax, and $().load.

checked form fields). (1-3) at our disposal, as well as a









SOME BASIC JQUERY









$(“a”)



Inside the a

element is

a group of p

elements



$(“a”).find(“p”)







THE MAN BEHIND THE MAGIC

JOHN RESIG >>









I rarely have to

answer questions

on the mailing list

anymore—the community

is self-maining and quite

active.

This magazine, and jQuery it- sistent, simple way to approach which required tedious, manual

self, owe their existence to the previously complex problems. entry, the new site became a place

strong unyielding vision of John And in addition to a solid de- of first resort for keeping up with

Resig. Like many children of the sign philosophy, Resig doesn’t the latest jQuery documentation.

‘80s, John grew up as computers skimp on the community side of Proving that jQuery is more

grew up. things. “I’m frequently discour- than just a fad, Resig will speak

His first programming lan- aged by other project mailing lists, at the Ajax Experience conference

guage, the ubiquitous QBASIC, un- where a simple misdirected ques- next month, a conference orga-

derscores John’s intellectual curi- tion will be answered with anger nized by the popular Ajaxian.com.

osity for programming. With the and malice,” Resig said. “For ex- In addition to a talk about jQuery

exception of Java, all of his pro- ample, having a question come itself, he will present a discussion

gramming skills are self-taught., in about Javascript, as opposed on choosing a Javascript frame-

which makes his upcoming book, to jQuery itself would be easy to work.

Pro Javascript Techniques, due to dismiss. But by taking the time The run-up to jQuery 1.0 had

be published this December by to answer it, you can win another its share of hassles, but had its re-

APress, even more of an accom- user.” wards as well. “The major tirumph

plishment. As part of his drive to ensure was simply getting the code out

While he doesn’t much care the community has plenty of good the door. As any developer will tell

for Java, he believes in watching resources, John focused heavily you, it’s not easy to actually ship,”

talented programmers in their ele- on documentation in the run-up to Resig said.

ment: he keeps tabs on more than the recently released version 1.0 And the work he put into fos-

250 web feeds a day. “Seeing an of jQuery. tering the jQuery community paid

amazing program- off. “There’s quite a

mer in his ‘natural

habitat’ is always a

thing of beauty,” Re-

‘The major few developers with

[subversion] access

who’ve been helping

sig said.

Of his many in-

triumph was simply out, resolving issues

as they come to



getting the code

fluences, Resig cit- them.” While Resig

ed Alex Russell of has lately become

Dojo, and Dean Ed- busy with work and

wards of IE7 fame

as the most con- out the door.’ completing his book

on Javascript, the

sistently interest- community picked

ing. “If there’s any up the slack, keep-

Javascript develop- ing the post-1.0 mo-

ers that I admire and respect, it’s Before he would be satisfied mentum going.

them.” that the framework was produc- That’s not to say the release

While he has respect for the tion ready, the code did not need went off without a hitch. “I had to

developers of more established to be bug-free only; everything break the API in a couple ways.

frameworks like Dojo and Proto- needed to be documented. Many method names were sim-

type, Resig, like David Heinemeier It paid off. As a result of his ply not as clear as they should’ve

Hansen of Rails fame, has some innovative documentation efforts, been and caused many conflicts,”

very strong opinions that drive the version 1.0 of jQuery spawned Resig said. That said, virtually all

framework. a dynamically updating Visual users worked out the difficulties,

Like Ruby on Rails, jQuery can jQuery documentation site, which and major plugins, like the Inter-

be seen as a sort of opinionated could be updated as often as the face visual effects library, released

software, where strong design phi- codebase itself was updated. In updated versions simultaneously

losophies give developers a con- contrast to the old Visual jQuery, with the official release of 1.0.







JQUERY OBJECT

A BRIEF INTRODUCTION





jQuery, the framework, is fun- Collection of Elements But underlying all the syntacti-

damentally a way to manipulate cal sugar, a collection of elements

collections of DOM Elements. Traditionally, Javascript pro- was no different from a collection

You’ll find that’s a theme through- grammers have held collections of strings or a collection of inte-

out this magazine, but what does of DOM Elements in standard Ja- gers.

a collection of DOM Elements re- vascript arrays.

ally mean? And how does jQuery Like any other array, it was Enter jQuery

make it easy to make use of these possible to check the size of the

collections? array, iterate through the array, The jQuery framework chang-

and get array elements by index. es all of that. Instead of seeing a

DOM Element Basic array functions. collection of elements as yet an-

But there was nothing about other array, jQuery sees the collec-

A DOM Element is a single an array of DOM Elements that tion as something uniquely DOM-

HTML node, like a p or a. It can set it apart from any other array. centric.

be empty, or it can contain text or Say you wanted to append a So in addition to the tradition-

other elements inside it. class to each element in your col- al methods for getting the length

Think of it this way: every time lection. You’d iterate through each of an array and others, collections

you open a tag in HTML, you are item in the collection with a regu- of elements, held in a jQuery ob-

creating a DOM Element. Every- lar loop, and add the class to each ject, can do all sorts of interesting

thing inside that tag is a child of element. things.

the DOM Element. This worked perfectly fine, First of all, you get elements

An element can be a parent and some of the more popular

element, which means it con- frameworks refined the concept



p

tains other elements, or a child to make it easier to do things

element, which means it has a like add a class.

parent element.

In the example on this

page, the p is a parent ele-

ment of both the span and

hr. The span is a child of the

span hr

p. Hello

Elements can also be sib-

lings. That means they share

a parent. The span and hr in



the example on this page are

siblings, because they share

the p as a parent.









‘You can think of a jQuery

object like a bucket that

holds DOM Elements’

into a jQuery object in a very fa- the modified object, so it can be tions without any name. Inside an

miliar way: through CSS selectors. further manipulated. event handler’s callback, the this

For instance, $(“a.fun”) will fill a keyword refers to the specific ele-

jQuery object with all a elements Event Handling ment that had the event happen

on the page with the class fun. to it.

You can think of a jQuery ob- Another common DOM Script- You might wonder why we

ject like a bucket that holds DOM ing need is the ability to bind needed to do $(this).addClass, and

Elements. event handlers to various page el- not just this.addClass. Remember

Once we have a ements. For example, you might that you can only run addClass

jQuery object, we want to change the class of an on objects in a jQuery bucket. In-

can do any num- element when it’s clicked, to in- side an event handler, this refers

ber of things to dicate that it’s been selected. only to the element itself. $(this)

the elements Say, for instance, you wanted to simply throws the element into

it holds—all at add the class on to all p ele- a jQuery bucket, which becomes

once. ments on the page with the eligible to use the special jQuery

Remember ear- class clickable when they are methods, like addClass.

lier, when we wanted to clicked. The syntax is classic jQue- Because click is a jQuery

add a class to all of the elements ry: method, you can chain additional

in our collection? In jQuery, we $(“p.clickable”).click( methods after it. If you remove

can send a message to the object, function() { the semicolon at the end of the

telling it to add the “hello” class to $(this).addClass(“on”); command, you can add additional

every element in the bucket. }); methods on a new line:

And the syntax is dead simple: There are a few Javascript and $(“p.clickable”).click(...)

$(“a.fun”).addClass(“hello”); jQuery idioms here, so let’s go .append(

There’s a lot of power packed through the code step by step. “X”

into that short expression. We’re First, $(“p.clickable”) gets all ).fadeTo(“slow”, 0.5);

grabbing all of the elements on p elements on the page with the will append a span to the end

the page matching a CSS expres- class clickable and throws them of the p elements with class click-

sion, and adding, to each element into a jQuery bucket. able and then slowly fade them

matched, the class “hello.” The .click means that we are out to 50 percent opacity.

What’s even more fun is mak- defining an action the browser

ing jQuery chains. We can do $(“a. should take when a

KEY POINTS

fun”).addClass(“hello”).hide(). The click event happens

bucket of elements gets passed on an element in ◌ Only jQuery objects (buckets of elements)

to the hide method, which hides the bucket. are eligible to use jQuery methods

Actions to be

them all. ◌ Inside event handlers, this refers to the

And what makes jQuery spe- taken, or call-

element the event happened to

cial is that all methods that make backs, are defined

modifications to a bucket of ele- as anonymous Ja- ◌ Write event handlers as anonymous

ments (the jQuery object) return vascript functions, Javascript functions, as: function() { ... }

or Javascript func-

PLUGINS RICH APPLICATIONS

jTip by Cody Lindley



This page is actually

modeled after the jTip

JQUERY AND PLUGINS plugin (yes, it’s that cool).

jQuery has a very simple plugin architecture This tooltip solution

that allows developers to make use of the allows you to set AJAX

quasi-magical properties of jQuery functions. tooltips with pure XHTML

markup—after including

To create a new method that operates on the jTip plugin, of course.

the jQuery object, developers need only cre-

ate a new function called jQuery.fn.foo, which Code sample:

only needs to return a jQuery object itself (to Text

tomatically, to maintain consistency between

the core and plugins.







dateSelector by Kelvin Luck

This widget is a sorely needed date selector for jQuery.

Notably, it resolved the select box glitch in IE, so its calendar

control can cover select boxes. dateSelector and the

checkbox control prove that jQuery can have a very robust set

of widgets. It is also heavily customizable by region.



Code sample:











Checkbox by Kawika K.

The checkbox plugin allows the use of any images instead

of the standard checkbox. It allows separate images for off,

hovered, and checked. Originally written by editing the raw CSS

properties, this new version uses CSS classes for simplicity.

The syntax, like the previous plugins, is dead simple.



Code sample:

$().cssCheckbox();









10

ABOUT US

Meet Dave Cardwell . . . Publisher

Wycats Designs

Dave Cardwell was a programmer well

before his release of jQMinMax and Editor

jQBrowser brought him fame in the Yehuda Katz

jQuery community.

Contributors

“I was eight when my parents bought

Dave Cardwell

me a green-screen Amstrad computer

Klaus Hartl

and it wasn’t long before I was mucking

about with BASIC.” John Resig

Leah Silber

Now, after a year at York University, Jörn Zaefferer

Cardwell describes himself as ‘a

freelance programmer working on his

design skills.’

CONTRIBUTIONS

He released his jQMinMax plugin in Contributions are wel-

early August 2006. come (and desired). We

accept artwork, articles,

“At the time there was a lot of buzz and interviews. We re-

about a shift towards liquid and fluid serve the right to edit any

layouts. I wanted to create a plugin that contribution for clarity

would be of immediate use to people and good taste.

and I saw an opportunity for jQMinMax

here.” The plugin simulates max- and min- height and width in Internet Explorer. Please send contributions

to the magazine at edi-

As with many diehard jQuery fans, John Resig and his ever-active community were

tor@visualjquery.com

a big part of what drew Cardwell in.

“It has to be the documentation and responsiveness of the community that first

endeared me to jQuery. While the syntax and functionality are lovely, there are PLUGINS

other libraries available that are comparable in features. It was these peripheral

If you are interested in

benefits and a real sense of progress in the core library that kept me coming

having your plugin fea-

back.”

tured in an issue of the

For Dave, jQuery was a light at the end of the tunnel, where the tunnel was Magazine, please send a

Javascript, and the traffic cops didn’t show up to work. link to the plugin, a de-

scription, some details

“I was growing increasingly frustrated trying to track developments in the about yourself, and, ide-

JavaScript community - new techniques, event handling, document traversal and ally a photo of yourself.

so on. jQuery brought all these under a single roof for me, at a file size that

wouldn’t affect the responsiveness of my sites.” We feature plugins in the-

According to Cardwell, newbies need not be afraid of experimenting with jQuery. matic groupings, so your

plugin may appear many

“The jQuery and Visual jQuery sites are indispensable, and when you’re genuinely issues from now. It may

stumped I haven’t seen a question to the mailing list that went unanswered.” appear grouped with any

other plugin we feel is

Cardwell’s released multiple other plugins since he first began using the jQuery

appropriate. The titles,

library. More information on those plugins can be found at http://davecardwell.

descriptions, and details

co.uk/geekery/javascript/jquery/.

of plugins are created by

“I’m always more than happy to hear from like-minded folks - I can be contacted the Magazine editors and

from my website. I can also usually be found lurking in the #jquery IRC channel subject to our discretion.

on freenode.org.”



11

JAVASCRIPT IS SEXY AGAIN









w w w. j Q u e r y. c o m 12