Programação Web com jQuery

A melhor forma de escrever JavaScript

 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

 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

 É 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)

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

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

 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

 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

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

<html>
<body>
<p id="intro">Hello World!</p>
txt=document.getElementById("intro").innerHTML;
alert("O texto do paragrafo com o id 'info': " + txt);
</script>
</body>
</html>
Var txt = $(‘#intro’).val();
Com jQuery

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

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

 HTML:
<h1 id=“cor”>Cabeçalho muda de cor</h1>
<button type=“button” id=“btnRed”>
Vermelha
</button>

 JavaScript:
<script type="text/javascript">
window.onload = function( ){
document.getElementById('btnRed').onclick =
mudaCor;
}
function mudaCor( ){
document.getElementById('cor').style.color='#F00';
}
</script>

 jQuery:
<script type=“text/javascript”
src=“jquery.js”></script>
$(document).ready(function( ){
$(“#btnRed”).click(function( ) {
$(“#cor”).css(“color”, “#FF0000”);
});
});
</script>

 No javascript
window.onload = function( ){
Do this;
}
 No jQuery
$(document).ready(function( ){
Do this;
});

 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( ){ ... });

 Categorias:
◦ Básicos
◦ De atributo
◦ Hierárquicos
◦ Filtros
 Básicos
 De conteúdo
 Por visibilidade
 De filhos
◦ De formulários

◦ Universal
 $(“*”)
◦ De elemento
 $(“p”)
◦ De múltiplos elementos
 $(“p, h1, img”)
◦ De classe
 $(“.class”)
◦ De ID
 $(“#id”)

 Atributos
◦ .attr( nomeAtributo )
.attr( nomeAtributo, valor )
.removeAttr( nomeAtributo )
Ex: $(‘input’).attr(‘disabled’, ‘disabled’)
◦ .addClass( nomeClasse )
.removeClass( [nomeClasse] )
.hasClass( nomeClasse )
.toggleClass( nomeClasse )

 Inserção no DOM (Outside)
◦ .after( )
◦ .before( )
Ex: $("p").before("<b>Hello</b>");
 Inserção no DOM (Inside)
◦ .append( )
◦ .prepend( )
Ex: $("p").prepend("<b>Hello</b>");

 Inserção no DOM (Inside)
◦ .html( )
◦ .text( )
◦ .val( )
Ex: $(“div").html(“<button>botão</button>”);
 Inserção no DOM (Around)
◦ .wrap( )
Ex: $("p").wrap("<div></div>");

 Remoção no DOM
◦ .unwrap( )
◦ .empty( )
◦ .remove( )
 Substituição no DOM
◦ .replaceAll( )
◦ .replaceWith( )
 Cópias
◦ .clone( )

 HTML
<label>Colaboradores:</label>
<select class="copy" style="display:block;">
<option value="0">Selecione um...</option>
<option value="1">Ana</option>
<option value="2">João</option>
<option value="3">Maria</option>
</select>
<button id="novoColaborador">More</button>
<button id="removColaborador">Less</button>

 jQuery
$('#novoColaborador').click(function( ){
$('.copy:last').clone( ).appendTo('body');
});
$('#removColaborador').click(function( ){
$('.copy:last').remove( );
});

 Propriedades de estilo
◦ .css( )
Ex:
◦ var back = $(“div").css("background-color");
◦ $("p").css("color","red");
◦ $( this ).css({"width" : "+=100", "color" : "red"});

 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

 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

 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

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

 Básicos
◦ .show( )
◦ .hide( )
◦ .toggle( )
 Opacidade
◦ .fadeIn( )
◦ .fadeOut( )
◦ .fadeToggle( )
 Corrediços
◦ .slideDown( )
◦ .slideUp( )
◦ .slideToggle( )

 HTML
<div>
<h3>Titulo 1</h3>
<p>texto 1. Texto, texto e mais texto</p>
</div>
 jQuery
$('p').hide( );
$('h3').click(function( ){
$('p').hide( );
$(this).parent( ).find('p').show( );
});

 HTML
<div>
<h3>Titulo 1</h3>
<p>texto 1. Texto, texto e mais texto</p>
</div>
 jQuery
$('p').hide( );
$('h3').click(function( ){
$('p').hide( );
$(this).parent( ).find('p').show( );
}); Agora teste outros métodos:
.fadeIn( ) e .fadeOut( )
.slideDown( ) e .slideUp( )

 Customização
◦ .animate( )
◦ .delay( )
◦ .stop( )

◦ CSS
div {
background-color:#abc;
width:90px;
height:90px;
margin:5px;
font-size:1px;
}
◦ HTML
<button id="left">«</button>
<button id="right">»</button>
<div class="block">x</div>

◦ jQuery
$("#right").click(function( ){
$(".block").animate({"margin-left": "+=200px"}, "slow");
});
$("#left").click(function( ){
$(".block").animate({"margin-left": "-=200px"}, "slow");
});

◦ HTML
<button id="go">elem x</button>
◦ jQuery
$("#go").click(function( ){
$(".block").animate({
width: "70%",
opacity: 0.4,
marginLeft: "0.6in",
fontSize: "5em",
borderWidth: "10px"
}, 1500 );
});

 Baixe o arquivo: http://goo.gl/eo7MJ
 Ajude o Mário a chegar ao outro lado usando
o método animate() do jQuery.

 Eventos:
◦ .blur( )
◦ .change( )
◦ .focus( )
◦ .select( )
◦ .submit( )

◦ HTML
<form>
<input type="text" name="busca" />
</form>
◦ jQuery
$("input[name='busca']").val('Busca').css('color','#CCC')
.focus(function( ){
$(this).val('').css('color','#000');
}).blur(function( ){
$(this).val('Busca').css('color','#CCC');
});

 Vamos baixar o formulário e incrementá-lo
usando o jQuery. (http://goo.gl/ljccb)
 Começaremos analisando o código HTML do
formulário.

// Dicas de preenchimento
$(‘input + span').hide( );
$(".obrigatorio").blur(function( ){
var val = $(this).val( );
if(val == ""){
$(this).next( ).show( );
}else{
$(this).next( ).hide( );
}
});

//Desabilitar campos
$("#nao").change(function( ){
$("input[name='local']").val("")
.attr('disabled','disabled');
});
$("#sim").change(function( ){
$("input[name='local']")
.removeAttr('disabled');
});

//Selecionar todos
$("#all").click(function( ){
if(this.checked){
$(".curso").attr('checked','checked');
}else{
$(".curso").removeAttr('checked');
}
});

//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;
}

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;
});

 jQuery Documentation
 jQuery UI
 Plugins
 AJAX
 Compactação
 jQuery Mobile
 Testes
 Boas técnicas de programação

 http://jquery.com/
 http://ejohn.org/blog/selectors-in-javascript/
 http://bennolan.com/behaviour/
 http://www.w3schools.com/htmldom/default.asp
 jQuery – A Biblioteca do Programador JavaScript, 2008,
Maurício S. Silva, NOVATEC
 Ajax com jQuery – Requisições AJAX com a simplicidade de
jQuery, 2009, Maurício S. Silva, NOVATEC
Contato:
victorajoliveira@gmail.com
blogvictoradriel.blogspot.com

Programação Web com jQuery

Recomendados

Mais conteúdo relacionado

Mais procurados (20)

Destaque (7)

Semelhante a Programação Web com jQuery (20)

Mais de Victor Adriel Oliveira (7)

Último (6)

Programação Web com jQuery