Um pouco mais de Jquery: Filter()

Olá pessoal...

Estou de volta para falar um pouco mais de jQuery.
O assunto hoje é o método Filter() deste excelente framework para javascript : )

Segundo a definição este método retorna um subconjunto dos elementos que casem com o seletor ou com o resultado de uma função em teste.

Vamos a um exemplo simples passando como seletor o elemento 'div' :



<html>

<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>

<title>Testando o método filter() jQuery</title>
<style>

div {
   width:60px;
   height:60px;
   margin:5px;
   float:left;
   border:2px white solid;
   background:#c8ebcc;
}

</style>
</head>

<body>

<div></div>

<div class="middle"></div>

<div class="middle"></div>

<div class="middle"></div>

<div class="middle"></div>

<div></div>

<script>
   $("div").filter(".middle").css("border-color", "red");
</script>

</body>
</html>

O código acima foi aproveitado do site oficial da jQuery (http://api.jquery.com/filter/), fiz apenas uma pequena mudança para ajudar mais na compreensão do exemplo.

A execução do código acima mostra 6 divs com a cor de fundo esverdeada, sendo que a 2º a 3º a 4º e a 5º divs estão com a borda vermelha.

Como isso é possível?

Graças ao método Filter().

$("div").filter(".middle").css("border-color", "red");

Este trecho de código seleciona todos os elementos div:

 $("div")
 
que possuam a classe middle:

filter(".middle")
 
e então, adicionam-lhes uma borda de cor vermelha:

.css("border-color", "red")
 

Portanto, o método filter() 'filtra' os elementos que coincidam com o seletor que lhe é passado como parâmetro.

Lembrando que o retorno é um conjunto de elementos jQuery e  por isso a possibilidade de se aplicar logo em seguida o método css() para manipular o estilo, no caso, a adição de uma borda vermelha.
 
Muito simples e fácil!
 
Por hoje é isso!

Até a próxima.

jQuery: uma maneira diferente de programar em javascript.

Quem nunca achou um tanto enfadonho programar com javascript?
Ter que escrever o velho e conhecido método 'document.getElementById('id')' para pegar um elemento da página.

Pois bem, jQuery é uma biblioteca ( framework ) javascript que vem para facilitar e deixar a programação mais leve e porque não dizer com um maior grau de satisfação para o próprio programador.

O slogan desse framework resume bem essa leveza: "Write less, do more", ou seja, "Escreva menos, faça mais".  http://jquery.com/

Vamos a um simples exemplo:


Se precisássemos pegar um elemento da página referenciando-o pelo seu ID:

Com javascript, faríamos:

document.getElementById('elemento');

Usando jQuery:

$('#elemento');

Bem mais simples, não é mesmo?

E se agora, em uma determinada página, precisássemos dar um alert para todos os elementos que possuíssem a classe 'color' atribuida aos mesmos:

Marcação HTML para o exemplo:

<html>
<body>

  <h1>Titulo1</h1>
  <p class="color" >Entendendo jQuery</p>
  <div class="color" ></div>

</body>
</html>



Com javascript, faríamos:

    var todos_elementos = document.getElementsByTagName('*');

    for (var i=0;i<todos_elementos.length; i++){
       var el = todos_elementos[i];
       if (el.className == 'color'){
          alert('O elemento ' +  el.tagName + ' possui a classe ' + el.className);         
        }
   }

Com jQuery, teríamos:

$('.color').each(function(){
    alert('O elemento ' + $(this).attr('tagName') + ' possui a classe ' + $(this).attr('class'));
}

Neste caso, o $('.color') seleciona todos os elementos que possuem a classe 'color', ou seja, é retornado um array com todos esses elementos.

Em seguida é aplicada a função each que itera sobre os elementos desse array.

E para finalizar, através da palavra reservada this ,torna-se possível obter o valor dos atributos 'tagName' e 'class' do dado elemento em questão.

Os resultados seriam 02 alerts com as seguintes saídas:

O elemento p possui a classe color.
O elemento div possui a classe color.

Bom, esse foi um exemplo bem simples da utilização do jQuery, no próximo post darei mais exemplos.