SlideShare a Scribd company logo
1 of 31
Download to read offline
Learning

      jQuery
         in 30 minutes
Simon Willison     http://simonwillison.net/
BarCamp London 3      24th November 2007
What is it?
ā€¢ A JavaScript library, just like...
  ā€¢ Prototype
  ā€¢ YUI
  ā€¢ Dojo
  ā€¢ mooTools
Why jQuery instead of...?

ā€¢   Unlike Prototype and mooTools...

    ā€¢   ... it doesnā€™t interfere with your global namespace

ā€¢   Unlike YUI...

    ā€¢   ... itā€™s extremely succinct

ā€¢   Unlike Dojo...

    ā€¢   ... you can learn it in half an hour!
jQuery philosophy

ā€¢ Focus on the interaction between JavaScript
  and HTML
ā€¢ (Almost) every operation boils down to:
 ā€¢ Find some stuff
 ā€¢ Do something to it
Only one function!
ā€¢ Absolutely everything* starts with a call to
  the jQuery() function
ā€¢ Since itā€™s called so often, the $ variable is set
  up as an alias to jQuery
ā€¢ If youā€™re also using another library you can
  revert to the previous $ function with
  jQuery.noConļ¬‚ict();

                 * not entirely true
jQuery('#nav')

jQuery('div#intro h2')

jQuery('#nav li.current a')
$('#nav')

$('div#intro h2')

$('#nav li.current a')
CSS 2 and 3 selectors
a[rel]
a[rel=quot;friendquot;]
a[href^=quot;http://quot;]
ul#nav > li
li#current ~ li (li siblings that follow #current)
li:ļ¬rst-child, li:last-child, li:nth-child(3)
Magic selectors
div:ļ¬rst, h3:last
:header
:hidden, :visible
:animated
:input, :text, :password, :radio, :submit...
div:contains(Hello)
jQuery collections
ā€¢ $('div.section') returns a jQuery collection
ā€¢ You can call treat it like an array
     $('div.section').length = no. of matched elements
     $('div.section')[0] - the ļ¬rst div DOM element
     $('div.section')[1]
     $('div.section')[2]
jQuery collections
ā€¢ $('div.section') returns a jQuery collection
ā€¢ You can call methods on it:
    $('div.section').size() = no. of matched elements
    $('div.section').each(function() {
      console.log(this);
    });
jQuery collections
ā€¢ $('div.section') returns a jQuery collection
ā€¢ You can call methods on it:
    $('div.section').size() = no. of matched elements
    $('div.section').each(function(i) {
      console.log(quot;Item quot; + i + quot; is quot;, this);
    });
HTML futzing

$('span#msg').text('The thing was updated!');


$('div#intro').html('<em>Look, HTML</em>');
Attribute futzing
$('a.nav').attr('href', 'http://ļ¬‚ickr.com/');
$('a.nav').attr({
 'href': 'http://ļ¬‚ickr.com/',
 'id': 'ļ¬‚ickr'
});
$('#intro').removeAttr('id');
CSS futzing
$('#intro').addClass('highlighted');
$('#intro').removeClass('highlighted');
$('#intro').toggleClass('highlighted');


$('p').css('font-size', '20px');
$('p').css({'font-size': '20px', color: 'red'});
Grabbing values
ā€¢ Some methods return results from the ļ¬rst
  matched element
  var height = $('div#intro').height();
  var src = $('img.photo').attr('src');
  var lastP = $('p:last').html()
  var hasFoo = $('p').hasClass('foo');
  var email = $('input#email').val();
Traversing the DOM
ā€¢ jQuery provides enhanced methods for
  traversing the DOM
  $('div.section').parent()
  $('div.section').next()
  $('div.section').prev()
  $('div.section').nextAll('div')
  $('h1:ļ¬rst').parents()
Handling events

$('a:ļ¬rst').click(function(ev) {
 $(this).css({backgroundColor: 'orange'});
 return false; // Or ev.preventDefault();
});
Handling events

$('a:ļ¬rst').click(function(ev) {
 $(this).css({backgroundColor: 'orange'});
 return false; // Or ev.preventDefault();
});
$('a:ļ¬rst').click();
Going unobtrusive

$(document).ready(function() {
 alert('The DOM is ready!');
});
Going unobtrusive

$(function() {
 alert('The DOM is ready!');
});
Chaining

ā€¢ Most jQuery methods return another
  jQuery object - usually one representing the
  same collection. This means you can chain
  methods together:
  $('div.section').hide().addClass('gone');
Advanced chaining
ā€¢ Some methods return a different collection
ā€¢ You can call .end() to revert to the previous
  collection
Advanced chaining
ā€¢ Some methods return a different collection
ā€¢ You can call .end() to revert to the previous
  collection
  $('#intro').css('color', '#cccccc').
    ļ¬nd('a').addClass('highlighted').end().
    ļ¬nd('em').css('color', 'red').end()
Ajax
ā€¢   jQuery has excellent support for Ajax
      $('div#intro').load('/some/ļ¬le.html');

ā€¢   More advanced methods include:
      $.get(url, params, callback)
      $.post(url, params, callback)
      $.getJSON(url, params, callback)
      $.getScript(url, callback)
Animation
ā€¢ jQuery has built in effects:
    $('h1').hide('slow');
    $('h1').slideDown('fast');
    $('h1').fadeOut(2000);
ā€¢ You can chain them:
    $('h1').fadeOut(1000).slideDown()
Or roll your own...
$(quot;#blockquot;).animate({
     width: quot;+=60pxquot;,
     opacity: 0.4,
     fontSize: quot;3emquot;,
     borderWidth: quot;10pxquot;
    }, 1500);
