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çã"]

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 <p> 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.

.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>

$("p").css("font-size", "12px"); // define o font-size do elemento <p> 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.

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.

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();

É 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();

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:

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);
});

Serializando um Formulário

A função .serialize() do jQuery nos permite formatar os dados de um formulário. Considere o seguinte formulário:

<form method="post" action="cadastro.php" id="cadastro">
  Nome: <input type="text" name="nome" id="nome" value="Vitor"><br>
  Email: <input type="text" name="email" id="email" value="vitorfs@gmail.com"><br>
  Cpf: <input type="text" name="cpf" id="cpf" value="123456789012"><br>
  <button type="submit">Enviar</button>
</form>

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”
  }
]