logo javascript

Aprenda javascript com facilidade do zero

Prof. Ivan Lourenço Gomes

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

1
2
3
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.

Índice de Aulas