`Thursday, February 28, 2013
Want to keep up with                                best practices?Thursday, February 28, 2013
Want to make your site pop                                 with               ?Thursday, February 28, 2013
Want to make your site pop                                 with fancy effects ?Thursday, February 28, 2013
Want to check if Javascript is enabled?Thursday, February 28, 2013
Want to add neat hover states?Thursday, February 28, 2013
Want to safely run your code when                            the page is loaded?Thursday, February 28, 2013
Don’t want to use that pesky CSS?Thursday, February 28, 2013
Don’t want to use boring                                vanilla Javascript?Thursday, February 28, 2013
Just use                           !                              You know when you’re doing it right when you’re loading ...
JQueryThursday, February 28, 2013
• BASICS : Manipulating the DOM                    • EVENTS                    • EFFECTS                    • AJAX : Proce...
JQuery                         javascript library designed to simplify client sidescriptingThursday, February 28, 2013
How to Use JQuery                    •         include jQuery library                     •        write your SCRIPTS !!!T...
Querying the DOM                       searching the DOM for the elements or objects                               $([sele...
.find()                  .children()                 get the descendant of   get the children of each                 each ...
.parents()                     .parent()         get the ancestors of each      get the parent of each         element    ...
.eq()                         .next()      select an element at          get the following sibling element      index n   ...
Manipulating the DOM                        adding new elements, modifying, removing etc.Thursday, February 28, 2013
.addClass()                          .removeClass()  add specified classes                 remove a single class  syntax:  ...
.attr()                              return the value of an attribute                              syntax:                ...
.before()                              append content before an element                              .after()             ...
$(‘.current’).append(‘<p>appended content</p>’);       $(‘.list’).find(‘li’).eq(0).after(‘<li>content inserted by after</li...
api.jquery.comThursday, February 28, 2013
JQuery                              Events HandlerThursday, February 28, 2013
What are Events?                              These methods are used to register behaviors to take                        ...
Javascript EventsThursday, February 28, 2013
JQuery Advantage                              ✓ All of the out-of-the-box functionality in jQuery are in                  ...
JQuery                          Events CategoryThursday, February 28, 2013
Event Handler AttachmentThursday, February 28, 2013
Browser EventsThursday, February 28, 2013
Document LoadingThursday, February 28, 2013
Form EventsThursday, February 28, 2013
Keyboard Events                               Mouse EventsThursday, February 28, 2013
api.jquery.comThursday, February 28, 2013
Animation                              JQuery has built in effects                              Examples:                  ...
Or roll your own                              JQuery animate()                              Syntax:                       ...
api.jquery.comThursday, February 28, 2013
AJAX    (Asynchronous Javascript and XML)                  a technique used to send or retrieve data from a               ...
JQuery AJAX                              Syntax:                              $.ajax(url, settings); OR SIMPLY            ...
Basic SettingsThursday, February 28, 2013
url                              the url to which the request is sent                              type                   ...
dataType                              the type of data that you are expecting back from the                              s...
api.jquery.comThursday, February 28, 2013
Upcoming SlideShare
Loading in...5
×

Jquery at-webcamp

338

Published on

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

  • Be the first to like this

No Downloads
Views
Total Views
338
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
24
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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×