Como
estudar JQuery
Jquery
é uma biblioteca JavaScript, criada para ampliar as facilidades do
desenvolvedor web. Devido a sua sintaxe ser simples, ela utiliza os
mesmos métodos da API do JavaScript. Entre as bibliotecas do
JavaScript as mais populares são o Prototype, MooTools, Dojo, YUI.
Elas podem oferecer ao desenvolvedor manipular efeitos como Ajax,
eventos, animações e widgets.
O
mais importante ao aprender Jquery e a manipulação do DOM (Modelo
de objetos de documentos). Assim cada modelo de objetos de
documentos é o próprio codigo HTML estruturado em forma de Arvore.
A
minha sugestão pra começar a estudar é o aplicativo MAMP (MAC) ou
o Wampserver (Windows). Pois em todos os casos vai precisar de um
container (Apache tomcat ou Jboss) para rodar os scripts.
Agora
Baixe e instale o MAMP.
Agora
que o servidor já está rodando, entre na pasta do mamp e crie um
arquivo chamado index.html nele coloque o seguinte conteúdo.
<!doctype
html>
<html>
<head>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
var
numShow=10;
var
numTickets=100;
$(document).ready(function()
{
for
(i=0;i<numTickets;i++) {
var
numTotal=i+1;
$('.container').append("<p>
tem"+ numTotal+"tickets</p>");
}
});
</script>
<body>
<div
class="container"></div>
</body>
</html>
o
resultado será será algo como este:
Sobre
o DOM é importante entender que ele é responsável pela construção
da árvore dos componentes HTML. Pois ele é desenvolvido sob os
padrões de especificação HTML:
<!doctype
html>
<html>
<head>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(document).ready(function()
{
$('.product-img
img').hover(
function(){
var toolTip = $(this).attr("tittle");
$('.info').after('<p
class="toolTip"> '+toolTip+' </p>');
},
function(){
$('p.toolTip').hide();
}
);
});
</script>
<body>
<h1>Hello
Jquery</h1>
<div
class="cart">
<h2>shooping
Cart</h2>
</div>
<div
class="product">
<h3>Apple
Iphone4</h3>
<div
class="product-img"> <img src="imagens/cd1.jpg"
title="Steve Jobs com o iphone" alt="Steve
Jobs"></div>
<p
class="info"> vendido por eu nao sei quem</p>
<p
class="price">299.99</p>
</div>
<div
class="add-to-cart">Clique aqui e compre </div>
</body>
</html>
I
ae continua a diversão !!!
Pesquise
mais na comunidade http://meetup.jquery.com/
lá você encontra os entusiastas Jquery.
Nenhum comentário:
Postar um comentário