Entendendo o seletor por atributos múltiplos do jQuery

Bom dia a todos,

No meu ponto de vista o seletor mais confuso para se entender da biblioteca jQuery são os seletores por atributos múltiplos, logo porque na documentação de referência não tem muitos exemplos para “ilustrar” o modo de uso e também que não existem muitas pessoas que usam ele. É um seletor muito ágil, porque evita de você ter que implementar lógica com ifs e switchs no seu código Javascript para fazer alguma coisa, ou seja você dispara um seletor e faz alguma coisa, sem ter intermédios.

Vamos considerar que no nosso exemplos tenhamos um formulário com diversos inputs, selects, etc. e que este formulário tivesse o seu ID igual a ‘meu_form’. A jogada inicial de qualquer seletor transverso é assim:

[javascript]
var elementos = $(‘#meu_form’);
[/javascript]

Isso me trará apenas o meu formulário, no caso um Object (DOMObject) mascarado pela jQuery. Vamos começar a tunar esse seletor com mais algumas condições nele:

[javascript]
var elementos = $(‘#meu_form:input’);
[/javascript]

Agora tenho um array de Object com referência transparente à própria jQuery, ou seja, uma idéia de cross-access:

[javascript]
var elementos = $(‘#meu_form:input’).attr(‘style’, ‘border:1px solid red’);
[/javascript]

Consigo aplicar as modificações sem necessidade de invocar a função each em que eu faria a mesma coisa, só que dentro de um laço de repetição. Como no exemplo abaixo:

[javascript]
var elementos = $(‘#meu_form:input’).each(function(index, el) {
j(el).attr(‘style’, ‘border:1px solid red’);
});
[/javascript]

Vamos agora para o título deste artigo, os seletores múltiplos, caso eu queira deixar de fora um determinado input ou alguns inputs por exemplo, isso tudo no mesmo seletor, vamos montar a situação abaixo:

  • nome;
  • id_cidade;
  • idade;
  • telefone;
  • celular;
  • telefone_ramal;
  • telefone_sala;
  • telefone_cozinha;

Quero aplicar uma mascara nos campos de telefone com um seletor múltiplo:

[javascript]
var elementos = $(‘#meu_form:input[id=telefone],[id=celular]’).mask(’99/99/9999′);
[/javascript]

O conceito do ‘múltiplo’ nisso tudo está no formato dos filtros aplicados, posso atribuir qualquer coisa na regra o que tenho que fazer é separa-las por vírgula.

[javascript]
var elementos = $(‘#meu_form:input[id=telefone],[name^=telefone_]’).mask(’99/99/9999′);
[/javascript]

No exemplo acima, eu atríbui a mascara diretamente para o campo com ID ‘telefone’ e também para todos os que começassem com a palavra ‘telefone_’.

Referências

jQuery Selectors – http://api.jquery.com/category/selectors/

jQuery Multiple Attribute Selector – http://api.jquery.com/multiple-attribute-selector/

Espero que tenham entendido mais ou menos a idéia dos seletores múltiplos da jQuery, qualquer coisa utilizem a área de comentários abaixo.

Abraços.