#jQuery

Ubiquitous JavaScript browser library.

Offers an utilities to:

• allow you to write less, do more
• be more consistent across browsers

Very good for:

• DOM
• events
• AJAX

As JavaScript and web standards progress, it becomes less and less needed as it's features become standardized. ES6 compliance is likely enough to replace jQuery completely, and one possibility is to use transpilers like Babel to achieve compatibility: https://babeljs.io/

#dollar #$

The dollar sign is a valid variable name in JavaScript.

jQuery uses it as an shorthand for its main object, jQuery.

#document $(document).ready(function) vs $(function)

They are all the same: http://stackoverflow.com/questions/2662778/what-is-the-difference-between-these-jquery-ready-functions.

#jQuery object

The only global exposed by the jQuery library. Everything is kept under it.

Most functions return a jQuery object, so this is why functions are chained in jQuery: a().b().c()

#selectors

jQuery can select multiple objects via CSS selectors.

This is currently possible with document.querySelectorAll in pure Javascript.

jQuery also has extensions to CSS selectors that look a lot like them, so watch out. Such extensions are discouraged if an alternative exists, as they cannot benefit from direct querySelectorAll calls. E.g.: :checkbox selector: http://api.jquery.com/checkbox-selector/ which can be replaced by the standard [type=checkbox].

There are however some extensions which have no standard analogue like :contains, which almost made it into CSS3.

#chain calls

Every jQuery method that operates or selects a collection of DOM elements returns another jQuery object, which possibly operates in a new selection, allowing to chain calls.

#end

Restore selected elements to previous states. Does not consider methods which did not change the selected methods. It is for jQuery what tee is for Bash.

#fn

TODO

#val

Append with val

Not possible: http://stackoverflow.com/questions/1224133/is-it-possible-to-do-value-in-jquery

#attr

#prop

attr vs prop: http://stackoverflow.com/questions/5874652/prop-vs-attr/24595458

prop are the in-memory IDL attributes, attr is about the HTML, which may or may not modify the IDL attribute.

#jQuery UI

Has some cool out of the box functionality.

#resizable

Drag resize any element.

Adds styleable handles to allow that.

4 edge handles, no corners. Resizing on the top breaks the UI, so you should disable it.

4 handles and corners:

Individual corners with ne etc.

minHeight, minWidth and max analogues:

Remove diagonal grip:

#style resizable

To style the elements, take a look at the generated divs with your browser's inspector.

For divs, the grippies are put inside the div.

For textarea, a container div is created that contains the text area and the grippie div. This is probably done to overcome styling difficulties with textareas.

Perfectly styled down resizeable textarea:

TODO: the right border of the grippie does not appear.

TODO: how to get before::content to show? Where is it?

Good workaround: centered background image, possibly SVG with text. TODO: how to stretch the SVG text to that the equals sign = becomes very wide to be more visible?

#draggable

Drag elements around to any position positions.

The space occupied by the element does not change.

#tabs

Only the targeted tab links make tabs switch: linking to the fragment directly has no effect. #tab-two. So they could at least have used use buttons with data attributes which doesn't take up the fragment...

The tabs must be inside the tabs container or else it fails:

To get remote content simply add the path to the href.

TODO: get working.

#on

Setup callbacks.

#Event object

TODO: is it the same as the HTML event? http://api.jquery.com/category/events/event-object/

#target

The event.target is the bare

#plugins

jQuery plugins often monkey-patch the jQuery object to add new methods to it.

#autosize

Make the textarea automatically resize to fit content.