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!

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (9)

Ähnlich wie jQuery na Prática!

Ähnlich wie jQuery na Prática! (20)

Mehr von José Alexandre Macedo

Mehr von José Alexandre Macedo (7)

Kürzlich hochgeladen

Kürzlich hochgeladen (8)

jQuery na Prática!