Upload
vannga
View
213
Download
0
Embed Size (px)
Citation preview
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?
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 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
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: $("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();
});
$("#btn2").click(function() {
$("#div1").fadeOut();
});
});
Ajax com jQuery!
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$("#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
• 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">
<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
<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();
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
<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
<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
<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
<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– 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
Duvidas?