jQuery in 15 minutes

Simon Willison
Simon WillisonCEO and Co-Founder at Lanyrd
jQuery in 15 minutes
    Torchbox, 7th August 2007
What makes jQuery
      interesting?
• Built around CSS selectors
• Well behaved
 • Doesn’t hijack your global namespace
 • Plays well with other libraries
• API designed with conciseness and
  convenience as the driving factors
The jQuery() function

jQuery('div#intro h2')
jQuery('div.section > p')
jQuery('input:radio')


$('div#intro h2')
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(div) {
        // Manipulate the div
    }
Manipulating collections
• Most jQuery methods operate on all of the
  matched elements in the collection


  $('div.section').addClass('highlighted')
  $('img.photo').attr('src', '/default.png');
  $('a.foo').html('<em>Click me now!</em>');
  $('p:odd').css('background-color', '#ccc');
Grabbing values
• Some methods return results from the first
  matched element


  var height = $('div#intro').height();
  var src = $('img.photo').attr('src');
  var lastP = $('p:last').html()
Traversing the DOM
• jQuery provides enhanced methods for
  traversing the DOM
  $('div.section').next()
  $('div.section').prev()
  $('div.section').prev('a')
  $('div.section').parent()
  $('div.section').parents()
Handling events
• jQuery provides methods for assigning event
  handlers to elements in a cross-browser way
  $('a').click(function(ev) {
   $(this).css({backgroundColor: 'orange'});
   ev.preventDefault();
  });
Going unobtrusive

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


$(function() { alert('This is a shortcut') });
Chaining

• Most jQuery methods return another
  jQuery object - often one representing the
  same collection. This means you can chain
  methods together:
  $('div.section').hide().addClass('gone');
Crazy chaining
$('form#login')
   // hide all the labels inside the form with the 'optional' class
   .find('label.optional').hide().end()

  // add a red border to any password fields in the form
  .find('input:password').css('border', '1px solid red').end()

  // add a submit handler to the form
  .submit(function(){
      return confirm('Are you sure you want to submit?');
  });

     From http://www.ibm.com/developerworks/library/x-ajaxjquery.html
Ajax
•   jQuery has excellent support for Ajax
      $('div#intro').load('/some/file.html');

•   More advanced methods include:
      $.get(url, params, callback)
      $.post(url, params, callback)
      $.getJSON(url, params, callback)
      $.getScript(url, callback)
Plugins
• jQuery is extensible through plugins, which
  can add new methods to the jQuery object
  • Form: better form manipulation
  • Dimensions: lots of browser measurements
  • Interface: fancy effects, accordions
  • UI: drag and drop, and more
Further reading


•   http://jquery.com/ - official site
•   http://visualjquery.com/ - useful API reference
1 of 14

Recommended

Prototype & jQueryPrototype & jQuery
Prototype & jQueryRemy Sharp
37K views25 slides
jQuery PPTjQuery PPT
jQuery PPTDominic Arrojado
20.3K views12 slides

More Related Content

What's hot

jQuery PresentationjQuery Presentation
jQuery PresentationRod Johnson
4.7K views30 slides
Drupal Best PracticesDrupal Best Practices
Drupal Best Practicesmanugoel2003
5.4K views47 slides
jQuery EssentialsjQuery Essentials
jQuery EssentialsBedis ElAchèche
2.8K views83 slides
History of jQueryHistory of jQuery
History of jQueryjeresig
9.9K views27 slides
Write Less Do MoreWrite Less Do More
Write Less Do MoreRemy Sharp
4.9K views136 slides
JqueryJquery
JqueryGirish Srivastava
5.2K views57 slides

What's hot(20)

