Cyber Designers

CYBER DESIGNER
welcome
Ola Visitante, Seja bem vindo(a) ao Cyber Designer, esperamos que você goste de nosso conteudo e se torne um Membro para poder participar ainda mais de nossas atividades. Agora temos uma area para você convidado postar, sem se cadastrar, caso tenha alguma dúvida, passe lá, se encontra na parte de Área livre.
Vale também ressaltar que, Para você ter acesso aos links por ai , é necessário ser registrado, então se registre .
Se já tem uma conta no forúm,
Logue-se .

    Básico de jQuery

    Compartilhe
    avatar
    MateusV.
    Membros
    Membros

    Sexo Sexo : Masculino
    Mensagens Mensagens : 299
     Reputação  Reputação : 5
    Inscrição Inscrição : 24/11/2011
    Idade Idade : 21
    Localização Localização : Brasil, PE

    Básico de jQuery

    Mensagem por MateusV. em Dom Abr 08, 2012 10:10 am

    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
    $(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 é
    http://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. Wink
    avatar
    Dead'
    Membros
    Membros

    Sexo Sexo : Masculino
    Mensagens Mensagens : 1354
     Reputação  Reputação : 63
    Inscrição Inscrição : 03/01/2012
    Idade Idade : 19
    Localização Localização : Highway to Hell

    Re: Básico de jQuery

    Mensagem por Dead' em Dom Abr 08, 2012 10:14 am

    Nossa que basico mais complicado rep+ pra vc por estar disponibilizando dps leio com mais atenção =D
    avatar
    Mayk
    Membros
    Membros

    Sexo Sexo : Masculino
    Mensagens Mensagens : 3177
     Reputação  Reputação : 12
    Inscrição Inscrição : 14/01/2012
    Idade Idade : 21
    Localização Localização : pernambuco

    Re: Básico de jQuery

    Mensagem por Mayk em Dom Abr 08, 2012 10:21 am

    Nuss o básico é isso?kkkkk muito bom Rep +,to começando a me interessar nessa área.
    avatar
    MateusV.
    Membros
    Membros

    Sexo Sexo : Masculino
    Mensagens Mensagens : 299
     Reputação  Reputação : 5
    Inscrição Inscrição : 24/11/2011
    Idade Idade : 21
    Localização Localização : Brasil, PE

    Re: Básico de jQuery

    Mensagem por MateusV. em Dom Abr 08, 2012 10:36 am

    Eu também achava complicado, mas era preguiça de ler. rsrsrs

    Na verdade, essa área é muito simples, aconselho a todos a tentar.

    Isso é programação Java Script. Wink
    avatar
    GrandKain
    Administração
    Administração

    Sexo Sexo : Masculino
    Mensagens Mensagens : 1533
     Reputação  Reputação : 86
    Inscrição Inscrição : 14/12/2011
    Idade Idade : 23
    Localização Localização : Guarulhos SP

    Re: Básico de jQuery

    Mensagem por GrandKain em Dom Abr 08, 2012 1:32 pm

    tipo eu sempre ouço os professores na facul... falando... mas nunca fui atraz.. tou começando a fikar interessado..obrigado pela compartilha...








    "Acho que eu vou saltar, eu não quero ficar aqui tentando derreter o gelo, sinto mais não me adaptei... Alguem me segure pois eu vou pular..."

    emo jovan ^^
    avatar
    Nomad
    Designer Gold
    Designer Gold

    Sexo Sexo : Masculino
    Mensagens Mensagens : 3328
     Reputação  Reputação : 197
    Inscrição Inscrição : 13/12/2011

    Re: Básico de jQuery

    Mensagem por Nomad em Dom Abr 08, 2012 1:40 pm

    vlw cara, ja to me interessando nisso
    rep + pra vc por estar disponibilizando pra nois



    Fate Stay Night



    Vlw Soushi & Hardware


    É Fan? Usa ae


    gifts:
    Vlw Yagami e Duffman


    Vlw TheTrooper



    Vlw GjfTdc



    Vlw Yagami_raito e Łuƒƒy

    Galeria:

    Troféus:

    avatar
    Conex
    Membros
    Membros

    Sexo Sexo : Masculino
    Mensagens Mensagens : 7
     Reputação  Reputação : 1
    Inscrição Inscrição : 22/04/2013
    Idade Idade : 18
    Localização Localização : Brasil

    Re: Básico de jQuery

    Mensagem por Conex em Qua Abr 24, 2013 9:51 pm

    Era isto que eu estava procurando para me iniciar no jQuery! Mas isto é o básico do básico! Estou devorando uns livros de javascript e estou querendo adentra esta seção (jQuery). rep+
    avatar
    Strachebisk
    Membros
    Membros

    Sexo Sexo : Masculino
    Mensagens Mensagens : 10
     Reputação  Reputação : -1
    Inscrição Inscrição : 28/04/2013
    Idade Idade : 20
    Localização Localização : inferno

    Re: Básico de jQuery

    Mensagem por Strachebisk em Dom Set 08, 2013 6:16 pm

    Nossa no curso ficam falando e eu nem do bola vou passar a querer arender

    Conteúdo patrocinado

    Re: Básico de jQuery

    Mensagem por Conteúdo patrocinado


      Data/hora atual: Sex Jul 21, 2017 4:47 pm