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

• many commands GET and SET (getters and setters depending on overload)
• text, html, css, prop, val, attr, and more

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);

• Getters don't chain, first elem

.text()/.html()
.css()
.width(),.height()
.attr()/.val()
.prop()/.data()
.hasClass()

• toggle with overloads

.toggle([bool])
.fadeToggle([bool])
.toggleClass('class-name',[bool])
.animate({outlineWidth:'toggle'})

• command chaining
  • most commands return a jquery object

$(sel)
  .css(cssProperty, cssvalue)
  .addClass(className1)
  .text(message)
  .parent()
    .toggleClass(className2)

• Advanced chaning with ".end()". Used with 'find', 'filter', 'appendTo', etc...

Tricky Bits:

.html() & .text()

• similar but crucially different
• .html() incorrectly used in place of .text(). Example: (cross site scripting hack)

function(untrustedStr) {
  $('#title').html(untrustedStr);
}

• .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

• 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

$(sel).on('click', function);
$sel).off('click');

• .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);