jQuery na Prática!

42
Apresentado por José Alexandre Macedo

description

Aula apresentada por mim na disciplina de Tópicos Especiais 2

Transcript of jQuery na Prática!

Page 1: jQuery na Prática!

Apresentado por

José Alexandre Macedo

Page 2: jQuery na Prática!

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!

Page 3: jQuery na Prática!

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

Page 4: jQuery na Prática!

Por que utilizá-lo?

Page 5: jQuery na Prática!

Quem utiliza jQuery?

Page 6: jQuery na Prática!

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.

Page 7: jQuery na Prática!

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

Page 8: jQuery na Prática!

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>

Page 9: jQuery na Prática!

Hello World no jQuery!

• No arquivo meujs.js adicionar

$(document).ready(function() { $("a").click(function() {

alert("Olá mundo!");

});

});

Page 10: jQuery na Prática!

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>

Page 11: jQuery na Prática!

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

Page 12: jQuery na Prática!

Possibilidades de seleção

Page 13: jQuery na Prática!

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

Page 14: jQuery na Prática!

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

Page 15: jQuery na Prática!

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.

Page 16: jQuery na Prática!

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

Page 17: jQuery na Prática!

Seleção com Filtros de Visibilidade

• :hidden: Seleciona elementos ocultados

– Exemplo: $("div:hidden").show(2000);

• :visible. Inverso de :hidden

Page 18: jQuery na Prática!

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

Page 19: jQuery na Prática!

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

Page 20: jQuery na Prática!

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

Page 21: jQuery na Prática!

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>

Page 22: jQuery na Prática!

Exercicio 2 - Efeitos

• Dentro da arquivo meujs.js

$(document).ready(function() {

$("#btn1").click(function() {

$("#div1").fadeIn();

});

$("#btn2").click(function() {

$("#div1").fadeOut();

});

});

Page 23: jQuery na Prática!

Ajax com jQuery!

Page 24: jQuery na Prática!

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>

Page 25: jQuery na Prática!

• 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

Page 26: jQuery na Prática!

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

Page 27: jQuery na Prática!

• Utilizando o post para enviar dados

• Adicionar no meujs.js$("#btn2").click(function() {

$("#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

Page 28: jQuery na Prática!
Page 29: jQuery na Prática!

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

Page 30: jQuery na Prática!

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

Page 31: jQuery na Prática!

UI - Abas com conteúdo estático

<div id="abas">

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

</ul>

<div id="panel1">

<p>Conteudo do painel 1</p>

</div>

<div id="panel2">

<p>Conteudo do painel 2</p>

</div>

<div id="panel3">

<p>Conteudo do painel 3</p>

</div>

</div>

No arquivo meujs.js

$("#abas").tabs();

Page 32: jQuery na Prática!

UI - Abas com conteúdo via ajax

<div id="abas">

<ul>

<li><a href="pag.php?dado=id1">Show 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>

No arquivo meujs.js

$("#abas").tabs();

Page 33: jQuery na Prática!

UI - DataPicker

Page 34: jQuery na Prática!

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

<form action=#">

<table>

<tr><td align="right">

From: <input type="text"/></td></tr>

<tr><td align="right">

Departure Date: <input type="text" id="start-date"/></td></tr>

<tr><td align="right">

To: <input type="text"/></td></tr>

<tr><td align="right">

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>

Page 35: jQuery na Prática!

UI - DataPicker

• No arquivo meujs.js

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

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

Page 36: jQuery na Prática!

UI - Autocomplete

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

<label for="autoc">Tags: </label>

<input id="autoc" />

No arquivo meujs.js

var availableTags = ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "perl"];

$("#autoc").autocomplete({

source: availableTags

});

Page 37: jQuery na Prática!

UI - Button

<h1>Exemplos 4 - jQuery UI Botões</h1>

<button>Utilizando elemento botão</button>

<input type="submit" value="Utilizando input tipo submit"/>

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

No arquivo meujs.js

$("button,

input:submit,

a").button();

Page 38: jQuery na Prática!

UI - Dialog

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

<div id="dialog-modal" title="Exemplo básico de janela com modal">

<p>Adicione informações dentor do seu dialog!</p>

</div>

No arquivo meujs.js

$("#dialog-modal").dialog({

height: 200,

modal: true

});

Page 39: jQuery na Prática!

UI - Dragdrop

<div id="draggable" class="ui-widget-content" style="width: 150px; height: 150px; padding: 0.5em;">

<p>Arraste-me!</p>

</div>

No arquivo meujs.js

$("#draggable").draggable();

Page 40: jQuery na Prática!

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

Page 42: jQuery na Prática!

Duvidas?