Jquery at-webcamp

514 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
514
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
25
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Jquery at-webcamp

  1. 1. `Thursday, February 28, 2013
  2. 2. Want to keep up with best practices?Thursday, February 28, 2013
  3. 3. Want to make your site pop with ?Thursday, February 28, 2013
  4. 4. Want to make your site pop with fancy effects ?Thursday, February 28, 2013
  5. 5. Want to check if Javascript is enabled?Thursday, February 28, 2013
  6. 6. Want to add neat hover states?Thursday, February 28, 2013
  7. 7. Want to safely run your code when the page is loaded?Thursday, February 28, 2013
  8. 8. Don’t want to use that pesky CSS?Thursday, February 28, 2013
  9. 9. Don’t want to use boring vanilla Javascript?Thursday, February 28, 2013
  10. 10. Just use ! You know when you’re doing it right when you’re loading 12 jQuery plugins.Thursday, February 28, 2013
  11. 11. JQueryThursday, February 28, 2013
  12. 12. • BASICS : Manipulating the DOM • EVENTS • EFFECTS • AJAX : Processing in the BackgroundThursday, February 28, 2013
  13. 13. JQuery javascript library designed to simplify client sidescriptingThursday, February 28, 2013
  14. 14. How to Use JQuery • include jQuery library • write your SCRIPTS !!!Thursday, February 28, 2013
  15. 15. Querying the DOM searching the DOM for the elements or objects $([selectors]) $(‘li’); [selectors] can be id - ex. #container class - ex. .list element - ex. liThursday, February 28, 2013
  16. 16. .find() .children() get the descendant of get the children of each each element element syntax: syntax: $(‘.list’).find(‘li’); $(‘.list’).children(‘li’);Thursday, February 28, 2013
  17. 17. .parents() .parent() get the ancestors of each get the parent of each element element syntax: syntax: $(‘.current’).parents(‘ul’); $(‘.current’).parent(‘ul’);Thursday, February 28, 2013
  18. 18. .eq() .next() select an element at get the following sibling element index n .prev() get the preceding sibling element syntax: $(‘.list’).find(‘li’).eq(2); syntax: $(‘.list’).find(‘li’).eq(2).next(); $(‘.list’).find(‘li’).eq(2).prev();Thursday, February 28, 2013
  19. 19. Manipulating the DOM adding new elements, modifying, removing etc.Thursday, February 28, 2013
  20. 20. .addClass() .removeClass() add specified classes remove a single class syntax: syntax: $(‘.list’).children(‘li’).addClass $(‘.current’).removeClass (‘red’); (‘current’);Thursday, February 28, 2013
  21. 21. .attr() return the value of an attribute syntax: $(‘.current’).find(‘a’).attr(‘href’);Thursday, February 28, 2013
  22. 22. .before() append content before an element .after() append content after an element .append() append content at the end of an elementThursday, February 28, 2013
  23. 23. $(‘.current’).append(‘<p>appended content</p>’); $(‘.list’).find(‘li’).eq(0).after(‘<li>content inserted by after</li>’);Thursday, February 28, 2013
  24. 24. api.jquery.comThursday, February 28, 2013
  25. 25. JQuery Events HandlerThursday, February 28, 2013
  26. 26. What are Events? These methods are used to register behaviors to take effect when the user iteracts with the browser, and to further manipulate those registered behaviors. Examples: • moving a mouse over an element • selecting a radio button • clicking on an elementThursday, February 28, 2013
  27. 27. Javascript EventsThursday, February 28, 2013
  28. 28. JQuery Advantage ✓ All of the out-of-the-box functionality in jQuery are in reality extensions. ✓ This includes all the shorthands, like click(), hover(), toggle(), etc., but also the core-methods like bind(), each (), animate(), and so on. ✓ This means that you can detach functionality you are not using, making the library even smaller--file-size wise, as well as memory-footprint wise. ✓ This is pure design-genius!Thursday, February 28, 2013
  29. 29. JQuery Events CategoryThursday, February 28, 2013
  30. 30. Event Handler AttachmentThursday, February 28, 2013
  31. 31. Browser EventsThursday, February 28, 2013
  32. 32. Document LoadingThursday, February 28, 2013
  33. 33. Form EventsThursday, February 28, 2013
  34. 34. Keyboard Events Mouse EventsThursday, February 28, 2013
  35. 35. api.jquery.comThursday, February 28, 2013
  36. 36. Animation JQuery has built in effects Examples: $(h1).hide(“slow”); $(h1).fadeOut(2000); $(h1).slideDown(“fast”); You can chain them Examples: $(h1).fadeOut(1000). slideDown();Thursday, February 28, 2013
  37. 37. Or roll your own JQuery animate() Syntax: $(selector).animate({params}, speed, callback); Example: $(“#block”).animate({ width: “100px”, opacity: 0.5, fontSize: “3em”, borderWidth: “10px” }, 1500);Thursday, February 28, 2013
  38. 38. api.jquery.comThursday, February 28, 2013
  39. 39. AJAX (Asynchronous Javascript and XML) a technique used to send or retrieve data from a server in the background without interfering with the current state of the page.Thursday, February 28, 2013
  40. 40. JQuery AJAX Syntax: $.ajax(url, settings); OR SIMPLY $.ajax(settings); where settings is a set of key/value pairs which JQuery calls PlainObject e.g. { key : value }Thursday, February 28, 2013
  41. 41. Basic SettingsThursday, February 28, 2013
  42. 42. url the url to which the request is sent type the type of request to make e.g. POST, GET data the data to be sent to the server e.g. { “name” : “Juan”, “lastname” : “Dela Cruz” } or “name=Juan&lastname=Dela Cruz”Thursday, February 28, 2013
  43. 43. dataType the type of data that you are expecting back from the server e.g. xml, json, script, html, or text error a function to be called if the request fails success a function to be called if the request succeeds complete a function to be called when the request finishes (only executes after success and error callbacks are executed)Thursday, February 28, 2013
  44. 44. api.jquery.comThursday, February 28, 2013

×