jQuery PresentationjQuery Presentation
jQuery Presentation
Rod Johnson4.7K views
Drupal Best PracticesDrupal Best Practices
Drupal Best Practices
manugoel20035.4K views
jQuery EssentialsjQuery Essentials
jQuery Essentials
Bedis ElAchèche2.8K views
History of jQueryHistory of jQuery
History of jQuery
jeresig9.9K views
Write Less Do MoreWrite Less Do More
Write Less Do More
Remy Sharp4.9K views
JqueryJquery
Jquery
Girish Srivastava5.2K views
A Short Introduction To jQueryA Short Introduction To jQuery
A Short Introduction To jQuery
Sudar Muthu2.5K views
jQuery EssentialsjQuery Essentials
jQuery Essentials
Marc Grabanski173.8K views
jQueryjQuery
jQuery
Dileep Mishra3.8K views
jQueryjQuery
jQuery
Mostafa Bayomi9.5K views
jQuery FundamentalsjQuery Fundamentals
jQuery Fundamentals
Gil Fink5.4K views
jQuery basicsjQuery basics
jQuery basics
Stijn Van Minnebruggen651 views
jQueryjQuery
jQuery
Vishwa Mohan3.3K views
jQuery for beginnersjQuery for beginners
jQuery for beginners
Siva Arunachalam8K views
jQueryjQuery
jQuery
Jay Poojara4K views
jQueryjQuery
jQuery
Mohammed Arif2.2K views
D3.js and SVGD3.js and SVG
D3.js and SVG
Karol Depka Pradzinski836 views
JavaScript and jQuery BasicsJavaScript and jQuery Basics
JavaScript and jQuery Basics
Kaloyan Kosev3.5K views
Sprout core and performanceSprout core and performance
Sprout core and performance
Yehuda Katz1.4K views

Similar to jQuery in 15 minutes

webstudy jquerywebstudy jquery
webstudy jquerySeungho Han
999 views20 slides
jQueryjQuery
jQueryIvano Malavolta
3.2K views67 slides
Jquery presentationJquery presentation
Jquery presentationMevin Mohan
44 views18 slides

Similar to jQuery in 15 minutes(20)

Jquery in-15-minutes1421Jquery in-15-minutes1421
Jquery in-15-minutes1421
palsingh26263 views
webstudy jquerywebstudy jquery
webstudy jquery
Seungho Han999 views
jQueryjQuery
jQuery
Ivano Malavolta3.2K views
Jquery presentationJquery presentation
Jquery presentation
Mevin Mohan44 views
jQuery (BostonPHP)jQuery (BostonPHP)
jQuery (BostonPHP)
jeresig1.7K views
jQuery PresentasionjQuery Presentasion
jQuery Presentasion
Mohammad Usman328 views
Jquery News PackagesJquery News Packages
Jquery News Packages
UC Berkeley Graduate School of Journalism1.3K views
jQuery FundamentalsjQuery Fundamentals
jQuery Fundamentals
Doncho Minkov2K views
J query trainingJ query training
J query training
FIS - Fidelity Information Services429 views
JQuery In DrupalJQuery In Drupal
JQuery In Drupal
katbailey3.8K views
jQueryjQuery
jQuery
Andrew Homeyer611 views
Drupal & javascriptDrupal & javascript
Drupal & javascript
Almog Baku4.8K views
jQuery (MeshU)jQuery (MeshU)
jQuery (MeshU)
jeresig1.4K views
Game jump: frontend introduction #1Game jump: frontend introduction #1
Game jump: frontend introduction #1
Sebastian Pożoga1.5K views
Introduction to jQueryIntroduction to jQuery
Introduction to jQuery
Nagaraju Sangam483 views

More from Simon Willison(20)

