54
jQuery Simplificando o JavaScript Everaldo Wanderlei Uavniczak [email protected]

jQuery Simplificando o JavaScript

Embed Size (px)

DESCRIPTION

Palestra ministrada na ULBRA de São Jerônimo em 2009, com pinceladas básicas sobre o jQuery.

Citation preview

Page 1: jQuery Simplificando o JavaScript

jQuerySimplificando o JavaScript

Everaldo Wanderlei Uavniczak [email protected]

Page 2: jQuery Simplificando o JavaScript

Sobre a apresentação

Nível:- Iniciante

Indicada para:- "Profissionais Web" (WebMaster, WebDesigners, WebDevelopers)- Programadores- Profissionais de Marketing Digital

Pré-requisitos:- Nenhum, embora HTML, JavaScript e CSS ajudam

Objetivo:Habilitar a quem nunca tenha programado em JavaScript o uso de jQuery nos seus projetos [de aplicação] Web

Page 3: jQuery Simplificando o JavaScript

WTF is jQuery?

jQuery é um framework para ajudar os desenvolvedores a se concentrarem na lógica dos sistemas da web e não nos problemas de incompatibilidade dos navegadores atuais. Seu lema é escrever menos e fazer mais "O foco principal da biblioteca jQuery é a simplicidade. Por que submeter os desenvolvedores ao martírio de escrever longos e complexos códigos para criar simples efeitos?" (John Resig - criador do jQuery)

Page 4: jQuery Simplificando o JavaScript

Características

Leve (56kb jquery-1.3.2.min.js)

Rápido

Simples

Extensível (plugin)

Cross-browser

Page 5: jQuery Simplificando o JavaScript

Compatibilidade

Firefox 1.5+Internet Explorer 6+Safari 2.0.2+Opera 9+

Apresenta problemas com:

FF 1.0.xIE 1-5.Safari 1.Safari 2.0Opera 1.0-8.5Konqueror

Page 6: jQuery Simplificando o JavaScript

Quem usa jQuery?

GoogleDellDiggMSNBCAmazonIntelBBCNewsweekAOLOracleCisco SystemsTechnoratiSourceforge

SalesforceNewsgatorThe OnionFeedburnerVodafoneLinux.comLogitechMozillaWordpressDrupalTracJoomlamuitos outros...

Page 7: jQuery Simplificando o JavaScript

Pra que serve?

Adicionar efeitos visuais e animação;Acessar e Manipular o DOM (Document Object Model) AJAX;Prover interatividade;Alterar Conteúdo;Modificar apresentação e estilização;Simplificar tarefas do JavaScript;Muito mais...

Page 8: jQuery Simplificando o JavaScript

O que jQuery permite

Utiliza seletores CSS para localizar elementos na estrutura da marcação HTML na página;

Realizar interação implícita (permite percorrer a estrutura dos elementos sem usar loop);

Utilizar programação encadeada (cada método retorna um objeto);

Etc...

Page 9: jQuery Simplificando o JavaScript

Obstrusivo X Não Obstrusivo

// OBSTRUSIVO: <p onclick="alert('teste');">bla bla bla</p> // NÃO OBSTRUSIVO: // jquery $('p.teste').onclick(function() { alert('teste');}); // html <p class="teste">bla bla bla</p>

Page 10: jQuery Simplificando o JavaScript

Como instalar

Baixe o arquivo no site em http://jquery.com/ e coloque o seguinte código entre as tags HEAD.

<html><head>...<script type="text/javascript" charset="utf-8" src="arquivo_jquery.js"></script> ...</head><body>...

Page 11: jQuery Simplificando o JavaScript

Workflow sugerido no Desenvolvimento Web

Vejam exemplos nos endereços abaixo 1) HTML (somente HTML)http://qfdb.net/workshop/jquery_workshop/cap_2/qfdb/index_nocss_nojquery.html

2) HTML + CSShttp://qfdb.net/workshop/jquery_workshop/cap_2/qfdb/index_css_nojquery.html

3) HTML + CSS + jQueryhttp://qfdb.net/workshop/jquery_workshop/cap_2/qfdb/index_css_jquery.html

4) HTML + CSS + jQuery + Firulas + Perfumarias + Etchttp://qfdb.net/workshop/jquery_workshop/cap_2/qfdb/index_css_jquery_firulas.html

Vejam também o "Menu do site do Maujor":http://www.livrojquery.com.br/cap_14/arquivo-14.2a.html

Page 12: jQuery Simplificando o JavaScript

Construtor jQuery

$()

Page 13: jQuery Simplificando o JavaScript

Funcionamento do jQuery

Encontre algo e faça alguma coisa $('p').css('color', 'blue');$('#teste').addClass('classe_para_teste');

ou

