This article contains my rough notes from the JQuery course on Codeacademy. These notes are more information and less commentary than my others, because I had never used JQuery before. Turns out, it has nothing to do with databases!
BASICS
JQuery is a library for JavaScript which provides many useful functions for maniptulating HTML elements (especially visually, eg "fade-out a div") - so that we don't have to write them ourselves.
An HTML page is structured according to the Document Object Model (DOM) which comprises every element on the page, laid out in a hierarchical way reflecting how tags are laid out in the HTML document.
BASIC SYNTAX
We first need to connect JavaScript to our HTML page, very similarly to how we connect CSS. Add the following to the head of the file:
<script type="text/javascript" src="script.js"></script>
This would enable us to use JavaScript from a file named "script.js" in the same directory as the html file.
In the JavaScript file, put the following:
$(document).ready(something);
$(____) is the JQuery Selector, "document" tells JQuery to operate upon the entire HTML document, "ready()" is a JQuery event which which occurs when the HTML document is ready, and at that time it will execute "something"
That something might be an immediate action, or might be an event trigger which contains its own nested actions/events. There can also be several actions occuring in sequence on the same level, or several events all waiting adjacently, or some combination thereof. The actions will occur immediately upon entry to that level, while the events will wait and trigger independently.
We can define a function inside the brackets like:
.....ready(function(){
someActions
});
JQuery runs on "actions" rather than traditional code.
JQUERY FUNCTIONS
$(someElement).slideDown('slow') is an action to slide an element down into view at a slow speed.
$(someElement).fadeTo('fast', 0.25) fades an element at the given speed to the given opacity (percentage). Note, this is the same opacitiy style that we can set using CSS.
$(someElement).fadeIn and .fadeOut do what you might expect
$(someElement).hide() removes an element from view entirely. It's like an instant, 0% fadeTo.
$(someElement).animate({direction: delta}, duration) moves someElement around the screen over duration millliseconds
$(someElement).mouseenter(function) performs function when the mouse cursor enters an element.
$(someElement).mouseleave(function) performs function when the mouse cursor leaves an element.
$(someElement).click(function) performs function when someElement is clicked
$(someElement).hover(function1, function2) performs function1 when someElement is hovered over. Function2 is optional and will happpen when the mouse cursor stops hovering someElement.
$(someElement).dblclick(function) performs function when someElement is double-clicked
$(someElement).focus(function) performs function when someElement is focused (ie, selected using Tab)
$(someElement).keydown(function) performs function when any key is pressed while someElement is focused. We can get around this a bit by calling keyDown on document. This will implicitly provide the variable "key" to use as an argument for function, representing which key was pressed.
VARIABLES
The results of a JQuery selector can be stored into a variable. It is common practice to name the variable with a "$" to distinguish it from non-JQuery variables.
Example syntax:
$myVar = $('div')
SELECTION
JQuery selectors use mostly the same syntax as CSS
$(document) selects the entire document, presumably there are other keyword selectors as well
$(‘name’) selects HTML elements with tag ‘name’
$(.name) selects HTML elements with class ‘name’
$(#.name) selects HTML elements with ID ‘name’
$('name[attribute=value]') selects HTML elements with the specified tag and attribute.
Compound selection is supported by comma-separating selectors (ie $(‘name’, .name2). This will select all elements fitting EITHER selector
$(this) selects the element which the parent selected. If you use an event-handler on ‘div’ and define a function as its action, the function could use “this” to act on div instead of re-selecting div. This also opens the door for reusable functions.
CREATING/REMOVING HTML ELEMENTS
$(selector).append(htmlElement) will append an html element as a child of the selected element. htmlElement should be a string containing the full item you want (ie. “<p>sometext</p>)
$selector).prepend(htmlElement) does the same thing, but inserts htmlElement as the first child rather than the last.
$(htmlElement).appendTo()(selector) and .prependTo() are just syntactic alternatives to .append and .prepend
$(selector).after(htmlElement) will insert htmlElement directly after selector, on the same level.
$(selector).before(htmlElement) does the same, but before selector.
CHANGING CLASSES
We can reuse these functions to MOVE existing HTML elements by replacing htmlElement with the selector of the element we want to move. For example:
$p = $(‘p’);
$(‘#asdf).after($p); //Moves a paragraph to after the element with ID “asdf”
$(selector).empty() deletes an element’s content and descendants
$(selector).remove() does the above, and deletes the element itself
$(selector).addclass(className) gives an element to the entered class
$(selector).removeClass(className) removes an element from the entered class
$(selector).toggleClass(classame) will either add an element to a class if it wasn’t in already, or remove the element from the class if it was.
MODIFYING CSS
$(selector).height(height) and $(selector).width(width) will set the css height and width attributes to whatever value you enter.
$(selector).css(attribute, value) is more generic, it will set whichever css attribute you enter to whichever value you enter.
MODIFYING CONTENT
$(selector).html(value) will set the contents of the first matching element to whatever value is entered
$(selector).val() returns the value of the first selected element.
OTHER EVENT HANDLERS
$(document).on(event, selector, function) allows you to operate on selectors which were not present in the document when the document was first readied.
JQUERY UI
jQUI is a new jQuery library which adds a bunch of effects
$(selector).effect(someEffect) is the generic function to apply these new effects to selector. They're powerpoint-calibre effects.
'explode' will create a bunch of tiny copies of the selected element, and animate them to "explode" out of the selected element.
"'bounce', {times:2}, 200" will cause the selected element to "bounce" in place, 2 times over 200 milliseconds
'slide' causes the selected element to "slide" into view.
$(selector).accordion({collabsible: true, active: false}); will conver a div full of headers and divs into an expandible menu which is closed by default.
$(selector).draggable() makes the selected element mouse-draggable anywhere on the page (including off the page)
$(selector).resizable() makes a dive mouse-resizable horizontally by dragging its edges.
$(selector).selectable() adds a built-in .ui-selected class to list items which are clicked on, and removes the class from one list item when another is clicked. This class can be customized in CSS to highlight the selected list item, for example.
$(selector).sortable() makes lists sortable by hand.... meaning items in a list can be mouse dragged apst eachother and when released will snap into the nearest postition.