jQuery na Prática

jQuery na Prática (http://vitorfs.com/jquery-na-pratica)
Home (index.html) Sobre (sobre.html) Downloads (downloads.html)
GitHub (http://github.com/vitorfs/jquery-na-pratica)
Fundamentos JavaScript
Seletores jQuery
Manipulando CSS
Manipulando Conteúdo
Eventos
Animação
Funções jQuery
Ajax
Formulários
Fundamentos JavaScript
Experiência em programação com linguagens como C, Visual Basic ou Java é útil, mas não obrigatório.
Variáveis
Dê nome aos dados utilizando a palavra reservada var . Normalmente o nome da variável é escrita em
snake_case . Linha termina em ponto e vírgula.
var titulo = "jQuery na Prática";
JavaScript é uma linguagem de tipagem fraca, dinâmica e implícita.
var numero = 100;
//int
var titulo = "jQuery na Prática"; //string
var quantidade = 5.7;
//float
var erro = true;
//boolean
Funções
Crie funções utilizando a palavra reservada function . Normalmente o nome da função é escrita em camelCase .

function soma (num1, num2) {
var resultado;
resultado = num1 + num2;
return resultado;
}
Funções Globais
A função alert exibe um pop-up no browser do usuário com a mensagem passada via parâmetro.
alert("Olá, mundo!");
A função confirm exibe uma caixa de confirmação ao usuário. Retorna true ou false .
var resposta = confirm("Confirmar exclusão do registro?");
A função prompt retorna o valor informado pelo usuário em forma de string
var idade = prompt("Informe sua idade:");
Funções de String
charAt Retorna o char no índice especificado.
var titulo = "jQuery na Prática";
titulo.charAt(2); // "u"
concat Combina o texto de duas strings e retorna uma nova string.
contains Determina se uma string está contida em outra.
endsWith Determina se uma string termina com os caracteres de outra string
indexOf Retorna o índice da primeira ocorrência da string passada por parâmetro, ou -1 se não encontrar.
lastIndexOf Retorna o índice da última ocorrência da string passada por parâmetro, ou -1 se não encontrar.
replace Utilizado para combinar uma excodessão regular com uma string e substituir a substring que atender ao
regex por uma nova substring.
"jQuery na Prática".replace("a", "4"); // "jQuery n4 Prátic4"
slice Extrai parte de uma string e retorna uma nova string.
split Dividir um objeto String em uma array de strings.
"jQuery na Pratica".split(" "); // ["jQuery", "na", "Prática"]
startsWith Determina se a string começa com os caracteres de outra string.
substr Retorna os caracteres em uma string que inicia em um determinado índice com um tamanho especificado
de caracteres.
substring Retorna os caracteres em uma string entre dois índices de uma string.
toLowerCase Retorna a string que chamou o método convertido para caixa baixa.

"jQuery na Pratica".toLowerCase(); // "jquery na prática"
toUpperCase Retorna a string que chamou o método convertido para caixa alta.
"jQuery na Prática".toUpperCase(); // "JQUERY NA PRÁTICA"
Arrays
Arrays no JavaScript são objetos do tipo lista que não possuem tamanho nem tipo de dado pré-definido.
var frutas = ["maçã", "uva", "abacaxi"]; // Inicializa um array na variável frutas
frutas[2]; // Retorna a posição 2, "abacaxi"
frutas.length; // Retorna o tamanho da lista, 3
frutas.reverse(); // Retorna a lista em ordem inversa, ["abacaxi", "uva", "maçã"]
Seletores jQuery
O jQuery oferece um poderoso conjunto de ferramentas para selecionar elementos em um documento, utilizando
as especificações do CSS 1-3 e adicionando recursos extras.
Seletores básicos
$("*") seleciona todos os elementos do documento.
$(".class") seleciona todos os elementos de uma determinada classe.
$("p.autor"); // todos elementos com classe autor
$(".destacar"); // todos elementos que possuam classe destacar
$("elemento") seleciona todos os elementos de uma página dado uma tag.
$("#id") seleciona um único elemento com o id informado.
$("seletor1, seletor2, seletorN") seleciona todos os elementos conforme os seletores especificados.
Seletores de atributos
[name*="value"] Seleciona todos os elementos com um valor dado uma substring.
[name$="value"] Seleciona todos os elementos que terminam com atributo
[name="value"] Seleciona todos os elementos que o atributo for igual ao valor informado.
[name!="value"] Seleciona todos os elementos que o atributo for diferente do valor informado.
[name^="value"] Seleciona todos os elementos cujo atributo inicia com a substring informada.
[name] Seleciona todos os elementos que possuam um determinado atributo
[name="value"][name2="value2"] Selecione múltiplos atributos
Filtros de seleção

Os filtros de seleção são baseados no index da array de retorno do seletor.
:first Retorna o primeiro elemento da seleção.
:last Retorna o último elemento da seleção.
:eq() Retorna o elemento com um índice específico.
:even Retorna todos os elementos com índice par.
:odd Retorna todos os elementos com índice ímpar.
Manipulando CSS
.css() Utilizado para recuperar ou definir um determinado atributo css ao elemento selecionado.
$("p").css("font-size"); // retorna o valor do font-size do elemento
$("p").css("font-size", "12px"); // define o font-size do elemento para 12px
$(p").css(font-size", 24px")
.css(font-weight", bold")
.css(line-height", 32px");
// ou um map
$(p").css({font-size": 24px",
font-weight": bold",
line-height": 32px"});
.addClass() Adiciona uma determina classe ao elemento.
.removeClass() Remove uma determinada classe do elemento. Se o parâmetro for omitido, remove todas as
classes do elemento.
.toggleClass() Alterna entre incluir e remover uma determinada classe. Se o elemento já possuir uma classe, o
jQuery remove. Se não possuir, inclui.
.hasClass() Retorna true caso o elemento possua a classe ou false caso contrário.
Visibilidade
.show() Altera o display do elemento para normal .
.hide() Altera o display do elemento para none .
.toggle() Alterna entre normal e none .
Manipulando Conteúdo
.html() Retorna o conteúdo html da seleção.
.text() Retorna o conteúdo texto da seleção.
.append() Insere conteúdo dentro do final da seleção.

.prepend() Insere conteúdo dentro do início da seleção.
.before() Insere conteúdo antes da seleção.
.after() Insere conteúdo após a seleção.
Eventos
Estes métodos são utilizados para adicionar comportamento que reagem à interação do usuário com o browser.
Eventos de Mouse
.click() Dispara no evento de click do mouse
$("p").click(function () {
});
$("p").hide();
.dblclick() Dispara com click duplo
.hover() Dispara quando mouse entra e/ou sai do elemento
$("p").hover(
function () { $(this).addClass("destacar");},
function () { $(this).removeClass("destacar");}
);
.mousedown() Dispara quando o botão do mouse é pressionado.
.mouseenter() Dispara quando o mouse entra no elemento.
.mouseleave() Dispara quando o mouse sai do elemento.
.mousemove() Dispara quando o mouse se move.
.mouseup() Dispara quando ao término do click do mouse.
Eventos de Teclado
.keydown() Dispara ao apertar a tecla.
.keypress() Dispara ao pressionar a tecla.
.keyup() Dispara ao soltar a tecla.
Eventos de Formulário
.blur() Dispara ao input perder o foco.
.change() Dispara quando um valor é alterado.
.focus() Dispara quando um input recebe foco.
.select() Dispara ao selecionar um texto, option, radio.

.submit() Dispara submeter o formulário.
Objeto Event
$("body").keypress(function (event) {
});
event.which código númerico da tecla pressionada.
event.preventDefault() evita a ação padrão do browser.
event.stopPropagation() evita propagação do evento no DOM.
Animação
Slide
.slideUp([duração][,callback])
duração
Tempo da animação em milisegundos
Default 400 milisegundos
Aceita parâmetros "slow" (600ms) e "fast" (200ms)
callback
Função que será executada após o término da animação
$("p").slideUp("slow");
$("p").slideUp(1000, function () {
});
alert("Concluiu a animação!");
$("p").slideDown("fast");
$("p").slideToggle();
Fade
.slideIn([duração][,callback])
duração
Tempo da animação em milisegundos
Default 400 milisegundos
Aceita parâmetros "slow" (600ms) e "fast" (200ms)
callback
Função que será executada após o término da animação

$("p").slideIn("slow");
$("p").slideIn(1000, function () {
});
alert("Concluiu a animação!");
$("p").slideOut("fast");
$("p").fadeToggle();
Funções jQuery
É possível adicionar funções ao prototype do jQuery, o que permite chamá-las utilizando a seguinte notação:
$("this").destacar() .
$.fn.vazio = function () {
var value = $(this).val();
if (value == "") {
return true;
}
else {
return false;
}
};
$("input").vazio();
Ajax
A biblioteca jQuery conta com uma solução completa de AJAX. As funções e métodos contidos nela nos permite
carregar dados do servidor sem recarregar a página no browser.
$.ajax
$.ajax([opcoes])
O parâmetro opcoes é um map que aceita os seguintes valores:
async default: true
Tipo: Boolean
Define se a requisição será síncrona ou assíncrona.
beforeSend
Tipo: Function

Função que será executada antes de realizar a requisição.
cache (default: true, false para dataType 'script' e 'jsonp')
Tipo: Boolean
Determina se a requisição será armazenada no cache do browser do usuário ou não.
complete
Tipo: Function
Função que será executada após a conclusão da requisição.
contentType (default: 'application/x-www-form-urlencoded; charset=UTF-8')
Tipo: String
data
Tipo: Object, String
Representa os dados que serão enviados para o servidor
dataType (default: Intelligent Guess (xml, json, script, or html))
Tipo: String
error
Tipo: Function
Função que será executada em caso de erro.
success
Tipo: Function
Função que será executada em caso de sucesso.
timeout
Tipo: Number
Define o tempo em milisegundos em que a requisição irá aguardar antes de dar timeout.
type (default: 'GET')
Tipo: String
Define se a requisição será do tipo GET ou POST .

url (default: Página atual)
Tipo: String
Define a página para onde a requisição será feita.
Exemplo de uma requisição assíncrona utilizando a função $.ajax :
$.ajax({
url: 'usuarios.php',
data: { id: "10", acao: "editar" },
cache: false,
type: "POST",
beforeSend: function () {
// execução antes de realizar requisição
},
success: function (data) {
// execução em caso de sucesso
},
error: function () {
// execução em caso de erro
}
complete: function () {
// execução ao terminar requisição
}
});
$.load
Permite especificar um elemento para receber a resposta e uma função de callback.
$('#resultado').load('usuarios.php');
// A resposta da requisição à página usuarios.php é inserida dentro do elemento #resultado
$('#resultado').load('usuarios.php', function () {
});
// Executa após terminar a requisição
$('#resultado').load('usuarios.php', { id: 10 } function () {
// Executa após terminar a requisição
});
$.post
$.post(url [,data] [,success(data, textStatus, jqXHR)] [,dataType])
O método post do jQuery corresponde à seguinte implementação:

$.ajax({
type: "POST",
url: url,
data: data,
success: success,
dataType: dataType
});
$.post("login.php", { usuario: "vitorfs", senha: "123456" });
$.post("login.php", $("form").serialize(), function () {
// Executa callback
});
$.get
$.get(url [,data] [,success(data, textStatus, jqXHR)] [,dataType])
O método get do jQuery corresponde à seguinte implementação:
$.ajax({
url: url,
data: data,
success: success,
dataType: dataType
});
$.get("cidades.php", { uf: "mg" }, function (data) {
});
$("select").html(data);
Formulários
Serializando um Formulário
A função .serialize() do jQuery nos permite formatar os dados de um formulário. Considere o seguinte
formulário:
Nome:
Email:
Cpf:
Enviar
Ao executarmos o comando $("#cadastro").serialize() teríamos o seguinte retorno:
nome=Vitor&email=vitorfs@gmail.com&cpf=123456789012

Serializando em Array
Considerando o mesmo formulário, ao executar a chamada $("#cadastro").serializeArray() teríamos o seguinte
retorno:
[
{
name = “nome”,
value = “vitor”
},
{
name = “email”,
value = “vitorfs@gmail.com”
},
{
name = “cpf”,
value = “123456789012”
}
]