Jquery Fundamentals
17 likes2,448 views
The document serves as a comprehensive guide on jQuery fundamentals, covering essential JavaScript concepts such as functions, objects, and variable scope. It outlines the core functionalities of jQuery, including selectors, event handling, and AJAX requests, while also providing insights on plugin authoring and extending jQuery methods. The resource is aimed at simplifying the development process and enhancing user experience through effective manipulation of HTML elements.
![Housekeeping
• ftp: [yourname].jqueryclasses.com
• username: yourname@jqueryclasses.com
• password: jquery!class](https://image.slidesharecdn.com/jquery-fundamentals-090727225240-phpapp02/85/Jquery-Fundamentals-2-320.jpg)
![['hello', 'world']
an array](https://image.slidesharecdn.com/jquery-fundamentals-090727225240-phpapp02/85/Jquery-Fundamentals-14-320.jpg)
Jquery Fundamentals
- 1. jQuery Fundamentals [email protected] @rmurphey on Twitter http://delicious.com/rdmey/jquery-class
- 2. Housekeeping • ftp: [yourname].jqueryclasses.com • username: [email protected] • 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.
- 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/
- 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
- 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. $()
- 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