jQuery na Prática!

Apresentado por
José Alexandre Macedo

O que é jQuery?
Biblioteca JavaScript rápida e concisa que
simplifica percorrer documentos HTML,
manipular eventos, criar animações e
interações Ajax para um desenvolvimento
web rápido

O jQuery foi desenvolvido para mudar a forma
com que você escreve JavaScript!

Por que utilizá-lo?
• Aumento da produtividade
• 24kb (versão 1.4.2) para fazer tudo o que você
precisa
– requisições AJAX
– iteração e criação de elementos DOM
– tratamento de eventos
• Cross-browser
– Funciona no Internet Explorer 6.0+, Firefox 2.0+, Safari
2.0+ e Opera 9.0+
• Open Source

Manipulação de Elementos DOM
• DOM = Document Object Model
• Padrão da W3C que define um conjunto de objetos para o
HTML e forma de acessá-los e manipulá-los
– Todos os elementos HTML, assim como seus textos e atributos
podem ser acessados via DOM
– Podem ser modificados, removidos, e novos elementos podem
ser criados
• O HTML DOM é uma plataforma independente de
linguagem
– A linguagem mais usada para acessá-lo é o JavaScript (onde o
jQuery entra para facilitar as coisas)
• Window, Document, Table, IFrame, Link, Input Button,
InputRadio e Select são alguns dos objetos DOM.

A função $ ()
• Função para selecionar um ou mais elementos
DOM em uma página HTML e manipulá-los de
diversas formas
• É possível fazer outras chamadas subsequentes
para filtrar ou adicionar mais objetos a seleção
atual e manipulá-los
• O $ por si só é um alias para a "classe" jQuery

Preparando para o Hello World
• Colocar dentro da tag <head>
<script src="jquery.js" type="text/javascript"></script>
<script src="meujs.js" type="text/javascript"></script>

• Colocar dentro do <body>
<h1>Hello World com jQuery!</h1>
<a id="first" href="#">Link 0</a>
<a name="top" href="#">Link 1</a><a name="bottom" href="#">Link
2</a>
<div id="div1">
</div>

Hello World no jQuery!
• No arquivo meujs.js adicionar

$(document).ready(function() {
$("a").click(function() {
alert("Olá mundo!");
});
});

Hello World no jQuery!
• Vamos dar uma olhada no que estamos
fazendo:
– $("a") seleciona todos os elementos <a>
– A função click() é um método do objeto jQuery.
Liga o evento clique a todos os elementos
selecionados e executa a função fornecida quando
o evento ocorre
– Similar ao código:
• <a href="#" onclick="alert('Olá mundo')">Link</a>

Exercicio 1
• $('div').add('p.quote').html('um pequeno teste!');

• $("#rodape").css('color', 'red');
– Obtém o elemento com ID igual a rodapé e altera sua cor para
vermelho.
• $("button.classButtons").click(function() { alert('Bom Dia') });
– Obtém todos os elementos do tipo button com classe classButtons e
vincula o evento onclick (ao clicar) desse elemento à uma função que
exibe uma caixa de diálogo (alert)
• $('td').css("color","blue");
– Obtém todos os elementos td (células de tabelas) e para cada
elemento encontrado executa uma função que exibe uma caixa de
diálogo (alert) com ID do elemento
• $("tr:first").css("font-style","italic");
– Obtém apenas o primeiro elemento tr encontrado

Seleção Básica
• #id. Seleciona o elemento com determinado id
– Exemplo: $("#primDiv").css("background-color","black");
• elemento. Seleção pelo elemento HTML
– Exemplo: $("div").css("border","9px double red");
• .classe. Elementos de determinada classe
– Exemplo: $(".destaque").css("fontWeight","bolder");
• .classe.classe. Elementos que pertençam a ambas classes.
– Exemplo: $(".destaque. especial").css("color","red");
• *. Todos elementos
– Exemplo: $("*").css("color","black");
• Combinação dos anteriores com virgula
– Exemplo: $("div,span,p.olho").css("margin","3px 0 0 0");

Seleção Hierarquia
• Ascendente Descendente. Seleção de descendentes de
determinado elemento
– Exemplo: $("form label").css("color","gray");
• Pai > Filho. Seleção de elementos-filho de um determinado
elemento
– Exemplo: $("#conteudo > *") .css("border","2px solid green");
• Anterior + Seguinte. Seleção de elemento que segue-se a
um determinado elemento
– Exemplo: $("label + input").css("border","1px dotted blue");
• Anterior ~ Irmãos. Seleção de elementos-irmãos após
determinado elemento
– Exemplo: $("#inicio ~ div").css("color","aquamarine");

