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.
