Parte 1 – Configurando Ambiente
Parte 2 – Acessando elementos

Vou mostrar e explicar diversas maneiras de acessar os elementos dentro do HTML utilizando a jQuery.
Por enquanto não iremos manipular os elementos, somente veremos como acessá-los.

Acessando os elementos via jQuery:

O início do comando de acesso ao elemento da jQuery é representado pelo $ seguido de um parenteses com o elemento dentro.

Exemplo de acesso a um elemento com jQuery:

$('elemento');

Abaixo um bloco de HTML com algumas tags que iremos acessar com a jQuery em nossos exemplos:

 <div id="general">
    <h1>Aprendendo jQuery - Acessando Elementos</h1>
 </div>

<p class="other">Texto 1</p>
<p class="other">Texto 2</p>

<p></p>

<select>
   <option value="1">Opcao 1</option>
   <option value="2">Opcao 2</option>
   <option value="3">Opcao 3</option>
</select>

 <ul>
 <li>Item 1</li>
 <li>Item 2</li>
 <li>Item 3</li>
 <li>Item 4</li>
 </ul>

 <ul id="checks">
    <li>
      <label>Item 1</label>
      <input type="checkbox" class="checkbox" value="1" />
    </li>
    <li>
      <label>Item 2</label>
      <input type="checkbox" class="checkbox" value="2" />
    </li>
    <li>
      <label>Item 3</label>
      <input type="checkbox" class="checkbox" value="3" />
    </li>
 </ul>

 <span>Span</span>

 <input type="button" id="enviar" name="enviar" value="Enviar" />

Vamos acessar alguns desses elementos acima.

A forma de acesso às tags e elementos pela jQuery, é similar ao modo de acesso por CSS, veja:

Pelo id – Caractere # antes do elemento.

   $('#general'); // Elemento com id general.

Pela class -  Caractere . antes do elemento.

   $('.other'); // Elementos com class other.

Pela tag HTML – Colocar a tag html dentro das aspas.

   $('span'); // Acessando todas as tags span.

Pelo name – Usando [name="nome"].

   $('[name="enviar"]'); // Elemento com o name igual a enviar.

Pelo type – Usando [type="tipo"].

   $('[type="button"]'); // Elemento que o type seja igual button.

Combinar mais de um elemento.

   $('ul#checks'); // Tag ul com id checks.

   $('input[name="enviar"]'); // Tag input aonde o name seja igual a enviar.

Acessar um elemento dentro do outro – Elemento + espaço + outro elemento.

   $('#general h1'); // Tag h1 dentro do elemento com id general.

   $('ul li label'); // Tag label dentro da tag li que esta dentro da tag ul.

Podemos usar alguns seletores para filtrar melhor os elementos a serem acessados:

Acessar um elemento vazio – elemento:empty.

   $('p:empty'); // Tag p dentro da tag li que esta dentro da tag ul.

Acessar um elemento desabilitado- elemento:disabled.

   $('input:disabled'); // Input que esteja desabilitado.

Acessar um elemento ativo (Tanto checkbox quando radio) – elemento:checked.

   $('input:checked'); // Checkbox que esteja ativo.

Acessar um elemento option que esteja selecionado – elemento:selected.

   $('option:selected'); // Option selecionado.

   $('select option:selected'); // Option selecionado dentro do select.

Acessar o primeiro elemento de uma lista – elemento:first.

   $('ul li:first'); // Primeira lista de uma ul.

   $('li:first'); // Primeira lista.

Acessar o último elemento de uma lista – elemento:last.

   $('ul li:last'); // Ultima lista de uma ul.

   $('li:last'); // Ultima lista.

Acessar elementos pares – elemento:even.

   $('ul li:even'); // Elementos pares da lista de uma ul.

   $('li:even'); // Elementos pares da lista.

Acessar elementos impares – elemento:odd.

   $('ul li:odd'); // Elementos impares da lista de uma ul.

   $('li:odd'); // Elementos impares da lista.

Uma dica importante para quem usa outros frameworks para javascript, por exemplo o Prototype (Também inicializa com $) e por isso talvez conflite com a jQuery.

Para arrumar este problema, podemos utilizar o comando noConflict(); e mudar o operador de inicialização da jQuery.

jq = jQuery.noConflict();
jq('elemento');

Acima mudamos o $ pelas letras jq, deixando o $ somente para o prototype e assim evitando qualquer conflito.

No próximo post mostrarei os comandos básicos de manipulação de elementos com jQuery.

• Tweet