Plugins
ā€¢ jQuery is extensible through plugins, which
  can add new methods to the jQuery object


  ā€¢ Form: better form manipulation
  ā€¢ UI: drag and drop and widgets
  ā€¢ $('img[@src$=.png]').iļ¬xpng()
  ā€¢ ... dozens more
jQuery.fn.hideLinks = function() {
    this.ļ¬nd('a[href]').hide();
    return this;
}


$('p').hideLinks();
jQuery.fn.hideLinks = function() {
    return this.ļ¬nd('a[href]').hide().end();
}


$('p').hideLinks();
Further reading

ā€¢   http://jquery.com/
ā€¢   http://docs.jquery.com/
ā€¢   http://visualjquery.com/ - API reference
ā€¢   http://simonwillison.net/tags/jquery/

More Related Content

What's hot

JavaScript: Variables and Functions
JavaScript: Variables and FunctionsJavaScript: Variables and Functions
JavaScript: Variables and Functions
Jussi Pohjolainen
Ā 
Advanced Javascript
Advanced JavascriptAdvanced Javascript
Advanced Javascript
Adieu
Ā 

What's hot (20)

JavaScript: Variables and Functions
JavaScript: Variables and FunctionsJavaScript: Variables and Functions
JavaScript: Variables and Functions
Ā 
Php mysql ppt
Php mysql pptPhp mysql ppt
Php mysql ppt
Ā 
Form Handling using PHP
Form Handling using PHPForm Handling using PHP
Form Handling using PHP
Ā 
jQuery
jQueryjQuery
jQuery
Ā 
jQuery PPT
jQuery PPTjQuery PPT
jQuery PPT
Ā 
Basics of JavaScript
Basics of JavaScriptBasics of JavaScript
Basics of JavaScript
Ā 
Hibernate ppt
Hibernate pptHibernate ppt
Hibernate ppt
Ā 
jQuery
jQueryjQuery
jQuery
Ā 
HTML/CSS/java Script/Jquery
HTML/CSS/java Script/JqueryHTML/CSS/java Script/Jquery
HTML/CSS/java Script/Jquery
Ā 
Html form tag
Html form tagHtml form tag
Html form tag
Ā 
JavaScript: Events Handling
JavaScript: Events HandlingJavaScript: Events Handling
JavaScript: Events Handling
Ā 
Node Architecture and Getting Started with Express
Node Architecture and Getting Started with ExpressNode Architecture and Getting Started with Express
Node Architecture and Getting Started with Express
Ā 
Java script
Java scriptJava script
Java script
Ā 
Datatype in JavaScript
Datatype in JavaScriptDatatype in JavaScript
Datatype in JavaScript
Ā 
JavaScript - Chapter 3 - Introduction
 JavaScript - Chapter 3 - Introduction JavaScript - Chapter 3 - Introduction
