• Save
Jquery Fundamentals
Upcoming SlideShare
Loading in...5
×
 

Jquery Fundamentals

on

  • 8,498 views

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.

Statistics

Views

Total Views
8,498
Views on SlideShare
8,103
Embed Views
395

Actions

Likes
16
Downloads
0
Comments
0

5 Embeds 395

http://coderwall.com 309
http://www.slideshare.net 33
http://yenkay.wordpress.com 32
http://ardlian.net 16
http://web.archive.org 5

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Jquery Fundamentals Jquery Fundamentals Presentation Transcript

  • jQuery Fundamentals rebecca@rebeccamurphey.com @rmurphey on Twitter http://delicious.com/rdmey/jquery-class
  • Housekeeping • ftp: [yourname].jqueryclasses.com • username: yourname@jqueryclasses.com • password: jquery!class
  • In the beginning, there was JavaScript http://www.flickr.com/photos/freeparking/476376873/
  • Enter jQuery http://www.flickr.com/photos/timsnell/513274898/
  • • Reads like what you mean • Simplifies cross-browser issues • Huge community & plugin ecosystem
  • JavaScript 101 Because there’s lots of stuff you still need to know.
  • Operators and logic
  • 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/
  • true a boolean
  • 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
  • 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)
  • ‘hello’ a string
  • 42 a number
  • ['hello', 'world'] an array
  • function() { } a function
  • 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
  • Variable scope http://www.flickr.com/photos/8/12978541/
  • Closures http://www.flickr.com/photos/gadl/272562772/
  • jQuery
  • In a nutshell • Get some elements • Do something to them http://www.flickr.com/photos/exfordy/1184487050/
  • $()
  • Selectors http://docs.jquery.com/Selectors
  • Chaining http://www.flickr.com/photos/itsgreg/315015695/
  • Events http://docs.jquery.com/Events http://docs.jquery.com/Events/jQuery.Event
  • $('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
  • CSS
  • Manipulating http://www.flickr.com/photos/nnova/3373350948/
  • Traversing http://www.flickr.com/photos/jenny-pics/3258777653/
  • Effects http://www.flickr.com/photos/foxypar4/2153422313/
  • XHR http://www.flickr.com/photos/timsnell/513274898/
  • 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
  • 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/
  • 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/
  • More options with $.ajax() • async • error callback • timeout • cache • header modification • more ... http://www.flickr.com/photos/jeet_sen/1691759831/
  • XHR events • ajaxStart • ajaxStop • ajaxComplete • ajaxError • ajaxSend • ajaxSuccess
  • $('#loading') .ajaxStart(function() { $(this).show(); }) .ajaxStop(function() { $(this).hide(); });
  • Utility Methods http://www.flickr.com/photos/geoftheref/2486112196/
  • Plugin authoring
  • Plugins • Extend core jQuery • $.myPlugin() • Extend jQuery object methods • $('#foo') .myPlugin()
  • Extending object methods • Chainability • Options & defaults • Callbacks
  • 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
  • jQuery.fn.myPlugin = function(options) { jQuery.fn.myPlugin.defaults = { // ... }; var settings = $.extend( jQuery.fn.myPlugin.defaults, options ); return this.each(function() { // ... }); }; naming the plugin
  • 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
  • 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
  • jQuery.fn.myPlugin = function(options) { jQuery.fn.myPlugin.defaults = { // ... }; var settings = $.extend( jQuery.fn.myPlugin.defaults, options ); return this.each(function() { // ... }); }; enabling chaining
  • jQuery.fn.hrefToContents = function(options) { return this.each(function() { $(this).text($(this).attr('href')); }); }; a plugin that requires iteration
  • jQuery.fn.hoverClass = function(c) { return this.hover( function() { $(this).addClass(c); }, function() { $(this).removeClass(c); } ); }; a plugin that doesn't require iteration
  • 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