jQuery basics

1,644 views

Published on

An introduction to javascript, jQuery and the DOM.

Published in: Technology
1 Comment
3 Likes
Statistics
Notes

  • trtert

    <b>[Comment posted from</b> http://labs.thesedays.com/]
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
1,644
On SlideShare
0
From Embeds
0
Number of Embeds
293
Actions
Shares
0
Downloads
72
Comments
1
Likes
3
Embeds 0
No embeds

No notes for slide

jQuery basics

  1. 1. jQuery basics
  2. 2. who’s me? • Stijn Van Minnebruggen • Web Developer at These Days • twitter.com/donotfold • www.donotfold.be
  3. 3. jQuery basics
  4. 4. DOM
  5. 5. DOM document object model
  6. 6. The Document Object Model (DOM) is a cross-platform and language-independent convention for representing and interacting with objects in HTML, XHTML and XML documents. Wikipedia
  7. 7. <html> <head> <title>Wicked HTML page</title> </head> <body> <h1>Awesome!</h1> <p>Totally rad, dude.</p> </body> </html>
  8. 8. DOM = HTML parsed by the browser as an XML structure
  9. 9. server HTML browser DOM (xml) put simple: The browser gets HTML from the server and parses it to an XML like structure.
  10. 10. <html> <head> <title>Wicked HTML page</title> </head> <body> <h1>Awesome!</h1> <p>Totally rad, dude.</p> </body> </html>
  11. 11. <html> <head> <title>Wicked HTML page</title> </head> <body> <h1>Awesome!</h1> <p>Totally rad, dude.</p> </body> </html>
  12. 12. <html> <head> <title>Wicked HTML page</title> </head> <body> <h1>Awesome!</h1> <p>Totally rad, dude.</p> </body> </html>
  13. 13. <html> <head> <title>Wicked HTML page</title> </head> <body> <h1>Awesome!</h1> <p>Totally rad, dude.</p> </body> </html>
  14. 14. <html> <head> <title>Wicked HTML page</title> </head> <body> <h1>Awesome!</h1> <p>Totally rad, dude.</p> </body> </html>
  15. 15. javascript DOM
  16. 16. view source ≠ view DOM
  17. 17. javascript CSS
  18. 18. javascript = FUN :) DOM x CSS
  19. 19. javascript = FUN!
  20. 20. javascript = HACKY!!
  21. 21. why “hacky”?
  22. 22. why “hacky”? • exists since 1995 (much happened, but not much has changed)
  23. 23. why “hacky”? • exists since 1995 (much happened, but not much has changed) • browser differences
  24. 24. why “hacky”? • exists since 1995 (much happened, but not much has changed) • browser differences • security, vulnerabilities
  25. 25. why “hacky”? • exists since 1995 (much happened, but not much has changed) • browser differences • security, vulnerabilities • in comparison with other programming languages, it just is “hacky”... :)
  26. 26. javascript libraries
  27. 27. “javascript libraries make it easier for the user to make ‘hacky’ javascript work without too much hassle”
  28. 28. javascript libraries
  29. 29. javascript libraries
  30. 30. javascript libraries Ample SDK, Cappuccino, Clean AJAX, Dojo Toolkit, Dhtmlx, Echo, Ext, Glow, Google Web Toolkit, Himle, Joose, Microsoft AJAX Library, Midori, Mochikit, OpenLink AJAX Toolkit, qooxdoo, Rialto, Rico, SmartClient, SproutCore, Spry Framework,Yahoo UI Library, ...
  31. 31. $
  32. 32. $ = jQuery
  33. 33. $(selector)
  34. 34. get a DOM element $(selector)
  35. 35. get a DOM element $(selector).function();
  36. 36. get a DOM element $(selector).function(); execute a jQuery function
  37. 37. get a DOM element $(selector).function(parameters); execute a jQuery function
  38. 38. $(selector).function(parameters);
  39. 39. example: $(‘h2’)
  40. 40. example: $(‘h2’) get all H2 DOM elements
  41. 41. example: $(‘h2’).css();
  42. 42. example: $(‘h2’).css(); execute the jQuery CSS function
  43. 43. example: $(‘h2’).css(“color”, “#FFFFFF”);
  44. 44. example: $(‘h2’).css(“color”, “#FFFFFF”); set the color to #FFFFFF
  45. 45. example: $(‘h2’).css(“color”, “#FFFFFF”);
  46. 46. selectors
  47. 47. selectors • select DOM elements • select by ID • select by className
  48. 48. selectors • select DOM elements $(‘div’) • select by ID $(“#myElement”) • select by className $(“.myClass”)
  49. 49. manipulation
  50. 50. manipulation • $(selector).html(“<h1>My title</h1>”); • $(selector).text(“My text, no <em>html</em>”); • $(selector).css(“border”, “2px solid red”);
  51. 51. effects
  52. 52. effects • $(selector).show(); • $(selector).fadeIn(); • $(selector).slideDown(); • $(selector).animate();
  53. 53. Ajax
  54. 54. Ajax • $.get(); • $.get(“myFile.html”, function(result) { $(“div”).html(result); });
  55. 55. Plugins Everything you make in jQuery can be a plugin.
  56. 56. Plugins Everything you make in jQuery can be a plugin. • Form validation • PNG fixes • ...
  57. 57. demos
  58. 58. your new best friend Online documentation docs.jquery.com Offline version (Adobe Air) api.jquery.com
  59. 59. thanks! • Stijn Van Minnebruggen • Web Developer at These Days • twitter.com/donotfold • www.donotfold.be

×