Resolução da incompatibilidade entre os navegadores.
Implementação segura de recursos do CSS1, CSS2 e CSS3.
Redução de código.
Reutilização do código através de plugins.
Utilização de uma vasta quantidade de plugins criados por outros desenvolvedores.
Com jQuery, podemos fazer um site totalmente animado sem nenhuma instalação externa no browser, como Flash ou Silverlight, que são pesados e necessitam da instalação de plugins.
Trabalha com AJAX e DOM.
- Entendendo o jQuery
O jQuery é um framework do JavaScript, framework nada mais é do que métodos, classes e name spaces prontos e compilados em um arquivo só; desenvolvido para facilitar a nossa vida em alguma linguagem de programação. Hoje em dia a maioria das linguagens tem um ou até vários frameworks.
Todos os comandos do jQuery temos o: alias $ (cifrão) como atalho.
Podemos misturar sem problemas JavaScript nativo com jQuery.
A base do jQuery são os Selectors, ou, Seletores, um seletor define em que parte do HTML ou tag
vamos executar o nosso código jQuery, os selectores do jQuery são identicos ao do CSS.
Como exemplo, temos uma "div" com a seguinte estrutura:
A principio podemos selecionar esta "div" de duas formas no jQuery:
Assim $("div") ou $("#divTeste")
Após termos selecionado o elemento que vamos manipular, o próximo passo é decidir o que vai ser feito com ele, se vamos adicionar um evento de click, ou vamos manipular; ou até animar as suas propriedades CSS, em fim; Temos muitas possibilidades.
- Exemplo prático
Nosso primeiro passo é o download do Framework jQuery que está neste link: >> Aqui <<
Estamos baixando a versão PRODUCTION, que como o nome já diz, é a versão de produção, temos também a versão DEVELOPMENT, que é a versão para o desenvolvimento de Plugins ou customização do framework.
Feito o download do nosso arquivo jquery-1.4.2.min.js, podemos começar o desenvolvimento.
Crie um pasta em seu desktop com o nome "exemplo_jquery", sem as aspas obviamente, em seguida crie outra pasta dentro da que você acabou de criar e dê o nome para ela de "js".
Agora copie o arquivo jQuery-1.10.2 que você acabou de baixar e cole dentro da pasta "js".
Agora vamos criar um arquivo HTML, com duas "div''s e algumas linhas de CSS.
Nossa estrutura HTML será assim:
Com o nosso HTML estruturado vamos adicionar nosso CSS, escreva o código abaixo dentro da tag <head>:
#root{ background-color: #0F0;}#conteudo{ background-color: #FF0; height: 300px; display: none;}#link{ cursor: pointer; font-weight: bold;}
Na linha 04 definimos a cor do background da div root, na linha 09, 10 e 11 definimos cor do background, altura e setamos a propriedade display como none na div "conteudo", assim ela ficará invisível, e nas linhas 15 e 16 setamos algumas propriedades do span "link", cursor e o font-weight.
Agora estamos com o HTML e o CSS devidamente desenvolvidos, vamos ao JQuery ou seja; Ao JavaScript.
O primeiro passo é linkar o nosso Framework, o arquivo do jQuery, baixado anteriormente, escreva o código abaixo dentro da targ <head>, abaixo do nosso código CSS:
Bom, o código acima apenas chama o nosso Framework, a propriedade SRC, é onde está o nosso arquivo, no nosso caso está na pasta "js/", seguido do nome do arquivo, a propriedade type diz do que se trata esse arquivo, que no nosso caso é um arquivo "text / javascript", agora com o JQuery em nossa pagina, podemos desenvolver o código JavaScirpt / jQuery, escreva o código abaixo dentro da tag head, mais atenção, todo o código que chamar funções jQuery temos que declarar abaixo da tag aonde linkamos o framework, segue código:
$(document).ready(function () { $("#link").click(function () { $("#conteudo").slideDown("slow").delay(1000).slideUp("slow"); });});
Na linha 01, abrimos a tag script, dentro da tag setamos a propriedade type com o tipo do nosso script, que é "text/javascript", então podemos começar o nosso código JavaScipt / jQuery, como disse anteriormente, o jQuery usa o $ como o seu alias de chamada, como prática e segurança, sempre que iniciarmos um código jQuery, temos que ter certeza que o nosso documento HTML está 100% carregado, calme, o jQuery verifica apenas o carregamento dos elementos HTML ou seja o DOM, não de imagens e outros.
Para fazer isto temos que selecionar nosso documento, na linha 03 iniciamos com o nosso alias "$", logo abrimos parênteses e definimos nosso selector (seletor) como "document", fechamos parênteses, após feito isso digitamos um ".", e escolhemos nosso método que é o "ready", abrimos parênteses novamente, agora já podemos definir nossas funções ou "function".
Com a function aberta, iremos escrever o que queremos, na linha 05 começamos novamente com o nosso alias "$", definimos nosso seletor com o ID do nosso span que é "link". Veja que o JQuery usa os mesmo seletores do CSS, "#ID", ".CLASS", e assim vai, em outro post irei falar sobre os seletores do JQuery. Setado nosso seletor, fechamos nosso parênteses e definimos nosso método que é o "click" e abrimos parênteses novamento, ou seja, quando clicarmos no nosso span "link", será disparado uma função.
Na linha 07 definimos a função que será disparada após o click, começamos novamente com o alias "$", definimos nosso seletor com o ID da nossa "div" que é "conteúdo" que está invisível, então definimos nosso método que é "slide Down" e dentro dela setamos a velocidade como "slow", em seguida chamamos outro método que é o "delay" e setamos o tempo em 1000 mili segundos, após isso, chamamos outro método que é o "slideUp" e definimos a velocidade como "slow" novamente e acabamos a linha com um ";", nas próximas linhas fechamos os parênteses e as chaves abertas anteriormente.
Explicando o algoritmo:
Após nosso documento estar carregado, é adicionado o evento de click nosso span "link", e após clicarmos em nosso span, nossa div "conteúdo" fará um "slide Down", tornando-a visível, após 1000 mile segundos, fará um "slideup", tornando-a invisível novamente.
Agora, salve o documento como "index.html" dentro da pasta de seu projeto a "thecodebr_jquery", execute o arquivo e veja o resultado, impressionante não, muito simples.
