Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

jQuery('#knowledge').appendTo('#you');

6,226 views

Published on


*
Dsc02922_small Mike Hostetler 4.07

CEO at appendTo, LLC
4 talks

Description:

This talk will be a quick but thorough introduction to the jQuery Javascript Library. If you have zero experience with jQuery, this is the talk to start with. We will begin with a brief overview of jQuery and its history. We'll then introduce basic jQuery concepts and principles. To wrap up the session, we'll build a basic jQuery plugin.

This talk will be composed mainly of live coding, showing off examples of how to work with jQuery.

The content of this talk will be quite a bit different from the jQuery training offered prior to the conference. Because of the available time, the training will explore jQuery concepts in great depth, while this talk will cover them briefly.

Published in: Technology
  • Hi,

    Its really grate to have watch PPT like this.

    is it possible to save or download it.

    Please...???
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

jQuery('#knowledge').appendTo('#you');

  1. 1. jQuery Conference San Francisco Bay Area 2010 jQuery('#knowledge') .appendTo('#you'); Mike Hostetler @mikehostetler http://mike-hostetler.com Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  2. 2. jQuery Conference San Francisco Bay Area 2010 The jQuery Project Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  3. 3. jQuery Conference San Francisco Bay Area 2010 jQuery Project - jquery.org (Software Freedom Conservancy) jQuery Core jQuery UI jquery.com jqueryUI.com Sizzle JS QUnit sizzlejs.com qunitjs.com Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  4. 4. jQuery Conference San Francisco Bay Area 2010 Using jQuery ‣ jquery.com Downloading ‣ api.jquery.com Documentation ‣ forum.jquery.com Community ‣ meetups.jquery.com Local Community ‣ plugins.jquery.com Extending ‣ jqueryui.com Project Supported UI Library Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  5. 5. jQuery Conference San Francisco Bay Area 2010 Including jQuery Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  6. 6. jQuery Conference San Francisco Bay Area 2010 Including jQuery ‣ Download jQuery.com ‣ Locations ‣ Self hosted Download and include in your project ‣ CDN Google, Microsoft, jQuery ‣ Forms ‣ Source vs. Minified Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  7. 7. jQuery Conference San Francisco Bay Area 2010 Source Minified Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  8. 8. jQuery Conference San Francisco Bay Area 2010 Finding Something Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  9. 9. jQuery Conference San Francisco Bay Area 2010 Finding Something // Select By ID <div id=”foo”></div> <div></div> $(‘#foo’); <div id=”foo”></div> <div></div> Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  10. 10. jQuery Conference San Francisco Bay Area 2010 Finding Something // Select by class <div class=”myClass foo bar”></div> <div class=”baz myClass”></div> <div class=”bar”></div> $(‘.myClass’) <div class=”myClass foo bar”></div> <div class=”baz myClass”></div> <div class=”bar”></div> Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  11. 11. jQuery Conference San Francisco Bay Area 2010 Finding Something // Select by tag <ul> <li>Apple</li> <li>Pear</li> </ul> $(“li”); <ul> <li>Apple</li> <li>Pear</li> </ul> Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  12. 12. jQuery Conference San Francisco Bay Area 2010 Finding Something in Context ‣ Entire Document $(‘div’) ‣ Scope your selector $(‘selector’, <context>) $(‘#table’).find(‘selector’) ‣ $(‘a’).click(function() { $(‘span’, this)... }); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  13. 13. jQuery Conference San Francisco Bay Area 2010 Demo! Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  14. 14. jQuery Conference San Francisco Bay Area 2010 Do Something Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  15. 15. jQuery Conference San Francisco Bay Area 2010 Do Something <p>One</p> <p>Two</p> <p>Three</p> // Find Something $(‘p’) // Do Something $(‘p’).hide(); // Generic Syntax $(‘p’) . <Method Name> ( [PARAMETERS] ); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  16. 16. jQuery Conference San Francisco Bay Area 2010 Showing and Hiding // HTML <p>One</p> <p>Two</p> <p>Three</p> // Show the elements $(‘p’).show(); // Hide the elements $(‘p’).hide(); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  17. 17. jQuery Conference San Francisco Bay Area 2010 Showing and Hiding // HTML <p>One</p> <p>Two</p> <p>Three</p> // Show the elements $(‘p’).show(); // Hide the elements $(‘p’).hide(); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  18. 18. jQuery Conference San Francisco Bay Area 2010 Iteration <p>One</p> <p>Two</p> <p>Three</p> $(‘p’).each(function() { // Operates on each p individually var rand; rand = Math.floor( Math.random() * 1 ); if(rand > 1) { $(this).hide(); } }); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  19. 19. jQuery Conference San Francisco Bay Area 2010 Iteration <p>One</p> <p>Two</p> <p>Three</p> $(‘p’).each(function() { // Operates on each p individually var rand; rand = Math.floor( Math.random() * 1 ); if(rand > 1) { $(this).hide(); } }); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  20. 20. jQuery Conference San Francisco Bay Area 2010 Iteration <p>One</p> <p>Two</p> <p>Three</p> $(‘p’).each(function() { // Operates on each p individually var rand; rand = Math.floor( Math.random() * 1 ); if(rand > 1) { $(this).hide(); } }); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  21. 21. jQuery Conference San Francisco Bay Area 2010 Styling // HTML <p>One</p> <p class=”foo”>Two</p> <p>Three</p> $(‘p’).addClass(‘enabled’); $(‘p’).removeClass(‘foo’); $(‘p’).toggleClass(‘foo’); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  22. 22. jQuery Conference San Francisco Bay Area 2010 Styling // HTML <p class=”enabled”>One</p> <p class=”enabled foo”>Two</p> <p class=”enabled”>Three</p> $(‘p’).addClass(‘enabled’); $(‘p’).removeClass(‘foo’); $(‘p’).toggleClass(‘foo’); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  23. 23. jQuery Conference San Francisco Bay Area 2010 Styling // HTML <p class=”enabled”>One</p> <p class=”enabled”>Two</p> <p class=”enabled”>Three</p> $(‘p’).addClass(‘enabled’); $(‘p’).removeClass(‘foo’); $(‘p’).toggleClass(‘foo’); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  24. 24. jQuery Conference San Francisco Bay Area 2010 Styling // HTML <p class=”enabled foo”>One</p> <p class=”enabled foo”>Two</p> <p class=”enabled foo”>Three</p> $(‘p’).addClass(‘enabled’); $(‘p’).removeClass(‘foo’); $(‘p’).toggleClass(‘foo’); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  25. 25. jQuery Conference San Francisco Bay Area 2010 Method Chaining Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  26. 26. jQuery Conference San Francisco Bay Area 2010 Method Chaining $(‘tr:odd’).addClass(‘odd’) .find(‘td.company’) .addClass(‘companyName’); $(‘tr:odd’).addClass(‘odd’) .find(‘td.company’) .addClass(‘companyName’) .end(); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  27. 27. jQuery Conference San Francisco Bay Area 2010 Method Chaining $(‘tr’) .filter(‘:odd’) .addClass(‘odd’) .end() .find(‘td.company’) .addClass(‘companyName’); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  28. 28. jQuery Conference San Francisco Bay Area 2010 DOM Manipulation Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  29. 29. jQuery Conference San Francisco Bay Area 2010 Creating Elements // New in 1.4 $("<div/>", { class: "test", text: "Click me!", click: function(){ $(this).toggleClass("test"); } }); // Clicking toggles the class <div class=”test”>Click me!</div> Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  30. 30. jQuery Conference San Francisco Bay Area 2010 Inserting Elements // Before <p>Apple</p> <p>Orange</p> $(‘p’).after(‘<img src=”logo.png” />’); // After <p>Apple</p> <img src=”logo.png /> <p>Orange</p> <img src=”logo.png /> Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  31. 31. jQuery Conference San Francisco Bay Area 2010 Inserting Elements // Before <p id=”apple”>Apple</p> <p id=”orange”>Orange</p> $(‘<img src=”apple.png” />’).prependTo(‘#apple’); $(‘<img src=”orange.png” />’).appendTo(‘#orange’); // After <p id=”apple”><img src=”apple.png” />Apple</p> <p id=”orange”>Orange<img src=”orange.png” /></p> Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  32. 32. jQuery Conference San Francisco Bay Area 2010 Removing Elements // Before <div> <p>Red</p> <p>Green</p> </div> // Removing Elements Directly $(‘p’).remove(); // After <div> </div> Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  33. 33. jQuery Conference San Francisco Bay Area 2010 Wrapping Elements // Before <p>Hello world</p> <p>Foo bar</p> $(‘p’).wrap(‘<div></div>’); // After <div><p>Hello world</p></div> <div><p>Foo bar</p></div> Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  34. 34. jQuery Conference San Francisco Bay Area 2010 Unwrapping Elements (new in 1.4+) // Before <div><p>Hello world</p></div> <div><p>Foo bar</p></div> //Individually $(‘p’).unwrap(); // After <p>Hello world</p> <p>Foo bar</p> Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  35. 35. jQuery Conference San Francisco Bay Area 2010 Binding Events Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  36. 36. jQuery Conference San Francisco Bay Area 2010 Click Event // HTML <p>One</p> <p>Two</p> <p>Three</p> $(‘p’).click(function(event) { $(this).css(‘color’, ‘red’); }); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  37. 37. jQuery Conference San Francisco Bay Area 2010 Click Event // HTML <p>One</p> <p style=”color: red”>Two</p> // Clicked! <p>Three</p> $(‘p’).click(function(event) { $(this).css(‘color’, ‘red’); }); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  38. 38. jQuery Conference San Francisco Bay Area 2010 Hover Pseudo Event // HTML <p>One</p> <p>Two</p> <p>Three</p> $(‘p’).hover(function(event) { $(this).css(‘color’, ‘red’); }, function() { $(this).css(‘color’, ‘’); }); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  39. 39. jQuery Conference San Francisco Bay Area 2010 Binding & Unbinding // HTML <p>One</p> <p>Two</p> <p>Three</p> // Add event $(‘p’).bind(‘click’,function(event) { $(this).css(‘color’, ‘red’); }); // Remove event $(‘p’).unbind(‘click’); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  40. 40. jQuery Conference San Francisco Bay Area 2010 Binding Events with .bind() // Binding an event $('a.tab').bind('click',function(e){ // event handling code $(this).css(‘color’, ‘red’); }); // Unbinding an event  $('a.tab').unbind('click'); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  41. 41. jQuery Conference San Francisco Bay Area 2010 Binding Events // Bind an event to execute once $('a.tab').one('click',function(e){ // event handling code   $(this).css(‘color’,‘red’); }); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  42. 42. jQuery Conference San Francisco Bay Area 2010 Demo! Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  43. 43. jQuery Conference San Francisco Bay Area 2010 Ajax Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  44. 44. jQuery Conference San Francisco Bay Area 2010 Making a Request $.get(‘page.php’, function(data) { $(data).appendTo(‘body’); }, ‘html’); var data = { fname: ‘Jonathan’ }; $.post(‘page.php’, data, function(data) { $(data).appendTo(‘body’); }, ‘html’); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  45. 45. jQuery Conference San Francisco Bay Area 2010 Making a Request JSON // Response {“names”: [“Jonathan”, “Mike”, “Rob”], “states”: {“NE” : “Nebraska”}, “year” : “2010” } $.getJSON(‘page.php’, function(json) { $(‘body’).append( json.names[0] ); $(‘body’).append( json.states.NE ); }); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  46. 46. jQuery Conference San Francisco Bay Area 2010 Making a Request JSON // Response { “names”: [“Jonathan”, “Mike”, “Rob”] } $.getJSON(‘page.php’, function(json) { $.each(json.names, function(i, val) { $(‘body’).append( val ); }); }); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  47. 47. jQuery Conference San Francisco Bay Area 2010 Writing Your First Plugin Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  48. 48. jQuery Conference San Francisco Bay Area 2010 Writing your first Plugin $.fn.elementCount = function() { alert(‘Element count: ’ + this.length); }; $(‘p’).elementCount(); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  49. 49. jQuery Conference San Francisco Bay Area 2010 Plugins and Iteration $.fn.elementCount = function() { // this is a jQuery Object this.each(function(i) { $(this).html($(this).html() +‘ ‘+ i); }); }; $(‘p’).elementCount(); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  50. 50. jQuery Conference San Francisco Bay Area 2010 Plugins and Chaining $.fn.elementCount = function() { // this is a jQuery Object return this.each(function(i) { $(this).html($(this).html() +‘ ‘+ i); }); }; $(‘p’).elementCount().addClass(‘active’);; Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  51. 51. jQuery Conference San Francisco Bay Area 2010 Plugins and Chaining // Plugin is required to return this $.fn.stPatricks = function() { return this.css(‘color’, ‘green’); }; $(‘p’).stPatricks().addClass(‘active’); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  52. 52. jQuery Conference San Francisco Bay Area 2010 The Plugin Pattern Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  53. 53. jQuery Conference San Francisco Bay Area 2010 The Plugin Pattern (function($) { $.fn.elementCount = function() { return this.each(function(i) { $(this).html($(this).html() +‘ ‘+ i); }); }; })(jQuery); $(‘p’).elementCount(); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  54. 54. jQuery Conference San Francisco Bay Area 2010 The Plugin Pattern (function($) { $.fn.elementCount = function(options) { return this.each(function(i) { var j = i + options.start; $(this).html($(this).html() +‘ ‘+ j); }); }; })(jQuery); $(‘p’).elementCount({start: 10}); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  55. 55. jQuery Conference San Francisco Bay Area 2010 The Plugin Pattern (function($) { $.fn.elementCount = function(options) { var j; if ( $.isFunction(options.begin) ) { options.begin(); } return this.each(function(i) { j = i + options.start; $(this).html($(this).html() +‘ ‘+ j); }); }; })(jQuery); $(‘p’).elementCount( start: 10, begin: function() {alert(‘BEGIN!’)} }); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  56. 56. jQuery Conference San Francisco Bay Area 2010 Demo! Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  57. 57. jQuery Conference San Francisco Bay Area 2010 Thank You! Mike Hostetler @mikehostetler http://mike-hostetler.com Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY

×