JQuery

Start JQuery

$(document).ready(  fucntion(){

});

Selectors

Direct children

$(''.class > li ");

First
$(''.class  li:first ");

Last
$(''.class  li:last ");

Odd / Even
$(''.class  li:odd ");
$(''.class  li:even ");

Filter by traversing

Find, looks in descendants
$(''class").find("li");

Closest
.closest()

Filter
$('#element').filter(' .element');

First
$(''li").first();

Last
$(''li").last();


Walking in the DOM
$(''li").first().next().prev();
$(''li").first().parent();


$(''.class").children("li");   direct children

Append

Fastest way

.append()      Insert as last child

.prepend()     Insert as the first child

.insertBefore()

.insertAfter()

.appendsTo()
$('<p> new element </p>').appendsTo( $('#destination') );

Event Delegation

$('#element').on( 'click', 'button', function (){} );

Event

.stopPropagation()  //avoid bubble up notification in all the DOM
.preventDefault()  // bubble up  but the browser wont handle it
.fadeToggle()

.toggleClass()

.animate( {'top' :  '-10px',  fast } )
or using CSS transitions

.element{
  transition : top 0.2s;
}

.innerElement{
   top : 10px;
}

Methods

.on("method")

method can be:

• blur
• change
• click
• dbclick
• focus
• focusin
• focusout
• hover
• keydown
• keyup
• mousedown
• mouseup
• mousecenter
• mouseleave
• mousemove
• mouseover
• resize
• scroll
• select
• submit