How Lanyrd does GeoHow Lanyrd does Geo
How Lanyrd does Geo
Simon Willison5.7K views
Cheap tricks for startupsCheap tricks for startups
Cheap tricks for startups
Simon Willison8.5K views
Building LanyrdBuilding Lanyrd
Building Lanyrd
Simon Willison5.4K views
Web Services for Fun and ProfitWeb Services for Fun and Profit
Web Services for Fun and Profit
Simon Willison2.5K views
How Lanyrd uses TwitterHow Lanyrd uses Twitter
How Lanyrd uses Twitter
Simon Willison1.3K views
ScaleFailScaleFail
ScaleFail
Simon Willison1.4K views
Building crowdsourcing applicationsBuilding crowdsourcing applications
Building crowdsourcing applications
Simon Willison10.1K views
Cowboy development with DjangoCowboy development with Django
Cowboy development with Django
Simon Willison16.9K views
Crowdsourcing with DjangoCrowdsourcing with Django
Crowdsourcing with Django
Simon Willison12.4K views
Django HeresiesDjango Heresies
Django Heresies
Simon Willison34K views
Class-based views with DjangoClass-based views with Django
Class-based views with Django
Simon Willison2.7K views
Web App Security Horror StoriesWeb App Security Horror Stories
Web App Security Horror Stories
Simon Willison13.1K views
Web Security Horror StoriesWeb Security Horror Stories
Web Security Horror Stories
Simon Willison32.1K views

Recently uploaded(20)

Liqid: Composable CXL PreviewLiqid: Composable CXL Preview
Liqid: Composable CXL Preview
CXL Forum120 views
ThroughputThroughput
Throughput
Moisés Armani Ramírez31 views
Web Dev - 1 PPT.pdfWeb Dev - 1 PPT.pdf
Web Dev - 1 PPT.pdf
gdsczhcet49 views
Java Platform Approach 1.0 - Picnic MeetupJava Platform Approach 1.0 - Picnic Meetup
Java Platform Approach 1.0 - Picnic Meetup
Rick Ossendrijver24 views

jQuery in 15 minutes

  • 1. jQuery in 15 minutes Torchbox, 7th August 2007
  • 2. What makes jQuery interesting? • Built around CSS selectors • Well behaved • Doesn’t hijack your global namespace • Plays well with other libraries • API designed with conciseness and convenience as the driving factors
  • 3. The jQuery() function jQuery('div#intro h2') jQuery('div.section > p') jQuery('input:radio') $('div#intro h2')
  • 4. 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(div) { // Manipulate the div }
  • 5. Manipulating collections • Most jQuery methods operate on all of the matched elements in the collection $('div.section').addClass('highlighted') $('img.photo').attr('src', '/default.png'); $('a.foo').html('<em>Click me now!</em>'); $('p:odd').css('background-color', '#ccc');
  • 6. Grabbing values • Some methods return results from the first matched element var height = $('div#intro').height(); var src = $('img.photo').attr('src'); var lastP = $('p:last').html()
  • 7. Traversing the DOM • jQuery provides enhanced methods for traversing the DOM $('div.section').next() $('div.section').prev() $('div.section').prev('a') $('div.section').parent() $('div.section').parents()
  • 8. Handling events • jQuery provides methods for assigning event handlers to elements in a cross-browser way $('a').click(function(ev) { $(this).css({backgroundColor: 'orange'}); ev.preventDefault(); });
  • 9. Going unobtrusive $(document).ready(function() { alert('The DOM is ready!'); }); $(function() { alert('This is a shortcut') });
  • 10. Chaining • Most jQuery methods return another jQuery object - often one representing the same collection. This means you can chain methods together: $('div.section').hide().addClass('gone');
  • 11. Crazy chaining $('form#login') // hide all the labels inside the form with the 'optional' class .find('label.optional').hide().end() // add a red border to any password fields in the form .find('input:password').css('border', '1px solid red').end() // add a submit handler to the form .submit(function(){ return confirm('Are you sure you want to submit?'); }); From http://www.ibm.com/developerworks/library/x-ajaxjquery.html
  • 12. Ajax • jQuery has excellent support for Ajax $('div#intro').load('/some/file.html'); • More advanced methods include: $.get(url, params, callback) $.post(url, params, callback) $.getJSON(url, params, callback) $.getScript(url, callback)
  • 13. Plugins • jQuery is extensible through plugins, which can add new methods to the jQuery object • Form: better form manipulation • Dimensions: lots of browser measurements • Interface: fancy effects, accordions • UI: drag and drop, and more
  • 14. Further reading • http://jquery.com/ - official site • http://visualjquery.com/ - useful API reference