jQuery

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>


<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.

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

Quem usa jQuery?

Fonte: http://trendspro.builtwith.com

Bruno Cunha

E-mail:

[email protected]

Portfólio:

http://brunocunha.net.br

Twitter

http://twitter.com/obrunocunha

OBRIGADO!

mailto:[email protected]

http://brunocunha.net.br/

http://twitter.com/obrunocunha

jQuery

Documents

Transcript of jQuery