Step by step

Camaradas,

Seguindo uma ordem mais amigável sobre o assunto, neste artigo vou falar sobre o seletores(Selectors) do jQuery, o responsável pelo funcionamento das requisições. Como disse no artigo passado fazer uma requisição objetiva resultará em um melhor resultado, pra cada caso você poderá escrever diversos algoritmos para obter o mesmo resultado.

Antes de começarmos, complementando as informações do artigo anterior, preciso lembrar-lhes que HTML é escrito com uma hierarquia, ou seja, os objetos podem ter Pai e podem ter Filhos. Basicamente a única TAG que não tem Pai é a < HTML >, pois ela inicia o documento HTML. Mas então, seguindo esse raciocínio podemos entender que as possibilidades de requisições objetivas são grandes, não dependendo apenas das propriedades que a TAG possuí.

Um exemplo comum, os valiosos formulários:

 HTML | 
 copy code |
?
 
01
02
<form action="#" method="POST" id="CadNews" onSubmit="return CheckForm()">
03
 <label for="UserName">Seu nome</label><input type="text" id="UserName"><br>
04
 <label for="UserEmail">Seu e-mail</label><input type="text" id="UserEmail"><br>
05
 <input type="submit" value="Cadastrar">
06
</form>
07
<script language="JavaScript">
08
<!--
09
  CheckForm = function(){
10
    UserName = $("form#CadNews input#UserName").val();
11
    UserEmail = $("form#CadNews input#UserEmail").val();
12
    if((UserName != '') && (UserEmail != '')){
13
      return true;
14
    }else{
15
      alert("Dados incompletos");
16
      return false;
17
    }
18
  }
19
//-->
20
</script>

Aqui fazemos a checagem dos campos “Seu nome” e “Seu -email” para que se eles contiverem um valor diferente de vazio o form poderá ser submetido, caso contrário o form não efetuará processo algum além do usuário visualizar a mensagem: “Dados incompletos”.

Veja que utilizamos alem do ID da Tag, fazemos uso também da estrutura, ou seja, além de procurarmos pelo ID, indicado pelo #, fazemos uso também da idenficação sequêncial, primeiro achamos o Form com o ID = CadNews e depois procuramos Input ID = UserName.

Agora entendendo um pouco sobre os 3 Seletores (Selectors):

Seletor de TagName [Ex: jQuery("DIV")]

O Seletor de TagName consiste em definir o tipo de requisição como busca por Elementos que são da Tag especificada. Exemplo:

 HTML | 
 copy code |
?
 
1
2
<div>Texto</div>
3
<script language="JavaScript">
4
<!--
5
  jQuery("div").html("Texto alterado.");
6
//-->
7
</script>

Então basicamente ele atua no TagName do elemento HTML.

Seletor de ID [Ex: jQuery("#Status")]

O Seletor de ID consiste em definir o tipo de requisição como busca por Elementos que contenham o ID igual ao especificado. Exemplo:

 HTML | 
 copy code |
?
 
1
2
<div id="Status">Não modificado.</div>
3
<script language="JavaScript">
4
<!--
5
  jQuery("#Status").html("Modificado.");
6
//-->
7
</script>

Então basicamente ele atua nos Elementos que informam o ID, os que não informam não têm possibilidade de entrar no resultado da requisição por esse Seletor.

Seletor de Classe [Ex: jQuery(".InputText")]

O Seletor de Classe consiste em definir o tipo de requisição como busca por Elementos que são da classe informada. Exemplo:

 HTML | 
 copy code |
?
 
1
2
<input type="text" class="InputText" name="Date" value="Sem valor definido">
3
<script language="JavaScript">
4
<!--
5
  jQuery(".InputText").val("18-05-2008");
6
//-->
7
</script>

Basicamente ele atua nos Elementos que pertencem a classe da requisição. Lembrando que um Elemento pode pertencer a várias classes.

Agora uma pequena notação:

Não é de hoje que, pra quem já desenvolve soluções para internet sabem, em CSS podemos selecionar todos os elementos atravez do * (asterisco), pois bem, no jQuery não é diferente. Como você devem ter notado ele atua atravez de requisições que por sua vez usa os seletores para os filtros, e que esse 3 seletores são identicos aos utilizados no CSS. O * (asterisco) não foge a regra do CSS, o uso é idéntico. Exemplo:

 HTML | 
 copy code |
?
 
1
2
<div><span></span><div></div><div></div><span></span></div>
3
<script language="JavaScript">
4
<!--
5
  jQuery("div *").html("Filho");
6
//-->
7
</script>

O resultado será o preenchimento com a palavra “Filho” de todos os elementos pertencentes ao DIV.

Espero que tenham entendido essa parte, pois ela é de suma importância no bom entendimento e utilização do jQuery.

Próximo artigo:

Criando códigos facilitadores

Artigos jQuery relacionados:

Como iniciar a utilização do jQuery

Tudo que você precisa é o link

Os Seletores (Selectors)

Criando códigos facilitadores

Abraços a todos.

---

articles — No comments