jquery
DESCRIPTION
TRANSCRIPT
![Page 1: jQuery](https://reader033.vdocuments.net/reader033/viewer/2022061210/5491907eb47959f65c8b45ad/html5/thumbnails/1.jpg)
Por Bruno Cunha
![Page 2: jQuery](https://reader033.vdocuments.net/reader033/viewer/2022061210/5491907eb47959f65c8b45ad/html5/thumbnails/2.jpg)
Definição
• Criada por John Resig em 2006;
• OpenSource (MIT, GPL) – Massachusetts Institute of Technology
– GNU General Public Licence
– Uso Pessoal e Comercial;
• Framework JavaScript;
• Focado na simplicidade de escrita não exigindo conhecimento de programação;
![Page 3: jQuery](https://reader033.vdocuments.net/reader033/viewer/2022061210/5491907eb47959f65c8b45ad/html5/thumbnails/3.jpg)
Para que serve
• Adicionar interatividade e dinamismo às páginas web;
• Criar scripts que visem a incrementar:
– Usabilidade
– Acessibilidade
– Design
• Enriquecer a experiência do usuário, de forma progressiva e não-obstrutiva;
– Javascript não obstrutivo diz respeito a scripts que, ao serem desabilitados, não interferem no funcionamento da página.
![Page 4: jQuery](https://reader033.vdocuments.net/reader033/viewer/2022061210/5491907eb47959f65c8b45ad/html5/thumbnails/4.jpg)
Do que jQuery é capaz
• Adicionar efeitos visuais e animações;
• Acessar e manipular o DOM; – Document Object Model
• Buscar informações no servidor sem necessidade de recarregar a página;
• Prover interatividade;
• Alterar conteúdo;
• Modificar apresentação e estilização;
• Simplificar tarefas específicas de JavaScript;
![Page 5: jQuery](https://reader033.vdocuments.net/reader033/viewer/2022061210/5491907eb47959f65c8b45ad/html5/thumbnails/5.jpg)
Compatibilidade nos Navegadores
• Firefox 2.0+
• Internet Explorer 6+
• Safari 3+
• Opera 10.6+
• Chrome 8+
![Page 6: jQuery](https://reader033.vdocuments.net/reader033/viewer/2022061210/5491907eb47959f65c8b45ad/html5/thumbnails/6.jpg)
JQUERY NA PRÁTICA Simplicidade
![Page 7: jQuery](https://reader033.vdocuments.net/reader033/viewer/2022061210/5491907eb47959f65c8b45ad/html5/thumbnails/7.jpg)
Muda o jeito de escrever JavaScript
var tables = document.getElementsByTagName('table');
for (var t = 0; t < tables.length; t++)
{
var rows = tables[t].getElementsByTagName('tr');
for (var i = 1; i < rows.length; i += 2)
{
if (!/(^|s)odd(s|$)/.test(rows[i].className))
{
rows[i].className += ' odd';
}
}
}
![Page 8: jQuery](https://reader033.vdocuments.net/reader033/viewer/2022061210/5491907eb47959f65c8b45ad/html5/thumbnails/8.jpg)
Muda o jeito de escrever JavaScript
$('table tr:nth-child(odd)').addClass('odd');
![Page 9: jQuery](https://reader033.vdocuments.net/reader033/viewer/2022061210/5491907eb47959f65c8b45ad/html5/thumbnails/9.jpg)
Filosofia jQuery
Encontrar Coisas
Fazer Algo
![Page 10: jQuery](https://reader033.vdocuments.net/reader033/viewer/2022061210/5491907eb47959f65c8b45ad/html5/thumbnails/10.jpg)
Filosofia jQuery
$(Encontrar Coisas)
.Fazer Algo();
![Page 11: jQuery](https://reader033.vdocuments.net/reader033/viewer/2022061210/5491907eb47959f65c8b45ad/html5/thumbnails/11.jpg)
Exemplos
$("div").hide(); //efeito
$("button").remove(); //DOM
$("form").submit(); //evento
$("p").addClass("especial"); //DOM
$("span").show("fast"); //animação
![Page 12: jQuery](https://reader033.vdocuments.net/reader033/viewer/2022061210/5491907eb47959f65c8b45ad/html5/thumbnails/12.jpg)
<!DOCTYPE html><html><body>
<ul>
<li><a>home</a></li>
<li><a>about</a></li>
</ul>
</body></html>
![Page 13: jQuery](https://reader033.vdocuments.net/reader033/viewer/2022061210/5491907eb47959f65c8b45ad/html5/thumbnails/13.jpg)
<!DOCTYPE html><html><body>
<ul>
<li><a>home</a></li>
<li><a>about</a></li>
</ul>
<script src="jquery.js"></script>
</body></html>
![Page 14: jQuery](https://reader033.vdocuments.net/reader033/viewer/2022061210/5491907eb47959f65c8b45ad/html5/thumbnails/14.jpg)
<!DOCTYPE html><html><body>
<ul>
<li><a>home</a></li>
<li><a>about</a></li>
</ul>
<script src="jquery.js"></script><script>
jQuery('ul');
</script>
</body></html>
![Page 15: jQuery](https://reader033.vdocuments.net/reader033/viewer/2022061210/5491907eb47959f65c8b45ad/html5/thumbnails/15.jpg)
<!DOCTYPE html><html><body>
<ul id="nav">
<li><a>home</a></li>
<li><a>about</a></li>
</ul>
<script src="jquery.js"></script><script>
jQuery('ul').attr('id', 'nav');
</script>
</body></html>
![Page 16: jQuery](https://reader033.vdocuments.net/reader033/viewer/2022061210/5491907eb47959f65c8b45ad/html5/thumbnails/16.jpg)
<!DOCTYPE html><html><body>
<ul id="nav">
<li><a>home</a></li>
<li><a>about</a></li>
</ul>
<script src="jquery.js"></script><script>
jQuery('ul').attr('id', 'nav');
jQuery('#nav li');
</script>
</body></html>
![Page 17: jQuery](https://reader033.vdocuments.net/reader033/viewer/2022061210/5491907eb47959f65c8b45ad/html5/thumbnails/17.jpg)
<!DOCTYPE html><html><body>
<ul id="nav">
<li class="item"><a>home</a></li>
<li class="item"><a>about</a></li>
</ul>
<script src="jquery.js"></script><script>
jQuery('ul').attr('id', 'nav');
jQuery('#nav li').addClass('item');
</script>
</body></html>
![Page 18: jQuery](https://reader033.vdocuments.net/reader033/viewer/2022061210/5491907eb47959f65c8b45ad/html5/thumbnails/18.jpg)
<!DOCTYPE html><html><body>
<ul id="nav">
<li class="item"><a>home</a></li>
<li class="item"><a>about</a></li>
</ul>
<script src="jquery.js"></script><script>
jQuery('ul').attr('id', 'nav');
jQuery('#nav li').addClass('item');
jQuery('#nav a');
</script>
</body></html>
![Page 19: jQuery](https://reader033.vdocuments.net/reader033/viewer/2022061210/5491907eb47959f65c8b45ad/html5/thumbnails/19.jpg)
<!DOCTYPE html><html><body>
<ul id="nav">
<li class="item"><a>home</a></li>
<li class="item"><a>about</a></li>
</ul>
<script src="jquery.js"></script><script>
jQuery('ul').attr('id', 'nav');
jQuery('#nav li').addClass('item');
jQuery('#nav a').each(function(){
jQuery(this);
});
</script>
</body></html>
![Page 20: jQuery](https://reader033.vdocuments.net/reader033/viewer/2022061210/5491907eb47959f65c8b45ad/html5/thumbnails/20.jpg)
<!DOCTYPE html><html><body>
<ul id="nav">
<li class="item"><a>home</a></li>
<li class="item"><a>about</a></li>
</ul>
<script src="jquery.js"></script><script>
jQuery('ul').attr('id', 'nav');
jQuery('#nav li').addClass('item');
jQuery('#nav a').each(function(){
jQuery(this);
});
</script>
</body></html>
![Page 21: jQuery](https://reader033.vdocuments.net/reader033/viewer/2022061210/5491907eb47959f65c8b45ad/html5/thumbnails/21.jpg)
<!DOCTYPE html><html><body>
<ul id="nav">
<li class="item"><a href="/home">home</a></li>
<li class="item"><a href="/about">about</a></li>
</ul>
<script src="jquery.js"></script><script>
jQuery('ul').attr('id', 'nav');
jQuery('#nav li').addClass('item');
jQuery('#nav a').each(function(){
jQuery(this).attr('href', '/' + jQuery(this).text());
});
</script>
</body></html>
![Page 22: jQuery](https://reader033.vdocuments.net/reader033/viewer/2022061210/5491907eb47959f65c8b45ad/html5/thumbnails/22.jpg)
<!DOCTYPE html><html><body>
<ul id="nav">
<li class="item"><a href="/home">home</a></li>
<li class="item"><a href="/about">about</a></li>
</ul>
<script src="jquery.js"></script><script>
$('ul').attr('id', 'nav');
$('#nav li').addClass('item');
$('#nav a').each(function(){
$(this).attr('href', '/' + $(this).text());
});
</script>
</body></html>
![Page 23: jQuery](https://reader033.vdocuments.net/reader033/viewer/2022061210/5491907eb47959f65c8b45ad/html5/thumbnails/23.jpg)
<!DOCTYPE html><html><body>
<ul id="nav">
<li class="item"><a href="/home">home</a></li>
<li class="item"><a href="/about">about</a></li>
</ul>
<script src="jquery.js"></script><script>
$('ul').attr('id', 'nav');
$('#nav li').addClass('item').find('a').each(function(){
$ (this).attr('href', '/' + $ (this).text());
});
</script>
</body></html>
![Page 24: jQuery](https://reader033.vdocuments.net/reader033/viewer/2022061210/5491907eb47959f65c8b45ad/html5/thumbnails/24.jpg)
Chaining (Acorrentar)
$("p").addClass("especial")
.css("color", "red")
.append(“Olá Mundo!")
.show("slow");
• A maioria dos métodos são chainable (possuem
capacidade de se acorrentarem) • Isso acontece porque, por padronização, todos os métodos
devem retornar o próprio elemento. • A mesma padronização é aconselhada aos programadores
ao criarem plug-ins.
![Page 25: jQuery](https://reader033.vdocuments.net/reader033/viewer/2022061210/5491907eb47959f65c8b45ad/html5/thumbnails/25.jpg)
Vantagens
• Utiliza seletores CSS para localizar elementos da estrutura de marcação HTML da página;
• Possui arquitetura compatível com instalação de plug-ins e extensões em geral;
• Possuir um repositório com inúmeros plug-ins disponíveis;
• É indiferente às inconsistências de renderização entre navegadores;
• Não há necessidade de construção de loops para localização de elementos no documento;
• Admite programação encadeada, ou seja, cada método retorna um objeto;
• É extensível, pois admite criação e inserção de novas funcionalidades;
• Possui uma ótima documentação;
• Leve, a versão compactada (e com Gzip) tem 90kb de tamanho;
• Não obstrutivo
![Page 26: jQuery](https://reader033.vdocuments.net/reader033/viewer/2022061210/5491907eb47959f65c8b45ad/html5/thumbnails/26.jpg)
Desvantagens
• Aplicações precisam de um servidor para criar e gerenciar sessões;
• Aplicações precisam de outro aplicativo para fornecer os dados,
escrito em outra linguagem;
• Em computadores robustos, aplicações maiores podem se tornar
mais lentas;
• É difícil proteger o código-fonte;
• Pode ser difícil depurar, especialmente se houverem conflitos entre
scripts;
![Page 27: jQuery](https://reader033.vdocuments.net/reader033/viewer/2022061210/5491907eb47959f65c8b45ad/html5/thumbnails/27.jpg)
FrozenSpots
• Construtor $ (cifrão, dólar)
– referência para o objeto jQuery;
– é responsável por identificar o elemento passado e chamar o
respectivo método;
– Qualquer outro “nome” pode ser usado para representar o objeto,
sendo o $ (cifrão, dólar) o default.
• Todas as funcionalidades do jQuery possuem comportamento
default.
![Page 28: jQuery](https://reader033.vdocuments.net/reader033/viewer/2022061210/5491907eb47959f65c8b45ad/html5/thumbnails/28.jpg)
HotSpots
• Os plugins (componentes) que podem ser acoplados
junto ao jQuery.
• O Complemento jQuery UI
– Oferece funcionalidades de interação com o usuário.
• Todos os métodos possuem parâmetros para
modificar ou configurar sua funcionalidade.
![Page 29: jQuery](https://reader033.vdocuments.net/reader033/viewer/2022061210/5491907eb47959f65c8b45ad/html5/thumbnails/29.jpg)
• Atualmente mais de 19 milhões de sites utilizam jQuery;
Quem usa jQuery?
Fonte: http://trendspro.builtwith.com
![Page 30: jQuery](https://reader033.vdocuments.net/reader033/viewer/2022061210/5491907eb47959f65c8b45ad/html5/thumbnails/30.jpg)
Bruno Cunha
E-mail:
Portfólio:
http://brunocunha.net.br
http://twitter.com/obrunocunha
OBRIGADO!