[PARTE 1] Mini-Curso de JQuery

Como o nosso amigo ITry! pediu,eu fiz um utroail de JQuery. Espero que todos gostem desse tutorial,embreve irei ensinar mais...

Por onde começar com a jQuery?

Este guia é uma introdução à biblioteca jQuery. Ter um conhecimento sobre javascript e
modelo de objeto de documento (DOM) são requisitos necessários. Ele começa
do básico e tenta explicar os detalhes quando necessário. Ele abordará um
exemplo simples alô mundo, seletores e eventos básicos, AJAX, efeitos e o
desenvolvimento de plugins.
Este guia não contém exemplos "prontos para clicar". A intenção de prover apenas os
"códigos para copiar" é um convite para que você mesmo faça os testes. Copie
um exemplo, veja o que ele faz, e modifique-o.Página 2 – Apostila jQuery
Configuração
Para começar, nós precisamos de uma cópia da biblioteca jQuery. Ainda que a versão mais
recente possa ser encontrada neste link: http://docs.jquery.com/Downloading_jQuery, este
guia fornece um pacote básico que você poderá baixar.
Kit para começar com o jQuery: Faça o download deste arquivo e extraia o seu conteúdo. Abra o
starterkit.html e o custom.js com o seu editor preferido e o starterkit.html com o navegador.
*Caso já tenha este arquivo em seu computador não há necessidade de baixá-lo.
Agora nós temos tudo o que precisamos para iniciar o notório exemplo do "Alô mundo".
Links interessantes para este capítulo:
• Kit para começar
• Downloads do jQuery
Olá jQuery
Como quase tudo o que fazemos quando estamos utilizando o jQuery lê ou manipula um modelo
de objeto de documento (DOM), precisamos nos certificar que começamos adicionado eventos
etc tão logo o DOM esteja pronto.
Para fazer isso, nós registramos o evento ready (pronto) para o documento.
$(document).ready(function() {
// faça alguma coisa quando o DOM
estiver pronto
});
Colocar um alert nesta função não faz muito sentido, pois o alert não requer que o DOM esteja
carregado. Então vamos tentar algo mais sofisticado: Mostrar um alert quando clicarmos o link.
$(document).ready(function()
{
$("a").click(function()
{
alert("Olá
mundo!");
});
});
Dessa forma o alert será exibido assim que você clicar no link.
Vamos dar uma olhada no que estamos fazendo: $("a") é um seletor do jQuery, neste caso, ele
seleciona todos os elementos a. O $ por si só é um alias para a "classe" jQuery, por outro lado o
$() constrói um novo objeto jQuery. A função click() que chamamos depois é um método do
objeto jQuery.
Ele liga o evento clique a todos os elementos selecionados (neste caso, um único elemento a) e
executa a função fornecida quando o evento ocorre. Isto é similar ao seguinte código:
<a href="#" onclick="alert('Olá mundo')">Link</a>Página 3 – Apostila jQuery
A diferença é bem óbvia: Nós não precisamos escrever onclick para todo elemento. Nós
temos uma separação clara de estrutura (HTML) e comportamento (JS), assim como
separamos estrutura e formatação utilizando CSS.
Com isso em mente, exploramos seletores e eventos um pouco mais a fundo.
Links interessantes para este capítulo:
• Base do jQuery
• Expressões do jQuery
• Eventos Básicos do jQuery
Me encontre: Usando seletores e eventos
O jQuery provê duas maneiras de selecionar elementos. A primeira utiliza uma combinação de
seletores CSS e XPath passados como uma string para o construtor do jQuery (ex. $("div > ul
a")). A segunda utiliza vários métodos do objeto jQuery. Ambas podem ser combinadas.
Para testar alguns desses seletores, vamos selecionar e modificar a primeira lista ordenada no
nosso kit para começar.
Primeiramente queremos selecionar a própria lista. A lista tem um ID "listaOrdenada". No
javascript clássico, você pode selecioná-la usando document.getElementById("listaOrdenada").
Com o jQuery, nós fazemos isso assim:
$(document).ready(function() {
$
("#listaOrdenada").addClass("vermelho");
});
O kit para começar fornece uma folha de estilos com a classe "vermelho" que simplesmente
adiciona um fundo vermelho. No entanto, quando você recarrega a página no seu navegador,
você verá que a primeira lista tem o fundo vermelho. A segunda lista permanece inalterada.
Agora vamos adicionar mais classes para os elementos filhos desta lista.
$(document).ready(function() {
$("#listaOrdenada >
li").addClass("azul");
});
Isto seleciona todos os lis filhos do elemento com id listaOrdenada e adiciona a classe "azul".
Agora alguma coisa mais sofisticada: Nós queremos adicionar e remover a classe quando o
usuário passar o mouse sobre o elemento li, mas somente no último elemento da lista.
$(document).ready(function() {
$("#listaOrdenada
li:last").hover(function() {
$(this).addClass("verde");
}, function() {
$
(this).removeClass("verde");
});
});Página 4 – Apostila jQuery
Existem diversos outros seletores similires à sintaxe CSS e XPath. Mais exemplos e a lista de
todas as expressões disponíveis podem ser encontrados neste link:
http://docs.jquery.com/DOM/Traversing/Selectors.
Para todo evento onxxx disponível, como onclick, onchange, onsubmit, existem um equivalente
no jQuery. Alguns outros eventos, como ready e hover, são métodos convenientes para algumas
tarefas.
Você pode encontrar uma lista completa com todos os eventos suportados no
http://www.visualjquery.com na seção de Events.
Com estes seletores e eventos você já pode fazer muita coisa, mas tem muito mais.
$(document).ready(function() {
$
("#listaOrdenada").find("li").each(functi
on(i) {
$(this).html( $(this).html() + "
BAM! " + i );
});
});
O find() permite que você faça uma pesquisa mais a fundo nos descendentes dos elementos já
selecionados, apesar de $("#listaOrdenada).find("li") ser praticamente o mesmo que $
("#listaOrdenada li"). O each() faz a iteração sobre cada elemento e permite um processamento
mais profundo. A maioria dos métodos, como o addClass(), utiliza o each() internamente. Neste
exemplo, o html() é utilizado para recuperar o texto de cada elemento li, adicionar algum texto a
ele e definí-lo como o texto do elemento.
Uma outra tarefa que você frequentemente terá que lidar é chamar métodos em elementos DOM
que não são suportados pelo jQuery. Pense em um formulário que você gostaria de resetar
depois que enviou com sucesso via AJAX.
$(document).ready(function() {
// use isto para resetar um único
formulário
$("#reset").click(function() {
$("#form")[0].reset();
});
});
Este código seleciona o elemento com o ID "form" e chama o reset() no primeiro elemento
selecionado. Caso exista mais de um form, você pode fazer dessa maneira:
$(document).ready(function() {
// use isto para resetar todos os formulários
de uma só vez
$("#reset").click(function() {
$("form").each(function() {
this.reset();
});
});
});
Isto deve selecionar todos os formulários no seu documento, fazer a iteração sobre eles e
chamar o reset() para cada um.Página 5 – Apostila jQuery
Outro problema que você pode encontrar é não selecionar alguns elementos. O jQuery provê o
filter() e o not() para isto. Enquanto o filter() reduz a seleção para os elementos que atendem à
expressão de filtro, o not() faz exatamente o contrário, removendo todos os elementos que
atendem a expressão. Imagine uma lista desordenada onde você quer selecionar todos os
elementos li que não possuam um filho ul.
$(document).ready(function() {
$("li").not("[ul]").css("border", "1px
solid black");
});
Isto seleciona todos os elementos li e remove todos os elementos da seleção que possuam um
elemento ul como filho. Sendo assim todos os elementos li ficarão com uma borda, com exceção
daqueles que possuam um filho ul. A sintaxe [expressão] é vinda do XPath e pode ser utilizada
para filtrar elementos e atributos filhos. Talvez você queira selecionar todas as âncoras que
possuam o attributo name:
$(document).ready(function() {
$
("a[@name]").background("#eee");
});
Isto adiciona uma cor de fundo para todos os elementos âncora com o atributo name.
Mais comum que selecionar as âncoras pelo nome, você pode precisar selecionar as âncoras
pelo atributo "href". Isto pode ser um problema uma vez que os navegadores se comportam
inconsistentemente quando retornam o que eles pensam que o valor do "href" é. Para selecionar
apenas uma parte do value, podemos utilizar o seletor contém "*=" ao invés do igual ("="):
$(document).ready(function() {
$("a[@href*=/content/gallery]").click(function() {
// faça alguma coisa com todos os links que apontam para algum lugar
em /content/gallery
});
});
Até agora, usamos todos os seletores para selecionar os filhos ou filtrar a seleção atual. Existem
situações onde você irá precisar selecionar os anteriores ou próximos elementos, conhecidos
como siblings (filhos do mesmo pai). Pense em uma página de um FAQ, onde todas as respostas
estão escondidas em um primeiro momento e são exibidas quando a questão é clicada. O código
do jQuery para isso:
$(document).ready(function() {
$
('#faq').find('dd').hide().end().find('dt').click(function
() {
var resposta = $(this).next();
if (resposta.is(':visible')) {
resposta.slideUp();
} else {
resposta.slideDown();
}
});
});
Aqui estamos usando um pouco de encadeamento para reduzir o tamanho do código e ganhar
performance, uma vez que '#faq' é selecionada apenas uma única vez. Usando o end(), oPágina 6 – Apostila jQuery
primeiro find() é desfeito, assim podemos começar a procurar com o próximo find() no nosso
elemento #faq, ao invés de procurar no filho dd.
Com o acionamento do evento click, a função passada ao método click(), utilizamos $(this).next()
para encontrar o próximo sibling a partir do dt atual. Isto nos permite selecionar rapidamente a
resposta seguinte à questão clicada.
Além dos siblings, você também pode selecionar os elementos pais (também conhecidos como
ancestrais para os mais familiarizados com o XPath). Talvez você pode querer realçar o
parágrafo que é o pai do link que o usuário passar o mouse. Tente isso:
$(document).ready(function() {
$("a").hover(function() {
$
(this).parents("p").addClass("realcar");
}, function() {
$
(this).parents("p").removeClass("realca
r");
});
});
Para todos os elementos âncoras que o usuário passar o mouse, o parágrafo pai é procurado e a
classe "realcar" é adicionada e removida.
Vamos voltar um passo atrás de continuarmos: o jQuery faz com que o código fique menor e
tornando-o mais fácil de ler e dar manutenção. O código seguinte é um atalho para a notação $
(document).ready(callback):
$(function() {
// código a ser executado quando DOM
está pronto
});
Aplicado ao exemplo do Alô Mundo!, ficaria
assim:
$(function() {
$("a").click(function() {
alert("Alô Mundo!");
});
});
Agora com o básico em mãos, queremos explorar outros aspectos, começando com o AJAX.

Aguardem a segunda parte...

Espero que da proxima ponha os creditosw :)

Olá,

Lançaram o jQuery UI, com novas funções, como arrastar um elemento com mouse.
E toda página contento jQuery, deve conter as tags:

Código:

<script src="http://code.jquery.com/jquery-latest.js"></script>

Eu estudo jQuery desde o mês passado :D

Cretido 100% a mim! Eu que criei essse topico do começo ao fim!

Ótimo tópico parabéns Lord! Eu estou aprendendo sobre jQuery, e isso pode me ajudar. Obrigado.

De nada Potter,estou aqui neste forum para compartilhar meus conhecimentos.

Boa tarde estimado usuário,

Ótima experiência demonstrada no tópico, eu estava precisando saber jQuery, mas já vi que pelo tutorial, a base é meio dificil.


Melhores Cumprimentos,
Equipe Power Pixel.

Que nada,basta você ter força de vontade e cair dentro !!!