Kao što smo već razgovarali, na jQuery se može gledati kao na biblioteku "odaberi i učini". Prilično smo razgovarali o odabiru, pa sada razgovarajmo o nekim postupcima. Zapamtite da uzorak u osnovi izgleda ovako:
// Select something! $(".something") // Do something! .hide();Umjesto da radimo s više teoretskih primjera, mi prelazimo u nešto iz stvarnog svijeta. Pronašli smo ovu olovku Drewa Barontinija i račvali je.
Pogledajte obrazac za kreditnu karticu olovke Chrisa Coyiera (@chriscoyier) na CodePen
U našem smo primjeru prema zadanim postavkama sakrili obrazac kreditne kartice. Zatim smo stvorili vezu koju biste mogli kliknuti za pomicanje prema gore i prema dolje po obrascu kreditne kartice. Mi odaberite vezu, a zatim napraviti jedan slideToggle na obrascu. Odaberite i učinite!
Još nismo puno razgovarali o događajima, ali to je ogroman dio jQueryja. Događaj je nešto poput klikova mišem, pritiska tipki, pomicanja itd. Dio "učiniti" u "odaberi i učini" često se događa nakon događaja. Ne brinite, puno ćemo razgovarati o događajima prije nego što ova serija završi. Za sada samo znajte da je on () najbolji / standardni način povezivanja događaja u jQueryju. Bind, što znači "pazite na ovaj događaj na ovom elementu ili skupu elemenata."
Osnovni plan:
$("#link-that-toggles").on("click", function() ( $("#thing-to-toggle").slideToggle(); ));U našem primjeru veza je doslovno bila veza.
prebacivati
Način na koji hash veze prema zadanim postavkama rade u bilo kojem pregledniku je da se prozor pomakne prema dolje do elementa s ID-om koji odgovara toj hash vezi. Ponekad je to dobro. Sviđa mi se kako stvara semantičku vezu između te veze i tog elementa. Dakle, bez ikakvog JavaScript-a, veza i dalje u osnovi ima smisla (pogotovo ako joj naslovite nešto pametno).
Ali ponekad je takvo ponašanje preskakanja hash veze blesavo. To možemo spriječiti u JavaScriptu pomoću prevenDefault. Kao ovo:
$("#link-that-toggles").on("click", function(event) ( $("#thing-to-toggle").slideToggle(); event.preventDefault(); ));O tome ćemo više razgovarati.
Naravno, vlastita dokumentacija jQueryja fantastičan je resurs za sve aspekte "učiniti" jQuery (metode).
Mislim da vrlo osnovno razumijevanje ovog "odaberi i učini" i događaja zaista otvara svijet razumijevanja u JavaScript-u. Znam da je to učinilo za mene. Na kraju ovog screencast-a zauzimamo vrhunac trenutnom dizajnu CSS-trikova i vidimo gdje se JavaScript jasno koristi za reagiranje na neke događaje klikova i promjenu korisničkog sučelja. Vrlo slične stvari onome što smo radili u prethodnom demo. Na primjer, postavljanje aktivne klase na stvari koje kliknete, poput ove:
Pogledajte olovku d6f7161a5931397b4f24195a315d52f3 Chrisa Coyiera (@chriscoyier) na CodePen