[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:
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:
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:
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:
Bem simples não?
Para remover uma classe é só retirar o add e por remove, ficando removeClass.
Ficando então:
O código completo :
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.
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.