Brincando com jQuery
Quem nunca ouviu falar em jQuery?!
É uma biblioteca de javaScript que foi feita para simplificar e otimizar a produção no desenvolvimento web, como o próprio slogan do jQuery diz “write less, do more ” faça mais escrevendo menos.

Não se trata de uma nova tecnologia, é apenas javaScript assim como mootools e prototype, uma das grandes vantagens em optar por jQuery é a documentação disponível no site oficial, que é bastante completa e os artigos encontrados em fóruns e blogs espalhados na web.

Neste post em especifico eu vou brincar um pouco com o jQuery pra gente sentir um pouco da biblioteca dos deuses.

O primeiro passo é baixar a biblioteca no site oficial, depois chame a biblioteca entre a tag <head> da página que você irá usar as funções do jQuery.

Deverá ficar algo assim:


<head>

<title>Brincando com jQuery</title>

<script type="text/javascript" src="js/jquery.js"></script>//js = pasta onde ficará seus arquivos javaScript, isso é você que escolhe onde ficaram os arquivos e o jquery.js é a biblioteca

</head>

Agora vamos testar se a biblioteca está instalada corretamente: 


<script type="text/javascript">

$(document).ready(
//Aqui você faz o que quiser útilizando a sintax jQuery ou javaScript puro
function(){
       alert("O jQuery está funcionando e a brincadeira já pode começar!!!");//alert comum com a sintax javaScript

});

</script>

Este código espera a página ficar pronta “toda carregada” e após executa uma função que é apenas um alerta normal, com a sintaxe javaScript. Se ao carregar a página com este código e apresentar um alert é porque o jQuery está funcionando e a sua página já compreende a sintaxe jQuery e os métodos e funcionalidades podem ser usadas e isso significa que a brincadeira vai começar a ficar bom agora!

Mas se não funcionou é importante verificar se o caminho que você está chamando está correto ou se há alguma tag escrita incorreta ou sem fechamento, mas de qualquer maneira vou disponibilizar todo código citado aqui.

Uma piada ao getElementById()

O getElementById ficou famoso com a difusão da API DOM e é sem dúvidas um dos métodos mais usados, mas imagina digitar tudo isso umas vinte ou trinta vezes, e em casos extremos, que é necessário chamar esse método várias vezes, me dá tendinite só de pensar, mas com o jQuery isso é tão simples que se torna ridículo, uma verdadeira piada, foi uma das coisas que me chamou a atenção quando eu comecei com o jQuery, isso tudo se resume a “$();”,  $(“id desejado, e não só o id, mas os seletores e classes”), vamos aos exemplos para compreendermos melhor:

O método puro


Com JavaScript utilizando a API DOM
document.getElementById();
Com a biblioteca dos Deuses
$();

Manipulando CSS com jQuery



	$("#meuId").css("color", "red");

Os elementos de texto que estiverem dentro do id “meuId” ficaram com a cor vermelho.

Manipular CSS com a sintaxe de javaScript ficaria algo assim:


Forma muito usada 
      var n = document.getElementById("meuId");
       n.style.color = "red";

Forma otimizada
       document.getElementById("meuId").style.color = "red";

Os três exemplos fazem a mesma coisa, deixa os elementos de texto do meuid na cor vermelha.

Brincando de pic esconde

Ocultar e mostrar elementos sempre foi algo útil, tanto pra criar sub-menus e tudo que a necessidade do seu cliente mandar.

Fazer isso com jQuery é muito fácil e tem algumas formas interessantes, vamos ver um delas:


$(document).ready(function(){

	$("#meuId").click(function(){
		$("p").toggle("slow");

	});

});

HTML



<body>

 <span id="#meuId">Clique me!!!</span> 

         <p>paragrafo 1</p>

         <p>paragrafo 2</p>

</body>

Ajax virou brincadeira de criança

Para usar o Ajax normalmente é necessário usar uma receitinha de bolo para inicializar o objeto XMLHTTPRequest e ainda por cima fazer um IF se for o IE pra ativar o ActveX, pra funcionar em ambos ou browsers, mas com o jQuery virou outra maravilhosa piada:

Ajax com javaScript


var Ajax = false;// Ajax

	function AjaxRequest() {
		Ajax = false;
		if (window.XMLHttpRequest) {//Mozilla e safari
			Ajax = new XMLHttpRequest();
		} else if (window.ActiveXObject) {// IE
			try{
				Ajax = new ActiveXObject("Msxml2.XMLHTTP");
			} catch (e) {
				try{
					Ajax = new ActiveXObject("Microsoft.XMLHTTP");
				} catch (e) {

				}
			}

		}
	}

Ajax com jQuery


$("#idOndeVaiCarregar").load("pagina.php", callback);

Acredito que já deu pra brincar um pouco e espero que a leitura tenha sido proveitosa.

As melhores referências de jQuery você poderá achar no site oficial, vale a pena conferir e estudar