JQuery

How to get item in JQuery?
$()
Can use minified or un-minified version.
How to check if an element exists?
Wrong:
if ($('#exists')) // Since it will always run.
Correct:
if ($('#exist').length > 0)
Also correct:
if ($('#exist').length)
What are 2 categories of fns?
Getters that readselectionl operation ONLY ON FIRST ELEMENT IN A SELECTION.
Setters that change selection in some way and operate on ALL ELEMENTS IN A SELECTION, using what's known as implicit iteration.
What is Implicit Iteration?
Implicit iteration means that jQuery automatically iterates over all the elements in a selection when you call a setter method on that selection. This means that, when you want to do something to all of the elements in a selection, you don't have to call a setter method on every item in your selection — you just call the method on the selection itself, and jQuery iterates over the elements for you.
How to iterate over each element selected?
$(selector).each(function(index,elemen){});
How to Chain setters?
$( 'li' )
    .click(function() {
        $( this ).addClass( 'clicked' );
    })
    .find( 'span' )
        .attr( 'title', 'Hover over me' );
                
How to create a new element in memory?
$( '<p>Hello!</p>' ); // Basic; not added
But it won't be appended on page automatically.
How to actually append on page?
.appendTo();
$( '<p>', { // Complex; appended
    html: 'Hello!', // to <body>
    'class': 'greet'
}).appendTo('body');
                
How to further filter the selection?
var $listItems = $('li');
var $special = listItems.filter('.special');
// Filter selection to only items WITH a class of 'special'.

var $notSpecial = listItems.not('.special');
// Filter selection to only items WITHOUT a class of 'special'.

var $hasSpans = listItems.has('span');
// Filter selection to only items that contain a span.
What are other filters?
// Get first/last item on PAGE
.first()
.last()

// Get ALL siblings
.siblings()

// Get next/prev sibling
.next()
.prev()

// Get parent
.parent()

// Get IMMEDIATE childREN
.children()

// Get ALL '' in list, INCLUDING NESTED.
.find('')

// Get ALL ancestors with ''
.parents('')

// Get CLOSEST ancestor with ''
.closest('')
                
How to get ith selection?
.eq(index)
How to deal w/ classes?
.addClass('')
.removeClass('')
.toggleClass('')
How to deal w/ adding/removing/replacing?
.appendTo('')
.append('')
.remove() // Remove elements PERMANENTLY
.detach() // Remove elements TEMPORARILY
.replaceWith('') // Replace element(s) w/ element/HTML
How to install click event?
.click(function(event){})
What are other events?
Event Name Shorthand Method
click .click()
keydown .keydown()
keypress .keypress()
keyup .keyup()
mouseover .mouseover()
mouseout .mouseout()
mouseenter .mouseenter()
mouseleave .mouseleave()
scroll .scroll()
focus .focus()
blur .blur()
resize .resize()
What if interacting w/ items that did not exist when DOM was loaded?
Use event handler .on()
$(document).on('event', 'selector', function() {})
How to unbind handlers?
.off()
What is a Namespace Event?
It allows for finder control.
e.g.
$( 'li' ).on( 'click.logging',
function() {
    console.log( 'a list item was
clicked' );
});
                
What is an Event Object?
When an event is triggered, event handler fn receives 1 arg, an event object that is normalized across browsers.
e.g.
$(document).on('click', function(event) {
    console.log(event.type); // The event type, eg. "click"
    console.log(event.which); // The button or key that was
    pressed.
    console.log(event.target); // The originating element.
    console.log(event.pageX); // The document mouse X coordinate.
    console.log(event.pageY); // The document mouse Y coordinate.
});
                
What is gained for the function after it is specified as an event handler?
It gets access to raw DOM element that inited event
$(this)
How to prevent default action of an event?
e.g. May want to handle a click on an anchor element using AJAX rather than triggering a full page reload.
Use event.preventDefault(); inside fn.
e.g.
$( 'a' ).on( 'click', function( event ) {
    // Prevent the default action.
    event.preventDefault();
    // Log stuff to double-check
    console.log( 'I was just clicked!' );
});
                
What happens when clicking on an anchor element that is nested inside other elements?
The click event will be triggered for anchor element as well as for all of elements that contain anchor element - all the way UP to document and window.
Wat happens when clicking on an anchor element that has a child nested inside?
Not actually clicking on anchor element, but rather on a span inside of anchor element.
What is Event Delegation?
It allows us to bind fewer event handlers than we'd have to bind if we were listening to clicks on individual elements.
Instead of:
$('#my-unordered-list a').on( 'click', function( event ) {})
We can do:
$('#my-unordered-list').on('click', 'a', function( event ) {})
What are 2 usage styles in JQuery?
Using $ factory method to run (and even chain) functions/commands. Returns jQuery objects.
Using $. prefix functions, which are utility functions that can be used on non-jQuery objects.
How to use .each()?
$("").each(function() {}); // Return a jQuery object.
$.each(array, function() {}); // Do not return a jQuery object.
Anonymous Function
It is common in jQuery. Even though they don't have a name (and don't need one), they can still accept params determined by jQuery.
How to select element?
$("")
How to create an element?
$("
", {class: ""}).appendTo("body");