gistfile1.js

// jQuery Avançado

// 1. Preparando o uso da biblioteca.

// Para garantir um bloco de código jQuery seja executado, é recomendado envolvê-lo
//  em um dos blocos iniciadores abaixo.
// Isso garante que além da biblioteca, todo o DOM* esteja carregado antes de sua manipulação.

// NOTA #1: 

// DOM ou Document Object Model, nada mais é do que uma representação hierárquica dos elementos 
// HTML no contexto da linguagem Javascript através de uma interface de manipulação.
// Quando um programador faz qualquer interação com um elemento da página dinamicamente,
// ele está utilizando o DOM.

// 1.1 Formas de inicialização.

// Repare que para cada forma de inicialização, uma função é passada como argumento. 
// Isso em JavaScript é o equivalente a um callback (um método ou função executado em alguma ocasião 
// que forneça ao programador o poder de intervir e injetar novos comportamentos no contexto da chamada,
// da função 'pai'.

// Em partes, os modelos a seguir estarão descritos.

$(function() { /*Bloco de código em jQuery*/ });

// Onde: 

// * $ é um construtor que aceita diversos tipos de entrada. Incluindo uma função.
// * function() {} é uma função anônima executada no disparo do evento "ready".
// * O bloco dessa função representa o código que o programador vai usar com o jQuery.
// * Internamente, jQuery interpreta essa entrada de dados e direciona para o método .ready onde o seletor é o document.
//          O que cai no modelo abaixo.

// O modelo abaixo faz exatamente o mesmo que o primeiro, sua única diferença é ser mais fácil do programador compreender.

$(document).ready(function() { /*Bloco de código em jQuery*/ });

// 1.2 Evitando conflitos.

// Muitas outras bibliotecas utilizam o mesmo "$" que o jQuery em suas chamadas e isso pode acarretar em um conflito.
// Existem diversas formas de se resolver isso, mas existe também uma forma que o próprio jQuery implementa.

$.noConflict();

// A partir daqui é possível utilizar "jQuery" no lugar de "$". Ou ainda:

var jQ = $.noConflict();

// E assim utilizar "jQ" no lugar de "jQuery".

// 2. Manipulando o DOM

// o jQuery fornece diversas formas de interagir com a árvore DOM. Entre essas:

// I. Para criar um novo elemento:

var div = $("<div/>");

// II. Para inserir um elemento em um nó:

// Dentro de um nó, no final.

div.appendTo(document.body);

// Ou

$("<div/>").appendTo(document.body); // appendTo insere elementoA dentro elementoB, no final.

// Dentro um elemento, no começo.

$("<div/>").prependTo(document.body); // prependTo insere elementoA dentro elementoB, no começo.

// No mesmo nível hierárquico, antes.

var div = $("<div/>");

div.append( // Insere elementoB dentro de elementoA, no final.
	$("<span/>").html("Eu estou dentro da div").before( // Insere "span" de imediato dentro de "div".
		$("<span/>").html("Eu e ainda antes do outro span") // Insere "span" antes de "span" anterior.
	)
);

// No mesmo nível hierárquico, depois.

div.append( 
	$("<span/>").html("Eu estou dentro da div").after( // Insere "span" de imediato dentro de "div".
		$("<span/>").html("Eu e ainda antes do outro span") // Insere "span" depois de"span". (Epa! Não é o mesmo que fazer dois append na div?!)
	)
);

// Complicado de entender a sintáxe? Imagina isso inline!

// III. Para atribuir valores ao elemento:

// a. Em CSS (atributo style): 

div.css({
	border: "1px solid black",
	marginTop: "-1em" // ou "margin-top": "-1em"
});

// Ou

div.css("border", "1px solid green");

// b. Em atributo e propriedade:

$("<input/>").attr("type", "checkbox").prop("checked", true);

// IV. Para buscar um elemento

// A busca de um elemento pode ser feita tanto pelos seletores quanto por métodos, mas isso nos leva a um macete.

// * Para todo e qualquer acesso ao DOM, este deve ser evitado quando pode ser evitado.

// O que isso significa? Que o ideal é sempre armazenar em cache um elemento que vá ser utilizado diversas vezes.
// O jQuery implementa isso internamente MAS SE utilizar uma busca por métodos.

// Analise o caso:

// a. Vamos supor que queremos buscar o último elemento "li" dentro de um "ul".

// Da forma NÃO recomendada:

$("ul li:last"); // Busca do descendente direto "li" que esteja na última posição.

// E a forma recomendada (cache interno):

$("ul").children("li:last");

// Isso não explica muita coisa. Então, vamos ao teardown:

// Cada vez que o construtor é chamado, onde uma seletor CSS é passado, uma busca na árvore DOM é feita.
// No segundo caso, uma busca pelo ul é realizada, para então buscar o elemento "li" a partir do resultado em cache gerado pelo construtor.

// Além disso, o jQuery também implementa uma série de algoritmos que agilizam a busca se em comparação com o a forma nativa que os navegadores utilizam para
// interpretar um seletor.

// Pra finalizar essa parte. Segue os métodos de busca mais comuns:

$(seletor).children(filho); // Busca elemento filho dentro de pai.
$(seletor).parent(filho); // Busca elemento pai em que o filho está.
$(seletor).next(vizinho); // Busca elemento com nível hierárquico equivalente, mas antes dos elementos do seletor.
$(seletor).prev(vizinho); // Busca elemento com nível hierárquico equivalente, mas antes dos elementos do seletor.
$(seletor).prevAll(vizinho); // Busca todos os elementos que estejam antes do seletor no mesmo nível hierárquico.
$(seletor).nextAll(vizinho); // Busca todos os elementos que estejam depois do seletor no mesmo nível hierárquico.
$(seletor).prevUntil(criterio); // Busca todos os elementos que estejam antes do seletor no mesmo nível hierárquico que não equivale critério.
$(seletor).nextAll(criterio); // Busca todos os elementos que estejam depois do seletor no mesmo nível hierárquico que não equivale ao critério.
$(seletor).find(filho); // Realiza uma busca profunda na árvore para encontrar o filho. A partir do pai que seria o seletor.
$(seletor).closest(criterio); // Busca e retorno o primeiro elemento a conferir com o criterio. A partir do pai.
$(seletor).siblings(criterio); // Busca todos os vizinhos que estejam no mesmo nível hierárquico que o seletor e conferem com o criterio (retorna todos se criterio nulo).

// Existem outros ainda mais específicos que por hora não precisam ser abordados.

// V. Interagindo em cada elemento jQuery

// Para cada seletor, se seguido por um método que altere o comportamento. Esse é aplicado para todos os resultados do seletor.
// Mas e se esse método não for exatamente o que buscamos? Para isso existe o $(seletor).each.

// Repare agora:

$("li").each(indice, function() {  // Para cada li encontrado.
	if (this.innerHTML === "Vermelho") { // Se este tiver "Vermelho" como conteúdo.
		$(this).css("color", "red"); // Este vai ser vermelho.
	}
});

// Esse resultado não seria possível sem o uso do .each. Por ter condições ou critérios que simplesmente não foram implementados pelo jQuery.

// NOTA: 

// A diferença entre $(seletor).each e $.each.

// Como foi visto. O primeiro caso, se aplica exclusivamente para objetos encapsulados pela biblioteca.
// Para outros casos, o jQuery fornece um método de contexto global e independente de seletores.
// Veja abaixo:

var obj = { x: 1, y: 2, z: 3 }; // Criamos um objeto.