Simplificando o Javascrip

jQuery
Simplificando o JavaScript

Everaldo Wanderlei Uavniczak
everaldouav@gmail.com

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

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)

Características
Leve (56kb jquery-1.3.2.min.js)

Rápido

Simples

Extensível (plugin)

Cross-browser

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

Apresenta problemas com:
FF 1.0.x
IE 1-5.
Safari 1.
Safari 2.0
Opera 1.0-8.5
Konqueror

Quem usa jQuery?
Google
Dell
Digg
MSNBC
Amazon
Intel
BBC
Newsweek
AOL
Oracle
Cisco Systems
Technorati
Sourceforge

Salesforce
Newsgator
The Onion
Feedburner
Vodafone
Linux.com
Logitech
Mozilla
Wordpress
Drupal
Trac
Joomla
muitos outros...

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

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

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>

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

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 + CSS
http://qfdb.net/workshop/jquery_workshop/cap_2/qfdb/index_css_nojquery.html

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

4) HTML + CSS + jQuery + Firulas + Perfumarias + Etc
http://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

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

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() { ...}

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

Tipos de Seletores
Compreenda eles e compreenderá jQuery
Seletores Gerais
Seletores Simples
Seletores Compostos
Seletores Filtros
Seletores de Conteúdo
Seletores de Atributo
Filtro para Seletores-Filho
Seletores de Formulário *
Filtros para Formulários *

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

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

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

$(pai > filho)
// Acessa todos elementos P que tenham
// um elemento DIV como pai
$('div > p').css('color', 'blue');
DIV
P
DIV
P
P
H2
/DIV

-> OK
-> OK
-> OK

$(anterior + posterior)

// Acessa o elemento P que segue
// o elemento DIV
$('div + p').css('color', 'blue');
DIV
P
P
P
P
/DIV

-> OK

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

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

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

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

$(seletor:even), $(seletor:odd)
Seletores não previsto nas CSS
$('tr:even').css('color', 'blue');
$('tr:odd').css('color', 'lime');
TABLE
TR
TR
TR
TR
TR
/TABLE

->
->
->
->
->

OK
OK
OK
OK
OK

even
odd
even
odd
even

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

// elemento de índice 1

$(seletor:gt(índice)), $(seletor:lt(índice))
Contagem inicia em 0 (zero)
$('li:gt(2)').css('color', 'blue');
$('li:gt(2)').css('color', 'blue');
UL
LI
LI
LI
LI
LI
/UL

-> OK lt
-> OK lt
-> OK gt
-> OK gt

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

H1
H2
H3
H2
H2
H3
H4

->
->
->
->
->
->
->

OK
OK
OK
OK
OK
OK
OK

Seletores de Conteúdo (1)
$(seletor:contains(texto))
$('p:contains(teste)').css('color', 'blue');

P (conteúdo do parágrafo) /P
DIV (conteúdo de teste) /DIV
P (conteúdo de teste 2) /P

-> OK

$(seletor:empty)
Seletor previsto na CSS3
$('td:empty').css('color', 'blue');
TABLE
TR
TD
TD
TD
TD
TD
/TR
/TABLE

()
(conteúdo da célula)
(outro conteúdo)
()
(mais conteúdo)

-> OK

-> OK

$(seletor1:has(seletor2))
Seletor não previsto nas CSS

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

P
P
p
P

B /B

/P
/P
I /I B /B /P
I U /U /I /P

-> OK
-> OK

$(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
P (teste)

/P
/P
/P

-> OK
-> OK

Seletores de Atributo (1)
$(seletor[atributo])
Seletor previsto pela CSS3
// Acessa quem possui um atributo não vazio
$('p[title]').css('color', 'blue');
P
DIV
P title='x'
-> OK
P title='x' class='x' -> OK
P
P id='x' class='x'

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

lang="pt"
lang="pt-BR"
lang="en"
-> OK
lang="pt"

$(seletor[atributo != "valor"])
// Acessa quem tem atributo com o valor
// diferente de "valor"
$('p[lang != "en"]').css('color', 'blue');
P
P
P
P
P

lang="pt"
lang="pt-BR"
lang="en"
lang="pt"

-> OK // lang="" (vazio)
-> OK
-> OK
-> OK

$(seletor[atributo ^= "valor"])
// iniciando com "valor"
$('p[atributo ^= "pt"]').css('color', 'blue');
P
P
P
P
P
P

lang="pt"
lang="en"
lang="pt"
lang="pt-br"
lang="pl"

-> OK
-> OK
-> OK

$(seletor[atributo $= "valor"])
// iniciando por "valor"
$('p[atributo $= "t"]').css('color', 'blue');
P
P
P
P
P
P

lang="pt"
lang="en"
lang="pt"
lang="pt-br"
lang="xyzt"

-> OK
-> OK
-> OK

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

P
P
P
P

title="teste peste" -> OK
title="o teste"
-> OK
title="o teste bla " -> OK
title="bla bla bla "

$(seletor[filtro-1][filtro-2]...[filtro-n])
// 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"
P id class="teste" lang="pt"
P

-> OK
-> OK

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

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

first-child

last-child

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

$(seletor:nth-child(índice/even/odd/equação))

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

$(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
</ul>

Manipulação de DOM
Permite alterar propriedades dos elementos

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

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

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

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

//

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>

Efeitos
Permitem colocar efeito e animações nas páginas, como
ocultar, controlando os seguintes aspectos:
Visibilidade
Efeito de Opacidade
Efeito Corrediço
Etc...

Acessem:
http://qfdb.net/workshop/jquery_workshop/cap_6/efeitos.html

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>

Como usar um plugin?

Acessem o site do plugin "corner": http://www.malsup.com/jquery/corner/

Referências

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

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.pdf
jquery.com
docs.jquery.com
jquery.com/plugins
learningjquery.com

Simplificando o Javascrip

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Simplificando o Javascrip

Semelhante a Simplificando o Javascrip (20)

Último

Último (20)

Simplificando o Javascrip