JavaScript - Chapter 3 - Introduction
Ā 
Advanced Javascript
Advanced JavascriptAdvanced Javascript
Advanced Javascript
Ā 
Ajax ppt - 32 slides
Ajax ppt - 32 slidesAjax ppt - 32 slides
Ajax ppt - 32 slides
Ā 
Bootstrap PPT Part - 2
Bootstrap PPT Part - 2Bootstrap PPT Part - 2
Bootstrap PPT Part - 2
Ā 
JavaScript
JavaScriptJavaScript
JavaScript
Ā 
javascript objects
javascript objectsjavascript objects
javascript objects
Ā 

Similar to Learning jQuery in 30 minutes

Learning jquery-in-30-minutes-1195942580702664-3
Learning jquery-in-30-minutes-1195942580702664-3Learning jquery-in-30-minutes-1195942580702664-3
Learning jquery-in-30-minutes-1195942580702664-3
luckysb16
Ā 
Jquery in-15-minutes1421
Jquery in-15-minutes1421Jquery in-15-minutes1421
Jquery in-15-minutes1421
palsingh26
Ā 
The Dom Scripting Toolkit J Query
The Dom Scripting Toolkit J QueryThe Dom Scripting Toolkit J Query
The Dom Scripting Toolkit J Query
QConLondon2008
Ā 
J Query The Write Less Do More Javascript Library
J Query   The Write Less Do More Javascript LibraryJ Query   The Write Less Do More Javascript Library
J Query The Write Less Do More Javascript Library
rsnarayanan
Ā 
jQuery Fundamentals
jQuery FundamentalsjQuery Fundamentals
jQuery Fundamentals
Doncho Minkov
Ā 

Similar to Learning jQuery in 30 minutes (20)

Learning jquery-in-30-minutes-1195942580702664-3
Learning jquery-in-30-minutes-1195942580702664-3Learning jquery-in-30-minutes-1195942580702664-3
Learning jquery-in-30-minutes-1195942580702664-3
Ā 
jQuery in 15 minutes
jQuery in 15 minutesjQuery in 15 minutes
jQuery in 15 minutes
Ā 
Jquery in-15-minutes1421
Jquery in-15-minutes1421Jquery in-15-minutes1421
Jquery in-15-minutes1421
Ā 
jQuery (BostonPHP)
jQuery (BostonPHP)jQuery (BostonPHP)
jQuery (BostonPHP)
Ā 
jQuery
jQueryjQuery
jQuery
Ā 
J query
J queryJ query
J query
Ā 
Prototype & jQuery
Prototype & jQueryPrototype & jQuery
Prototype & jQuery
Ā 
Jquery News Packages
Jquery News PackagesJquery News Packages
Jquery News Packages
Ā 
jQuery (MeshU)
jQuery (MeshU)jQuery (MeshU)
jQuery (MeshU)
Ā 
The Dom Scripting Toolkit J Query
The Dom Scripting Toolkit J QueryThe Dom Scripting Toolkit J Query
The Dom Scripting Toolkit J Query
Ā 
jQuery Presentation to Rails Developers
jQuery Presentation to Rails DevelopersjQuery Presentation to Rails Developers
jQuery Presentation to Rails Developers
Ā 
JavaScript the Smart Way - Getting Started with jQuery
JavaScript the Smart Way - Getting Started with jQueryJavaScript the Smart Way - Getting Started with jQuery
JavaScript the Smart Way - Getting Started with jQuery
Ā 
J Query The Write Less Do More Javascript Library
J Query   The Write Less Do More Javascript LibraryJ Query   The Write Less Do More Javascript Library
J Query The Write Less Do More Javascript Library
Ā 
jQuery Basic API
jQuery Basic APIjQuery Basic API
jQuery Basic API
Ā 
jQuery (DrupalCamp Toronto)
jQuery (DrupalCamp Toronto)jQuery (DrupalCamp Toronto)
jQuery (DrupalCamp Toronto)
Ā 
jQuery Fundamentals
jQuery FundamentalsjQuery Fundamentals
jQuery Fundamentals
Ā 
jQuery
jQueryjQuery
jQuery
Ā 
JQuery In Drupal
JQuery In DrupalJQuery In Drupal
JQuery In Drupal
Ā 
Javascript Memory leaks and Performance & Angular
Javascript Memory leaks and Performance & AngularJavascript Memory leaks and Performance & Angular
Javascript Memory leaks and Performance & Angular
Ā 
J query training
J query trainingJ query training
J query training
Ā 

More from Simon Willison

