jQuery Overview March 18th, 2013

A JavaScript library that helps you write less and do more.

• $() is the same as jquery()
• Selectors: $(#id), $(element), $(.class), $(#multiple .selectors), $(p:first), $(p:last), $(p)[0]
  • Adding .eq(#) counts 0-based forward or backwards from beginning or end of a set
• .size() method returns number of elements in the set
• $(document).ready(function(){…}); is the same as using the shorthand of $(function(){…});
• You can do simple templating with string replacement
• myArray.forEach(function(item, i){…}); gives you the item and position in the array
• Modulo … i % 6 … remainder of i divided by six
• Inline Conditionals = poster.inStock ? ‘In Stock’ : ‘Sold Out’ … note: this can be added inline as a value
• Push into array = posterHtmls.push(posterHtml);
• Concatenate an array with .join(”); … note: using an empty string prevents commas from being inserted by default
• $(selector).first(); – Get first element in array
• $(selector).last(); – Get last element in array
• $($(selector)[0]); – Turn raw element into jQuery object
• $(selector).each(function(index, element){…}); – Iterate over array of elements
• $(selector).draggable() – Part of jQuery UI for making elements draggable
• $(selector).on(‘propertychange’, function(){…}); – Use propertychange event to handle text changes as they’re typed since the change event only fires when the user is done. There’s no convenience method for this one so you have to use the .on() method and pass as the first attribute.
• $(selector).clone(true); – Clone an element AND it’s event handlers and data
• Event objects are created for every event that happens and have a ton of info like the intended target…

  $(selector).click(function(evt){
     if(evt.target !== this) return;
  });