OpenWest 2014/jQuery

Intermediate jQuery: getting to the next level
 * by Mike Scalora

"Intended for programmers who are new to jQuery or have been exposed to jQuery but have not gone very deep. This session will elevate your game. Firstly you will learn how to avoid the typical newbie pit-falls of jQuery beginners. Next we'll cover a few easy-to-implement recipes that will elevate your jQuery game. We'll also cover a few intermediate++ topics that will impress your peers."

Slides - http://mscalora.com/content/slides/openwest2014

Expectations for lecture: Should know what a selector is and have some exposure.

jQuery Philosophy:
 * "Write less, do more"
 * Message Sending
 * Chainability
 * Normalize Browsers

DHTML before Ajax was coined

Terminology:
 * jQuery object
 * the result of $(selector) - the $ is jQuery the function
 * acts like an array of DOM objects (not a true Javascript array) - can check length
 * zero or more DOM objects
 * command - methods of the jQuery object
 * $(sel).method;
 * utility methods - methods of $ or jQyery (like Ajax stuff)
 * $.method;
 * $.ajax
 * selector - like css selector with more stuff
 * #id or .class or div or :focus or ...
 * chaining - calling multiple methods in a row
 * $(sel).method1.method2;
 * helps avoiding a lot of temporary variables
 * helps performance

Overloaded Commands var elems = $(sel); elems.val(elems.val + " append me"); // val being used as both getter and setter here elems.width("Sin"); elems.prop("disabled", true); .text/.html .css .width,.height .attr/.val .prop/.data .hasClass .toggle([bool]) .fadeToggle([bool]) .toggleClass('class-name',[bool]) .animate({outlineWidth:'toggle'}) $(sel) .css(cssProperty, cssvalue) .addClass(className1) .text(message) .parent .toggleClass(className2)
 * many commands GET and SET (getters and setters depending on overload)
 * text, html, css, prop, val, attr, and more
 * Getters don't chain, first elem
 * toggle with overloads
 * command chaining
 * most commands return a jquery object
 * Advanced chaning with ".end". Used with 'find', 'filter', 'appendTo', etc...

Tricky Bits:

.html & .text function(untrustedStr) { $('#title').html(untrustedStr); }
 * similar but crucially different
 * .html incorrectly used in place of .text. Example: (cross site scripting hack)
 * .html takes properly encoded html source

.prop vs .attr
 * due to old usage, that haven't known better
 * use .prop for everything
 * .attr usually the wrong choice! (it used to be all that we had)
 * use .attr to modify html src
 * .prop usually the right choice
 * use to modify DOM properties, especially checked and disabled
 * .attr and .prop have friends
 * .prop has current value, and .attr has html source value

Modern Event API $(sel).on('click', function); $sel).off('click');
 * stop using .bind and .unbind
 * bind, unbind, delegate, live, click, load, submit, etc - old fashioned deprecated
 * replaced with .on and .off and .one - best practices
 * .trigger and .triggerHandler

Delegated Events $(sel).on('click',sel,function);
 * replaces .delegate & .live
 * faster, smaller, better
 * reduces code complexity

Terminate Events
 * return false; - from event handlers unless you need events to bubble up to element ancestors or want the default behavior
 * preventDefault - browser functionality
 * stopPropagation - ancestors
 * returning false does both

Poor: many inline styles - Better: classes & style sheets - Example: $(sel).css(selected ? {    color: "red",    backgroundColor: "black"  } : {    color: "black",    backgroundColor: "white" );

$(sel).toggleClass("selected",selected);