Você está na página 1de 42
Apresentado por José Alexandre Macedo

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

Por que utilizá-lo?

Por que utilizá-lo?

Quem utiliza jQuery?

Quem utiliza jQuery?
Quem utiliza jQuery?
Quem utiliza jQuery?
Quem utiliza jQuery?
Quem utiliza jQuery?
Quem utiliza jQuery?

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

A função $ ()

A função $ () • Função para selecionar um ou mais elementos DOM em uma página

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

});

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>

função click() é um método do objeto jQuery. Liga o evento clique a todos os elementos

A

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

Possibilidades de seleção

Possibilidades de seleção

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:

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

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

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

});

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

});

Ajax com jQuery!

Ajax com jQuery!

Preparando o terreno

Preparando o terreno • Criar novo projeto Php • Adicionar biblioteca jQuery • Importar o caminho

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

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

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

$("#btn2").click(function() { $("#feedsPost").load("pagina.php", { dado: $("#myInputText").val() }, function(){ alert("Fim do carregamento dos dados!");

});

});

alert("Fim do carregamento dos dados!"); }); }); – Realiza uma requisição POST à página feeds.php

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

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

UI - Abas com conteúdo estático <div id="abas"> <ul> <li><a

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

UI - Abas com conteúdo via ajax

UI - Abas com conteúdo via ajax <div id="abas"> <ul> <li><a

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

</div>

</ul>

No arquivo meujs.js

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

UI - DataPicker

UI - DataPicker

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>

UI - DataPicker

No arquivo meujs.js

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

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

UI - Autocomplete

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

<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

});

UI - Button

UI - Button <h1>Exemplos 4 - jQuery UI Botões</h1> <button>Utilizando elemento

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

UI - Dialog

UI - Dialog <h1>Exemplos 4 - jQuery UI Dialog</h1> <div id="dialog-modal"

<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

});

UI - Dragdrop

UI - Dragdrop <div id="draggable" class="ui- widget-content" style="width: 150px; height: 150px;

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

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

Documentação com exemplos

Tutorias

50 plugins

Plugins

Livro recomedado

jQuery in Action

Duvidas?