jQuery - an introduction

Joseph L. LeBlanc

DC PHP Developers Group, October 10, 2007

A Javascript framework designed to make cross-browser DOM programming easier.

Can also be used to create Flash-like animations.

Find this, do something

$('#message1').show('medium');

$('#message1').addClass('alert');

jQuery at work

Chainable events: find this, do several things in succession

$('#message2').fadeIn('slow').addClass('alert').html('Validate your markup!');

(text goes here)

Animations

• Built in
  • fadeIn()
  • fadeOut()
  • hide()
  • show()
  • slideDown()
  • slideUp()
  • toggle()
  • slideToggle()
  • fadeTo()
  • animate()
• See also:
  • Easing Plug-in
  • jQuery User Interface: http://ui.jquery.com

When is DOM ready?

We can use the ready() function to find out

$(document).ready(function() {
    // start coding
});

CSS:

• $('p');
• $('p.message');
• $('#message .text');
• $('ul#menu > li');
• $('ul#menu ul');

Attribute Matching:

• $('img[@alt]');
• $('a[@href*=google]');

Many more: XPath, :eq(n), :lt(n), etc...

Don't add "onclick" to your markup: use jQuery to find and assign events

$('#control').click(function() {
    $('#message').show().addClass('alert');
});

$('#control').toggle(function() {
    $('#message').show().addClass('alert');
}, function(){
    $('#message').removeClass('alert').hide();
});

Other frameworks also use the $ shortcut

Add code like this before making any jQuery calls:

var foo = jQuery.noConflict();

Then use it like this:

foo('#message').show();

AHAH style (Asynchronous HTML and HTTP)

$('#control').click(function() {
    $('#message').load('current.php');
});

$('#demo3-1 li').click(function() {
    $city = $.trim($(this).text());
    $('#city-container p').html('Loading...').load('cities.php', { city: $city });
});

AHAH PHP Backend

$content = array(
    'Washington DC' => 'Washington, D.C. is the capital...'
    ...
);

if (isset($_REQUEST['city'])) {

    $city = $_REQUEST['city'];

    if (in_array($city, array_keys($content))) {
        echo $content[$city];
    }
}

• Washington DC
• New York
• Los Angeles
• Chicago
• San Francisco

$.getJSON("citiesjson.php", function(json){
    $citydata = json;
});

$('#demo4-1 li').click(function() {
    $city = $.trim($(this).text());
    $('#city-json-container p').html($citydata[$city]);
});

$content = array(
    'Washington DC' => 'Washington, D.C. is the capital...'
    ...
);

echo json_encode($content);

• Washington DC
• New York
• Los Angeles
• Chicago
• San Francisco

RSS feed of a blog

<?xml version="1.0" encoding="iso-8859-1"?>
<!-- generator="FeedCreator 1.7.2" -->
<rss version="2.0">
    <channel>
        <title>Joe LeBlanc's Blog</title>
        <description>Joe's personal weblog</description>
        <link>http://www.sidewalkadvocate.com</link>
        <lastBuildDate>Tue, 09 Oct 2007 19:34:03 +0100</lastBuildDate>
        <generator>FeedCreator 1.7.2</generator>
        <item>
            <title>Designed by Apple in California</title>
            <link>http://www.sidewalkadvocate.com/content/view/218/6/</link>
            <description>Joel reflects (http://www.joelonsoftware.com/items/2007/10/05.html) on some of Apple's subtle marketing and Microsoft's lame attempt at copying it. </description>
            <category>Writings - Miscellaneous</category>
            <pubDate>Mon, 08 Oct 2007 10:25:19 +0100</pubDate>
        </item>
        <item>
            <title>While programming today...</title>
        ...

$('#demo5-1').click(function() {
    $('#headline-container').html('');
    $.get('headlines.xml', function(rss){
        $(rss).find('item title').each(function(index) {
            $('#headline-container').append('<p>' + $(this).text() + '</p>');
        });
    });
});

Get blog headlines

Books

• Learning jQuery
• jQuery Reference Guide
• Both by Karl Swedberg (a jQuery team member) and Jonathan Chaffer

Websites

• http://docs.jquery.com
• http://visualjquery.com
• http://15daysofjquery.com