How to Use jQuery
to Enhance your Web Design

Future of Web Design, 2009

* 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?

Karl Swedberg
Email: learningjquery.com@karl
Twitter: @kswedberg
Web Developer, Fusionary Media
Member, jQuery Project Team
Author and Editor, jQuery books

Who Are You?

HTML / CSS Experience?
JavaScript Experience?
jQuery Experience?

JavaScript

A Very Brief (and Opinionated) History

Inline Scripts

<a href="#whatisit" onMouseOut="MM_swapImgRestore()"
  onMouseOver="MM_swapImage('Whatis','',
  'whatis-active.png',1)">
  <img name="Whatis" src="buttons/whatis-unactive.png"></a>

The <font> of JavaScript

Inline Scripts

<ul>
  <script>if(DetermineFocus('contactus.htm')) {
    document.write('<li class="selected">')
  } else {
    document.write('<li>')
  }</script>

Like structuring a page with a bunch of
<span style="display: block">

DOM Scripting /
Web Standards

Unobtrusive JavaScript
Tests features, not browsers

Unobtrusive

Content
Presentation
Behavior

Tests Features

var x,y;
if (self.innerHeight) { // all except Explorer
  x = self.innerWidth;
  y = self.innerHeight;
}
else if (document.documentElement && 
  document.documentElement.clientHeight) { 
   // Explorer 6 Strict Mode
  x = document.documentElement.clientWidth;
  y = document.documentElement.clientHeight;
}
else if (document.body) { // other Explorers
  x = document.body.clientWidth;
  y = document.body.clientHeight;
}

Along Came jQuery

(and other libraries)

Open-source JavaScript library
Unobtrusive from the ground up
Quick, terse syntax
Simplifies interaction between HTML & JavaScript

jQuery Is Open Source

Dual-licensed: MIT and GPL
Take your pick
Most people pick MIT

jQuery Is Open Source

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND …

jQuery Is Unobtrusive

Content
Presentation
Behavior

jQuery Has Quick, Terse Syntax

var x = $(window).width();
var y = $(window).height();

jQuery Simplifies Interaction

Find Some Elements
Do Something With Them

Find Some Elements

Full CSS Selector 1-3 Support
Better CSS Selector support than most browsers

$

$ == jQuery

$( )

$() == jQuery()

$( 'div' )

Do Something With Them

Let elements "listen" for something to happen…

the document is ready
user does something
another "listener" acts
a certain amount of time elapses

Do Something With Them

…and then do something

Manipulate elements create, insert, move, remove. modify attributes, dimensions, etc.
Animate elements slide, fade, move, etc.
Communicate with the server send and receive data (ajax, ahah)

Reference Scripts

Reference scripts after styles
Reference custom scripts come after jQuery core
Reference plugins in between jQuery core and custom scripts
Reference scripts in <head> or just before </body>

Download jQuery …

from jquery.com

… or Use a CDN

from Google: http://code.google.com/apis/ajaxlibs
from Microsoft: http://www.asp.net/ajax/cdn/

Reference Scripts

<head>
  <!-- etc. -->
  <link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>  
  <!-- etc. -->
  <script src="/scripts/jquery.js"></script>
  <script src="/scripts/my-custom-script.js"></script>
</body>

Reference Scripts

<head>
  <!-- etc. -->
  <link rel="stylesheet" href="style.css" type="text/css" />
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
  <script src="/scripts/my-custom-script.js"></script>
</head>

Reference Scripts

<head>
  <!-- etc. -->
  <link rel="stylesheet" href="style.css" type="text/css" />
  <script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.3.2.min.js"></script>
</head>
<body>  
  <!-- etc. -->
  <script src="/scripts/my-custom-script.js"></script>
</body>

$(document).ready( )

Code executes when the structure of the document has loaded (The DOM, or Document Object Model, is constructed by the browser)
Does not wait for images to load
Usually better than window.onload

$(document).ready( )

$(document).ready(function() {	
	// Stuff to do as soon as the DOM is ready;
});

After $(document).ready( ) ?

