O documento discute como escrever JavaScript de forma mais eficiente usando a biblioteca jQuery. Apresenta os principais conceitos como seletores, manipulação do DOM, eventos e efeitos que facilitam e simplificam o desenvolvimento front-end. Também fornece exemplos práticos de como implementar diversas funcionalidades com poucas linhas de código jQuery.
2. Victor Adriel de J. Oliveira
◦ Ciência da Computação - UESC
◦ Associação Empresa Júnior de Computação
◦ Programação Web:
HTML/CSS (tableless), jQuery, PHP, Smarty, ...
◦ Contato:
victorajoliveira@gmail.com
blogvictoradriel.blogspot.com
3. Introdução
◦ O que é
◦ Características
◦ DOM
◦ JavaScript
◦ Como usar
◦ JavaScript vs. jQuery
jQuery em ação
◦ Método ready( )
◦ Construtor $( )
◦ Seletores
◦ Manipulação do DOM
◦ CSS
◦ Eventos
◦ Efeitos
◦ Formulários
4. É uma biblioteca JavaScript disponibilizada
como software livre e aberto, desenvolvida
para mudar a forma de escrever JavaScript.
“O foco principal da biblioteca jQuery é a
simplicidade. Por que submeter os
desenvolvedores ao martírio de escrever
longos e complexos códigos para criar
simples efeitos?” (John Resig, jQuery in Action)
5. Utiliza seletores CSS para acessar e manipular
o DOM;
Alheio às inconsistências de renderização
entre navegadores;
Extensível;
Provê interatividade;
Simplifica tarefas específicas de JavaScript.
6. HTML DOM:
◦ O HTML DOM define objetos e propriedades para
todos os elementos HTML, e os métodos (interface)
para acessá-los.
◦ Em outras palavras: o HTML DOM é um padrão para
acesso, atualização, adição ou deleção de
elementos HTML.
7. Propriedades do HTML DOM:
◦ x.innerHTML – texto do elemento x
◦ x.nodeName – nome do elemento x
◦ x.nodeValue – valor do elemento x
◦ x.parentNode – pai do elemento x
◦ x.childNodes – filhos do elemento x
◦ x.attributes – atributos do elemento x
8. Métodos do HTML DOM:
◦ x.getElementById(id)
Captura o elemento com um id específico
◦ x.getElementsByTagName(name)
Captura todos os elementos com o mesmo comando
◦ x.appendChild(node)
Insere um novo nó filho no elemento x
◦ x.removeChild(node)
Remove um nó filho do elemento x
9. Métodos do HTML DOM:
<html>
<body>
<p id="intro">Hello World!</p>
<script type=“text/javascript”>
txt=document.getElementById("intro").innerHTML;
alert("O texto do paragrafo com o id 'info': " + txt);
</script>
</body>
</html>
10. Métodos do HTML DOM:
<html>
<body>
<p id="intro">Hello World!</p>
<script type=“text/javascript”>
txt=document.getElementById("intro").innerHTML;
alert("O texto do paragrafo com o id 'info': " + txt);
</script>
</body>
</html>
Var txt = $(‘#intro’).val();
Com jQuery
11. Ir ao site: http://jquery.com
Fazer download da biblioteca
Linkar na página HTML:
<head>
<script type=“text/javascript”
src=“/caminho/jquery-vs.js”></script>
</head>
14. Minified
◦ jquery-1.6.4.min.js
◦ Compacto e de leitura difícil
Uncompressed
◦ jquery-1.6.4.js
◦ Espaço entre cada linha de código e amplamente
comentado.
19. Pode ser escrito de duas maneiras:
◦ $( )
◦ jQuery( )
jQuery.noConflict( )
◦ Usa o alias jQuery ou outro de sua preferência
◦ Ex:
$infoIlheus = jQuery.noConflict( );
$infoIlheus(document).ready(function( ){ ... });
20. Categorias:
◦ Básicos
◦ De atributo
◦ Hierárquicos
◦ Filtros
Básicos
De conteúdo
Por visibilidade
De filhos
◦ De formulários
21. ◦ Universal
$(“*”)
◦ De elemento
$(“p”)
◦ De múltiplos elementos
$(“p, h1, img”)
◦ De classe
$(“.class”)
◦ De ID
$(“#id”)
28. Propriedades de estilo
◦ .css( )
Ex:
◦ var back = $(“div").css("background-color");
◦ $("p").css("color","red");
◦ $( this ).css({"width" : "+=100", "color" : "red"});
29. Eventos do mouse
◦ .click( )
Ativado com um clique
◦ .dblclick( )
Ativado com um duplo clique
◦ .hover( )
Ativado quando o cursor estiver sobre o elemento
◦ .mousemove( )
Ativado com o movimento do mouse
30. Eventos do mouse
◦ .mousedown( ) / .mouseup( )
Ativado com pressionar/soltar o clique
◦ .mouseenter( ) / .mouseleave( )
Cursor passa sobre ou deixa o elemento
◦ .mouseover( ) / .mouseout( )
Cursor passa sobre ou sai dos elementos filhos
◦ .toggle( )
Ativa funções em cliques alternados
31. Eventos do teclado
◦ .focusin( )
Ativado com o foco no elemento
◦ .focusout( )
Ativado com a perda do foco no elemento
◦ .keypress( )
Ativado com o pressionar de qualquer tecla
◦ .keyup( ) / .keydown( )
Ativado com o pressionar/soltar a tecla
32. Acesse esse link: http://goo.gl/dLYCO
e baixe o arquivo que vamos usar.
Vamos incrementar a página usando jQuery
O que for digitado na caixa de texto deve
aparecer na tela.
47. //Validar
$("form").submit(function( ) {
var nome = $("input[name='nome']").val( );
var nasc = $("input[name='data']").val( );
var mail = $("input[name='email']").val( );
if(nome == ‘’){
alert("Preencha o campo nome.");
return false;
}
48. if(mail == ‘’){
alert("Preencha o campo email.");
return false;
}
if((nasc != ‘’)&&(! nasc.match(
/^[0-9]{2}/[0-9]{2}/[0-9]{4}$/))){
alert("Data de nascimento inválida.");
return false;
}
return true;
});