jQuery para iniciantes – Sintaxe e seletores

jQuery para iniciantes – Sintaxe e seletores

No capítulo anterior você usou seletores para selecionar os elementos html que queria manipular e então aplicou alguns métodos a esses elementos. Essa maneira de escrever e criar seus comandos jQuery é muito comum e usada em praticamente tudo o que você for criar daqui pra frente.

Sintaxe jQuery

Chamamos esse modo de escrita de sintaxe básica do jQuery. Vamos relembrar, pois é importante entender como ela funciona:

Então podemos dizer que quando usamos o jQuery, sempre selecionamos um dado elemento da página e aplicamos um método a este elemento. Isso significa que boa parte da sua habilidade em programar e desenvolver usando o jQuery depende da sua capacidade em selecionar corretamente os elementos da página. É isso que vamos aprender agora.

Seletores

É possível usar os seletores jQuery para selecionar elementos de várias maneiras diferentes. As três principais são:

- Por tag: Seleciona todos os elementos da mesma tag. Exemplos:
$(‘p’) : Seleciona todos os <p> da página;
$(‘div’) : Seleciona todos os <div>
$(‘a’) : Seleciona todos os <a>

- Por class: Seleciona todos os elementos da mesma classe. Exemplos:
$(‘.linkmenu’) : Seleciona todos os elementos da classe “linkmenu” (Ex. <a class=”linkmenu”>);
$(‘.subtitulo’) : Seleciona todos os elementos da classe “subtitulo”
$(‘.banner’) : Seleciona todos elementos da classe “banner”;

- Por id: Seleciona o primeiro elemento que tenha o id especificado. Exemplos:
$(‘#menu’) : Seleciona o primeiro elemento que tenha o id “menu” (Ex. <div id=”menu”>);
$(‘#titulo’) : Seleciona o primeiro elemento que tenha o id “titulo”
$(‘#rodape’) : Seleciona o primeiro elemento que tenha o id “rodape”;

Combinando seletores

Outra coisa que você pode fazer é combinar esses diferentes tipos de seletores, como você já faz no css.

Sempre que você colocar um seletor na frente de outro separado por um espaço significa que deseja selecionar dentro do primeiro. Por exemplo:
$(‘#menu a’) : Seleciona todos os <a> que estiverem dentro de #menu. Se a página tiver outros <a> fora do #menu, estes não serão selecionados.;
$(‘#menu .sel’) : Seleciona todos os elementos de classe “sel” que estiverem dentro de #menu;
$(‘div #link’) : Seleciona os elementos de id “link” que estiverem dentro de um <div>;

Se você não separar as palavras, selecionará os elementos que contenham a classe ou id especificado:
$(‘div.sel’) : Seleciona apenas as <div> que tiverem a class “sel”;
$(‘div#link’) : Seleciona apenas as <div> que tiverem o id “link”;

Estas são as formas mais básicas dos seletores jQuery. Existem muitas outras opções, operadores e maneiras de selecionar elementos na página, mas por enquanto vamos ficar com essas. Garanto que já é possível fazer coisas incríveis utilizando apenas estes seletores.

No próximo

Seletores são importantes, mas como disse no início, eles representam metade da ‘mágica’do jQuery. No próximo post falarei sobre os métodos jQuery, usados para manipular os elementos que selecionamos.

Você gostou deste post?






  • http://www.toprated.com.br/jquery-para-iniciantes jQuery para iniciantes – Top rated never dies

    [...] No próximo post vamos falar um pouco mais de seletores e sintaxe jQuery. [...]

  • Jefferson Santana

    Meus parabéns, muito bom!

  • Henrique

    Excelente série de artigos. Está me ajudando muito. Aguardando o próximo!

  • http://www.toprated.com.br/jquery-css-melhore-seus-botoes-com-o-efeito-fade jQuery + CSS – Melhore seus botões com o efeito Fade

    [...] Quer saber mais sobre jQuery e começar a escrever o seu próprio código? Leia os posts: – jQuery para iniciantes – jQuery para iniciantes II – Sintaxe e seletores [...]

  • http://www.toprated.com.br/jquery-para-iniciantes-metodos jQuery para iniciantes – Métodos

    [...] [jQuery para iniciantes] , conhecer sua sintaxe e como selecionar elementos dentro da página [jQuery para iniciantes – Sintaxe e seletores], é importante entender como funcionam os seus métodos. É com eles que manipulamos os elementos [...]

  • Amanda Aguiar

    Excelente!!
    Está ajudando muito!