When images need to be loaded first
When you're absolutely sure you won't need to execute the script until everything is finished loading

$(window).bind('load', function() {	
	// Stuff to do after everything is loaded;
});

Before $(document).ready( ) ?

When something needs to be styled, hidden, etc. immediately
When you need to avoid the dreaded Flash of Unstyled Content

<head>
  <script type="text/javascript">
    document.documentElement.className = 'js';
  </script>
  <!-- etc. -->          
</head>

Script Placement and Execution

Script placement and execution is an art
Can dramatically affect user perception and overall experience
A lot depends on what you're trying to achieve
Demonstration (Look for green, yellow, and red boxes)

Back to Finding Something

CSS Selectors

$('element {}
$('#id {}
$('.class {}
$('ancestor descendant {}
$('parent > child {}

CSS Selectors (with jQuery)

$('element ')
$('#id ')
$('.class ')
$('ancestor descendant')
$('parent > child ')

More CSS Selectors

$(':nth-child(n){}
$(':not(selector){}
$('prev + adjSibling{}
$('[attr]{}
$('[attr^=value]{}

More CSS Selectors (with jQuery)

$(':nth-child(n) ')
$(':not(selector) ')
$('prev + adjSibling ')
$('[attr] ')
$('[attr^=value] ')

More Selectors (with jQuery)

$(':input') , $(':button') , and so on.
$(':checkbox') , $(':text') , $(':radio') , and so on.
$(':checked') , $(':selected') , $(':disabled')
$(':has(descendant)')
$(':gt(n)') , $(':lt(n)') , $(':eq(n)') , $(':first') , $(':last')
$(':even') , $(':odd')
$(':visible') , $(':hidden') , $(':animated')

Selector Demo

<div class="body">
  <h2>Some Header</h2>
  <div class="contents">
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <p>Paragraph 3</p>
  </div>
</div>

Some Header

Paragraph 1

Paragraph 2

Paragraph 3

* Because of the crazy way we're doing this, a few selectors (such as nth-child) will produce unexpected results in the code view box (on the left).

Traversing

Keep refining the selection after the initial selector.
Example:
```
$('#my-span').parents('div:first')
```
More examples

Let's Do Something!

$('li:lt(2)').addClass('special');

'li:lt(2)' finds some elements using CSS selectors (find something)
.addClass('special') modifies all the list items (we're finally doing something!)

Manipulation - .after( )

$('a[href$=.pdf]')
  .after(' <img src="/images/pdf.png" alt="PDF" />');

Manipulation - .css( )

$('a').css({
  color: 'red',
  fontWeight: 'bold',
  'background-color': '#ff3'
});

Interaction - .submit( )

$('form').submit(function() {
  if ( $('#name').val() == '' ) {
    $('span.help').show();
      return false;
  }
});

Name:
Please enter your name!

Interaction - .click( )

$('a.menu').click(function() {
  $(this).next().toggle();
  return false;
});

Menu A
- Item 1
- Item 2
Menu B
- Item 1
- Item 2

Animation - .slideToggle( )

$('a.menu').click(function() {
  $(this).next().slideToggle('slow');
  return false;
});

Menu A
- Item 1
- Item 2
Menu B
- Item 1
- Item 2

Animation - .animate( )

$('div.block').animate({
  fontSize: '2em',
  width: '+=20%',
  backgroundColor: 'green'
});

hello!

* Requires the jQuery color plugin

Animation with a “Callback”

$('div.block').hide('slow', function() {
  $(this).show('slow');
});

hello!

Ajax - .load( )

$('div.load').load('file.html');

hello!

Ajax - .load( ) with Selector

$('div.load').load('file.html h2');

hello!

“Live” Events

$('tr')
  .bind('click', function() {
    $(this).css({color: red});
  })
  .live('click', function() {
    $(this).css({backgroundColor: yellow});
  });

heading	another	yet another
data	more data	even more
data	more data	even more

Chaining

You can have multiple actions against a single set of elements

$('div').css('color','blue');
$('div').css('color','blue').addClass('hehe');
$('div')
  .css('color','blue')
  .addClass('hehe')
  .append('<p>bye</p>');

HTML Selector

$('<li><a></a></li>')
.find('a')
  .attr('href', 'http://www.learningjquery.com/')
  .html('Learn More')
.end()
.appendTo('#html ul');

Simple Row Striping

heading	another	yet another
data	more data	even more
data	more data	even more
data	more data	even more

heading	another	yet another
data	more data	even more
data	more data	even more

Plugins

jQuery plugins provide solutions for sophisticated problems
You'll want to use some of them over and over
Many can be used as a starting point or for inspiration
Can be difficult to find quality

Apply a Plugin

For most plugins, select element(s) and apply the plugin method

$(document).ready(function() {

  $('#slideshow').cycle();

});

Plugin Options

Nearly all plugins provide customized settings
Nearly all settings are optional
Defaults are defined by the plugin

$(document).ready(function() {

  $('#slideshow').cycle({timeout: 8000, pause: true});

});

Plugin Options

Options can be set one per line for readability

$('#slideshow').cycle(

{ 
  fx: 'scrollHorz',
  timeout: 8000, 
  pause: true 
}

);

jQuery UI

jqueryui.com

jQuery UI

Focus on high quality
lots of effects
low-level components to build upon
high-level widgets for drop-in solutions
work out-of-the-box
customizable

ThemeRoller

CSS framework
ThemeRoller tools
theme gallery

A Few Recommended Plugins

from Mike Alsup: malsup.com/jquery

Cycle
Form
Media

A Few Recommended Plugins

from Brandon Aaron github.com/brandonaaron

Expandable (for textareas)
bgIframe
mousewheel

A Few Recommended Plugins

from me plugins.learningjquery.com, github.com/kswedberg

clueTip
Default Text
Smooth Scroll
jCarousel Lite (fork from Ganeshji Marwaha)

A Few Recommended Plugins

from others

Let's Take a Look

Fusionary: Cycle, jQuery UI Slider
Kendall: cookies, cycle, accordion, live filter
Jarob: conditionally fixed position, table columns, expandable textarea. Not yet available.
Byrne: parallax, animation

Thank You!

Email: learningjquery.com@karl
Twitter: @kswedberg

How to Use jQuery to Enhance your Web Design

Future of Web Design, 2009

Who Am I?

Who Are You?

JavaScript

A Very Brief (and Opinionated) History

Inline Scripts

Inline Scripts

DOM Scripting / Web Standards

Unobtrusive

Tests Features

Along Came jQuery

jQuery Is Open Source

jQuery Is Open Source

jQuery Is Unobtrusive

jQuery Has Quick, Terse Syntax

jQuery Simplifies Interaction

Find Some Elements

$

$( )

$( 'div' )

Do Something With Them

Do Something With Them

Reference Scripts

Download jQuery …

… or Use a CDN

Reference Scripts

Reference Scripts

Reference Scripts

$(document).ready( )

$(document).ready( )

After $(document).ready( ) ?

Before $(document).ready( ) ?

Script Placement and Execution

Back to Finding Something

CSS Selectors

CSS Selectors (with jQuery)

More CSS Selectors

More CSS Selectors (with jQuery)

More Selectors (with jQuery)

Selector Demo

<h2>Some Header</h2>

Some Header

Traversing

Let's Do Something!

Manipulation - .after( )

Manipulation - .css( )

Interaction - .submit( )

Interaction - .click( )

Animation - .slideToggle( )

Animation - .animate( )

Animation with a “Callback”

Ajax - .load( )

Ajax - .load( ) with Selector

“Live” Events

Chaining

HTML Selector

Simple Row Striping

Plugins

Apply a Plugin

Plugin Options

Plugin Options

jQuery UI

jQuery UI

ThemeRoller

A Few Recommended Plugins

A Few Recommended Plugins

A Few Recommended Plugins

A Few Recommended Plugins

Let's Take a Look

Thank You!

How to Use jQuery
to Enhance your Web Design

DOM Scripting /
Web Standards