OpenWest 2014/jQuery

From Omnia
Revision as of 01:33, 12 May 2014 by Kenneth (talk | contribs)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigation Jump to search

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