jQuery('p').css('color', 'blue');jQuery('#teste').addClass('classe_para_teste'); Métodos encadeados: $('p').children('b').css('color', blue').addClass('classe_bold').fadeOut();

Page 14: jQuery Simplificando o JavaScript

O método ready()Executa um código quando a página for carregada

Com JavaScript window.onload = function () { ... }

Com jQuery Modo Descritivo $(document).ready(function() { ... });

Modo Resumido $().ready(function() { ... }); Modo Simplificado (Abreviado) $(function() { ...}

Page 15: jQuery Simplificando o JavaScript

Seletores jQuery

$(expressão [, contexto]) Sem especificar o contexto $('div').css('color', 'blue'); $('div', $(document) ).css('color', 'blue'); Especificando o contexto $('p', $('#teste')).css('color', 'blue');

Page 16: jQuery Simplificando o JavaScript

Tipos de Seletores

Compreenda eles e compreenderá jQuery

Seletores GeraisSeletores SimplesSeletores CompostosSeletores FiltrosSeletores de ConteúdoSeletores de AtributoFiltro para Seletores-FilhoSeletores de Formulário *Filtros para Formulários *

Page 17: jQuery Simplificando o JavaScript

Seletores gerais

$(html) ou $(text)

Adicionam conteúdo HTML ou Texto na página

// adiciona conteúdo HTML no documento,// no final da TAG HTML BODY $('<p>teste peste</p>').prependTo('body'); $('teste peste').prependTo('body');

Page 18: jQuery Simplificando o JavaScript

Seletores Simples

Acessam elementos, classes, identificadores ou todos eles combinados

Elementos

$('p').css('color', 'blue');

Classes (class)$('.classe_teste').css('color', 'blue');

Identificadores (id)$('#teste_peste').css('color', 'blue');

Combinações$('p, li, #teste, li.classe, .xyz').css('color', 'blue');

Page 19: jQuery Simplificando o JavaScript

Seletores Compostos (1)

$(ancestral descendente)

// acessa o elemento B que tenha como//ancestral um elemento DIV

$('div b').css('color', 'blue');DIV B -> OK I B -> OK/DIV

Page 20: jQuery Simplificando o JavaScript

Seletores Compostos (2)$(pai > filho)

// Acessa todos elementos P que tenham// um elemento DIV como pai

$('div > p').css('color', 'blue');DIV P -> OK DIV P -> OK P -> OK H2/DIV

Page 21: jQuery Simplificando o JavaScript

Seletores Compostos (3)$(anterior + posterior)

// Acessa o elemento P que segue // o elemento DIV

$('div + p').css('color', 'blue');DIV P -> OK P P P/DIV

Page 22: jQuery Simplificando o JavaScript

Seletores Compostos (4)$(anterior ~ irmãos)

// Acessa todos P que são irmãos // e descendentes de H1 $('h1 ~ p').css('color', 'blue');PH1 P -> OK DIV P -> OK P -> OK DIV

Page 23: jQuery Simplificando o JavaScript

Seletores Filtros (1)

$(seletor:first), $(seletor:last) $('li:first').css('color', 'blue');$('li:last').css('color', 'blue');

UL LI -> OK (first) LI LI LI -> OK (last)/UL

Page 24: jQuery Simplificando o JavaScript

Seletores Filtros (2)

$(seletor:not(seletor2)) $('li:not(li:first)').css('color', 'blue');

UL LI LI -> OK LI -> OK LI -> OK/UL

Page 25: jQuery Simplificando o JavaScript

Seletores Filtros (3)$(seletor:even), $(seletor:odd)

Seletores não previsto nas CSS

$('tr:even').css('color', 'blue');$('tr:odd').css('color', 'lime');TABLE TR -> OK even TR -> OK odd TR -> OK even TR -> OK odd TR -> OK even/TABLE

Page 26: jQuery Simplificando o JavaScript

Seletores Filtros (4)$(seletor:eq(índice))

Seletores não previsto nas CSS

Contagem inicia em 0 (zero) $('li:eq(1)').css('color', 'blue');UL LI LI -> OK // elemento de índice 1 LI LI/UL

Page 27: jQuery Simplificando o JavaScript

Seletores Filtros (5)$(seletor:gt(índice)), $(seletor:lt(índice))

Seletores não previsto nas CSS

Contagem inicia em 0 (zero)

$('li:gt(2)').css('color', 'blue');$('li:gt(2)').css('color', 'blue'); UL LI -> OK lt LI -> OK lt LI LI -> OK gt LI -> OK gt/UL

Page 28: jQuery Simplificando o JavaScript

Seletores Filtros (6)$(:header)

Seletores não previsto nas CSS

$(':header').css('color', 'blue');

H1 -> OK H2 -> OK H3 -> OK H2 -> OK H2 -> OK H3 -> OK H4 -> OK

Page 29: jQuery Simplificando o JavaScript

Seletores de Conteúdo (1)$(seletor:contains(texto))

Seletores não previsto nas CSS

$('p:contains(teste)').css('color', 'blue');

P (conteúdo do parágrafo) /PDIV (conteúdo de teste) /DIVP (conteúdo de teste 2) /P -> OK

Page 30: jQuery Simplificando o JavaScript

Seletores de Conteúdo (2)$(seletor:empty)

Seletor previsto na CSS3

$('td:empty').css('color', 'blue');TABLE TR TD () -> OK TD (conteúdo da célula) TD (outro conteúdo) TD () -> OK TD (mais conteúdo) /TR/TABLE

Page 31: jQuery Simplificando o JavaScript

Seletores de Conteúdo (3)$(seletor1:has(seletor2))

Seletor não previsto nas CSS

$('p:has(b)').css('color', 'blue');

P B /B /P -> OKP /Pp I /I B /B /P -> OKP I U /U /I /P

Page 32: jQuery Simplificando o JavaScript

Seletores de Conteúdo (3) $(seletor:parent)

Seletor não previsto nas CSS

// Acessa elementos que tenham// elementos-filhos, ou text-nodes

$('p:parent').css('color', 'blue');

P (texto) /P -> OKP /PP (teste) /P -> OK

Page 33: jQuery Simplificando o JavaScript

Seletores de Atributo (1) $(seletor[atributo])

Seletor previsto pela CSS3

// Acessa quem possui um atributo não vazio $('p[title]').css('color', 'blue');PDIVP title='x' -> OKP title='x' class='x' -> OKPP id='x' class='x'

Page 34: jQuery Simplificando o JavaScript

Seletores de Atributo (2) $(seletor[atributo = "valor"])

Seletor previsto pela CSS3

// Acessa quem possui atributo = valor $('p[lang = "en"]').css('color', 'blue');P lang="pt"P lang="pt-BR"P lang="en" -> OKP lang="pt"

Page 35: jQuery Simplificando o JavaScript

Seletores de Atributo (3) $(seletor[atributo != "valor"])

Seletor previsto pela CSS3

// Acessa quem tem atributo com o valor// diferente de "valor" $('p[lang != "en"]').css('color', 'blue');P -> OK // lang="" (vazio)P lang="pt" -> OKP lang="pt-BR" -> OKP lang="en"P lang="pt" -> OK

Page 36: jQuery Simplificando o JavaScript

Seletores de Atributo (4) $(seletor[atributo ^= "valor"])

Seletor previsto pela CSS3

// Acessa quem tem atributo com o valor// iniciando com "valor" $('p[atributo ^= "pt"]').css('color', 'blue');P P lang="pt" -> OKP lang="en"P lang="pt" -> OKP lang="pt-br" -> OKP lang="pl"

Page 37: jQuery Simplificando o JavaScript

Seletores de Atributo (5) $(seletor[atributo $= "valor"])

Seletor previsto pela CSS3

// Acessa quem tem atributo com o valor// iniciando por "valor" $('p[atributo $= "t"]').css('color', 'blue');P P lang="pt" -> OKP lang="en"P lang="pt" -> OKP lang="pt-br"P lang="xyzt" -> OK

Page 38: jQuery Simplificando o JavaScript

Seletores de Atributo (6) $(seletor[atributo *= "valor"])

Seletor previsto pela CSS3

// Acessa quem tem atributo com o valor// contendo o "valor" $('p[title *= "teste"]').css('color', 'blue');

P title="teste peste" -> OKP title="o teste" -> OKP title="o teste bla " -> OKP title="bla bla bla "

Page 39: jQuery Simplificando o JavaScript

Seletores de Atributo (7) $(seletor[filtro-1][filtro-2]...[filtro-n])

Seletor previsto pela CSS3

// Acessa quem contempla todas regras $('p[lang^="pt"][id][class*="teste"]').css('color','blue');

P id class="teste"P id class="ab teste ba" lang="pt-BR" -> OKP id class="teste" lang="pt" -> OKP

Page 40: jQuery Simplificando o JavaScript

Filtro para seletores-filho (1) $(seletor:first-child), $(seletor:last-child)

Seletor previsto pela CSS3

$('ol li:first-child').css('color', 'blue');$('ol li:last-child').css('color', 'blue');OL LI -> OK first-child LI LI LI -> OK last-child/OL

Page 41: jQuery Simplificando o JavaScript

Filtro para seletores-filho (2) $(seletor:only-child)

Seletor previsto pela CSS3

$('ol li:only-child').css('color', 'blue'); OL LI LI LI/OLOL LI -> OK/OL

Page 42: jQuery Simplificando o JavaScript

Filtro para seletores-filho (3) $(seletor:nth-child(índice/even/odd/equação))

Seletor previsto pela CSS3

Ih, agora F%#@#!!!!

Page 43: jQuery Simplificando o JavaScript

$(function() { $('button').click(function () { $('li:nth-child(3n-2)').css('background', 'blue'); $('li:nth-child(3n-1)' ).css('background', 'white'); $('li:nth-child(3n)' ).css('background', 'black'); });});<ul id="exercicio" style="background: white;"> <li>Item # 1</li> - azul <li>Item # 2</li> - branco <li>Item # 3</li> - preto <li>Item # 4</li> - azul <li>Item # 5</li> - branco <li>Item # 6</li> - preto <li>Item # 7</li> - azul <li>Item # 8</li> - branco <li>Item # 9</li> - preto</ul>

Page 44: jQuery Simplificando o JavaScript

Manipulação de DOM

Permite alterar propriedades dos elementos

Maiores detalhes acesse:http://www.livrojquery.com.br/download.php http://localhost/work/jquery_workshop

Page 45: jQuery Simplificando o JavaScript

Manipulação de atributos$().attr(nome_atributo) - retorna valor de um atributo

var classe = $('#teste').attr('class'); $().attr({atributo:valor}) - seta valor(es) de atributos do elemento

$('#teste').attr({ title:"teste", class:"testepeste", lang:'pt-BR'});

$().attr(atributo, valor) - seta o valor de um atributo do elemento $('#teste').attr('title', 'Big Teste Peste');

$().removeAttr(atributo) - remove um atributo do elemento$('#teste').removeAttr('title');

Page 46: jQuery Simplificando o JavaScript

Manipulando o atributo class

$().addClass('valor_classe') - adiciona uma classe $('p.testepeste').addClass('teste_classe');

$().hasClass('valor_classe' verifica se o elemento possui uma classe

var existe = $('#testepeste').hasClass('teste');

$().removeClass('valor_classe') - remove a classe$('p.testepeste').removeClass('teste_classe');

$().toggleClass('nome_da_classe')Adiciona uma classe se não existir e vice-versa

$('#testepeste').toggleClass('teste');

Page 47: jQuery Simplificando o JavaScript

Eventos

Permitem interagir com o usuário.

Exemplos de eventos:- blur- change- mouseover- mouseout- keypress- submit- etc...

Acessem: http://qfdb.net/workshop/jquery_workshop/cap_5/eventos_auxiliares.html

Page 48: jQuery Simplificando o JavaScript

// head$(function() { $('button').click(function () { $('ul li:lt(5)').css('color', 'green'); $('ul li:gt(4)').css('color', 'red'); $('ul li:odd').css('fontStyle', 'italic'); $('ul li:odd').css('fontWeight', 'bolder'); $('ul li:nth-child(3n-2)').css('background', 'blue'); $('ul li:nth-child(3n)' ).css('background', 'black'); });});// body<ul id="exercicio" style="background: white;"> <li>Item # 1</li> <li>Item # 2</li> <li>Item # 3</li> <li>Item # 4</li> <li>Item # ...</li> <li>Item # 10</li></ul><button type="button" style="background: yellow;">Testar o script </button>

Page 49: jQuery Simplificando o JavaScript

Efeitos

Permitem colocar efeito e animações nas páginas, como ocultar, controlando os seguintes aspectos:

VisibilidadeEfeito de OpacidadeEfeito CorrediçoEtc...

Acessem:http://www.livrojquery.com.br/cap_06/arquivo-6.2a.html http://www.livrojquery.com.br/cap_06/arquivo-6.4a.htmlhttp://qfdb.net/workshop/jquery_workshop/cap_6/efeitos.html

Page 50: jQuery Simplificando o JavaScript

Plugins

Permitem adicionar novas funcionalidades ao jQuery

Como adicionar um plugin???

Para adicionar um plugin basta adicionar o arquivo após o arquivo do jQuery.

Por exemplo:<script type="text/javascript" charset="utf-8" src="jquery.js"></script><script type="text/javascript" charset="utf-8" src="jquery.corner.js"></script>

Page 51: jQuery Simplificando o JavaScript

Como usar um plugin? Acessem o site do plugin "corner": http://www.malsup.com/jquery/corner/

Page 52: jQuery Simplificando o JavaScript

Referências

http://www.livrojquery.com.br/

Page 53: jQuery Simplificando o JavaScript

Referências

Português http://www.livrojquery.com.br/http://qfdb.net/workshop/jquery_workshop/

Inglês

http://visualjquery.com/ neilmiddleton.com/presentations/jQuery%20in%20a%20nutshell.pdfjquery.comdocs.jquery.comjquery.com/pluginslearningjquery.com

Page 54: jQuery Simplificando o JavaScript

Perguntas