jQuery®

What Is It?
Why Should I Care?

Fox Valley Computing Professionals
April 12, 2011

* Right arrow key or Return/Enter to move forward; left arrow key to move backward. Or, use slide list at bottom of page (appears on hover)

Who Am I?

Kevin Gustavson

Who uses it?

Statistics (as of March 15)

221,348 of the top million websites (22%)

19,914,540 Total Websites

Features

Loading jQuery

Loading jQuery is very easy...

It's lightweight and fast, only 29KB when Minified and Gzipped.

Available from jQuery.com

Or from one of the following CDNs:

OR . . .

Download it from...

http://www.Drupal.org/ !

Using jQuery

jQuery begins with a factory pattern, like this:

jQuery(selectors).function();

You can also use the shortcut:

$(selectors).function();

The selectors are standard CSS with some additions.

jQuery has a number of functions:

$('#hidden').show();

$('div.error').hide();

DOM Selectors

Just like CSS, you can combine elements to make a more powerful search.

$('#my_div ul li span').html('blue is better');

CSS 2.1 can also be used as selectors.

$('#my_div > p').css('color','#00F');

Attributes

email = $("input[name='email_addr']").val();

Getting more selective

li = $("li:eq(2)").html();

ul = $("ul:has('p')").html();

DOM Selectors (cont.)

Adjacent Selectors

$para = $('ul + p').css('font-style','italic');

Contains

txt = $("p:contains('bada')").text();

Disabled elements

$(':input:disabled').removeAttr('disabled');

There are many more jQuery specific selectors that can make your website coding faster and more fun.

Chainability

Chainability is my favorite feature of jQuery.

You could do something like this...

$element = $('#my_div');

$element.addClass('highlight');

$element.add('<p>Something here.</p>');

$element.parent().click(clickHandler);

Chainability (cont.)

But chaining is better...

$('ul.admin')

   .append('<li>My cool project</li>')

   .removeClass('beta-project')

   .addClass('production')

   .css('font-weight','normal');


Readability with chaining

$(':input:eq(0)').parents(':not(:first)').show();

Arrays and Collections

Collections work as a single unit.

This means that in many cases you won't have to loop through a set of elements.

$('div.simple:gt(2)').remove();

Arrays are a little more complex, but still pretty easy.

var data = [ 'text1', 'text2', 'text3' ];
    
$.each(data, function(key, value) {
    alert( "The key is '" + key + "' and the value is '" + value + "'" );
});
    

Traveling Up and Down the DOM

Going up...

$('p:contains(Resig)').parents('div').html();

Going down...

$('#content').children(':first').hide();

Backing up...

$('#dishes').prev().append('Sold Out!');

Going forward...

$('#socks').next().children("li").css('margin','1.2em');

Event handling

The bind() function.

$('.camera').bind('click', function(el) { add_to_shopping_cart(el); }

The click() shortcut function.

$('#dl17b').click(remove_from_shopping_cart);

Other events you can use:

blur, change, dblclick, error, focus, hover, keypress, load, mouseover, ready, resize, scroll, select¸ submit, toggle, unload…

Plus several derivatives of these.

Effects and animations

There are a number of different animation and effects that can be used to great benefit.

animate, delay, fadeIn, fadeOut, fadeTo, fadeToggle, hide, slideDown, slideUp, slideToggle, show, stop, toggle, etc.

Conubia nostra, per inceptos himenaeos. Nulla lectus sem, tristique sed, semper in, hendrerit non, sem. Vivamus dignissim massa in ipsum. Morbi fringilla ullamcorper ligula. Nunc turpis. Mauris vitae sapien. Nunc luctus bibendum velit.

Effects and animations (cont.)

animate() is the most generic, which makes it the most useful.

$('li').animate(
{ opacity: .5, height: '50%' },
{
  step: function(now, fx) {
    var data = fx.elem.id + ' ' + fx.prop + ': ' + now;
    $('body').append('<div>' + data + '</div>');
});

Browser Feature Detection

The support tests supported are:

ajax boxModel changeBubbles checkClone
cors cssFloat hrefNormalized htmlSerialize
leadingWhitespace noCloneChecked noCloneEvent
opacity optDisabled optSelected scriptEval()
style submitBubbles tbody

Extending jQuery

Writing jQuery plugins is an advanced topic but fairly easy to get into.

(function($){
$.fn.lockDimensions = function( type ) {  
    return this.each(function() {
    var $this = $(this);
    if ( !type || type == 'width' ) { $this.width( $this.width() ); }
          if ( !type || type == 'height' ) { $this.height( $this.height() ); }
    });
};
})( jQuery );

And call it like this…
$('div').lockDimensions('width').css('color', 'red');

jQuery Child Projects

jQuery UI

jQuery UI builds upon the excellent jQuery framework by abstracting out some of the low-level animations and effects. It also provides a powerful set of widgets and themes.

jQuery Mobile

"The jQuery mobile framework will allow you to design a single highly branded and customized web application that will work on all popular smartphone and tablet platforms." --from the jQuery Mobile website

Versions

Version 1.3

Version 1.4

Version 1.5

I've barely scratched the surface...

Where to get more information

Thanks to:

jQuery plugins used:

http://kevingustavson.info/presentations/jquery/

Any Questions?