Your SlideShare is downloading. ×
Jquery Fundamentals
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 Fundamentals

6,455
views

Published on

This course will give you the knowledge you need to properly and effectively start integrating jQuery, the popular JavaScript library, into your web development projects. Over the course of two days, …

This course will give you the knowledge you need to properly and effectively start integrating jQuery, the popular JavaScript library, into your web development projects. Over the course of two days, you'll learn the fundamental concepts of JavaScript and jQuery and tackle real-world exercises to solidify your understanding of the language and the library. This class is aimed at beginning jQuery users, although intermediate users may also benefit from the more formalized introduction to the library this class will offer.

Published in: Technology, Design

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

No Downloads
Views
Total Views
6,455
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
16
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. jQuery Fundamentals rebecca@rebeccamurphey.com @rmurphey on Twitter http://delicious.com/rdmey/jquery-class
  • 2. Housekeeping • ftp: [yourname].jqueryclasses.com • username: yourname@jqueryclasses.com • password: jquery!class
  • 3. In the beginning, there was JavaScript http://www.flickr.com/photos/freeparking/476376873/
  • 4. Enter jQuery http://www.flickr.com/photos/timsnell/513274898/
  • 5. • Reads like what you mean • Simplifies cross-browser issues • Huge community & plugin ecosystem
  • 6. JavaScript 101 Because there’s lots of stuff you still need to know.
  • 7. Operators and logic
  • 8. Objects • Booleans, strings, numbers, arrays, and functions are all objects • Objects are a good way of organizing your code http://www.flickr.com/photos/oxido1180/2685774194/
  • 9. true a boolean
  • 10. Booleans (true/false) • Lots of things are “truthy” • true • '0' (or any non-empty string) •1 (or any non-zero number) • any array, even empty ones • any object, even empty ones
  • 11. Booleans (true/false) • A few things are “falsy” • false •0 • undefined • null • '' (an empty, zero-length string) • NaN (“not a number,” the result of illegal math operations)
  • 12. ‘hello’ a string
  • 13. 42 a number
  • 14. ['hello', 'world'] an array
  • 15. function() { } a function
  • 16. Functions • Functions can take arguments, but they don't have to • Functionscan return anything, including other functions -- but they don't have to return anything • Functions can be assigned to variables • Functions can be passed to other functions by name, or as anonymous functions • Functions are normally called by putting () after their name
  • 17. Variable scope http://www.flickr.com/photos/8/12978541/
  • 18. Closures http://www.flickr.com/photos/gadl/272562772/
  • 19. jQuery
  • 20. In a nutshell • Get some elements • Do something to them http://www.flickr.com/photos/exfordy/1184487050/
  • 21. $()
  • 22. Selectors http://docs.jquery.com/Selectors
  • 23. Chaining http://www.flickr.com/photos/itsgreg/315015695/
  • 24. Events http://docs.jquery.com/Events http://docs.jquery.com/Events/jQuery.Event
  • 25. $('a.foo').click(function(e) { e.preventDefault(); var $this = $(this); $this.css({ color : 'red' }); console.log('You clicked a link that points to ' + $this.attr('href')); }); when an a.foo link is clicked, prevent the default action, color the link red, and tell the user where the link pointed to
  • 26. CSS
  • 27. Manipulating http://www.flickr.com/photos/nnova/3373350948/
  • 28. Traversing http://www.flickr.com/photos/jenny-pics/3258777653/
  • 29. Effects http://www.flickr.com/photos/foxypar4/2153422313/
  • 30. XHR http://www.flickr.com/photos/timsnell/513274898/
  • 31. XHR basics • type: GET or POST • url: a fully qualified or relative URL • data: object or query string • dataType: text, html, xml, json, jsonp, script • callback: function to run when data is received
  • 32. POST or GET? • POST when you want to change something on the server • GET when you just want to get something from the server http://www.flickr.com/photos/14511253@N04/3298001461/
  • 33. POST or GET? • POST when you want to change something on the server • GET when you just want to get something from the server http://www.flickr.com/photos/14511253@N04/3298001461/
  • 34. More options with $.ajax() • async • error callback • timeout • cache • header modification • more ... http://www.flickr.com/photos/jeet_sen/1691759831/
  • 35. XHR events • ajaxStart • ajaxStop • ajaxComplete • ajaxError • ajaxSend • ajaxSuccess
  • 36. $('#loading') .ajaxStart(function() { $(this).show(); }) .ajaxStop(function() { $(this).hide(); });
  • 37. Utility Methods http://www.flickr.com/photos/geoftheref/2486112196/
  • 38. Plugin authoring
  • 39. Plugins • Extend core jQuery • $.myPlugin() • Extend jQuery object methods • $('#foo') .myPlugin()
  • 40. Extending object methods • Chainability • Options & defaults • Callbacks
  • 41. jQuery.fn.myPlugin = function(options) { jQuery.fn.myPlugin.defaults = { // ... }; var settings = $.extend( jQuery.fn.myPlugin.defaults, options ); return this.each(function() { // ... }); }; basic concept of a jQuery object method
  • 42. jQuery.fn.myPlugin = function(options) { jQuery.fn.myPlugin.defaults = { // ... }; var settings = $.extend( jQuery.fn.myPlugin.defaults, options ); return this.each(function() { // ... }); }; naming the plugin
  • 43. jQuery.fn.myPlugin = function(options) { jQuery.fn.myPlugin.defaults = { // ... }; var settings = $.extend( jQuery.fn.myPlugin.defaults, options ); return this.each(function() { // ... }); }; setting the defaults for the plugin
  • 44. jQuery.fn.myPlugin = function(options) { jQuery.fn.myPlugin.defaults = { // ... }; var settings = $.extend( jQuery.fn.myPlugin.defaults, options ); return this.each(function() { // ... }); }; overriding the defaults with user-defined options
  • 45. jQuery.fn.myPlugin = function(options) { jQuery.fn.myPlugin.defaults = { // ... }; var settings = $.extend( jQuery.fn.myPlugin.defaults, options ); return this.each(function() { // ... }); }; enabling chaining
  • 46. jQuery.fn.hrefToContents = function(options) { return this.each(function() { $(this).text($(this).attr('href')); }); }; a plugin that requires iteration
  • 47. jQuery.fn.hoverClass = function(c) { return this.hover( function() { $(this).addClass(c); }, function() { $(this).removeClass(c); } ); }; a plugin that doesn't require iteration
  • 48. jQuery.fn.myPlugin = function(options) { jQuery.fn.myPlugin.defaults = { callback : function() { alert('done'); } }; var settings = $.extend( jQuery.fn.myPlugin.defaults, options ); this.each(function() { // ... }); jQuery.fn.myPlugin.defaults.callback(); return this; }; adding a callback