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

5,621 views
5,513 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
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
5,621
On SlideShare
0
From Embeds
0
Number of Embeds
342
Actions
Shares
0
Downloads
0
Comments
1
Likes
10
Embeds 0
No embeds

No notes for slide

























































  • 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

    ×