Your SlideShare is downloading. ×
0
Jquery at-webcamp
Jquery at-webcamp
Jquery at-webcamp
Jquery at-webcamp
Jquery at-webcamp
Jquery at-webcamp
Jquery at-webcamp
Jquery at-webcamp
Jquery at-webcamp
Jquery at-webcamp
Jquery at-webcamp
Jquery at-webcamp
Jquery at-webcamp
Jquery at-webcamp
Jquery at-webcamp
Jquery at-webcamp
Jquery at-webcamp
Jquery at-webcamp
Jquery at-webcamp
Jquery at-webcamp
Jquery at-webcamp
Jquery at-webcamp
Jquery at-webcamp
Jquery at-webcamp
Jquery at-webcamp
Jquery at-webcamp
Jquery at-webcamp
Jquery at-webcamp
Jquery at-webcamp
Jquery at-webcamp
Jquery at-webcamp
Jquery at-webcamp
Jquery at-webcamp
Jquery at-webcamp
Jquery at-webcamp
Jquery at-webcamp
Jquery at-webcamp
Jquery at-webcamp
Jquery at-webcamp
Jquery at-webcamp
Jquery at-webcamp
Jquery at-webcamp
Jquery at-webcamp
Jquery at-webcamp
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Jquery at-webcamp

331

Published on

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

  • Be the first to like this

No Downloads
Views
Total Views
331
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
23
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. `Thursday, February 28, 2013
  • 2. Want to keep up with best practices?Thursday, February 28, 2013
  • 3. Want to make your site pop with ?Thursday, February 28, 2013
  • 4. Want to make your site pop with fancy effects ?Thursday, February 28, 2013
  • 5. Want to check if Javascript is enabled?Thursday, February 28, 2013
  • 6. Want to add neat hover states?Thursday, February 28, 2013
  • 7. Want to safely run your code when the page is loaded?Thursday, February 28, 2013
  • 8. Don’t want to use that pesky CSS?Thursday, February 28, 2013
  • 9. Don’t want to use boring vanilla Javascript?Thursday, February 28, 2013
  • 10. Just use ! You know when you’re doing it right when you’re loading 12 jQuery plugins.Thursday, February 28, 2013
  • 11. JQueryThursday, February 28, 2013
  • 12. • BASICS : Manipulating the DOM • EVENTS • EFFECTS • AJAX : Processing in the BackgroundThursday, February 28, 2013
  • 13. JQuery javascript library designed to simplify client sidescriptingThursday, February 28, 2013
  • 14. How to Use JQuery • include jQuery library • write your SCRIPTS !!!Thursday, February 28, 2013
  • 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. .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. .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. .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. Manipulating the DOM adding new elements, modifying, removing etc.Thursday, February 28, 2013
  • 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. .attr() return the value of an attribute syntax: $(‘.current’).find(‘a’).attr(‘href’);Thursday, February 28, 2013
  • 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. $(‘.current’).append(‘<p>appended content</p>’); $(‘.list’).find(‘li’).eq(0).after(‘<li>content inserted by after</li>’);Thursday, February 28, 2013
  • 24. api.jquery.comThursday, February 28, 2013
  • 25. JQuery Events HandlerThursday, February 28, 2013
  • 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. Javascript EventsThursday, February 28, 2013
  • 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. JQuery Events CategoryThursday, February 28, 2013
  • 30. Event Handler AttachmentThursday, February 28, 2013
  • 31. Browser EventsThursday, February 28, 2013
  • 32. Document LoadingThursday, February 28, 2013
  • 33. Form EventsThursday, February 28, 2013
  • 34. Keyboard Events Mouse EventsThursday, February 28, 2013
  • 35. api.jquery.comThursday, February 28, 2013
  • 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. 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. api.jquery.comThursday, February 28, 2013
  • 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. 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. Basic SettingsThursday, February 28, 2013
  • 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. 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. api.jquery.comThursday, February 28, 2013

×