JQuery

$(this.hash)

Measurements

$(window).scrollTop()
$(window).scrollLeft()

$(element).offset().top

jQuery Object

selects an element and then returns that element node to perform an action on it

$()
jQuery()

Document ready

placing all of our other custom written jQuery inside of this function

$(document).ready(function(event){
	// jQuery code
})

AJAX Request

$.get('http://url.com', function callback(data) {
  console.log(data);
});

Selectors

$('.feature');           // Class selector
$('li strong');          // Descendant selector
$('em, i');              // Multiple selector
$('a[target="_blank"]'); // Attribute selector
$('p:nth-child(2)');     // Pseudo-class selector

this

the element which was referenced inside of the original selector

$('div').click(function(event) {
  $(this);
});

Traversing

$('div:has(strong)');

$('div').not('.type, .collection');

$('div').not('.type, .collection').parent();

$('.child').parent().siblings().addClass('.aunt-or-uncle')

Filtering

• .eq()
• .filter()
• .first()
• .has()
• .is()
• .last()
• .map()
• .not()
• .slice()

Miscellaneous Traversing

• .add()
• .andSelf()
• .contents()
• .end()

DOM Tree Traversal

• .children()
• .closest()
• .find()
• .next()
• .nextAll()
• .nextUntil()
• .offsetParent()
• .parent()
• .parents()
• .parentsUntil()
• .prev()
• .prevAll()
• .prevUntil()
• .siblings()

Manipulation

Getting & Setting

// Gets the value of the alt attribute
$('img').attr('alt');

// Sets the value of the alt attribute
$('img').attr('alt', 'Wild kangaroo');

Attribute Manipulation

$('li:even').addClass('even-item');
$('p').removeClass();
$('abbr').attr('title', 'Hello World');

Attribute Manipulation Methods

• .addClass()
• .attr()
• .hasClass()
• .prop()
• .removeAttr()
• .removeClass()
• .removeProp()
• .toggleClass()
• .val()

Style Manipulation

$('h1 span').css('font-size', 'normal');
$('div').css({
    fontSize: '13px',
    background: '#f60'
});
$('header').height(200);
$('.extend').height(30 + 'em');

setting multiple properties

('div').css({ lineHeight: "30px", textAlign: "center" })

Style Manipulation Methods

• .css()
• .height()
• .innerHeight()
• .innerWidth()
• .offset()
• .outerHeight()
• .outerWidth()
• .position()
• .scrollLeft()
• .scrollTop()
• .width()

DOM Manipulation

$('section').prepend('<h3>Featured</h3>');
$('a[target="_blank"]').after('<em>New window.</em>');
$('h1').text('Hello World');

DOM Manipulation Methods

• .after()
• .append()
• .appendTo()
• .before()
• .clone()
• .detach()
• .empty()
• .html()
• .insertAfter()
• .insertBefore()
• .prepend()
• .prependTo()
• .remove()
• .replaceAll()
• .replaceWith()
• .text()
• .unwrap()
• .wrap()
• .wrapAll()
• .wrapInner()

Events

$('li').click(function(event){
    $(this).addClass('saved-item');
});

Event flexibility

$('li').on('click', function(event){
    $(this).addClass('saved-item');
});

Nesting Events

$('.pagination').on('hover', function(event){
    $('a#up').click();
});

Browser Events

• .resize()
• .scroll()

Document Loading

• .ready()

Event Handler Attachment

• .off()
• .on()
• .one()
• jQuery.proxy()
• .trigger()
• .triggerHandler()
• .unbind()
• .undelegate()

Event Object

• event.currentTarget
• event.preventDefault()
• event.stopPropagation()
• event.target
• event.type

Form Events

• .blur()
• .change()
• .focus()
• .select()
• .submit()

Keyboard Events

• .focusin()
• .focusout()
• .keydown()
• .keypress()
• .keyup()

Mouse Events

• .click()
• .dblclick()
• .focusin()
• .focusout()
• .hover()
• .mousedown()
• .mouseenter()
• .mouseleave()
• .mousemove()
• .mouseout()
• .mouseover()
• .mouseup()

Effects

jQuery Effects Documentation

jQuery UI Plugin

Effect Duration

$('.error').show();
$('.error').show('slow');
$('.error').show(500);

Effect Easing

$('.error').show('slow', 'linear');
$('.error').show(500, 'linear');

easing functions

• linear
• swing

Effect Callback

When an animation is completed it is possible to run another function, called a callback function.

$('.error').show('slow', 'linear', function(event){
    $('.error .status').text('Continue');
});

Effect Syntax

Basic Effects

• .hide()
• .show()
• .toggle()

Custom Effects

• .animate()
• .clearQueue()
• .delay()
• .dequeue()
• jQuery.fx.interval
• jQuery.fx.off
• .queue()
• .stop()

Fading Effects

• .fadeIn()
• .fadeOut()
• .fadeTo()
• .fadeToggle()

Sliding Effects

• .slideDown()
• .slideToggle()
• .slideUp()