Para começar gostaria de dividir minha felicidade de trabalhar com Jquery com vcs, nunca antes foi tão facil programar em javascript, quanto é agora com essa biblioteca, desde o começando do ano, venho estudando essa maravilha e até agora não me deu um pingo trabalho.Seu lema é "Escreva menos, faça mais", realmente isso é uma grande vantagem desta biblioteca, vou postar uma exemplo para aqueles que ainda não presenciaram o seu poder de impressionar os programadores.
Pré requisitos:
- HTML
- CSS
- Javascript
Primeiramente uma básica explicação de como ele funciona em cima do conteúdo HTML.Um arquivo Html é estruturado na forma de uma árvore de cabeça para baixo, como na figura
A partir deste momento tudo, absolutamente tudo do html, passa a estar sobre seu domínio 8-O.
Um exemplo bem simples, vc pode até pensar para que vou usar isso, mas é só um exemplo simples para aqueles queainda não assimilaram a magia.
O Efeito do Deslizamento
2 <body>
3 <script language="javascript" src="jquery.js"></script>
4 <!-- em js a ordem dos import's, implica no funcionamento da aplicação -->
5 <script language="javascript">
6 $(function(){ //¹
7 //aqui vai o código da aplicação, a sintaxe do JQuery não é tão convencional, mas depois vc se acostuma..
8 $("#mensagem").hide(); // ²
9 $("#mensagem").slideDown('slow'); // ³ });
10 </script>
11 <p id="mensagem">Hello, World!!</p>
12 </body>
13 </html>
Vamos as Explicações:
- Inicia um trecho de código JQuery, outra opção é: $(document).ready(function(){...}), que indica quando o elemento "document" estiver pronto executar o que estiver dentro de {...}.
- Inicia o elemento com id igual à mensagem (em CSS temos (#) para id e (.) para class) como invisível, hide é um método nativo da biblioteca Jquery, que modifica a propriedade visibility do CSS para hidden;
- O método slideDown também do JQuery exibe um elemento com efeito de deslizamento, iniciando de cima pra baixo.
Simples, mas pode-se fazer muito mais que isso, o importante é desenvolver algumas técnicas e aproveitar o máximo dessa excelente biblioteca. Na web, existem diversos plugins do JQuery, que auxiliam com alguma funcionalidade específica, bastando referenciá-las depois do import do JQuery. Um exemplo de plugin é o JQuery UI disponibilizado no site oficial da biblioteca o: http://jquery.com/ pra mim a melhor referência de JQuery até então.
Download da Biblioteca: JQuery
Site oficial: http://jquery.com
Alguns Plugins Interessantes:
