Você não está conectado. Conecte-se ou registre-se

[jQuery] Piloto #002 (Função: $.get)

Ver o tópico anterior Ver o tópico seguinte Ir em baixo  Mensagem [Página 1 de 1]

Target

avatar
Membro elite

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:

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 http://nomesite.dominio/forum, 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>');
});
Neste, substituímos todo o HTML dentro da classe .pun, sem eliminar a nossa classe .pun.
(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 rebtub (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:

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/rsc/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! Very Happy

Até + meus amigos e espero que tenham entendido um pouquinho da função $.get! Wink



Olá Convidado,
Leia as regras.
Leia os termos de uso.
Obrigado por se cadastrar no Best Skins Forums!

Cordialmente,
Target.
Ver perfil do usuário http://bestskins.com.br
Compartilhar este artigo em: diggdeliciousredditstumbleuponslashdotyahoogooglelive

avatar

Mensagem em Qua Set 17, 2014 9:26 pm por Release's

Bem Legal a Aula Professor Target Very Happy

avatar

Mensagem em Qua Set 17, 2014 9:28 pm por Daemon

Bela explicação Jonny... irá ajudar muitos membros aqui do fórum. Wink

avatar

Mensagem em Qui Set 18, 2014 12:32 pm por Target

Fico feliz que tenham gostado Very Happy, breve trarei mais tutoriais sobre jQuery ^^ Wink

avatar

Mensagem em Qui Set 18, 2014 1:02 pm por Daemon

@Target escreveu:Fico feliz que tenham gostado Very Happy, breve trarei mais tutoriais sobre jQuery ^^ Wink
Agora buguei... sobre jQuery, ou sobre @jQuery? kkkkk.

avatar

Mensagem em Qui Set 18, 2014 2:57 pm por Target

@Daemon escreveu:
@Target escreveu:Fico feliz que tenham gostado Very Happy, breve trarei mais tutoriais sobre jQuery ^^ Wink
Agora buguei... sobre jQuery, ou sobre @jQuery? kkkkk.
kkkkkkkkkkkkk jQuery a biblioteca

Mensagem  por Conteúdo patrocinado

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo  Mensagem [Página 1 de 1]

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum