Programação Web com jQuery

 Victor Adriel de J. Oliveira
 Associação Empresa Júnior de Computação:
◦ 2008 – Trainee
◦ 2009 – Diretor Administrativo/Financeiro
◦ 2010 – Conselheiro Fiscal
 Programação Web:
[HTML/CSS (tableless), jQuery, PHP, Smarty]
 Contato: victorajoliveira@gmail.com
 blogvictoradriel.blogspot.com

 O que é
 Sintaxe
◦ Seletores
◦ Manipulação do DOM
◦ CSS
◦ Eventos
◦ Efeitos
◦ Formulários
 jQuery UI
 Práticas

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

 22/08/2005
◦ “The premise for the module is as follows: Using
the power of Pseudo-CSS Selectors, bind your
Javascript functions to various HTML elements in
the DOM. Looking at how Behaviour works, I've
never been completely happy - it simply seems too
tedious and verbose for everyday use.” (John Resig)
 14/01/2006
◦ jQuery: New Wave Javascript

 22/08/2005
◦ “The premise for the module is as follows: Using
the power of Pseudo-CSS Selectors, bind your
Javascript functions to various HTML elements in
the DOM. Looking at how Behaviour works, I've
never been completely happy - it simply seems too
tedious and verbose for everyday use.”
 14/01/2006
◦ jQuery: New Wave Javascript
“Jquery is like behaviour that has been sent back from
the future by a secret fucking government lab”
Zombieland

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

 JavaScript in-line:
◦ CSS
<style type=“text/css”>
h1 { color:#090; }
</style>
◦ HTML com o JavaScript in-line
<h1 id=“cor”>Cabeçalho muda de cor</h1>
<button type=“button”
onclick=“document.getElementById(‘cor’).style.color
=‘#F00’;”>Vermelha</button>

 Função JavaScript:
function mudaCor() {
document.getElementById(‘cor’).style.color=‘#F00’;
}
</script>
◦ HTML
<h1 id=“cor”>Cabeçalho muda de cor</h1>
<button type=“button”
onclick=“mudaCor();”>Vermelha</button>

 JavaScript fora da marcação:
Window.onload = function(){
Document.getElementById(‘btnRed’).onclick =
mudaCor;
}
function mudaCor() {
document.getElementById(‘cor’).style.color=‘#F00’;
}
</script>

 JavaScript fora da marcação:
◦ HTML
<h1 id="cor">Cabeçalho muda de cor</h1>
<button type="button"
id=“btnRed">Vermelha</button>

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

 Método ready()
◦ No javascript
window.onload = function(){
Do this;
}
◦ No jQuery
Do this;
});

 Construtor jQuery
◦ $( )
◦ jQuery( )
 jQuery.noConflict( )
◦ Usa o alias jQuery ou outro de sua preferência

 jQuery adota os seletores CSS 3! #ôPelaDoido
 É necessário rever a terminologia aplicada aos
elementos que compõem a árvore do
documento.

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

 Básicos
◦ Universal
 $(“*”)
◦ De elemento
 $(“p”)
◦ De múltiplos elementos
 $(“p, h1, img”)

 Básicos
◦ De classe
 $(“.class”)
◦ De ID
 $(“#id”)

 De atributo
 $(‘[nome]’)
 $(‘[nome = “valor”]’)
 $(‘[nome != “valor”]’)
 $(‘[nome ^= “valor”]’)
 $(‘[nome |= “valor”]’)

 De atributo
 $(‘[nome *= “valor”]’)
 $(‘[nome ~= “valor”]’)
 $(‘[nome $= “valor”]’)
 $(‘[nome = “valor”][nome2 = “valor2”]’)

 Hierárquicos
 $(“ancestral descendente”)
 $(“pai > filho”)
 $(“anterior + posterior”)
 $(“elemento ~ irmãos”)

 Atributos gerais
◦ .attr( nomeAtributo )
.attr( nomeAtributo, valor )
Ex: $(‘input’).attr(‘disabled’, ‘disabled’)
◦ .prop( nomePropriedade )
.prop( nomePropriedade, valor )
Ex: $(‘input’).prop({
disabled: true
});

◦ .removeAttr( nomeAtributo )
◦ .removeProp( nomePropriedade )
Ex: $(“input”).removeProp(“checked”);
◦ .val( )
.val( valor )
Ex: $(“input”).val(‘Digite seu nome’);

 Atributos de classe
◦ .addClass( nomeClasse )
◦ .removeClass( [nomeClasse] )
◦ .hasClass( nomeClasse )
◦ .toggleClass( nomeClasse )
.toggleClass( nomeClasse, switch )
.toggleClass( [switch] )

 HTML
<body>
<img src=" http://goo.gl/kQBXL"
alt="Yao Ming" />
<div class="info"></div>
</body>

 jQuery
var atrAlt = $('img').attr('alt');
$('div').text(atrAlt );
$('img').attr('title','Você perdeu a
capacitação?');
});

 CSS
<style type=“text/css”>
.info{ color: red; }
.highlight { background: yellow; }
</style>

 jQuery
$('div').removeClass('info');

 jQuery
$('div').removeClass('info').addClass('highlight');

 jQuery
$('div').removeClass('info').addClass('highlight');
var ctd=0;
$('div').click(function( ){
ctd++;
$('div').toggleClass('highlight', ctd % 3 == 0);
});

 Inserção no DOM (Outside)
◦ .after( )
◦ .before( )
Ex: $("p").before("<b>Hello</b>");
◦ .insertAfter( )
◦ .insertBefore( )
Ex: $("p").insertBefore("#smthng");

 Inserção no DOM (Inside)
