Post on 17-Dec-2014
description
Por Bruno Cunha
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;
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.
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;
Compatibilidade nos Navegadores
• Firefox 2.0+
• Internet Explorer 6+
• Safari 3+
• Opera 10.6+
• Chrome 8+
JQUERY NA PRÁTICA Simplicidade
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';
}
}
}
Muda o jeito de escrever JavaScript
$('table tr:nth-child(odd)').addClass('odd');
Filosofia jQuery
Encontrar Coisas
Fazer Algo
Filosofia jQuery
$(Encontrar Coisas)
.Fazer Algo();
Exemplos
$("div").hide(); //efeito
$("button").remove(); //DOM
$("form").submit(); //evento
$("p").addClass("especial"); //DOM
$("span").show("fast"); //animação
<!DOCTYPE html><html><body>
<ul>
<li><a>home</a></li>
<li><a>about</a></li>
</ul>
</body></html>
<!DOCTYPE html><html><body>
<ul>
<li><a>home</a></li>
<li><a>about</a></li>
</ul>
<script src="jquery.js"></script>
</body></html>
<!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>
<!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>
<!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>
<!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>
<!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>
<!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>
<!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>
<!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>
<!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>
<!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>
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.
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
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;
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.
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.
• Atualmente mais de 19 milhões de sites utilizam jQuery;
Quem usa jQuery?
Fonte: http://trendspro.builtwith.com
Bruno Cunha
E-mail:
contato@brunocunha.net.br
Portfólio:
http://brunocunha.net.br
http://twitter.com/obrunocunha
OBRIGADO!