Mini Curso jQuery

Mini Curso
jQuery

slideshare.net/thiagoericson

O que é o jQuery?
O jQuery é um Framework JavaScript, desenvolvido com o intuito de
simplificar e agilizar o desenvolvimento de scripts que interagem com HTML.


Em que o jQuery me ajuda?
• Controle total sobre o DOM;

• Desenvolver javascript facilmente;

• Manipular valores de propriedades de CSS;

• Aplicar efeitos visuais;

• Uso de AJAX;

• E Muito, muito mais!


Atribuir valor a um campo

JavaScript “Puro”
document.getElementById(“nota").value = “10”;

jQuery
$(“#nota”).val(“10”);


Pontos Fortes
• Cross browser, ou seja, compatível com os principais navegadores

• Inúmeros plugins que complementam (ainda mais) suas funcionalidades

• Comunidade ativa, contribuindo com melhorias, suporte, plugins, etc.

• Possui extensão de Interface de Usuário, jQuery UI (User Interface).

• É a biblioteca JavaScript mais difundida no mundo.


Pontos Fracos
• Relativamente pesada.

• Me desculpem, mas foi só isso que encontrei.

Nota: Em trabalhos simples, como Sites/Portais/CMS, dificilmente se encontrará
algum ponto fraco, pois a biblioteca atende com muita eficácia esse tipo de projeto.


Vamos codar jQuery!
Utilizaremos o plugin Slides Js (http://slidesjs.com/) para criarmos um banner rotativo,
em uma página html.

Seguiremos um breve passo-a-passo, e ao final teremos um resultado bem bacana.


1 - Incluindo a biblioteca jQuery

Entre as tags <head> </head> deve se incluir o código abaixo:

<script language=“javascript” type=“text/javascript” src=“jquery.js”></script>

Altere o valor de “src”, pelo caminho relativo do seu arquivo jquery.
Ex: se o arquivo tem o nome “jquery.js” e está dentro da pasta “js”,
o valor inserido em “src” é: “js/jquery.js”


2 - Incluindo o Plugin Slides

Logo abaixo de onde foi inserido o código de referencia ao jQuery, ainda entre as
tags <head> </head>, deve se incluir o código abaixo, trocando
o valor de “src” pelo caminho do seu arquivo Slides:

<script language=“javascript” type=“text/javascript” src=“slides.js”></script>

ATENÇÃO!

O arquivo do Plugin Slides, deve ser incluído após o arquivo
do jQuery, caso contrário não funcionará corretamente.


3 - Incluindo Estilo(CSS) Slides

Devemos agora inserir o CSS(Estilo) para nosso Banner. Para inserir o arquivo CSS
seguimos o mesmo padrão, ou seja, entre as tags <head> </head>, deve se incluir
o código abaixo, trocando o valor de “src” pelo caminho do seu arquivo CSS:

<link rel="stylesheet" href="slides.css">


E agora?
Agora já temos a Biblioteca jQuery, o Plugin Slides e o CSS configurados em nossa
página, só nos resta montar nosso banner. Vamos lá!


3 – Escrevendo o HTML 1/5

Vamos definir nossa estrutura básica, entre as tags <body> </body>
Insira o seguinte código:

<div id="conteudo">

<div id="banner">

</div>

</div>



Dentro das tags <div id=“banner”></div> insira o seguinte código:

<div id="slides">

</div>

<img id="moldura" src="img/moldura.png" width="739" height="341">


Checkpoint 1

Seu código entre as tags <body></body> deve estar assim:

<div id="conteudo">

<div id="banner">

<div id="slides">
</div>


</div>

</div>



Dentro das tags <div id=“slides”></div> insira o seguinte código:

<div class="slides_container">

</div>

<a href="#" class="prev"><img src="img/anterior.png" width="24" height="43"></a>

<a href="#" class="next"><img src="img/proximo.png" width="24" height="43"></a>


Checkpoint 2
Seu código entre as tags <body></body> deve estar assim:

<div id="conteudo">
<div id="banner">
<div id="slides">
<div class="slides_container">
</div>

<a href="#" class="prev">
<img src="img/anterior.png" width="24" height="43">
</a>

<a href="#" class="next">
<img src="img/proximo.png" width="24" height="43">
</a>

</div>
</div>
</div>


Dentro das tags <div class=“slides_container”></div> vamos inserir as nossas imagens,
insira o seguinte código:

<img src="img/1.jpg" width="570" height="270">

Para inserir 4 banners, por exemplo:


Nota: Os valores de Width e Height, são Largura e Altura respectivamente, referente
as dimensões das imagens utilizadas.

Atenção!
Todos os banners devem ter a mesma dimensão!


Você pode inserir link em cada banner, assim:

<a href=“#” target=”_blank”><img src="img/1.jpg" width="570" height="270"></a>

Nota: Altere o valor de “href” para o link que deseja para o banner.

Dica: Caso o link seja externo, deve-se utilizar a propriedade “target” com o valor “_blank”,
caso contrário não é necessário utilizar essa propriedade.


Agora vem a mágica!


8 – Escrevendo o jQuery

Logo após os códigos HTML que inserimos, e antes da tag </body> vamos
inserir o código:
<script>
$(function(){
$('#slides').slides({
preload: true,
preloadImage: 'img/loading.gif',
play: 5000,
hoverPause: true
});
});
</script>

Nota: Todo código JavaScript deve ser inserido dentro das tags <script></script>


Save Point 1 – O que é isso?

O código “$(function(){ });” significa que tudo o que estiver contido entre as “{“ “}” será
executando assim que a página terminar de ser carregada totalmente pelo navegador.

O código “$('#slides').slides({ });” converte o elemento HTML que tem ID = “slides”, para um
Slides. O que estiver entre as “{“ ”}” são os parâmetros de configuração do Slides.

Com esse algoritmo, eu estou dizendo ao Navegador: “- Quando terminar de carregar a
página, converta a div#slides para um Slides!”


Save Point 2 – Parâmetros
O Slides tem cerca de 26 parâmetros, mas muitos são desnecessários para um uso
simples, e aqui utilizaremos apenas os essenciais, que são:
preload, preloadImage, play, hoverPause. Vamos as descrições:

preload: Carregar as imagens que compõe o banner, antes de exibir a página.

preloadImage: Imagem que será exibida durante o carregamento das imagens.

play: intervalo de transição entre um banner e outro, em milissegundos.

hoverPause: pausa a transição de banner, quando o mouse estiver posicionado.

Nota 1: Esses itens são ditos essenciais por questão de boas práticas, contudo, não são
realmente necessários para o funcionamento do Slides, pois todas os parâmetros
possuem valores padrões definidos pelo próprio plugin.


Referências
jQuery : http://jquery.com/

Slides : http://slidesjs.com/

Sugestões
jQuery UI : http://jqueryui.com/

Fórum iMasters : http://imasters.com.br/

Blog do Maujor : http://maujor.com.br/

Blog Tableless : http://tableless.com.br/ | http://tableless.com.br/html5/


Mini Curso jQuery

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a Mini Curso jQuery

Semelhante a Mini Curso jQuery (20)

Mini Curso jQuery