Seleção com Filtros
• :first. Primeiro elemento da seleção
– Exemplo: $("tr:first").css("font-style","italic");
• :last. Inverso de :first
• :not(seletor). Filtra elementos que não se encaixam em determinado seletor
– Exemplo: $("input:not(:checked) + span") .css("border","1px dotted darkSalmon");
• :even. Elementos com índice par, considerado que o índice inicia em zero.
– Exemplo: $("tr:even").css("background-color","lavender");
• :odd. Inverso de :even
• :eq(índice). Determinado elemento pelo seu índice
– Exemplo: $("td:eq(2)").css("background-color","MintCream");
• :gt(índice). Todos elementos com índice superior a determinado valor.
– Exemplo: $("p:gt(1)").hide();
• :lt(índice). Inverso de :gt(índice)
• :header. Todos elementos header
– Exemplo: $(":header").css("color","navy");
• :animated. Todos elementos que estão sendo animados no momento da seleção.

Seleção com Filtros de Conteúdo
• :contains(texto). Seleciona elementos que contenha
determinado texto
– Exemplo: $("p:contains('JQuery')").css("text-decoration","underline");
• :empty. Seleciona elementos sem filhos
– Exemplo: $("td:empty").css("background-color","MediumOrchid");
• :has(seletor). Seleciona elementos que contenham ao
menos um determinado elemento que combine com o
seletor informado
– Exemplo: $("div:has(p)").addClass("grade");
• :parent. Seleciona elementos que tenham elementos filhos
– Exemplo: $("td:parent").hide();

Seleção com Filtros de Visibilidade
• :hidden: Seleciona elementos ocultados
– Exemplo: $("div:hidden").show(2000);
• :visible. Inverso de :hidden

Seleção com Filtros de Atributos
• [atributo]. Elementos que contenham determinado atributo
– Exemplo: $("div[id]").css("color","lime");
• [atributo=valor]. Elementos com atributo que tenham determinado valor
– Exemplo: $("p[class='ocultar']").hide(3000);
• [atributo!=valor]. Elementos com atributo que não tenham determinado
valor
• [atributo^=valor]. Elementos com atributo que inicie com determinado
valor
– Exemplo: $("input[name^='req']").val("Requerido");
• [atributo$=valor]. Elementos com atributo que termine com determinado
valor
• [atributo*=valor]. Elementos com atributo que contenha determinado
valor
• Estes filtros podem ser combinados como neste exemplo:
$("input[type='text'][id]").css("color","Darkred");

Seleção por Elementos do formulário
• Também podem ser selecionados os elementos de formulários
como
– :input
– :text
– :password
– :radio
– :checkbox
– :submit
– :image
– :reset
– :button
– :file
• Exemplo
– $("form :checkbox").css("border","2px solid LightSlateGray");

Seleção por Estado dos Elementos de
Formulário
• Os elementos de formulários podem ter sua
seleção refinada pelo estado destes elementos
São exemplos
• :enabled
• :disabled
• :checked
• :selected
• Um exemplo de uso seria
– alert($("input:checked").length + " selecionados");

Exercicio 2 - Efeitos
• Dentro da tag <body>

<h1>Exercicio 2 com jQuery</h1>
<button id="btn1">Show div</button>
<button id="btn2">Desaparecer div</button>
<div class="texto" id="div1">
<p> Caixa de texto que aparecerá e desaparecerá
com as funções do jQuery!</p>
</div>

Exercicio 2 - Efeitos
• Dentro da arquivo meujs.js
$(document).ready(function() {
$("#btn1").click(function() {
$("#div1").fadeIn();
});
$("#div1").fadeOut();
});
});

Preparando o terreno
• Criar novo projeto Php
• Adicionar biblioteca jQuery
• Importar o caminho da biblioteca no <head>
• Criar uma página que receberá o código html
<button id="btn1">Carregar Feeds por ajax</button><div
class="texto" id="feeds">Ao carregar os feedseste texto
irá sumir!</div>

• Com jQuery realizar requisições ajax
tornou-se uma tarefa extramente trivial
– Adicionar no arquivo meujs.js
• $("#btn1").click(function() {

$("#feeds").load("feeds.html");

});

• Realiza uma requisição GET para feeds.html e insere o
resultado no elemento com ID igual a feeds

• Utilizando o post para enviar dados
• Adicionar o código html
<p>Envie algum dado por ajax!</p>
<input type="text" id="myInputText"/><br/>
<button id="btn2">Enviar texto por post</button>
<div class="texto" id="feedsPost">
Ao carregar os feeds(por ajax) este texto irá sumir!
</div>