Building Things Fast - and getting approval
Building Things Fast - and getting approvalBuilding Things Fast - and getting approval
Building Things Fast - and getting approval
Simon Willison
Ā 
Rediscovering JavaScript: The Language Behind The Libraries
Rediscovering JavaScript: The Language Behind The LibrariesRediscovering JavaScript: The Language Behind The Libraries
Rediscovering JavaScript: The Language Behind The Libraries
Simon Willison
Ā 

More from Simon Willison (20)

How Lanyrd does Geo
How Lanyrd does GeoHow Lanyrd does Geo
How Lanyrd does Geo
Ā 
Cheap tricks for startups
Cheap tricks for startupsCheap tricks for startups
Cheap tricks for startups
Ā 
The Django Web Framework (EuroPython 2006)
The Django Web Framework (EuroPython 2006)The Django Web Framework (EuroPython 2006)
The Django Web Framework (EuroPython 2006)
Ā 
Building Lanyrd
Building LanyrdBuilding Lanyrd
Building Lanyrd
Ā 
How we bootstrapped Lanyrd using Twitter's social graph
How we bootstrapped Lanyrd using Twitter's social graphHow we bootstrapped Lanyrd using Twitter's social graph
How we bootstrapped Lanyrd using Twitter's social graph
Ā 
Web Services for Fun and Profit
Web Services for Fun and ProfitWeb Services for Fun and Profit
Web Services for Fun and Profit
Ā 
Tricks & challenges developing a large Django application
Tricks & challenges developing a large Django applicationTricks & challenges developing a large Django application
Tricks & challenges developing a large Django application
Ā 
Advanced Aspects of the Django Ecosystem: Haystack, Celery & Fabric
Advanced Aspects of the Django Ecosystem: Haystack, Celery & FabricAdvanced Aspects of the Django Ecosystem: Haystack, Celery & Fabric
Advanced Aspects of the Django Ecosystem: Haystack, Celery & Fabric
Ā 
How Lanyrd uses Twitter
How Lanyrd uses TwitterHow Lanyrd uses Twitter
How Lanyrd uses Twitter
Ā 
ScaleFail
ScaleFailScaleFail
ScaleFail
Ā 
Building Things Fast - and getting approval
Building Things Fast - and getting approvalBuilding Things Fast - and getting approval
Building Things Fast - and getting approval
Ā 
Rediscovering JavaScript: The Language Behind The Libraries
Rediscovering JavaScript: The Language Behind The LibrariesRediscovering JavaScript: The Language Behind The Libraries
Rediscovering JavaScript: The Language Behind The Libraries
Ā 
Building crowdsourcing applications
Building crowdsourcing applicationsBuilding crowdsourcing applications
Building crowdsourcing applications
Ā 
Evented I/O based web servers, explained using bunnies
Evented I/O based web servers, explained using bunniesEvented I/O based web servers, explained using bunnies
Evented I/O based web servers, explained using bunnies
Ā 
Cowboy development with Django
Cowboy development with DjangoCowboy development with Django
Cowboy development with Django
Ā 
Crowdsourcing with Django
Crowdsourcing with DjangoCrowdsourcing with Django
Crowdsourcing with Django
Ā 
Django Heresies
Django HeresiesDjango Heresies
Django Heresies
Ā 
Class-based views with Django
Class-based views with DjangoClass-based views with Django
Class-based views with Django
Ā 
Web App Security Horror Stories
Web App Security Horror StoriesWeb App Security Horror Stories
Web App Security Horror Stories
Ā 
Web Security Horror Stories
Web Security Horror StoriesWeb Security Horror Stories
Web Security Horror Stories
Ā 

Recently uploaded

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
Ā 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
WSO2
Ā 

Recently uploaded (20)

Navi Mumbai Call Girls šŸ„° 8617370543 Service Offer VIP Hot Model
Navi Mumbai Call Girls šŸ„° 8617370543 Service Offer VIP Hot ModelNavi Mumbai Call Girls šŸ„° 8617370543 Service Offer VIP Hot Model
Navi Mumbai Call Girls šŸ„° 8617370543 Service Offer VIP Hot Model
Ā 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Ā 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
Ā 
Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024
Ā 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
Ā 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
Ā 
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu SubbuApidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
Ā 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
Ā 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Ā 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Ā 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Ā 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
Ā 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Ā 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Ā 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
Ā 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
Ā 
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Ā 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
Ā 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
Ā 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Ā 

Learning jQuery in 30 minutes