JQuery - Methods

Method Listener

There are two ways to bind events to elements

Case 1: 

$("my_element").click( function () {

} );

Case 2: 

$("my_element").bind('click',function () {

} );

Unbind method

The function .unbind remove the mehod pass as paramenter. 

Also the function .each iterate in all the elements from the element selector.

$("div.guess_box").each( function(){

$(this).unbind ('click');

});

Functions

There are two ways to declare a function

Function declaration

function nameFunction() {

   //Code

}

Function variable

var nameFunction = function () {

   //Code

}

Anonymous Function

Is when inside another function you declare your own function. In this case $(this).unbind('click'); is the anonymous function.

$("div.guess_box").each( function(){

$(this).unbind('click');

});

Contains Function

Compate inside this if have the element with Id "has_discount"

if ($.contains(this , document.getElementById("has_discount"))) {

$(this).addClass("discount");

}else{

$(this).addClass("no_discount");

}

Functions Catalogue

$("p").empty() - Delete all the content from an element

$("span").replaceWith("<div>Change DOM</div>") - Delete all the content from an element

$("span").before("<div>Change DOM</div>") - Insert a element before span

$("span").after("<div>Change DOM</div>") - Insert a div element after span

Animate Functions

This function only work in numerical properties. The first parameter is the property to be affected with the end value and the second parameter is the duration.

The default time is 400 milliseconds.

$("p").animate({left:"100 px"}, 500);

In the first parameter can include many properties.

$("p").animate({left:"100 px", width: "200"}, 500);

Climb the DOM

parent() - Get the father element

$(".element").parent().   

$(".element").parents(). - Get all the parents elements   

$(".element").prev() - Get the first sibling  to the left

$(".element").children() - Get all the children elements

$(".element").next() - Get from the sibling elements, the one at the right from the first element at the left.

$(".element").closet("#id_element") - Climb through all parents until find the #id_element parent.

Filter the DOM

$(".element").children().first(); - Get the first element from the collection.

$(".element").children().last(); - Get the last element from the collection.

$(".element").children().eq(2); - Get the element from the index.

$(".element").children().slice(2,3); - Get the elements between the indexes.

$(".element").children().filter(".organic"); - Get all the father elements from the selector element.

$(".element").children().not("#id_element"); - Get the elements that not mathc the #id_element.

Best Practice

$variable  - Use a dollar sign before the variable name to indicate you store values from JQuery.

Positions

• Relative
  
  
  
  
  
  
• Absolute

           

• Fixed