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

 VisualMagazine
jQuery

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, but classes for different types of func-
ability.” Its fundamental philoso- these other frameworks make en- tionality. A class for forms, a class
phy, centering on collections of tirely different 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 Name]. And because the jQuery
with the collection of elements, jQuery Selectors parses operates on XHTML, it can
using 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-maintaining 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 triumph
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- <p>
ment of both the span and
hr. The span is a child of the
<span> span hr
p. Hello
Elements can also be sib-
lings. That means they share </span>
a parent. The span and hr in <hr />
</p>
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. “<span>X</span>”
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
fun”).addClass(“hello”).hide(). The click event happens KEY POINTS
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
them all. Actions to be
And what makes jQuery spe- taken, or call- ◌ Inside event handlers, this refers to the
cial is that all methods that make backs, are defined element the event happened to
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 <a href=”ajax.htm” class=”jTip” id=”one”
guarantee chainability). To play nice, a jQuery name=”Password must follow these
function should iterate through elements au- rules:”>Text
tomatically, to maintain consistency between </a>
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:
<input type=”text” class=”date-picker” name=”date1”
id=”date1” />

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