JQuery

02 Sep 2015

Prelude: Overloading, Accessors, and Chaining

Overloading

"Overloading" a function means varying its purpose depending on the number and type of its arguments.

Exercise: write an overloaded function.

Accessors

An "accessor" function is overloaded to both get and set an object property.

Exercise: write an accessor method for a constructor of your choice.

Chaining

Setters may return the same object they manipulate, which affords "chaining".

Exercise: write a set of chainable methods to support the following command: js obj.name('Barney').species('dinosaur').color('purple').name();

The "Magic Bag" wrapper object

function magicBag(selector) {
  var matchingThings;

  if (selector[0]==='#') {
    matchingThings = [document.getElementById(selector)]
  } else if (selector[0]==='.') {
    matchingThings = document.getElementsByClass(selector);
  } else {
    matchingThings = document.getElementsByTagName(selector);
  }

  return {
    things: matchingThings,
    // setter methods:
    magic: function () {
      console.log('magic');
      return this;
    },
    shazam: function() {
      console.log('shazam');
      return this;
    },
    kaboom: function() {
      console.log('kaboom');
      return this;
    }
  }
}

// possible use:
var tds = magicBag('td');
tds.magic().kaboom().shazam();

// more informative name:
var $tds = magicBag('td');
$tds.magic().kaboom().shazam();

JQuery objects are a kind of Magic Bag!

Some Overloaded Meaning of $

For lots more detail, see jquery's documentation.

Element Retrieval:

$(selector)  // "#id", ".class", or "tag"
$(DOMnode)
$(array)
$([node0,node1, ...])
$(selector,contextNode)
$(selector,contextJQ)

//  all these return $stuff, as in:
var $stuff = $('tr'); //--> builds magic bag of all <tr> elements

Element Creation:

$("<TAG>...</TAG>")
$("<TAG>")
// example:
var $div = $('<div>');

$("<TAG>",descriptorObj)
// example:
var $img = $('<img>',{id:'id', href:'url'})

On-ready Event Handlers:

$('document').ready(whenReadyFn)
$(whenReadyFn)

Traversal:

$stuff.children() // elements only
$stuff.contents() // elements and text
$stuff.parent()
$stuff.prev()
$stuff.next()
$stuff.siblings()

Set Reduction/Filtering:

// Singletons:
$stuff.first();
$stuff.last();

$stuff[n]    //--> nth item as DOM element
$stuff.eq(n) //--> nth item as jq singleton

var $stuff = $('td');
var stuff0 = $stuff[0];
var $stuff0 = $stuff.eq(0);
stuff0 instanceof HTMLElement // true
$stuff0 instanceof $ //true


// Plurals:
$stuff.slice(from,to)
$stuff.filter(booleanFn)
$stuff.map(convertFn)
$stuff.has(selector | element)
$stuff.is(selector | Fn) --> boolean
$stuff.not(selector | Fn | stuff)

Set Addition:

$stuff.add(selector)
$stuff.add($morestuff)

Element Attachment/Detachment:

$child.appendTo($parent)
$parent.append($child)
$child.appendTo($parent)
$parent.append($child)

Content Replacement:

$stuff.html(newHTML);

Setting Classes:

$stuff.addClass()
$stuff.removeClass()
$stuff.toggleClass()

Animation:

$stuff.animate({cssProp:targetVal}, duration)

JQuery exercise

In a new file, write a constructor that creates a grid of TreeHouse badges using jQuery.

When a badge is clicked, do some kind of animation with it. Be creative!

JQuery Iteration

Exercise: each vs. forEach

array.forEach(fn) --> calls fn(item,n)
$stuff.each(fn) --> calls fn(n,item) with item as 'this'

Implicit Iteration

$allcells.html(function(num) {
    return num;
});

PCS JS Immersion