Getting Started
Common Idioms
Selectors
Animations & Effects
Arrays vs NodeList
Ajax
CSS
var foo = $('div.foo:first'); var foo = Y.one('div.foo'); Return the first element which matches the selector. : f i r s t is a
foo. some_method() ; if (foo) { jQuery extension.
foo. some_method() ;
} If no elements match, Y . o n e ( ) returns n u l l and you should check
for it. jQuery selector methods always return a list object with 0 or
more elements.
more elements.
var foo = $('div.foo'); var foo = Y.all('div.foo'); If no elements match the selector, Y . a l l ( ) returns an empty
if (foo) { if (foo.size() > 0) { N o d e L i s t object. jQuery will return an empty list [ ] that is loaded
// do something // do something
with special jQ methods. Both are truthy even if they contain no
} }
elements, so use N o d e L i s t . s i z e ( ) and [ ] . l e n g t h to check for
emptiness.
.find('p.foo:first') .one('p.foo') Finds P elements with class f o o that are children of the given node.
.find('p.foo') .all('p.foo')
$('<div/>') Y.Node.create('<div/>') Create a new DOM element. Does not add it to the document tree.
.html(' foo ') .setContent(' foo ') . s e t ( ) is a generic method in YUI for modifying element attributes.
.text(' foo ') .set('text', ' foo ')
.val(' foo ') .set('value', ' foo ') . s e t C o n t e n t ( h t m l ) is a convenience wrapper around
.set('innerHTML', html)
.html() .get('innerHTML') jQuery tends to overload getters and setters in the same method.
.text() .get('text')
.val() .get('value')
.attr(' foo ') .get(' foo ') Generic attribute getters and setters.
.attr(' foo ', ' bar ') .set(' foo ', ' bar ')
parent .append('<div/>') parent .append('<div/>') Creates a new div element and makes it a child of p a r e n t .
parent = $('<div/>'); parent = Y.Node.create('<div/>'); YUI3 builds element trees outside-in. jQuery can do both outside-in
$('<p>foo<p>') child = Y.Node.create('<p>foo</p>'); and inside-out (see next entry). YUI3 may add support for
.click( fn ) child .on('click', fn );
. a p p e n d T o ( ) in the future.
.appendTo( parent ); parent .appendChild( child );
child .appendTo( parent ) parent .append( child ) jQuery's . a p p e n d T o ( ) returns the child element. YUI3's
parent .appendChild( child ) . a p p e n d C h i l d ( ) returns the child element but . a p p e n d ( )
parent .appendChild( child ) . a p p e n d C h i l d ( ) returns the child element but . a p p e n d ( )
returns the parent.
.addClass(' foo ') .addClass(' foo ') CSS class name manipulation.
.removeClass(' foo ') .removeClass(' foo ')
.toggleClass(' foo ') .toggleClass(' foo ')
.hasClass(' foo ') .hasClass(' foo ')
.removeClass(' foo ').addClass(' bar ') .replaceClass(' foo ', ' bar ') Replace a node's CSS class 'foo' with 'bar'.
.empty() .get('children').remove( true ); jQuery's . e m p t y ( ) also deregisters any events associated with the
elements being destroyed. The t r u e argument passed to
. r e m o v e ( ) enables the same behavior in YUI3.
.siblings() .get('parentNode').get('children') Note that the YUI3 code is not equivalent: it will contain all child
elements including the caller. YUI3 may add support for
. s i b l i n g s ( ) in a later release.
.show() .setStyle('display', null ) YUI3 does not provide convenience wrappers for show/hide with
.hide() .setStyle('display', 'none') animations and effects.
$(':button') Y.all('input[type=button], button') Extension. In both jQuery and YUI3 you can run multiple selectors
separated by commas.
$('parent > child') Y.all('parent > child') Immediate child selector (child must be one level below parent)
$('parent child') Y.all('parent child') Descendent selector (child can be at any level below parent)
$(":contains(' foo ')") Y.all(':contains( foo )') Extension to select all elements whose text matches 'foo'. jQuery can
take quotes or not. YUI3 requires no quotes. The text matching is
plain string comparison, not glob or regexp. Be careful with this one as
it will return all matching ancestors, eg [ h t m l , b o d y , d i v ] .
$(':empty') Y.all(':empty') CSS3. Selects all elements that have no child nodes (excluding text
nodes).
$(':parent') Extension. Inverse of : e m p t y . Will find all elements that are a parent
of at least one element.
$('div:eq( n )') Y.all('div').item( n ) Extension. Selects nth element. YUI's i t e m ( ) will return n u l l if there
is no n t h element. jQuery's selector will return an empty list [ ] on a
match failure.
$('div:even') Y.all('div').even() Extension. Selects all even or odd elements. Note that elements are 0-
$('div:odd') Y.all('div').odd() indexed and the 0th element is considered even. See also YUI3's
NodeList.modulus(n, offset).
$('div:gt( n )'); Y.all(Y.all('div')._nodes.slice( n + 1 )); Extension. : g t (greater than) selects all elements from index n + 1
$('div:lt( n )'); Y.all(Y.all('div')._nodes.slice(0, n )); onwards. : l t (less than) selects all nodes from 0 up to n - 1 . Note that
in the YUI3 example we have to access the private _ n o d e s array and
perform a s l i c e ( ) . N o d e L i s t . s l i c e ( ) and friends may be added
in an upcoming point release. The double call to Y . a l l ( ) is explained
in Arrays vs NodeList.
$('div:has(p)') Extension. Selects elements which contain at least one element that
matches the specified selector. In this example, all d i v tags which have
matches the specified selector. In this example, all d i v tags which have
a p tag descendent will be selected.
$('div:hidden') var hidden = []; Extension. This is a weird one. In jQuery > 1.3.2 : h i d d e n selects all
Y.all('div').each(function(node) { elements (or descendents of elements) which take up no visual space.
if ((node.get('offsetWidth') === 0 &&
Elements with d i s p l a y : n o n e or whose
node.get('offsetHeight') === 0) ||
o f f s e t W i d t h / o f f s e t H e i g h t equal 0 are considered hidden.
node.get('display') === 'none') {
hidden.push(node); Elements with v i s i b i l i t y : h i d d e n are not considered hidden.
}
}); The YUI3 equivalent would essentially be a port of the jQuery code
hidden = Y.all(hidden); that implements : h i d d e n . This might be a good candidate for a patch
to YUI3.
$('div:last') var lst = Y.all('div'); The YUI equivalent is cumbersome, but I'm not sure if : l a s t is
if (lst) { popular enough to warrant a patch.
var last = lst.item(lst.size()-1);
}
$('#.foo').fadeOut(); var a = new Y.Anim( . f a d e O u t ( ) fades the opacity to 0, then sets d i s p l a y : n o n e on the
{ element. f a d e I n ( ) is naturally the inverse. Note that jQuery effects
// or node: ' #foo ',
tend to default to 200 or 600ms while YUI defaults to 1,000ms. YUI
to: {opacity: 0.0 },
durations are in fractions of seconds; jQuery durations are set in
$('#.foo').hide(600); duration: 0.2 ,
easing: Y.Easing.easeOut milliseconds.
}
); Annoyingly, YUI Anim objects have events you can attach functions to,
a.on('end', function(ev) { but you have to poke the private _ n o d e property to retrieve the
ev.target._node element being animated.
.setStyle('display', 'none');
});
a.run();
$(' .foo ').each( Y.all(' .foo ').each( . e a c h ( ) is like the f o r loop. YUI's each() returns the original
function() { function(node, idx, lst) { NodeList to help with chaining.
this. some_method(); node. some_method();
} }
); );
$(' .foo ').filter(' .bar ') Y.all(' .foo ').filter(' .bar ') The . f i l t e r ( ) method in both libraries both take CSS selectors
as filter criteria. jQuery's . f i l t e r ( ) can also take a function.
var fn = function(idx) { var filtered = []; Classic functional programming filter function. Given a list of
return this. property === ' value '; Y.all(' .foo ').each( elements, run the function on each and return a list of those which
}; function(node) {
evaluated true. N o d e L i s t . f i l t e r ( f n ) is coming to a future
$(' .foo ').filter(fn); if (node.get(' property ') === ' value ') {
filtered.push(node._node);
point release of YUI3.
}
}
);
filtered = Y.all(filtered);
$(' .foo ').map( var mapped = []; jQuery's . m a p ( ) returns a list of the return values of calls to the
function(idx, el) { Y.all(' .foo ').each( given function. N o d e L i s t . m a p ( f n ) is coming to a future point
some_function(el); function(node) {
release of YUI3.
} mapped.push(
); some_function(node)
);
}
);
mapped = Y.all(mapped);
$(' #message ').load(' /ajax/test.html '); var fn = function(txnid, o) { Load the content of a given URL and replace the contents of
Y.one(' #message ').setContent( # m e s s a g e with it.
o.responseText
);
}
Y.io(' /ajax/test.html ', {
on: { success: fn }
});
.removeClass(' foo ').addClass(' bar ') .replaceClass(' foo ', ' bar ') Replace node's CSS class 'foo' with 'bar'.
.position() .getXY() Get the computed x,y coordinates. The coordinates are relative to the
// {left: 123, top: 456} // [123, 456] nearest ancestor element that is relatively or absolutely positioned.