REFS
Base API:  http://api.jquery.com/
DOM Traversal API:  http://docs.jquery.com/DOM/Traversing
jquery selectors:  http://docs.jquery.com/DOM/Traversing/Selectors
Events: http://docs.jquery.com/Events

Determine version:  jQuery.fn.jquery OR $.fn.jquery or find the scripts tag that loads
 ".../jquery-*.js".

Gotcha:  Dots in id references must be \\-escaped like $("a\\.b")

Seems to be no support for getting text into system clipboard.

Differences from PrototypeJS.  Not certain about these yet.
    * No infrastructure for subclassing.
    * Methods, including traversal methods, work great with general XML docs
      in addition to HTML docs.

N.b., the $(x) construct is extravagantly overloaded according to
http://api.jquery.com/jQuery/
Generally,
    IF JQuery sees that x is a string that contains <atag..., then it will
     instantiate DOM elements according to $("html"[, param2]).
    IF JQuery sees that x is a fn, then it's a doc-ready callback handler.
    Otherwise x is a selector:  $(selector[, context])

Beginner Tutorial ("How JQuery Works") really blows.
Doesn't "explain" anything in a useful way.
Trying http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery instead.


INITIALIZATION
$(function() {   // === jQuery(document).ready(function() {...
    /*
     * shortcut for:  $(document).ready(function() {
     * which is shortcut for: jQuery(document).ready(function() {
     * Your init code.  Runs after doc is loaded but doesn't wait for all
     * resources to load (images and such).

     * The scope here is the DOM Document.  Therefore you can use 'this' like
     * this.URL.
     * For unknown reason, some unprefixed operations do not default to
     * "window" (I don't know what they default to).  Consequently you just
     * can not define global functions like "function x(...) {...}".
     * You must assign the function variable like "x = function(...) {...};".
});
N.b., ready is INCOMPATIBLE WITH body's load callback!!

Callbacks:
X for all onX events + some others
"Shortcut methods" for jo.bind, like jo.click(function);
Inside the callback $(this) is the source Element.
See list of shortcut methods under BINDING section below.

With iterator callbacks and event callbacks, 'this' only works for trad. 'function' not arrow functions =>.

Prevent default callback action by running in your own callback:
e.preventDefault();
e.stopImmediatePropagation();
e.stopPropagation();

The JQuery instance methods operate on JQuery objects.
JQuery objects have a list of 0 or more DOM Elements, and these are what are
 operated upon by the JQuery instance methods.
jo.each(fn(i)...)  sets 'this' to each DOM Element in turn, with param i index.
  (2nd param is element but that's useless since this is === 'this').
    USEFUL! to use arrow function: (index, w3cel) => {...
jo.length  (slightly faster than equivalent jo.size()).
Similarly, you can jo[index] to get DOM Elements (jo.get([-]index) is a
 generalization of jo[index]).
    .eq vs. .get vs. []  IMPORTANT!
    -------------------
jo.eq([-]index) just like jo.get() or [i], but returns 1-el jo instead.
    WTF did I mean by '1-el'?  When I do jo.eq(0) it returns the 0th element!
Since you can't run JQuery methods directly on a DOM Element, in order to
 run a JQuery method on DOM elements, you must convert the DOM
 Elements into 1-element JQuery instances, like $(this).
A sad consequence to the fact that selectors may validly generate a 0-element
 jo, you get no indication at all if you goofed in your selector.

API
Though instance methods are usually called like $("selector").methName(...),
 the selector doesn't need to be a string, and the methods really require a
 JQuery object regardless of how it was instantiated.  Therefore I'll write
 "jo" below to indicate a JQuery object instance.
$  The JQuery class.  Therefore, those JQuery methods that aren't
   instance-specific are like $.x(...).  I think these are all listed in the API
   like "jQuery.ajax()".
I.e. in code, "$." === "jQuery."
$(x).m() are JQuery instance methods since the expression $(x) is a jo.
  These are chainable, i.e. they return a jo.
$.m() are JQuery static/utility methods.
$.isPlainObject(obj) test if plain old dictionary object.
$.append(...);
$.proxy(fn, contextObj);  See note below about proxy + bind.
$.proxy(contextObj, "targetContextObjFnName");
$.ajax({lostsa: "options",...});
  $.get(...) and $.post(...) are wrappers for $.ajax that use positioned
 parameters instead of a map
 See AJAX section below.
$.each([array] or Object, fn(i, v))  // I value begins at 0
  'this' in the fn body is value just like 'v', but unfortunately is
  always type-converted to an Object, even for strings.
  Fn method body should return false to short cut iteration.
$.support(...) about browser support
List.each(fn(indexParam).  (During each function invocation, 'this' is the el.
(as noted below, most JQuery methods are made to work with element lists).
$.contains(container, contained)
$.extend(...) merges JS Objects/dictionaries into the 1st one (returns ref to it)
$.merge(...) merges JS Arrays
$.grep(array, fn)  where fn is boolean function(el, index)
$.inArray(value, array)   like Java array.indexOf(value)
$.makeArray(arrayLike)
$.is*(thing)  just like the PrototypeJS variable/value type tests.
    POSTNOTE:  NO.  Much more limited than that.
$.map(array|arrayLikefn)    fn = newEl function(domEl, index){ // this is Win
$.param(obj)   encodeURIComponent's each key and vals, then joins then into a
 single query string.
 $.trim()  just like Java's
obj = $.parseJSON(jsonText)
jo set manipulations  (The jo's keep a history of these so can rewind, etc.)
--------------------
jo.ready()  NO REASON TO USE THIS.  Special and only usable with 'document',
  so just call $(handler) instead.
jo.filter("narrowing selector")
jo.not("excluding selector")
jo.next(), jo.prev()  Next/previous sibling of each jo in set
jo.parent(["selector"])    returns 0 or more
jo.parents(["selector"]), parentsUntil([s])  ANCESTORS!!!!  returns 0 or more
jo.closest("selector"[, context])
         like parents() but returns 0 or 1 and starts with self
jo1.add(jo2)   Just like $("sel1, sel2") but lets you use jo instance methods
 on the two parts, like:  $("#top div").first().add($("#olId li").first())
jo.andSelf()  Adds (back) previous jo in selection chain.
jo.children([selector])  Just like .find() but only for direct children
jo.contents()  Just like .children() but gets text and comment children also
jo.find("selector")  Looks within descendants
    Must do this to get ALL descendants:  jo.find("*")
jo.end()  reverts to set previous to last filter (only useful after doing an op)
jo.eq([-]index)  generates a 1-element jo with the specified element.
jo.first() == jo.eq(0)
jo.last()    Think like jo.eq(-1)
jo.has(jo|"selector")  if a descendant of X matches
jo.hasClass("className")
jo.nextAll(["selector"] jo.nextUntil(["selector"],
 jo.prevAll(["selector"] jo.prevUntil(["selector"]
jo.one(eventType...)  Just like bind but will execute once and auto-unbind.
jo.siblings()
jo.slice(...) like .eq(...) operations
insert operations
-----------------
jo.html("HTML");  // REPLACES INSIDE of ALL matching els.  Always returns jo/jo1.
jo.text("text content");  // REPLACES ALL matching els, escaping HTML
jo.before("HTML");  inserts above the jo el(s) right before they open
jo.prepend("HTML");  inserts inside the jo el(s) right after they open
jo.append("HTML");  inserts inside the jo el(s) right before they close
jo.after("HTML");  inserts after the jo el(s) right after they close.
jo1.appendTo(jo2)  Appends each jo1 DOM element to each jo2 element.
    For already-home jo1 elements, they will be MOVED.
    For multiple jo2 elements, jo1 elements will be cloned.
newJo.*To() and newJo.*Before(), newJo.*After() return the newJo for chaining.
  Where * == insert/append/prepend.
  Useful idiom:  jo.clone().*To(...)  and similar.
other operations
----------------
These functions get a plain old DOM element: jo[n], jo.get(n)   so can jo[n].id
These functions get a JO: jo.eq([-]index), jo.first(), jo.last()  so can jo.eq(n).attr("id")
jo.toArray()  Array of plain old DOM Elements.
jo.get()  Converts jo elements to a real array of DOM Elements
jo.get([-]index)  Gets a real DOM Element  (superset of jo[index]).
jo.detach([selector])  JUST detaches els from doc.
jo.remove([selector])  = jo.detach() + jo.empty() + remove it + data + events.
jo.removeClass("class1 class2...")
jo.removeAttr("attName")
jo.addClass("nam");
jo.toggleClass(...)
jo.hover(overFn, outFn);
jo.css("cssPropName")   Returns specified style value OF FIRST EL in jo set
     Supports both  camelBack names and hyphen-ated!
     !! Does onto support collection shortcuts like "margin"!
jo.css("cssPropName", "propVal") or jo.css("cssPropName", fn(i,oldV))
   or .css({cssPropName1: v1, cssPropName2: v2,...});   NOT ONLY FIRST!
ALWAYS use jo.attr for HTML el attr="x" values; always use jol.prop for HTML el JavaScript prop/members.
jo.attr("attrName")   Returns attr value OF FIRST EL in jo set
jo.attr("attrName", "attrVal") or jo.attr("attrName", fn(i,oldV))
   or .attr({attrName1: v1, attr: v2,...});   NOT ONLY FIRST!
jo.prop("member") and jo.prop("member", "val");  // corresponding purpose for the .attr functions.
jo.text();  // Fetches combined recursive text of ALL matching els.
                       // (strips tags)
jo.html();  // getter for the HTML content INSIDE FIRST el in jo set.
$("xpath/Selector", xmlNode).text()   XML text content of matching XML node(s)?
jo.bind()  See BINDING below.
jo.unbind([eventType[, handler|false]) or jo.unbind(event)
    eventType may used . namespaces.  Last is to unbind self fn from the body.
jo.delegate(selector, eventType[, eventData], handler)
    Just like bind(), but the selector is evaluated as the DOM changes, not
     just at .delegate() execution time.
jo.undelegate(...)
jo.live(), jo.die()  Just like delegate, but bound to the root of the DOM tree,
 depending on bubble-up.
jo.clone([withDataAndEvents])  deep/recursive
jo.data(), jo.data("key"), jo.data("key", val), jo.data({...}). jo.removeData(.
    JQuery system itself writes _*, "event", and "handle" keys.
    There are portability concerns.
jo.empty()  clears all descendants, INCL. text nodes
jo.hide([duration][[, easing], finfn]), jo.show(), jo.toggle()
// Use following methods to work with numbers instead of the Strings used by
// HTMLElement.height, etc.
jo.height(), jo.width()   of FIRST el in jo set
jo.innerHeight(), innerWidth()   Padding but not border or margin.
jo.outerHeight(), jo.outerWidth()  size w/ border
jo.outerHeight(tru), jo.outerWidth(true)  size w/ margin.  SWEET
jo.index(...)  returns index within a collection (which is set variously)
boolean jo.is("selector")  if any match
jo.load("url", ...) does $.ajax "GET" and writes retrieved content to specd. el.
newJo jo.map(fn)    fn = newEl function(index, domEl){ // this is domEl...}
newJo.replaceAll(olds)
oldJo.replaceWith(news)
ANIMATION-RELATED  http://wayfarerweb.com/animate-example.php
jo.animate({targetCssProps}, opts) OR jo.animat(tcp, [durat], [ease], [finifn])
  interps. over time across any numerical css value.  ANIMATION section below.
jo.delay(duration)
  This effects only things in the animation queue.  To delay stuff more
 generally, queue a function with.queue(fn).
jo.queue(fn)  Execute a function in the anim queue.
 'this' (context) and '$(this)' available in the fn.
jo.fade*(...)
joslide*(...)
jo.scrollLeft(), jo.scrollTop()  report scroll positions
formJo.serialize()  makes a .param() out of named params for the form
formElementsJo.serialized()  similarly
jo.offset()  topLeftCoordsObj in doc of FIRST matching El.
             Since there is no style to position according to doc if there is
             an intervening non-static element, I don't know how this value
             could be used.
jo.offsetParent() is the first non-static common parent
  (i.e. the absolute-positioning base)
jo.position()  relative to the .offsetParent() of FIRST matching El
               This is precisely what .left/.top mean with abs. positioning.
               jqueryui provides a jo.position(...)
               (for setting not just reading position).
jo.offset(topLeftCoordsObj)  Place El(s) relatively
jo.trigger(eventType, params) or jo.trigger(jqEvent).  Like DOM .click(), but
 triggers any specified event, not just click.
jo.triggerHandler() does less thatn jo.trigger(...).
jo.val()  Sets/gets .value of FIRST matching element.  For multisels returns array.
    !IMPORTANT:  For radios and checkboxes will want to narrow to checkeds
    (with *:checked).
    const isChecked = !!$("selector:checked").val();
wrapeeJo.wrap[Inner](wrappingEl)  wraps EACH.
  wrappingEl has only 1 inner-most el..  If "Inner" then wraps only contents.
wrapeeJo.wrap[Inner](fn)  wraps EACH.
  'this' in executing function is wrapee DOM El.  "Inner" wraps only the conts.
wrapeeJo.wrapAll(wrappingEl)  does one wrapping
jo.unwrap() removes parent, transplanting jo and their peers 1 level up.

JQUERY SELECTORS generate a JQuery object instance, which aggregates an
 iterable list of 0 or more DOM Elements.
Just like PrototypeJS, selectors normally match only XML or DOM Elements, not
 text or comment nodes.  There are exceptions though, like jo.content().
(N.b. selectors are not just strings, but some "selection" of existing DOM
element(s), for example, can convert a single or array of DOM element(s)).
! Optional 2nd param, like:  $("selector", context)
 changes the scope of selection from the entire DOM doc.  (Could accomplish
 same by using the jo.find(...) method).
So they work well with the selectors like jo.jQueryFn(...),
JQuery-supplied methods usually do each internally.
If you want to use a non-JQuery method on the set from a selector, you must
invoke .each manually.
$("*") selects all elements in the doc.
$(domElement)
$("#id")
XPath-like [] operator for tag attribute matching:
    [x]:  Has attr name "x".
    [x="v"]:  Has attr name "x" and value y
    [x!="v"]:  Figger it out.
    [many others]
 ?????  Same tutorial also has $("#parentelid tag.class")  ???
Difference between $("x y") vs. $("x").find("y") not explained.
x + y   Matches y if it immediately follows peer matching x.
x ~ y   Matches y's that follow peer matching x.
: selector-operators.  Immensely useful.  Critical ones here:
    :animated   animating right now
    :button  gets both <button>s and <input type="button" s.
    :checkbox
    :checked
    :contains("the text")   case-sensitive for COMBINED text of cand+all-descds.
    :disabled
    :empty  (childless, incl. text nodes)
    :enabled
    :eq(3)  just like jo.eq(index) operation.
    :even/:odd (zero-based)  = eq(0) + eq(2)...
    :file
    :first-child / :last-child
    :first / :last
    :gt(3), lt(3)  think of like eq(>3), eq(<3)
    :has(selector)
    :header  (h1, h2, etc.)
    :hidden
    :image
    :input   Includes textarea, select, button.  Great.  Seemingly jquery-spec.
    :not(selector)
    :nth-child(...)  non-narrowed indexing, 1-index-based
    :online-child
    :parent  (of anything other than text nodes)
    :password
    :radio
    :reset
    :selected
    :submit
    :text
    :visible

PLUGINS
Adding your own elementList functions.
Follow the recipies in the Getting Started doc.
There is a "tablesorter" plugin.

Definitely can do $(window).height() to get height of the current frame!

$(this) vs. this
Generally "this" inside of JQuery instance methods (incl. each()) is a DOM
Element; and $(this) is the JQuery Element wrapping that DOM element.
(It's possible that 'this' at top level in a plugin definition is the JQuery
Element list).

ELEMENT CREATION:
Can only create DOM elements with JQuery.  For XML you must use
 $(selector, context) to create a JQueryObject for XML.
 'context' may be DOM Element or Document.
I think can not create XML elements.
Use document.createElement() directly if performance critical.
TODO: Test with IE!!!  (Definitely so with Chrome)
I believe no need to create closing elements anymore.
If you just create "<div>", the closer will be added automatically.
To use JQuery, do $("<div>"[, {attr: "val", methodName: "param"}]).
OR to specify HTML doc parent:
To use JQuery, do $("<div>", ownerDoc).
OR chain:
To insert and invoke other JQ methods:
    $("<div>").methodOne("param").prepedTo($("other")).methodTwo("param");
    // I.e. makes no difference where in the chain you add method calls.

AJAX
Default contentType application/x-www-form-urlencoded and UTF-8 encoding.
Handlers.  Major difference between Request-Specific vs. Global.
Accept defaults to "*/*".
Global setup:
    Global handlers (as described below)
    + $.ajaxSetup({default: opts,...) for req-option/req-property defaults.
Since jQuery 1.5, $.ajax() returns a jXHR instead of a native XMLHttpRequest!
Settings
    Request-Specific:
        Via properties, with context according to property "context".
        Definitely get no warning or clue if you set a property with an invalid
         name.
        Critical Properties/Options:
            url
            error: function(jXHR, textStatus, errorThrown)
                textStatus may be null, errorThrown may be undefined (IIUC).
            success:  function(data, textStatus, jXHR)
                data is typed according to response's MimeType of dataType
                 setting.
                Should probably check for 0 bytes, since latest FF is returning
                 that for http request from local FS HTML page.
            complete:  Generalization of error + success
                       function(data, textStatus, jXHR)
            async:  Defaults to true.  Set to false to block on the .ajax()
                    method invocation, thereby halting browser updates.
            context:  The 'this' context of ALL Request-specific callbacks.
                      Defaults to this options map.
            data:  A query string, or a map that will be converted to k/v pairs.
                   To submit a form, give $("#formId").serialize()
            processData:  Boolean to false to supply data as direct POST data.
            timeout
            type:  "GET" is default.
            contentType:  Since it defaults to *form-urlencoded, you definitely
             need to change this for POSTs of text, binary, JSON, XML data
             (TODO:  Find out what gets sent by default with GETs).
            global:  true.  Set to false to ignore Global HANDLERS (not opts).
            beforeSend : function(jXHR, settings)
             Since v. 1.5 no longer need this method to set custom headers.
             But use like jXHR.setRequestHeader("Accept", "x");
            headers: {headerkey: headerVal...}
    Global:
        $.ajaxSetup({default: opts,...) for req-option/req-property defaults.
        Do not use ajaxSetup for setting up handlers.  Remainder of this
         section is about global handlers.
        Registered on any jo listeners.  This just determines that 'this'
         will be in the callback fn body.
        N.b. req-specific callbacks run before global handlers.
        jo.ajaxSuccess(function(event, jXHR xhr, optionsForTheReq) {
            // Use xhr.responseText or xhr.responseXML or xhr.responseHTML
            // Use xhr.status
        jo.ajaxError(function(event, xhr, optionsForTheReq, thrownEr) {
            // Use xhr.status, xhr.responseText
        + jo.ajaxComplete
Returned datatype-specific behavior.
    If HTML, embedded JS will execute.
    JSON returns the reconstituted JS object.
FF returns 200 with 0 bytes if try to GET from http server from file page.
    Works fine from IE6!
    This is totally freaky since I see the response header from Apache-Coyote.
To explicitly set Accept header, don't use 'accepts' setting (which is
 inter-related with automatic response handling).  Instead, use this setting:
     headers: {Accept: "application/json, text/plain"},

BINDING
Unlike the prototypejs bind function, jQuery binding does not mean context
 binding (see $.proxy(...) for that) but attaching event handlers to elements.
I do not see it documented anywhere, but for normal DOM events I believe that
 the traditional return value convention should be followed in handler
 functions: return value is a boolean execute-remaining-handlers.
jo.bind(eventTypes[, dataMap], handlerFn|false) OR jo.bind({event: handler,...);
The optional 'dataMap' is passed to handler fns via event.data.
The callback methods ALL get a jQuery.Event.
    Don't know how successful, but jQuery.Event is supposed to generalize
     DOM event objects.  Esp. .target, .which, .pageX, .pageY.
     (see WHICH below)
    'data' prop loaded from bind 'dataMap' param or by trigger somehow.
    ! There are ongoing issues with this !
    e.preventDefault();  to disable default handling
    e.stopImmediatePropagation();
    e.stopPropagation();
Shortcut methods:
    blur, focus, focusin, focusout, load, resize, scroll, unload, click,
    dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter,
    mouseleave, change, select, submit, keydown, keypress, keyup, error
As many callbacks as you want for each event.
Handlers invoked in order of registration.  Nice.
 (Exception that request-specific Ajax callbacks run before globals).
Event Names:   <BaseEventName1>[.namespace1.namespace2...] <BaseEventName2>...
    I.e., each event name spec is delimited with white space.
    Base Event Names may be predefined or custom.
    Namespace names are just specified in a .-delimited list.
    Namespaces are only for narrowing handlers/bindings/unbindings.
Inside handler fn body, 'this' is the source DOM el.  Must $(this) to make a jo.
SPECIAL HANLDER FUNCTION VALUE false === a function that returns false.
Event.which and Event.button properties.
     RMB doesn't even register click events!
     LMB click .which DIFFERS between FF&IE.  Use .button==0 (for L)
     .which works great for mouseup and mousedown  (.button vals differ betw.)
     For mouseup events, e.which = 1 for LMB, 3 for RMB  works for FF and IE 8!

Disabling browser context menu:
    $(document).bind("contextmenu", false);

ANIMATION
[Repeating central method from above:]
jo.animate({targetCssProps}, opts) OR jo.animat(tcp, [durat], [ease], [finifn])
  interps. over time across any numerical css value.  ANIMATION section below.
$.fx.off = true  disables animation
The animate method param specifies all animation property end values, the
 values start at whatever they are.
Just like jo.css(), collecting Prop Names not supported.  E.g. no "margin".
Prop Values default to pixels.  But can specify strings for "x%" or "em".
Special non-numeric support for:  show, hide, toggle.
Special, non-numeric property values:
    show, hide, toggle.  Hide derives numerical value as if to display the
                         entire element.
    "-=X", "+-X".  Relative numeric.  Must supply these vals as JS strings.
Durations in ms.
finifn called with no params, but 'this' is the animated Element.
jQuery UI Project extends animate:  Additional non-numeric props, CSS classes.
Easing:  "swing" default, "linear".  Set animation's default with the param,
 but can then override for individual prop aims by replacing the value
 with array [value, "easingVal"]
 I think only swing and linear come with base, but here are others:
 http://commadot.com/jquery/easing.php .
 Perhaps just need http://gsgd.co.uk/sandbox/jquery/easing/ .
   Looks like included in effects.core.js and therefore HOPEFULLY at least jqueryui??
 !IMPORTANT:  You get no indication if your easing specification is invalid and
  it reverts back to the default.
MULTIPLE ANIMATIONS
    All property animations of a single animate() will happen simultaneously,
    optionally with different easings.
    By default, each animate() runs exclusively in turn, with JQuery keeping a
    queue.  To prevent this default and run a new animate() immediately,
    change the default "queue" option from true to false (via options map).
CHAINING ANIMATIONS
    jo chaining will, by default, run them one after the other.
    Can also use the finifn.

jqueryui menu sucks.  Seeking a full-featured alternative:
radmenu  if radial menus can server all use-cases
jquery menu style 1 / DBFMenu looks good.    They have tons but $50 to get all.
mb.jquery.components look great + tooltip
jmenuplugin uses jquiryui, but does not support
    vertical menus, icons, choice of trigger methods, keyboard operation

proxy + bind
  Binding event proxied function callbacks to elements.
  The contextObj parameter is evaluated with the current in-line context.
  To instantiate contextObj explicitly and individually, do
        bt2.bind("click", $.proxy(function() {
          alert(this.cmd);
      }, {cmd: bt2.text()}));  // bt2.text() could obviously be any expression.
  To instantiate contextObj with the bind-assignee element's context, you must
  wrap with each, like:
    $("button").each(function(i) {
        $(this).bind("click", $.proxy(function() {
            use this.cmd;
        }, {cmd: $(this).text()}));
    });
  Note that you must use contextObj.x in the innermost function body (not "x").

To use JQuery client-side for any web page, execute this code from browser's JS console:
    var body = document.getElementsByTagName("body")[0];
    var script = document.createElement('script');
    script.type = "text/javascript";
    script.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js";
    body.appendChild(script);
And then test with:
    $ === jQuery
per http://stackoverflow.com/questions/8508514/how-to-run-jquery-directly-on-any-page-in-the-browser

Work with elements (or 'window') of children iFrames:
jQuery("...iFrame").eq(0).contents().find("...")...;
windowX = jQuery("...iFrame")[0].contentWindow;