jQuery - Sintaxe
Praticamente tudo que fizermos em jQuery começará com um cifrão '$'. A sintaxe básica dos comandos jQuery é:
$("elemento").ação();
Selecionando elementos
Para identificar os elementos usamos seletores, como em CSS. Portanto elementos da classe exemplo, serão identificados com ponto: ".exemplo". Enquanto um elemento com o id exemplo será identificado pela hashtag: ("#exemplo"). As tags podem ser selecionadas diretamente: ("h1"), ("p"), etc.
As ações são métodos jQuery, que vamos começar a aprender a partir de agora. Vamos começar com um exemplo simples, esconder todos os elementos que tenham a classe "exemplo" ao clicar no botão que tem id "esconder".
$( "#esconder" ).click(function() {
$(".exemplo").css("display", "none");
});
Neste exemplo já podemos ver como o código pode ser simplificado com o uso do jQuery. Mas é possível simplificá-lo ainda mais, já que em jQuery existe um método chamado hide que aplica automaticamente "display: none" aos elementos selecionados.
$( "#esconder" ).click(function() {
$(".exemplo").hide();
});
Outras formas de selecionar elementos
Além de selecionar elementos pelos nomes das tags, classes e id's, temos outras maneiras interessantes de tornar a seleção mais específica, conforme a tabela abaixo.
Sintaxe | Descrição |
---|---|
$("*") | Todos os elementos |
$("div.exemplo") | Todos os elementos div que tenham a classe exemplo |
$("p:first") | O primeiro elemento p |
$("ul li:first-child") | O primeiro elemento li de todos os elementos ul |
$("[href]") | Todos os elementos que tenham o atributo href |
$("a[target='_blank']") | Todos os elementos que tenham o atributo target="_blank" |
$("a[target!='_blank']") | Todos os elementos que NÃO tenham o atributo target="_blank" |
$(":button") | Todos os elementos button ou inputs que tenham type="button" |
$("tr:even") | Todos os elementos tr pares (0, 2, 4...) |
$("tr:odd") | Todos os elementos tr ímpares (1, 3, 5...) |
Teremos oportunidades de utilizar muitos destes seletores nas próximas aulas.
Nota final: Fazer confusão é normal
No início, é normal fazer um pouco de confusão já que os comandos jQuery possuem nomes e formas de executar ligeiramente diferentes do que em Vanilla Javascript. No exemplo acima usamos elemento.click(função) enquanto em Javascript usaríamos elemento.onclick = função.
No exemplo usamos também elemento.css("propriedade", "valor") enquanto em Javascript usaríamos elemento.style.propriedade = "valor".
Não se preocupe com isto agora, leva um tempo até que tudo se torne natural. Enquanto isso, lembre-se que o Google está sempre disponível para nos ajudar. Se tiver dúvida sobre o evento onclick, basta procurar: jquery onclick event, e a resposta estará no primeiro resultado da pesquisa.