![[jQuery] Piloto #002 (Função: $.get) Empty](https://2img.net/i/empty.gif)
[jQuery] Piloto #002 (Função: $.get) Qua 17 Set 2014 - 21:20
Bem, neste tópico vamos falar sobre a função get; no inglês get seria algo como "obter" e no jQuery ela tem exatamente está função, obter algo de determinada página.
O get é muito útil para, teoricamente e praticamente, tudo que você queira fazer envolvendo o usuário. Por exemplo, pegar o avatar do usuário, usamos get, pegar a localização do usuário e jogar em determinado local, também usamos get, enfim, muitas coisas dentro da forumeiros utiliza-se o get. É uma função que, para mim, é essencial (se ver alguns códigos meu, ou aliás, o código do perfil estiloso, verão quantos gets tem).
Para começar com a função get faremos isto (por enquanto é o texto a ser decorado): [codebox]$.get('link', function( nome_da_funçao ) { });[/codebox];
Bem, vamos criar um get aqui que supostamente vai pegar uma estatística:
A análise a ser feita é está:
$(document).ready(function() -> Assim que o nosso documento carregar irá desempenhar uma determinada função;
$.get('/forum', function( bs ) -> Fazemos um get para a página [Tens de ter uma conta e sessão iniciada para poderes visualizar este link] com a função determinada/chamada de bs;
$('.stats', bs).html() -> Pegamos as "stats" (no caso as nossas estatísticas) da página /forum, isto é determinado pela função BS.
-> html() pode servir para copiarmos um determinado html e tudo que há dentro dele, no caso acima. Ou para repassarmos um html qualquer, por exemplo:
(Mais tutoriais serão criados explicando está classe).
Continuando a falar do nosso get... Podemos também usar uma variável para pegar algum link, vamos supor:
Como podemos ver, não usamos mais as aspas, nada mudou muito, apenas usamos uma variável para facilitar mais a nossa vida. O resto é a mesma coisa.
Agora, sabemos copiar um html, e como repassar este em cima de outro html? :O
Acha que é difícil? Não mesmo! É simplesmente a coisa mais fácil do mundo! Vamos ver.
Bem, vamos dizer que eu quero pegar o link dorebtub (brincadeira gente, só pra descontrair rs). Mas agora falando sério, supomos que eu vou pegar o link /forum que está numa navbar e dentro dessa página vou pegar um elemento qualquer e copiar seu html e repassar pra algum elemento desta página que estou. Vejamos:
Analisando o código:
$(document).ready(function() -> Começamos o código, assim que o documento terminar de carregar o código estará pronto para fazer sua "mágica";
var b = $('.link > a').attr('href') -> Copiamos o link do a da classe .link, usando o atributo (attr);
$.get(b, function( bs ) -> Fazemos um get para obter um determinado elemento deste link e damos o nome da função de BS;
var a = $('#onlinelist', bs).html() -> Copiamos o html da classe #onlinelist da função do get chamada BS e usamos uma variável para repassar em outro local depois;
$('div.replace').html( a ) -> Por fim, pegamos a div com classe ".replace" e repassamos o conteúdo deste html pela variável a, ou seja, substituímos tudo que tive dentro dessa div e colocamos tudo que tiver dentro da variável a.
O nosso html, feito na correria, seria algo assim:
Perceba que o texto "aqui vai as estatísticas" é retirado e dentro dele é jogado tudo que tiver na class #onlinelist.
Bem, essa é a mágica do get! Fácil não?
Importante lembrar que: Utilize o inspecionar elementos para confirmar as classes, não custa nada fazer isso! Não dê uma de "sei qual é a classe e vou tentar" pois sempre pode haver uma falha.
Próximo tutorial falarei mais do get dentro da forumeiros e farei demostração de códigos já criados, códigos que vou criar e como fazer uma capa para perfil (bem simples, mas que poucos sabem); talvez com esse tutorial você mesmo já possa criar sua capa de perfil, se tiver um básico conhecimento, mas se preferir esperar um pouco, poderá ter uma capa de perfil bem bacana!
Até + meus amigos e espero que tenham entendido um pouquinho da função $.get!
O get é muito útil para, teoricamente e praticamente, tudo que você queira fazer envolvendo o usuário. Por exemplo, pegar o avatar do usuário, usamos get, pegar a localização do usuário e jogar em determinado local, também usamos get, enfim, muitas coisas dentro da forumeiros utiliza-se o get. É uma função que, para mim, é essencial (se ver alguns códigos meu, ou aliás, o código do perfil estiloso, verão quantos gets tem).
Para começar com a função get faremos isto (por enquanto é o texto a ser decorado): [codebox]$.get('link', function( nome_da_funçao ) { });[/codebox];
Bem, vamos criar um get aqui que supostamente vai pegar uma estatística:
- Código:
$(document).ready(function() {
$.get('/forum', function( bs ) {
$('.stats', bs).html();
});
});
A análise a ser feita é está:
$(document).ready(function() -> Assim que o nosso documento carregar irá desempenhar uma determinada função;
$.get('/forum', function( bs ) -> Fazemos um get para a página [Tens de ter uma conta e sessão iniciada para poderes visualizar este link] com a função determinada/chamada de bs;
$('.stats', bs).html() -> Pegamos as "stats" (no caso as nossas estatísticas) da página /forum, isto é determinado pela função BS.
-> html() pode servir para copiarmos um determinado html e tudo que há dentro dele, no caso acima. Ou para repassarmos um html qualquer, por exemplo:
- Código:
$(function(){
$('.pun').html('<div class="subs"> O conteúdo da classe .pun foi substituido por este</div>');
});
(Mais tutoriais serão criados explicando está classe).
Continuando a falar do nosso get... Podemos também usar uma variável para pegar algum link, vamos supor:
- Código:
$(document).ready(function(){
var link = $('.link > a').attr('href'); // Lembra do attr? Então...
$.get(link, function( bs ) {
$('.stats', bs).html();
});
});
Como podemos ver, não usamos mais as aspas, nada mudou muito, apenas usamos uma variável para facilitar mais a nossa vida. O resto é a mesma coisa.
Agora, sabemos copiar um html, e como repassar este em cima de outro html? :O
Acha que é difícil? Não mesmo! É simplesmente a coisa mais fácil do mundo! Vamos ver.
Bem, vamos dizer que eu quero pegar o link do
- Código:
$(document).ready(function(){
var b = $('.link > a').attr('href');
$.get(b, function( bs ){
var a = $('#onlinelist', bs).html();
$('div.replace').html( a );
});
});
Analisando o código:
$(document).ready(function() -> Começamos o código, assim que o documento terminar de carregar o código estará pronto para fazer sua "mágica";
var b = $('.link > a').attr('href') -> Copiamos o link do a da classe .link, usando o atributo (attr);
$.get(b, function( bs ) -> Fazemos um get para obter um determinado elemento deste link e damos o nome da função de BS;
var a = $('#onlinelist', bs).html() -> Copiamos o html da classe #onlinelist da função do get chamada BS e usamos uma variável para repassar em outro local depois;
$('div.replace').html( a ) -> Por fim, pegamos a div com classe ".replace" e repassamos o conteúdo deste html pela variável a, ou seja, substituímos tudo que tive dentro dessa div e colocamos tudo que tiver dentro da variável a.
O nosso html, feito na correria, seria algo assim:
- Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="http://illiweb.com/rs3/70/frm/lang/pt.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
var b = $('.link > a').attr('href');
$.get(b, function( bs ){
var a = $('#onlinelist', bs).html();
$('div.replace').html( a );
});
});
</script>
</head>
<body>
<div class="link">
<a href="/forum"> Forum </a>
</div>
<div class="replace">
Aqui vai as estatísticas
</div>
</body>
</html>
Perceba que o texto "aqui vai as estatísticas" é retirado e dentro dele é jogado tudo que tiver na class #onlinelist.
Bem, essa é a mágica do get! Fácil não?
Importante lembrar que: Utilize o inspecionar elementos para confirmar as classes, não custa nada fazer isso! Não dê uma de "sei qual é a classe e vou tentar" pois sempre pode haver uma falha.
Próximo tutorial falarei mais do get dentro da forumeiros e farei demostração de códigos já criados, códigos que vou criar e como fazer uma capa para perfil (bem simples, mas que poucos sabem); talvez com esse tutorial você mesmo já possa criar sua capa de perfil, se tiver um básico conhecimento, mas se preferir esperar um pouco, poderá ter uma capa de perfil bem bacana!
Até + meus amigos e espero que tenham entendido um pouquinho da função $.get!
