Sexo
Mensagens
Reputação
Inscrição
Idade
Localização
por Bom pessoal, aqui eu vou ensinar a vocês o básico sobre jQuery.
Vamos começar do comecinho mesmo rsrsrs, a primeira tag que devem saber é a que faz com que o codigo seja ativado
O que o codigo acima diz? Ele diz que quando o elemento ou como dizem, á pagina representado por (document) carregar, representado por .ready, fazer a função, representado por function().
Mas qual seria a função?
A função pode ser qualquer coisa, um efeito, um evento, uma manipulação, mas vocês devem estar se perguntando: "O que diabos é isso? E como vou saber como aplicar isso ao codigo?"
Simples, entrem neste link
http://api.jquery.com/category/effects/
Este está na categoria efeitos, mas no widget a esquerda escrito "Browse the jQuery API" você pode mudar a categoria para eventos, entre outro.
Vamos lá, um efeito no qual podemos ver nesta pagina ".fadeIn()", ele faz com que os elementos encontrados gradualmente até ficarem opacas.
Ou seja, ele faz com que o objeto desapareça "suavemente".
Agora, eu quero aplicar isto a uma imagem por exemplo, como faço?
No caso, o codigo vai ficar assim:
Se você souber um pouco de HTML vai saber oque uma ID ou uma classe, mas se você não sabe, eu irei dizer.
ID é o nome de um objeto, exemplo meu ID aqui no forum é: u138, porque o link do meu perfil é
https://cyberdesigners.forumeiros.com/u138
Mas para que serviria o ID? Para aplicarmos eventos a um objeto, exemplo, aqui no forum, para que me adicionem a um grupo, o sistema do forum adiciona minha ID que é camuflada ao meu nick, para ficar mais facil de encontrar e manipular os membros, a forumeiros adiciona ID a eles, tanto o ID quanto a classe podem ser qualquer nome que você desejar.
Mas e classe? Classe ou 'Class' é uma classe CSS que você adiciona a um objeto para personaliza-lo com CSS, é simples assim.
Mas como adicionar uma ID ou uma Class a um objeto? Neste caso estamos usando uma imagem para fazer o efeito com jQquery, então a tag da imagem vai ficar assim
Digamos que eu irei colocar o ID com o nome "imagemteste", no caso, o codigo irá ficar:
Agora, de volta ao codigo jQuery, o codigo ficará assim
Pronto! O codigo diz que quando a pagina carregar fazer a função, e qual seria a função? Fazer o efeito fadein no objeto com aquele ID.
Agora, se eu quisesse que este efeito apenas se aplicasse quando eu passasse o mouse sobre a imagem?
Vamos na área evento
http://api.jquery.com/category/events/
Procuramos por .hover(), agora o codigo ficará assim.
O que o codigo diz? Que quando carregar a pagina fazer a função, e quando passar o mouse sobre um objeto que tenha aquele ID fazer a função, e qual é a função? O efeito fadein sobre um objeto que tenha aquele ID.
Entenderam? Em breve farei mais desses tutorias.
Vamos começar do comecinho mesmo rsrsrs, a primeira tag que devem saber é a que faz com que o codigo seja ativado
$(document).ready(function() {
propriedades
});
O que o codigo acima diz? Ele diz que quando o elemento ou como dizem, á pagina representado por (document) carregar, representado por .ready, fazer a função, representado por function().
Mas qual seria a função?
A função pode ser qualquer coisa, um efeito, um evento, uma manipulação, mas vocês devem estar se perguntando: "O que diabos é isso? E como vou saber como aplicar isso ao codigo?"
Simples, entrem neste link
http://api.jquery.com/category/effects/
Este está na categoria efeitos, mas no widget a esquerda escrito "Browse the jQuery API" você pode mudar a categoria para eventos, entre outro.
Vamos lá, um efeito no qual podemos ver nesta pagina ".fadeIn()", ele faz com que os elementos encontrados gradualmente até ficarem opacas.
Ou seja, ele faz com que o objeto desapareça "suavemente".
Agora, eu quero aplicar isto a uma imagem por exemplo, como faço?
No caso, o codigo vai ficar assim:
$(document).ready(function() {
$("ID OU CLASSE DA IMAGEM").fadeIn();
});
Se você souber um pouco de HTML vai saber oque uma ID ou uma classe, mas se você não sabe, eu irei dizer.
ID é o nome de um objeto, exemplo meu ID aqui no forum é: u138, porque o link do meu perfil é
https://cyberdesigners.forumeiros.com/u138
Mas para que serviria o ID? Para aplicarmos eventos a um objeto, exemplo, aqui no forum, para que me adicionem a um grupo, o sistema do forum adiciona minha ID que é camuflada ao meu nick, para ficar mais facil de encontrar e manipular os membros, a forumeiros adiciona ID a eles, tanto o ID quanto a classe podem ser qualquer nome que você desejar.
Mas e classe? Classe ou 'Class' é uma classe CSS que você adiciona a um objeto para personaliza-lo com CSS, é simples assim.
Mas como adicionar uma ID ou uma Class a um objeto? Neste caso estamos usando uma imagem para fazer o efeito com jQquery, então a tag da imagem vai ficar assim
<img src="URL DA IMAGEM" id="ID QUE VOCÊ DESEJA" class="CLASSE QUE VOCÊ DESEJA" />
Digamos que eu irei colocar o ID com o nome "imagemteste", no caso, o codigo irá ficar:
<img src="URL DA IMAGEM" id="imagemteste" class="CLASSE QUE VOCÊ DESEJA" />
Agora, de volta ao codigo jQuery, o codigo ficará assim
$(document).ready(function() {
$("imagemteste").fadeIn();
});
Pronto! O codigo diz que quando a pagina carregar fazer a função, e qual seria a função? Fazer o efeito fadein no objeto com aquele ID.
Agora, se eu quisesse que este efeito apenas se aplicasse quando eu passasse o mouse sobre a imagem?
Vamos na área evento
http://api.jquery.com/category/events/
Procuramos por .hover(), agora o codigo ficará assim.
$(document).ready(function() {
$("imagemteste").hover{function() {
$("imagemteste").fadeIn();
});
});
O que o codigo diz? Que quando carregar a pagina fazer a função, e quando passar o mouse sobre um objeto que tenha aquele ID fazer a função, e qual é a função? O efeito fadein sobre um objeto que tenha aquele ID.
Entenderam? Em breve farei mais desses tutorias.
Alterar
