jQuery Conference San Francisco Bay Area 2010




                          jQuery('#knowledge')
                         ...
jQuery Conference San Francisco Bay Area 2010




                           The jQuery Project




   Copyright © 2010 ap...
jQuery Conference San Francisco Bay Area 2010




                                         jQuery Project - jquery.org
   ...
jQuery Conference San Francisco Bay Area 2010




                                        Using jQuery
 ‣ jquery.com      ...
jQuery Conference San Francisco Bay Area 2010




                                 Including jQuery




   Copyright © 201...
jQuery Conference San Francisco Bay Area 2010




                                     Including jQuery
 ‣ Download       ...
jQuery Conference San Francisco Bay Area 2010



                                                Source




              ...
jQuery Conference San Francisco Bay Area 2010




                              Finding Something




   Copyright © 2010 ...
jQuery Conference San Francisco Bay Area 2010




                               Finding Something
   // Select By ID

   ...
jQuery Conference San Francisco Bay Area 2010




                               Finding Something
   // Select by class

...
jQuery Conference San Francisco Bay Area 2010




                               Finding Something
   // Select by tag
   ...
jQuery Conference San Francisco Bay Area 2010




             Finding Something in Context
 ‣ Entire Document
   $(‘div’)...
jQuery Conference San Francisco Bay Area 2010




                                         Demo!




   Copyright © 2010 a...
jQuery Conference San Francisco Bay Area 2010




                                     Do Something




   Copyright © 201...
jQuery Conference San Francisco Bay Area 2010




                                     Do Something
   <p>One</p>
   <p>Tw...
jQuery Conference San Francisco Bay Area 2010




                            Showing and Hiding
   // HTML
   <p>One</p>
...
jQuery Conference San Francisco Bay Area 2010




                            Showing and Hiding
   // HTML
   <p>One</p>
...
jQuery Conference San Francisco Bay Area 2010




                                       Iteration
   <p>One</p>
   <p>Two...
jQuery Conference San Francisco Bay Area 2010




                                       Iteration
   <p>One</p>
   <p>Two...
jQuery Conference San Francisco Bay Area 2010




                                       Iteration
   <p>One</p>
   <p>Two...
jQuery Conference San Francisco Bay Area 2010




                                          Styling
   // HTML
   <p>One</...
jQuery Conference San Francisco Bay Area 2010




                                          Styling
   // HTML
   <p class...
jQuery Conference San Francisco Bay Area 2010




                                          Styling
   // HTML
   <p class...
jQuery Conference San Francisco Bay Area 2010




                                          Styling
   // HTML
   <p class...
jQuery Conference San Francisco Bay Area 2010




                               Method Chaining




   Copyright © 2010 a...
jQuery Conference San Francisco Bay Area 2010




                                     Method Chaining
   $(‘tr:odd’).addC...
jQuery Conference San Francisco Bay Area 2010




                                     Method Chaining
   $(‘tr’)
    .filt...
jQuery Conference San Francisco Bay Area 2010




                           DOM Manipulation




   Copyright © 2010 appe...
jQuery Conference San Francisco Bay Area 2010




                                Creating Elements
   // New in 1.4
   $(...
jQuery Conference San Francisco Bay Area 2010




                               Inserting Elements
   // Before
   <p>App...
jQuery Conference San Francisco Bay Area 2010




                               Inserting Elements
   // Before
   <p id=...
jQuery Conference San Francisco Bay Area 2010




                             Removing Elements
   // Before
   <div>
   ...
jQuery Conference San Francisco Bay Area 2010




                              Wrapping Elements
   // Before
   <p>Hello...
jQuery Conference San Francisco Bay Area 2010




              Unwrapping Elements               (new in 1.4+)


   // Be...
jQuery Conference San Francisco Bay Area 2010




                                     Binding Events




   Copyright © 2...
jQuery Conference San Francisco Bay Area 2010




                                     Click Event
   // HTML
   <p>One</p...
jQuery Conference San Francisco Bay Area 2010




                                     Click Event
   // HTML
   <p>One</p...
jQuery Conference San Francisco Bay Area 2010




                             Hover Pseudo Event
   // HTML
   <p>One</p>...
jQuery Conference San Francisco Bay Area 2010




                           Binding & Unbinding
   // HTML
   <p>One</p>
...
jQuery Conference San Francisco Bay Area 2010




                 Binding Events with .bind()
   // Binding an event

   ...
jQuery Conference San Francisco Bay Area 2010




                                     Binding Events
   // Bind an event ...
jQuery Conference San Francisco Bay Area 2010




                                         Demo!




   Copyright © 2010 a...
jQuery Conference San Francisco Bay Area 2010




                                                Ajax




   Copyright © ...
jQuery Conference San Francisco Bay Area 2010




                                Making a Request
   $.get(‘page.php’, fu...
jQuery Conference San Francisco Bay Area 2010




                       Making a Request JSON
   // Response
   {“names”:...
jQuery Conference San Francisco Bay Area 2010




                       Making a Request JSON
   // Response
   { “names”...
jQuery Conference San Francisco Bay Area 2010




                   Writing Your First Plugin




   Copyright © 2010 app...
jQuery Conference San Francisco Bay Area 2010




                      Writing your first Plugin
   $.fn.elementCount = fu...
jQuery Conference San Francisco Bay Area 2010




                           Plugins and Iteration
   $.fn.elementCount = ...
jQuery Conference San Francisco Bay Area 2010




                          Plugins and Chaining
   $.fn.elementCount = fu...
jQuery Conference San Francisco Bay Area 2010




                          Plugins and Chaining
   // Plugin is required ...
jQuery Conference San Francisco Bay Area 2010




                             The Plugin Pattern




   Copyright © 2010 ...
jQuery Conference San Francisco Bay Area 2010




                               The Plugin Pattern
   (function($) {
    ...
jQuery Conference San Francisco Bay Area 2010




                               The Plugin Pattern
   (function($) {
    ...
jQuery Conference San Francisco Bay Area 2010




                               The Plugin Pattern
   (function($) {
    ...
jQuery Conference San Francisco Bay Area 2010




                                         Demo!




   Copyright © 2010 a...
jQuery Conference San Francisco Bay Area 2010




                                     Thank You!
                        ...
Upcoming SlideShare
Loading in...5
×

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

4,786

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
1 Comment
10 Likes
Statistics
Notes
  • 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
No Downloads
Views
Total Views
4,786
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
0
Comments
1
Likes
10
Embeds 0
No embeds

No notes for slide

























































  • Transcript of "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

    ×