jQuery

Faça muito mais. Escreva muito menos!

 Quem está falando?
• 5 anos de experiência com Web
• Desenvolvedor Java na IT7 Sistemas
• Analista de Sistemas pela Unibrasil
• Evangelizador do jQuery (mentira)
• Administrador do grupo jquery-br (google
groups)

@ruanltbg
ruanltbg@gmail.com
ruancarlos.com.br
ruan.carlos@live.com
 O que é jQuery?

jQuery === JavaScript

:)
O que eu ganho com isso?

Muito, muito mesmo !!!

Veja as demos
Opa, “pera lá”, como assim?

Ahhh, sabia que você iria gostar.

Mãos a obra então!
 Adicionar o jQuery em uma página

 Download: jquery.com
 Localização:
 Local
 CDN: Google, Microsoft, jQuery
 Formas
 Full
 Minified
Encontrando as coisas
 Encontrando as coisas
//Selecionando elemento por id

<div id=“algumacoisa”></div>
<div></div>
<p></p>

$(“#algumacoisa”);

<div id=“algumacoisa”></div>
<div>...</div>
<p>...</p>
 Encontrando as coisas
//Selecionando elementos por class

<div class=“algumacoisa”></div>
<div class=“outracoisa algumacoisa”></div>
<p></p>

$(“.algumacoisa”);

<div class=“algumacoisa”></div>
<div class=“outracoisa algumacoisa”></div>
<p></p>
 Encontrando as coisas
//Selecionando elementos por tags

<ul><li>jQuery</li>
<li>Brasil</li><ul>

$(“li”);

<ul><li>jQuery</li>
<li>Brasil</li><ul>
 Encontrando as coisas
//Selecionando por contexto

$(‘seletor’,<context>);
$(‘contexto’).find(‘seletor’);

$(‘p’).click(function(){
$(‘span’,this);
})
Fazendo algo!
 Fazendo algo!
<p>Hum</p>
<p>Dois</p>
<p>Três</p>

//encontrando
$(‘p’);

//fazendo
$(‘p’).hide(‘slow’);

//sintaxe
$(‘seletor’).<nome do metodo>([PARAMETROS]);
 Fazendo algo!
//Mostrando e escondendo

<p>Hum</p>
<p>Dois</p>
<p>Três</p>

//mostrando
$(‘p’).show(‘slow’);
//escondendo
$(‘p’).hide(‘slow’);
 Fazendo algo!
//Mostrando e escondendo

<p>Hum</p>
<p>Dois</p>
<p>Três</p>

//mostrando
$(‘p’).show(‘slow’);
//escondendo
$(‘p’).hide(‘slow’);
 Fazendo algo!
//Iterações

<p>Hum</p>
<p>Dois</p>
<p>Três</p>

$(‘p’).each(function(){
//this será cada p
})
 Fazendo algo!
//Iterações

<p>Hum</p>
<p>Dois</p>
<p>Três</p>

$(‘p’).each(function(){
//this será cada p
})
 Fazendo algo!
//Iterações

<p>Hum</p>
<p>Dois</p>
<p>Três</p>

$(‘p’).each(function(){
//this será cada p
})
 Fazendo algo!
//Estilizando

<p>Hum</p>
<p class=“bvermelho”>Dois</p>
<p>Três</p>

$(‘p’).addClass(‘verde’);
$(‘p’).removeClass(‘bvermelho’);
$(‘p’).toggleClass(‘bvermelho’);
 Fazendo algo!
//Estilizando

<p class=“verde”>Hum</p>
<p class=“verde bvermelho”>Dois</p>
<p class=“verde”>Três</p>

$(‘p’).addClass(‘verde’);
$(‘p’).removeClass(‘bvermelho’);
$(‘p’).toggleClass(‘bvermelho’);
 Fazendo algo!
//Estilizando

<p class=“verde”>Hum</p>
<p class=“verde”>Dois</p>
<p class=“verde”>Três</p>

$(‘p’).addClass(‘verde’);
$(‘p’).removeClass(‘bvermelho’);
$(‘p’).toggleClass(‘bvermelho’);
 Fazendo algo!
//Estilizando

<p class=“verde bvermelho”>Hum</p>

<p class=“verde bvermelho”>Dois</p>
<p class=“verde bvermelho”>Três</p>

$(‘p’).addClass(‘verde’);
$(‘p’).removeClass(‘bvermelho’);
$(‘p’).toggleClass(‘bvermelho’);
Chaining
 Chaining
//Chamadas aninhadas

<p>Hum <span>aqui</span></p>
<p class=“verde”>Dois</p>
<p>Três</p>

$(‘p’)
.addClass(‘bvermelho’)
.find(“span”)
.addClass(“verde”);
Manipulação da DOM
 Manipulação da DOM
//Criando elementos

var minhaDiv = $(“<div></div>”);

// jQuery 1.4

$(“<div>”, {
class: “minhaclasse”,
click: function(){
$(this).toggleClass(“minhaclasse”);
}
});
 Manipulação da DOM
//Inserindo elementos
<p>Maça. Hey apple!</p>
<p>Macbook</p>

$(‘p’).after(‘<img src=“euquerum.jpg” />’);

<p>Maça. Hey apple!</p>

<img src=“euquerum.jpg” />
<p>Macbook</p>
<img src=“euquerum.jpg” />
Ações e Eventos
 Ações e Eventos
$(‘p’).click(function(evento){//fazalgo})
$(‘input’).click(function(evento){//fazalgo})

$(‘p’).hover(
function(evento){//fazalogin},
function(evento){//fazalgoout}
)

$(‘p’).bind(‘click hover’, function(evento)

{ //fazalgo
})
Ajax
 Ajax
//Fazendo uma requisição

$.get(‘pagina.php’, function(resposta){
$(resposta).appendTo(‘body’);
//$(‘body’).append(resposta);
})
//postando
var dados = {nome:’Ruan Carlos’};
$.post(‘pagina.php’,dados,function(resposta){
$(resposta).appendTo(‘body’);
//$(‘body’).append(resposta);
})
Plugin for dummies
 Plugin for dummies
//1º plugin

$.fn.nomePlugin = function() {
alert(‘quantidade: ‘ + this.length);
};

$(‘p’).nomePlugin();
 Plugin for dummies
//Iteração nos elementos

$.fn.nomePlugin = function() {
//this é um elemento jQuery
this.each(function(i){
//this é o DOM
$(this).html($(this).html() + i);
});
};

$(‘p’).nomePlugin();
 Plugin for dummies
//Retornando um elemento jQuery

$.fn.nomePlugin = function() {
//this é um elemento jQuery
return this.each(function(i){
//this é o DOM
$(this).html($(this).html() + i);
});
};

$(‘p’).nomePlugin().addClass(‘ativa’);
Perguntas
 Agradecimentos

Daniel Pereira Camargo (@pererinha)

pelo layout + imagens
Nelson Maia (@nellson_maia)
pelo convite
VII SEMINFO (@seminfo7utfpr)
pela oportunidade
Vocês pela paciência !


 Imagens

Obrigado às imagens:

http://www.flickr.com/photos/life-is-a-photo/3453339893/
http://www.flickr.com/photos/daviddmuir/2125697998/
http://www.flickr.com/photos/susyna/3643831785/
http://www.flickr.com/photos/paurian/3550755709/
http://www.flickr.com/photos/markstos/3802117476/
http://www.flickr.com/photos/fornal/385054886/
http://www.flickr.com/photos/cverdier/4321365261/
http://www.flickr.com/photos/davidkingham/3661515844/
http://www.flickr.com/photos/daveynin/1672745911/
http://www.flickr.com/photos/baboon/162579094/
http://www.flickr.com/photos/balakov/4503616864/
 Obrigado

Ruan Carlos
ruanltbg@gmail.com
ruan.carlos@live.com
ruancarlos.com.br