Escolar Documentos
Profissional Documentos
Cultura Documentos
@ruanltbg
ruanltbg@gmail.com
ruancarlos.com.br
ruan.carlos@live.com
O que é jQuery?
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’).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
// 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’).hover(
function(evento){//fazalogin},
function(evento){//fazalgoout}
)
$.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
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