Framework -> Javascript -> jQuery
jQuery é, muito provavelmente, o framework para Javascript mais utilizado no mundo.
Anteriormente eu comentei o que era um framework. Neste vou comentar sobre o jQuery.
O jQuery é uma mão na roda em se tratando de desenvolver qualquer solução para ambiente Web que necessite de interações do lado do cliente.
Uma das maiores vantagens do jQuery é a limpeza/simplicidade do código, pois com muito poucos comandos conseguimos elaborar interações melhor desenovolvidas.
Com o jquery é muito mais fácil trabalhar com eventos como o “click” do que da maneira “tradicional”, pois para se trabalhar com eventos se era necessário implementar diversos comando que acabavam por tornar o código mais pesado e muitas vezes até defícil de se entender e dar manutenção, já com o jQuery, a simples implementação da função “.click” no seu código carregado junto com a página é o suficiente.
O desnvolvimento como jQuery torna o código mais simples e intuitivo.
O Ato de selecionar determinado elemento de uma página é muito mais fácil. O que antes era necessário nettar o id para o elemento e depois utilizar o “document.getElementById(‘id’)”, com o jQuery basta usar o “$(‘#id’)” e funciona da mesma maneira. No javascript não existe um “document.getElementByClass”, o que seria de enorme utilidade para qualquer desenvolvedor, mas no jQuery há. E de maneira muito simples, “$(‘.class’)”, com isso você consegue selecionar todos elementos que tenham a classe “.class” e à partir disso, fazer o que for necessário.
Abaixo vou escrever um código que muda a cor de todos os elementos que tenham a classe “cor”. A Cor inicial será preta.
.cor{color:#000} //Preto
<ul> <li>primeiro</li> <li>Segundo</li> <li>Terceiro</li> <li>Quarto</li> <li>Quinto</li> <li>Sexto</li> </ul>
$(document).ready(function(){
$(".cor").css("color","#ff0000");
});
Explicação:
$(document).ready(function(){ -> Ao final do carregamento da página
$(“.cor”).css(“color”,”#ff0000″); -> Selecionar todos os elementos com a clarr cor, no caso o primeiro, terceiro, quarto e sexto itens da lista e alterar a cor para vermelho.
Esse código pode ser alterado da maneira que mais lhe convier, por exemplo, você quer ter certeza de que apenas os itens de uma lista com a classe cor seja alterados e não os demais, basta incluir o elemento.
<ul> <li>primeiro</li> <li>Segundo</li> <li>Terceiro</li> <li>Quarto</li> <li>Quinto</li> <li>Sexto</li> </ul> <p>Paragrafo</p>
<script type="text/javascript">
$(document).ready(function(){
$("li.cor").css("color","#ff0000");
});
</script>
Agora se você quer garantir que apenas os itens de uma lista não ordenada mudem de cor:
<ol> <li>primeiro</li> <li>Segundo</li> <li>Terceiro</li> <li>Quarto</li> <li>Quinto</li> <li>Sexto</li> </ol> <ul> <li>primeiro</li> <li>Segundo</li> <li>Terceiro</li> <li>Quarto</li> <li>Quinto</li> <li>Sexto</li> </ul> <p>Paragrafo</p>
<script type="text/javascript">
$(document).ready(function(){
$("ul li.cor").css("color","#ff0000");
});
</script>
E assim por diante.
Vou escrever uma série de tutoriais para se dar os primeiros passos com jQuery, mas enquanto isso, você pode acessar o site do jQuery e baixar o framework e fazer o doqnload dos exemplos acima.
Abraços.
Veja
- Mascara de campo em JS com jQuery.
- Validação de formularios com jQuery
- jQuery plugin. Seus últimos tweets exibidos em seu blog
- Javascript para principiantes ou esquecidinhos. Aula 5 – DOM
- Otimizando o JS. Diminuir o uso do getElementById
1 Comentário »
Rss dos comentários TrackBack URL
Comentário por Ricardo Bomfim — 12/04/2010 @ 10:40 am
Ola, sou iniciante em desenvolvimento web, mas já quero fazer as coisas bem feitas.
Tenho um menu em css que usa um javascript para fazer uma pseudo li:hover, criando uma classe “.over”, pois o IE não captura o :hover em elementos li.
Gostaria de capturar os elementos li do menu que possuam filhos e adicionar esta classe .over para funcionar no IE.
A pergunta como fazer isso em jquery?