jQuery

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+

Simplicidade

JQUERY NA PRÁTICA

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>

<ul>
</ul>
<script src="jquery.js"></script><script>
jQuery('ul');
</script>
</body></html>

<ul id="nav">
</ul>
jQuery('ul').attr('id', 'nav');
</script>
</body></html>

<ul id="nav">
</ul>
jQuery('#nav li');
</script>
</body></html>

<ul id="nav">
<li class="item"><a>home</a></li>
<li class="item"><a>about</a></li>
</ul>
jQuery('#nav li').addClass('item');
</script>
</body></html>

<ul id="nav">
</ul>
jQuery('#nav a');
</script>
</body></html>

<ul id="nav">
</ul>
jQuery('#nav a').each(function(){
jQuery(this);
});
</script>
</body></html>

<ul id="nav">
<li class="item"><a href="/home">home</a></li>
<li class="item"><a href="/about">about</a></li>
</ul>
jQuery('#nav a').each(function(){
jQuery(this).attr('href', '/' + jQuery(this).text());
});
</script>
</body></html>

<ul id="nav">
</ul>
$('ul').attr('id', 'nav');
$('#nav li').addClass('item');
$('#nav a').each(function(){
$(this).attr('href', '/' + $(this).text());
});
</script>
</body></html>

<ul id="nav">
</ul>
$('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.

Quem usa jQuery?
• Atualmente mais de 19 milhões de sites utilizam jQuery;

Fonte: http://trendspro.builtwith.com

OBRIGADO!
Bruno Cunha
E-mail:
contato@brunocunha.net.br

Portfólio:
http://brunocunha.net.br

Twitter
http://twitter.com/obrunocunha

jQuery

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (7)

Similar a jQuery

Similar a jQuery (20)

jQuery