Boas-vindas ao Power Pixel

Junte-se a comunidade! Crie o seu próprio conteúdo, e faça amizades.EntrarCriar uma conta

Target Target  • Ter 16 Set 2014 - 20:40

[jQuery] Piloto #001 (Funções: attr, addClass e removeClass) Empty [jQuery] Piloto #001 (Funções: attr, addClass e removeClass) Ter 16 Set 2014 - 20:40

Bem amigos, hoje vou falar mais sobre a jQuery e como fazer um código do mesmo. (Um código bem simples, sem muito dificuldades).

Para começarmos a programar, vamos primeiro ter que gravar está seguinte linha:

Código:

$(document).ready(function() {
});

Uma linha muito importante. O atalho $ é = document.getElementById, porém não vou falar disso aqui, vamos deixar pra outro tópico. Mas é bom sabermos disto.
Dentro de { e } vamos começar a elaboração de um código.
O que você pretende fazer?
Isso é como tudo se inicia, a pergunta do que queremos fazer. Após estás pergunta, você para para analisar como pode-se fazer e como pode-se criar o código.
Na teoria, é bem fácil, na prática, é mais fácil ainda. Como a jQuery é uma biblioteca javascript que nos permite a facilidade de programar, tende-se a pensar que as classes serão curtas e fáceis. (Lembre-se: todas as classes são em inglês!).
Vamos então iniciar o nosso código, queremos que ele faça uma função simples, substitua o atributo href de um link e repasse pra [Tens de ter uma conta e sessão iniciada para poderes visualizar este link] vamos usar o seguinte código:

Código:

$(document).ready(function(){
  $('a').attr('href', 'http://bestskins.forumeiros.com/');
  });

O nosso attr significa attribute (do inglês: atributo), isto significa que, pegamos um determinado atributo de uma determinada classe. Pode-se pegar o src da img também, isto mais pra frente do nosso piloto irei fazer um código ensinando a criar uma capa de perfil forumeiros.
No nosso código acima, eu pego o atributo href e jogo sobre ele (ou substitu-o como preferir entender melhor) o link que eu desejo.
Se você usar uma variável é mais fácil ainda. Vejamos:
Eu primeiro crio a minha variável: [codebox] var bs = 'https://bestskins.forumeiros.com/';[/codebox] e vou substituir ela pelo link.
(Não é necessário as aspas), veja:

Código:

  $(document).ready(function(){
  var bs = 'http://bestskins.forumeiros.com/';
  $('a').attr('href', bs);
  });

E num passe de mágica, mudamos o nosso link! Simples não?
Está vendo, é isto que a jQuery nos possibilita.
Agora vamos supor que queremos por uma classe (como já foi mostrado no outro tópico), usaremos addClass para isto. Vejamos:
Código:

$(document).ready(function(){
$('a').addClass('suaclasse');
});

Bem simples não?
Para remover uma classe é só retirar o add e por remove, ficando removeClass.
Ficando então:

Código:

$(document).ready(function(){
$('a').removeClass('a');
});

O código completo :

Código:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
  $(document).ready(function(){
  var bs = 'http://bestskins.forumeiros.com/';
  $('a').attr('href', bs);
  $('a').addClass('suaclasse');
  $('a').removeClass('a');
  });
</script>

<a href="www.google.com" class="a"> Google </a>

Este é apenas um tutorial básico e simples pra quem está iniciando na jQuery. No próximo piloto, irei falar a respeito da função get. (Uma ótima função que eu amo usar! rs)

Espero que tenham entendido um pouquinho mais sobre jQuery, lembrando que esse é um piloto.

Alex Habilidade Alex Habilidade  • Ter 16 Set 2014 - 20:46

Permissões neste sub-fórum
Não podes responder a tópicos