◦ .append( )
◦ .prepend( )
Ex: $("p").prepend("<b>Hello</b>");
◦ .appendTo( )
◦ .prependTo( )
Ex: $("p").prependTo("#smthng");

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

 Inserção no DOM (Around)
◦ .wrap( )
◦ .wrapAll( )
◦ .wrapInner( )
◦ CSS
div { border: 2px solid blue; }
p { background:yellow; margin:4px; }
◦ HTML
<p>Hello</p>
◦ jQuery
$("p").wrap("<div></div>");

 Remoção no DOM
◦ .unwrap( )
 Remove o pai e coloca o filho no lugar
◦ .empty( )
 Remove conteúdo do elemento
◦ .detach( )
 Remove elementos mas permite recuperá-los
◦ .remove( )
 Remove elementos completamente

 Substituição no DOM
◦ .replaceAll( )
◦ .replaceWith( )
Ex:
◦ $("<b>Paragraph. </b>").replaceAll("p");
◦ $("p").replaceWith("<b>Paragraph. </b>");
 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"});

 Dimensionamento
◦ .height( ) / .width( )
◦ .innerHeight( ) / .innerWidth( )
◦ .outerHeight( ) / .outerWidth( )

 Offset
◦ .offset( )
◦ .position( )
Ex:
var pos = $("p").position( );
alert( pos.left );
◦ .scrollLeft( ) / .scrollTop( )
Ex: $(“div").scrollLeft(300);

 Diferença entre offset e position:
◦ CSS
div { padding: 15px;}
p { margin-left:10px; }
◦ HTML
<div><p>Hello</p></div>
<p></p>
◦ jQuery
var pos = $("p:first").position( );
$("p:last").text( "left: "+ pos.left + ", top: "+
pos.top );

◦ CSS
#box {background: black; color: #fff; width:100px;}
◦ HTML
<div id="box">Click me to grow</div>
◦ jQuery
$("#box").click(function ( ) {
$( this ).css( "width","+=200" );
});

 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

 Vamos usar o jsbin para treinar
<body>
<p>Pressione o mouse aqui.</p>
<script>
$("p").mouseup(function( ){
$(this).append('<span style="color:#F00;">Up.</span>');
}).mousedown(function(){
$(this).append('<span style="color:#00F;">Down.</span>');
});
</script>
</body>

 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

 Além dos eventos do mouse e teclado vocês
devem estudar mais sobre:
 Event Handler Attachment
 Objetos de eventos
 Eventos do browser
 Carregando o documento

 Agora vamos brincar um pouquinho ^^
 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.

 Categorias
◦ Básicos
◦ De opacidade
◦ Corrediços
◦ De customização

 Básicos
◦ .hide( )
◦ .show( )
◦ .toggle( )

 Opacidade
◦ .fadeIn( )
◦ .fadeOut( )
◦ .fadeTo( )
◦ .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 );
});

◦ HTML
<button id=“stop">STOP</button>
◦ jQuery
$("#stop").click(function( ){
$(".block").stop( );
});

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

 Seletores para formulários:
◦ :button
◦ :checkbox
◦ :input
◦ :text
◦ :radio
◦ :submit
◦ :reset
◦ :password
◦ :selected
◦ ...

 Seletores para formulários:
◦ :button
◦ :checkbox
◦ :input
◦ :text
◦ :radio
◦ :submit
◦ :reset
◦ :password
◦ :selected
◦ ...
Ex:
$(“input:password”).css(“color”, “#CCC”);

 Eventos relacionados a formulários:
◦ .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/Feq7L)
 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;
});

 Provê abstrações para interações e animações
de baixo-nível, efeitos avançados e
ferramentas personalizáveis construídas
sobre a biblioteca jQuery.

 Interações
◦ Draggable
◦ Droppable
◦ Resizable
◦ Selectable
◦ Sortable

 Widgets
◦ Accordion
◦ Autocomplete
◦ Button
◦ Datepicker
◦ Dialog
◦ Progressbar
◦ Slider
◦ Tabs

var nomes= [
"Beatriz Silva",
"Eduardo Dantas",
"Ivan Cezanne",
"Janai Maciel",
"José Adão",
"Newton Costa",
"Thiago Evangelista"];
$( "input[name='nome']" )
.autocomplete({ source: nomes });

 HTML
<div id="dialog" title="Muaahaa">
<p>Cuidado: Vírus! Não feche essa pop-up.</p>
</div>
 jQuery
$( "#dialog" ).dialog();

<div id="tabs">
<ul>
<li><a href="#tabs-1">Um item</a></li>
<li><a href="#tabs-2">Outro</a></li>
<li><a href="#tabs-3">Mais um</a></li>
</ul>
<div id="tabs-1">
<p>Um texto aqui.</p>
</div>
<div id="tabs-2">
</div>
<div id="tabs-3">
</div>
</div> jQuery:
$( "#tabs" ).tabs( );

<div id="accordion">
<h3><a href="#">Um item</a></h3>
<div>
<p>Um texto aki</p>
</div>
<h3><a href="#">Outro</a></h3>
<div>
<p>Um texto aki</p>
</div>
<h3><a href="#">Mais um</a></h3>
<div>
<p>Um texto aki</p>
</div>
</div>
jQuery:
$( "#accordion" ).accordion( );

 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

Programação Web com jQuery

Recomendados

Mais conteúdo relacionado

Mais procurados (20)

Destaque (6)

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

Programação Web com jQuery