Como já falamos, o jQuery pode ser considerado uma biblioteca do tipo “selecione e faça”. Já falamos sobre como selecionar um pouco, então agora vamos falar sobre algumas coisas. Lembre-se de que o padrão é basicamente assim:
// Select something! $(".something") // Do something! .hide();Em vez de trabalhar com exemplos mais teóricos, vamos direto para algo do mundo real. Encontramos esta caneta de Drew Barontini e a bifurcamos.
Veja o formulário do cartão de crédito da caneta por Chris Coyier (@chriscoyier) no CodePen
Em nosso exemplo, ocultamos o formulário de cartão de crédito por padrão. Em seguida, criamos um link no qual você pode clicar para deslizar para cima e para baixo no formulário de cartão de crédito. Nós selecionar o link, em seguida, fazer uma slideToggle no formulário. Selecione e faça!
Ainda não falamos muito sobre eventos, mas isso é uma grande parte do jQuery. Um evento é algo como um clique do mouse, pressionamento de tecla, rolagem, etc. A parte “fazer” de “selecionar e fazer” geralmente acontece após um evento. Não se preocupe, falaremos muito sobre os eventos antes que esta série termine. Por enquanto, apenas saiba que on () é a melhor maneira / padrão de vincular eventos em jQuery. Vincular, que significa "observe este evento neste elemento ou conjunto de elementos".
O plano básico:
$("#link-that-toggles").on("click", function() ( $("#thing-to-toggle").slideToggle(); ));Em nosso exemplo, o link era literalmente um link.
alternancia
A maneira como os links hash funcionam por padrão em qualquer navegador é que a janela rolará para baixo até o elemento com o ID que corresponde a esse link hash. Às vezes isso é bom. Gosto de como ele cria uma conexão semântica entre esse link e esse elemento. Portanto, sem nenhum JavaScript, o link ainda faz sentido (especialmente se você o intitular de algo inteligente).
Mas às vezes, esse comportamento de salto de hash link é uma chatice. Podemos evitar isso em JavaScript usando preventDefault. Como isso:
$("#link-that-toggles").on("click", function(event) ( $("#thing-to-toggle").slideToggle(); event.preventDefault(); ));Falaremos mais sobre isso em breve.
Claro, a própria documentação do jQuery é um recurso fantástico para todos os aspectos "fazer" do jQuery (métodos).
Acho que o entendimento básico de “selecionar e fazer” e eventos realmente abre um mundo de compreensão em JavaScript. Eu sei que sim para mim. No final deste screencast, damos uma olhada no design atual do CSS-Tricks e vemos onde o JavaScript é claramente usado para reagir a alguns eventos de clique e alterar a IU. Coisas muito semelhantes ao que estávamos fazendo na demo anterior. Por exemplo, definir uma classe ativa sobre coisas em que você clica, assim:
Veja a Caneta d6f7161a5931397b4f24195a315d52f3 de Chris Coyier (@chriscoyier) no CodePen