• Utilizando o post para enviar dados
• Adicionar no meujs.js
$("#feedsPost").load("pagina.php", {
dado: $("#myInputText").val()
}, function(){
alert("Fim do carregamento dos dados!");
});
});

– Realiza uma requisição POST à página feeds.php passando o parâmetro
dado com o valor dadopassado

• Complemento para jQuery
• Conjunto de componentes para construção de interfaces gráficas
• Construção de componentes com funcionalidade de arrastar e
soltar (drag and drop)
• Componentes que podem ter seus tamanhos alterados (resizable)
• Componentes tradicionais
– Barras de progresso
– Accordion
– Calendário (date picker)
– Caixas de diálogo e confirmação
– Tab panels
– Inputs com auto-complete
• Com a mesma simplicidade anteriormente apresentada!

Preparando para utilizar jQuery UI
• Novo Projeto PHP
• Adicionar na tag <head>
<link type="text/css" href="libs/jquery-ui/css/ui-lightness/jquery-ui-
1.8.1.custom.css" rel="stylesheet" />
<script src="libs/jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="libs/jquery-ui/js/jquery-ui-
1.8.1.custom.min.js"></script>
<script src="libs/meujs.js" type="text/javascript"></script>

• Para cada exercício criar uma nova página

UI - Abas com conteúdo estático

<div id="abas">
No arquivo meujs.js
<ul>
<li><a href="#panel1">Panel 1</a></li>
<li><a href="#panel2">Panel 2</a></li>
<li><a href="#panel3">Panel 3</a></li> $("#abas").tabs();
</ul>
<div id="panel1">
<p>Conteudo do painel 1</p>
</div>
<div id="panel2">
</div>
<div id="panel3">
</div>
</div>

UI - Abas com conteúdo via ajax

<div id="abas"> No arquivo meujs.js
<ul>
<li><a
href="pag.php?dado=id1">Show $("#abas").tabs();
Time</a></li>
<li><a href="pag.php?dado=id2">
Show Small Numbers</a></li>
<li><a href="pag.php?dado=id3">
Show Big Numbers</a></li>
</ul>
</div>

UI - DataPicker
<h1>Exemplos 4 - jQuery UI DataPicker</h1>

<form action=#">
<table>
<tr><td align="right">
From: <input type="text"/></td></tr>
Departure Date: <input type="text" id="start-date"/></td></tr>
To: <input type="text"/></td></tr>
Return Date: <input type="text" id="end-date"/></td></tr>
<tr><td align="center">
<input type="button" value="Show Flights"/>
<input type="button" value="Show Hotels"/>
</td></tr>
</table>
</form>

UI - DataPicker
• No arquivo meujs.js

$("#start-date").datepicker();
$("#end-date").datepicker();

UI - Autocomplete

<h1>Exemplos 4 - jQuery UI No arquivo meujs.js
Autocomplete</h1>
var availableTags = ["c++", "java",
<label for="autoc">Tags: </label> "php", "coldfusion",
<input id="autoc" /> "javascript", "asp", "ruby",
"python", "c", "scala",
"groovy", "haskell", "perl"];
$("#autoc").autocomplete({
source: availableTags
});

UI - Button

Botões</h1>

$("button,
<button>Utilizando elemento
botão</button> input:submit,
a").button();
<input type="submit"
value="Utilizando input tipo
submit"/>

<a href="#">Utilizando tag a</a>

UI - Dialog

Dialog</h1>
<div id="dialog-modal" $("#dialog-modal").dialog({
title="Exemplo básico de janela height: 200,
com modal">
modal: true
<p>Adicione informações
dentor do seu dialog!</p> });
</div>

UI - Dragdrop

<div id="draggable" class="ui- No arquivo meujs.js
widget-content" style="width:
150px; height: 150px; padding: $("#draggable").draggable();
0.5em;">
<p>Arraste-me!</p>
</div>

Plugins
• Grande quantidade de plugins disponíveis
– validação de formulários
– componentes visuais
– datagrids
– tool tips
– slide shows
– formatação de números
– internacionalização
– efeitos visuais

Quero mais!
• Documentação Oficial jQuery
– http://docs.jquery.com/Main_Page
• Documentação com exemplos
– http://visualjquery.com/
• Tutorias
– http://docs.jquery.com/Tutorials
• 50 plugins
– http://www.noupe.com/jquery/50-amazing-jquery-examples-
part1.html
• Plugins
– http://plugins.jquery.com/
• Livro recomedado
– jQuery in Action

jQuery na Prática!

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (9)

Semelhante a jQuery na Prática!

Semelhante a jQuery na Prática! (20)

Mais de José Alexandre Macedo

Mais de José Alexandre Macedo (7)

jQuery na Prática!